미리보기

개요

• 임상 연구 데이터를 관리하기 위한 eCRF 솔루션 레어데이터의 FE 및 어드민 기능 개발 [소개 페이지]

• 희귀질환 환자들을 위한 모바일 앱 레어노트의 웹 및 백오피스 기능 개발 [레어노트 웹 페이지]

사용 기술

• React, Next.js, Jotai, Emotion, TanStack Query, PostgreSQL, NestJS

주요 성과

• 레어노트 웹 개편을 통해 신규 유입의 절반 가량을 증가시켰으며, 페이지 경량화 및 검색 엔진 최적화를 주도적으로 진행했습니다.

• 레어노트 약제비 지원 프로그램(PAP)의 서버 개발에 기여하고 대시보드를 1인 개발하였습니다. [PAP 소개 페이지]

• 레어데이터의 코어 로직을 리팩토링하여 렌더링 시간을 80% 단축하였고, 사용성 증대를 위해 접근성 및 보편적 프로그램들의 UX를 참고하여 동작의 일관성 개선을 제안하여 반영했습니다.

상세

약제비 지원 프로그램 대시보드 개발

• 레어노트 내 약제비 지원 프로그램에 신청한 유저들의 데이터 통계를 제약사에게 보여주기 위한 대시보드의 FE 개발

• 레포지토리 초기화부터 최종 배포까지 서버 개발자 1인과 함께 진행

• 필수 기능과 와이어프레임만으로 앱의 디자인 톤을 유지하며 개발, 기획/디자인 리소스 절감에 기여

• 반응형 웹에 대응하도록 구현하여 모바일에서도 그래프를 포함한 전체 데이터를 열람 가능하도록 개발

레어노트 웹 2.0 개편

• 단순 랜딩 페이지였던 웹사이트를 콘텐츠 중심 포털로 개편하여 유저 콘텐츠 접근성 강화

• 웹을 통한 회원가입 및 로그인, 콘텐츠 열람, 커뮤니티 등 전반적인 기능을 구현하여 신규 회원 가입의 50% 가량 기여

• 이미지 최적화 및 렌더링 구조 개선으로 LCP 시간 50% 이상 단축, 페이지 용량 60~80% 감소

• SEO에 대한 자체 리서치 및 주도적 제안으로 사이트 탐색 구조 및 사이트맵 개선

• 1시간 가량이 걸리던 배포 과정을 4분대로 단축하여 개발 및 QA 프로세스를 개선

백오피스 및 서버 개발

• 레어노트 앱 5.0 업데이트에 맞춰 새로운 기능에 대한 백오피스 및 서버 개발

  • 앱 내 엔트리 모달(앱 진입 시 표시되는 광고 모달) 관리 기능의 서버 개발 및 기타 버그 수정

• Django로 구현되어 있던 커뮤니티 기능을 NestJS 서버로 마이그레이션 및 통합

• Amplitude와 구글 검색 콘솔을 통해 유저 행동 데이터를 분석하고 개선 방향 도출에 기여

레어데이터 기능 개발 및 유지보수

• 연구 데이터를 보고 편집하는 스프레드시트 뷰의 코어 로직을 리팩토링하여 렌더링 시간 80% 단축

• styled-system과 emotion, recoil과 jotai가 혼용되어 있던 코드베이스를 emotion, recoil로 통합

• 사용자의 생산성 향상을 위해 Tab, Enter 등 키 입력에 대한 동작의 일관성 개선 제안 및 작업

• Storybook을 활용한 사내 디자인 시스템 구축에 기여

• Sentry를 사용한 에러 모니터링을 개선하여 오류 상황 파악 및 재현이 가능하도록 개선

개요

• IT 서비스의 컨설팅이나 개발 외주를 진행하는 기업에서 학점연계 인턴십을 경험
• 여행을 기획하고 공유할 수 있는 모바일 웹앱 트립플랜의 고도화 프로젝트에 참여

사용 기술

• PHP CodeIgniter, MySQL

상세

• 카카오 지도 API 위에 그려지는 여행 순서 UI 개선
• 일정 순서를 드래그 & 드롭으로 조절할 수 있도록 변경
• 비개발자인 고객사 대표에게 작업 중 제한사항이나 UX 문제를 설명하며 직접 소통하였음

개요

• 디자인 시스템에 대한 학습 목적으로 직접 디자인 시스템을 구현

• 설계, 구현부터 npm 패키지 배포까지의 과정을 경험

사용 기술

Yarn, Vite, Typescript, Storybook, React, Emotion

상세

• 팀원간의 활발한 코드 리뷰를 통해 코드 일관성 유지 및 더 나은 설계를 위해 노력

• '내가 사용한다면 어떻게 사용하고 싶은지'에 대한 고민을 기반으로 DX(개발자 경험)를 고려한 컴포넌트 개발

• 접근성을 고려한 설계로 스크린리더 등의 접근성 도구로도 쉽게 사용 가능

• RadioButton, Dropdown 컴포넌트를 직접 개발

• npm 패키지로 배포 및 릴리즈

링크

• GitHub Repo : https://github.com/c-h-w-h/cds

개요

• 자유로운 주제와 형태로 자신의 생각을 공유하는 SNS

• 마크다운 문법을 통해 간단한 서식을 적용할 수 있음

• 글과 댓글(쓰레드) 작성, 팔로우, 멘션 등 보편적인 SNS에서 제공하는 기능들을 포함

사용 기술

Yarn Berry, TypeScript, Next.js, React, Emotion, Recoil

상세

• 외부 라이브러리 사용 없이 마크다운 에디터를 구현

  • contenteditable div를 기반으로 붙여넣기 및 커서 동작을 직접 제어

  • 정규표현식과 pipe 함수로 GFM(GitHub Flavored Markdown) 스펙에 맞추어 마크다운 서식을 적용

• Next.js를 이용한 렌더링 성능 개선

  • next/image 컴포넌트 사용, 웹폰트 로딩 개선, 일부 페이지 SSR 적용 등

  • Lighthouse 성능 점수를 93점에서 100점으로 향상

• Toast 메시지 컴포넌트를 구현

링크

• GitHub Repo : https://github.com/boostcampwm-2022/web34-moheyum

• Blog Posts : https://prayinforrain.github.io/archived-blog/tags/moheyum/

• 40명 규모의 스터디 모임 운영에 참여
• 각자 공부하고 있는 것, 정보 등을 공유하여 서로가 서로의 레퍼런스가 되고 동기부여하기 위한 모임
• 공유 노션과 개더타운을 이용하여 스터디와 컨퍼런스 등의 활동을 진행
• 프론트엔드 개발자 6명이 모여 하고 싶은 주제를 컨텐츠로 공부하는 차가운 스터디의 팀장으로 CDS 프로젝트에 참여

• JavaScript 기반으로 풀스택 프로젝트를 진행하며 학습 및 정보공유를 진행
• SPA, Canvas, React 등 여러 개념과 기술에 대한 학습
• 기술공유, 페어 프로그래밍 등의 커뮤니케이션 경험
• 학습 스프린트를 거쳐 팀을 구성하여 모헤윰을 개발하며 협업을 경험