미리보기

개요

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

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

사용 기술

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

상세

레어노트 웹 2.0 개편

• 웹을 통한 회원가입 및 로그인, 콘텐츠 열람 기능 등의 전반적인 기능 구현

• 이미지 및 렌더링 성능 개선을 통해 LCP 시간 50% 이상 단축, 페이지 용량 60% ~ 80% 감소

• SEO를 위한 사이트 구조 개선 및 사이트맵 구성

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

백오피스 및 서버 개발

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

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

• Amplitude, 구글 검색 콘솔을 활용하여 유저 데이터 수집 및 개선 방향 도출에 기여

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

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

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

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

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

개요

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

사용 기술

• PHP CodeIgniter, MySQL

상세

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

개요

• 단기 프로젝트 챌린지를 진행하는 넘블에서 진행한 프로젝트
• OpenAI API를 활용하여 최대 4명의 ai와 대화하는 단톡방을 구현

사용 기술

Yarn, Typescript, Storybook, Next.js, Emotion

상세

• 자주 사용되는 Input, Modal 등의 컴포넌트를 공용으로 구현 및 Storybook으로 문서화
• OpenAI에게 시스템 메시지로 상황을 인지시키고 최대 4명까지의 대화 상황을 재현
• 요청 후 응답을 받기까지의 로딩 과정을 UI로 보여주어 사용자에게 인지시킴
• 30명이 참가한 챌린지의 TOP 3 안에 선정되어 호스트에게 리뷰를 받음

링크

• GitHub Repo : https://github.com/prayinforrain/numble-talk
• 배포 URL : https://numble-talk.vercel.app/
• 넘블 : https://www.numble.it/

개요

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

• 설계, 구현부터 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/tags/moheyum/

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

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