✉️ [email protected]

Github | Blog | LinkedIn

📄 개인 프로젝트

KimBiYam.log

링크

레포지토리

프로젝트 기술 스택

• Next.js

• Tailwind CSS

• Framer Motion

• gray-matter

• react-markdown

• jotai

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

• Vercel을 통하여 배포

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

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

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

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

🧑‍💻 경력

핵클

2022.12 ~

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

기획/UX 설계 단계에서부터 제품이 더 나은 방향으로 나아갈 수 있도록 적극적으로 의견을 제시하고, 고객의 제품 개선 요청에 대해 직접 소통하고 빠르게 대응하여, 제품을 사용하는 고객이 만족할 수 있는 서비스를 만들기 위해 노력하고 있습니다.

레거시 개선 및 프론트엔드 개발 환경 개선 작업

2022.12 ~

레거시 개선

• 데이터 fetching 코드의 일관성 및 캐시 관리 등을 위해 Recoil + async selector 기반의 서버 상태를 TanStack Query 기반으로 마이그레이션
  • 팀원들이 쉽게 적용할 수 있도록 사례와 기존 대비 개선점을 포함한 샘플 코드를 작성하고 간단한 공유 세션 진행
  • 마이그레이션 작업의 약 40%를 담당하여 진행
  • TanStack Query 도입 후 데이터 fetching 관련 코드 작성 효율화 향상 및 로딩 상태 처리 간편화
• local state 및 recoil state로만 관리하던 폼 상태를 React Hook Form 도입 후 일부 리팩토링
  • form validation을 위해서 zod 도입
  • 기존에 복잡한 form 상태 관리 및 validation을 매번 submit 함수 등에서 처리하여 코드의 복잡도가 올라가고 동작이 예측이 안되는 케이스가 많이 발생
  • React Hook Form 도입 후 이전보다 유지보수성이 높은 코드 형태로 작성할 수 있도록 개선
• 나머지 전역 상태를 Recoil에서 Zustand로 마이그레이션
  • Recoil은 현재 유지보수가 잘 되고있지 않고, 디버깅 용이성 등을 이유로 Zustand로 변경하기로 결정
  • 전체 마이그레이션 작업 담당하여 진행
• 언어 변경 시 새로고침 되지 않도록 UX 개선
  • 기존에는 대시보드 내에 선택된 언어를 React의 상태로 관리하지 않고, 쿠키로만 관리하던 상황
  • 언어를 Context로 관리하도록 변경하여 변경 시에 새로고침 되지 않도록 개선
• 기존에 장애 발생율이 높았던 코드 영역에 React Testing Libraty + Jest 기반의 통합 테스트를 도입
  • 통합 테스트를 위한 boilerplate 세팅 작업
  • msw 활용하여 API mocking 처리
• HTTP 클라이언트 axios → ky 마이그레이션
  • 기존 사용하던 axios 버전이 보안 취약점이 존재하는 v0 대 버전이라 업데이트가 필요한 상황
  • v1으로 넘어가면 어차피 breaking change가 존재하는 상황이라 번들 사이즈 감소 등의 이점을 누리기 위해 마이그레이션 하기로 결정
  • 전체 마이그레이션 작업 담당하여 진행

개발 환경 개선

• 에러 모니터링을 위해 Sentry 도입
  • 기존에 인지하지 못했던 에러를 실시간으로 발견 및 개선하여 서비스 안정성 향상
  • 고객 문의 시 세션 리플레이 기능을 활용한 디버깅 및 문제 해결
• 개발 생산성 및 빌드 시간을 줄이기 위해 CRA(Webpack) 환경에서 Vite로 번들러 마이그레이션
  • 개발 환경 Hot Module Reload 시간 개선
    • AS-IS: 10s ~ 15s
    • TO-BE: 1s 미만
  • 빌드 타임 개선(Argo CI 전체 Workflow 기준)
    • AS-IS: 9m ~ 11m
    • TO-BE: 6m ~ 7m
• 개발 생산성 및 CI 의존성 설치 최적화를 위해 패키지 매니저를 yarn v1에서 pnpm으로 마이그레이션
  • CI/CD 빌드 파이프라인 설정 변경 및 배포 테스트 작업 수행
  • 빌드 타임 개선(Argo CI 전체 Workflow 기준)
    • AS-IS: 6m ~ 7m
    • TO-BE: 4m ~ 5m
• 기존에 백엔드와 함께 사용하던 레포지토리에서 새로운 프론트엔드 레포지토리로 이전 작업
  • 기존 git history를 유지하면서 프론트엔드 관련 코드만 새로운 레포지토리로 이전

기타

• 대시보드에서 사용 중인 오픈소스 라이브러리(react-diff-viewer-continued)의 의존성 업데이트를 위해 직접 기여
  • https://github.com/Aeolun/react-diff-viewer-continued/pull/13
• 홈페이지 최초 렌더링 개선
  • 비즈니스 요구사항에 의하여 일부 데이터를 client side에서 렌더링 이후에 가져오던 부분을 개선
  • server side에서 SDK 연동 시 이미 가지고 있는 데이터라 추가 fetching 없이getServerSideProps로 server side에서 내려주도록 변경 작업
  • 첫 진입시 보여지는 메인 영역의 layout shift 개선

Flutter SDK 신규 개발

2023.01

핵클 서비스를 사용하기 위해 필요한 SDK 중 기존에 지원하지 않았던 Flutter를 신규로 지원하기 위한 SDK 개발 작업

• 신규로 개발하는 Flutter SDK의 개발 전체를 담당
• 브릿지 모듈 일부 및 모델 클래스 로직 전체에 유닛 테스트 작성

Client SDK 개발 및 유지보수

2023.01 ~

• Flutter, React Native, Unity SDK 신규 기능 개발 및 유지보수
  • 브릿지 모듈(Dart, TypeScript, C#) ↔ 네이티브 모듈(Kotlin, Java, Swift, Objective C) 간의 데이터 통신 코드 작성
• JavaScript, React SDK의 웹뷰 연동 기능, Split URL 테스트, User Engagement 기능 등의 신규 기능 개발 및 유지보수

이벤트 관리 페이지 개편

2023.02

핵클로 전송되는 모든 이벤트 데이터를 관리할 수 있는 이벤트 관리 페이지의 개편 작업

• 이벤트 관리 페이지에 태그 기능 추가
• 이벤트 상세 페이지에 쉬운 SDK 연동을 위해 언어 별 Code Snippet 기능 추가

지표 관리 기능 개발

2023.04

A/B 테스트 페이지 내에만 존재하던 실험 목표를 서비스 전반에 사용할 수 있도록 기반을 만들기 위해 지표 생성 및 관리에 대한 기능 개발

• 기존 모달 컴포넌트를 다른 페이지에 공통으로 사용할 수 있도록 리팩토링 작업
  • 기존 컴포넌트 내부 깊숙한 곳에서 Recoil 상태와 로직들이 너무 많이 엮여져있어, 기존에 사용하던 모든 컴포넌트를 deprecated 처리
  • deprecated한 컴포넌트를 기반으로 모든 관련 컴포넌트 코드 재작성
  • feature flag를 활용하여 feature flag가 켜져있다면 새로운 컴포넌트를, 아니라면 기존 컴포넌트를 렌더하는 식으로 장애 상황 등을 대비
  • 추후에 local state에서 react-hook-form으로 리팩토링 할 수 있게끔 상태 변경 부분이 명확하게 보이도록 우선 props drilling 하는 형태로 구현

퍼널 데이터 분석 기능

2023.07 ~ 2023.08

기존에 배치 성으로 계산해 주던 퍼널 분석을 제거하고 실시간으로 조회할 수 있는 새로운 퍼널 데이터 분석 개발 작업

• 분석 결과를 보여주기 위해 Highcharts를 사용하여 데이터 시각화 작업

지표 설정 OR 이벤트 조건 기능

2023.09 ~ 2023.10

AB 테스트 지표 생성 시 하나의 이벤트만 조건으로 사용할 수 있던 점을 개선하기 위해 여러개의 이벤트를 묶어 OR 조건으로 사용할 수 있도록 개선

• 기존 컴포넌트 구조를 유지한 채로 몇 개의 필드만 배열로 변경하기에 복잡도가 높아 사전 작업으로 기존 컴포넌트를 전부 deprecated 처리 후 React Hook Form와 FormContext를 사용하는 형태로 리팩토링 작업