미리보기

• 유찜 프로젝트 프론트엔드 리드 (https://u-zzim.com/, https://www.u-zzimbiz.com/)

  • 메인 서비스와 백오피스를 프로젝트 초기세팅부터 시작하여 서비스 런칭까지 성공
  • React Query를 사용하여 강력한 클라이언트사이드 data-fetching 방식을 구현하여 높은 사용자 경험을 제공
  • React Query Hydrate 컴포넌트를 사용하여 상품 데이터를 서버에서 pre-fetching하여 초기 페이지 렌더링 속도 대폭 향상
  • Build testing을 포함한 ci/cd 파이프라인 설정을 통하여 안정적이고 효율적인 배포 프로세스 확립
  • 높은 재사용성을 가진 ui 컴포넌트와 hook을 사용하여 코드품질 향상
  • 실용적인 SSR 렌더링 방식을 채택하여 효과적으로 SEO 최적화 진행
  • 강한 코드 컨벤션을 명확하게 확립하여 개발 커뮤니케이션 효율화 및 개발 생산성 향상
  • 사용자경험과 서비스/제품의 품질을 기준으로 하여 라이브러리 선택하여 빠른 시간안에 제품을 고객에게 공급
  • 피그마와 같이 드로잉,폰트,사진툴을 이용하여 사용자가 커스텀하게 카드를 디자인하여 선물할 수 있는 ‘카드스튜디오’ 서비스를 fabricjs로 구현
  • Serverless Framework을 이용하여 AWS s3/cloudfront/route53 환경에 배포. 그 후 Serverless Framework가 next13을 지원하지 않는 이슈를 AWS Amplify로 migration하여 해결

• 기업 자사몰 마켓플레이스 개발

  • 각기 다른 디자인 템플렛과 컴포넌트를 만들어 한 개의 코드베이스로 다수의 기업 자사몰 마켓플레이스 개발(현대카드 쇼핑이지, BMW Joymall, KB Pay 구독몰, NH Pay 구독몰, 교원 Klife, 그 외 다수)
  • OAuth 또는 아이디/비밀번호를 통한 회원가입/아이디찾기/비밀번호찾기 기능 구현
    • react hook form(rhf)과 zod를 사용하여 validation에 대한 로직을 분리하여 ui와 비지니스 로직의 결합도를 낮춤
    • state로 관리되어 불필요하게 재랜더링하던 인풋을 rhf로 변경하여 사용자의 인풋 작성시 성능 개선
    • PASS 모듈 연동하여 본인인증 기능 구현

사용기술: Nextjs, Typescript, React, SWR, Chakra UI, Emotion, React hook form, Zod, Serverless framework
주요 성과 및 문제 해결:

• React hook form(rhf)과 zod를 사용하여 form 렌더링 성능개선 및 관심사 분리
  • 이벤트마다 재렌더링에 의한 성능이슈를 rhf를 통해 uncontrolled input으로 관리하여 회원가입시 재렌더링으로 인한 성능이슈 해결
  • Validation에 zod를 사용하였으며 form에 대한 로직을 따로 분리하여 코드 유지보수성 향상
• 레거시 코드 개선작업
  • 레거시 UI 컴포넌트를 디자인팀과 협업을 통해 Chakra UI로 컴포넌트 변경작업하여 개발생산성과 제품품질 향상
  • 혼재된 코드 컨벤션을 팀원들과 협의 후 모든 개발자가 쉽고 빠르게 새로운 컨벤션에 맞출 수 있도록 컨벤션 확립 및 문서화

사용기술: Nextjs, Typescript, React, React query, Fabricjs, Emotion, Formik, Yup, AWS amplify, Serverless framework
주요 성과 및 문제해결:

• React Query Hydration 컴포넌트와 getStaticProps를 사용하여 초기 렌더링 시간 대폭 감소
  • 사용자의 환경 또는 서버의 속도에 따라 늦은 상품 렌더링과 layout-shift에서 오는 낮은 사용자 경험 문제를 React Query Hydration 컴포넌트와 getStaticProps를 사용하여 제품의 품질을 고도화
  • 빌드시 ui에 포함하는 정적인 데이터를 서버에서 미리 받아 앱과 같은(app-like) 같은 사용자 경험 향상
• 배포환경 개선 및 배포시간 약 60% 단축 (~12분 → ~4분)
  • Serverless framework component 사용 시 배포시간이 최소 10분이 넘어가는 병목현상을 AWS amplify로 migration하여 배포시간 약 60% 단축
  • Serverless framework nextjs component의 프로젝트 드랍으로 발생한 기술부채를 migration을 통하여 해결
  • 프로젝트 내에서 운영중이던 서비스들을 순차적으로 migration하여 비용증가에 대한 모니터링 및 안정성 테스트를 통해 서비스 다운타임 없이 migration 성공
• 사용자가 직접 카드를 디자인하여 선물할 수 있는 ‘카드스튜디오’ 서비스를 fabricjs로 구현
  • Fabricjs 전문기술을 가진 외주 개발자의 nextjs 환경에 도입 시키는 작업 실패 이슈를 개인적으로 시간을 내어 새로운 기술을 습득하여 nextjs에 도입에 성공
  • 재활용성 높은 React hook으로 모듈화 시켜 다른 서비스에 신속하게 추가작업 없이 도입

사용기술: Vuejs, Nuxtjs, Lerna, PHP
주요 성과 및 문제 해결:

• 한국웹접근성인정평가원에서 심사를 통하여 웹접근성 품질인증 취득
  • 웹접근성에 대한 고려 없이 초기부터 html 태그가 무분별하게 사용 되어진 코드 베이스를 웹접근성 심사에 맞추어 작업
  • 웹접근성 심사 필수사항에 대해서 착실히 공부하여 동료개발자와 같은 페이지를 여러번 교차확인 작업 후, 추가 심사없이 웹접근성 품질인증을 취득