✉️ [email protected]

Github | Blog | LinkedIn

📄 개인 프로젝트

KimBiYam.log

링크

레포지토리

프로젝트 기술 스택

• Next.js

• Tailwind CSS

• Framer Motion

• gray-matter

• react-markdown

• utterances

• jotai

• 개발 관련 내용을 기록하기 위해 블로그를 직접 개발

• Vercel을 통하여 배포

• 마크다운 파일을 파싱하여 포스트 페이지를 렌더하기 위해 react-markdown 라이브러리 등을 이용해서 구현

• Google Lighthouse 측정 지표 기준을 기반으로 SEO 및 성능 개선을 진행

• Next.js 12 → Next.js 13 App Router로 마이그레이션

  • 마이그레이션 관련 블로그 포스트
  • robots noindex 이슈 해결 블로그 포스트

🧑‍💻 경력

핵클

2022.12 ~

A/B 테스트와 데이터 분석 등의 기능을 제공해주는 핵클 대시보드의 프론트엔드 영역과 Client SDK(JavaScript, React, Flutter, React Native, Unity)의 신규 기능 개발 및 유지보수를 주로 담당하고 있습니다.

업무 내용

대시보드 프로젝트 개선 작업

• Recoil로 관리하던 Server state를 TanStack Query로 마이그레이션
  • 기존에 TanStack Query 를 사용해본 경험을 기반으로 도입 추진
  • 팀원들이 바로 적용할 수 있도록 사례 및 Recoil 대비 개선점 등을 샘플 코드를 만들어서 간단한 공유 세션 진행
  • 마이그레이션이 필요한 부분 중 40% 가량 맡아서 마이그레이션 작업
• 기존에 Recoil 및 Local State로 관리하던 Form state를 React Hook Form으로 일부 리팩토링
  • 기존에 React Hook Form 을 사용해본 경험을 기반으로 도입 추진
  • 팀원들에게 쉽게 적용할 수 있는 곳을 대상으로 PR을 만들어 기존과 차이점 등을 공유
  • 강화된 Form Validation을 위해서 zod 라이브러리 도입
• UI 라이브러리로 사용 중인 MUI v4 → v5로 일부 마이그레이션
• 에러 모니터링을 위해 Sentry 도입
• 개발 생산성 및 빌드 타임 감소를 위해 CRA(Webpack) 환경에서 Vite 환경으로 번들러 마이그레이션
  • 개발 환경 파일 수정 시: 10~15초 → 1초 미만으로 감소
  • Argo CI Workflow 기준 총 빌드 타임: 2~3분 가량 개선
• 개발 생산성 및 CI 의존성 설치 최적화를 위해 패키지 매니저를 yarn v1에서 pnpm으로 마이그레이션
  • yarn v1 기반의 Argo CI/CD 파이프라인 설정 변경 및 배포 테스트 작업 수행
  • Argo CI Workflow 기준 총 빌드 타임: 3~4분 가량 개선
• 기존에 백엔드와 함께 사용하던 레포지토리에서 새로운 프론트엔드 레포지토리로 코드 이전 작업
  • 기존 git history를 유지하면서 프론트엔드 관련 코드만 새로운 레포지토리로 이전
• 통합 테스트가 필요한 영역에 React Testing Libraty + Jest 기반의 통합 테스트를 일부 도입