미리보기

프론트엔드 개발 전담

• 메인 프론트엔드 개발자 역할.
• 프론트엔드에 관련된 모든 설계, 개발, 배포, 유지보수 등을 담당.
• 백엔드 개발자와 협업하여 개발 요구사항 도출 및 DB 구조 설계 기여.
• 기획자 및 디자이너와 함께 적극적으로 UI/UX 개선에 참여

• 자사 애플리케이션 디플래닛을 홍보할 목적으로 빠르게 개발한 홈페이지 프로젝트
• 반응형 UI (데스크탑, 태블릿, 스마트폰) 구현
• 성능 최적화 (Lighthouse) 경험
  • SEO : 100점, Performance : 91점, Accessibility : 95점
  • 이미지 최적화를 통해 FCP 시간을 4초에서 1초 미만으로 단축
  • 대체 폰트 및 폰트 용량 절감을 통한 최초 렌더링 시 웹 에셋 다운로드 시간 감소
  • 규격에 따른 시맨틱 태크 및 메타 태그 사용을 통해 SEO 및 Accessibility 개선

• 자사 애플리케이션 디플래닛에 탑재된 AI 난임 리포트 프론트엔드 전체 개발
• 프로젝트의 점증적 기능 구현을 고려한 프론트엔드 디렉토리 구조 설계 및 적용
  • 디렉토리의 계층화 구현(ui -> component -> container -> page)으로 CSR과 SSR을 효율적으로 분리함
• 서버와 클라이언트 데이터의 동기화를 위해 React-Query 라이브러리 채택 및 도입
• 회사에서 주로 사용하던 차트 라이브러리의 라이센스 이슈(MIT가 아닌 패키지)를 파악한 후, 차트 라이브러리 변경
• 앱 계정의 웹뷰 계정 연동을 위한 토큰 전달 구조 설계
  1. 플러터에서 웹뷰를 생성할 때 토큰 및 유저명을 쿠키에 추가
  2. 유저가 최초 Next.js 진입시 웹뷰 쿠키에 저장된 계정 정보를 서버 사이드 환경(route handler)에서 캐치.
  3. 캐치한 유저 정보를 클라이언트 환경에 별도로 만든 전역 Context Provider에 주입
  4. 이를 통해 서버 사이드에서는 쿠키로, 클라이언트 사이드에서는 프로바이더를 통해 토큰 접근 가능.

• 난임 환자들의 건강 챌린지를 위한 단기 프로젝트 웹 페이지 개발 (정부 과제)
• next-auth를 활용해 회원가입, 계정관리 등 개인정보 관련 로직 개발
• markdown-viewer를 활용한 공지사항 페이지 개발
• 유저가 올린 사진을 모달로 열어 확대하는 기능을 개발하여 UX 개선

주도적인 학습을 위해 학우들과 함께 운영체제, 데이터베이스시스템 등 학습한 내용을 바탕으로 토의를 진행하는 스터디를 운영 중.

리액트 DEV 공식문서 중 useReducer와 useEffect를 우리말로 번역하여 개발자 생태계에 기여함.

개발자 생태계 기여를 위한 연사활동 참여.
배열 프로토타입 메서드인 reduce를 재귀함수로 시현.

웹 개발 입문자를 대상으로 DOM에 대한 정보를 알려주기위해 참여한 도서 집필 프로젝트
챕터2의 트리 부분장으로 트리 부분을 총괄