Introduce.

실행력 있는 프론트엔드 개발자 김지현입니다. 주도적으로 프로덕트와 팀의 문제를 인지하고 해결해 나갑니다.

세상의 문제들을 기술적으로 해결할 수 있을 때 큰 성취감을 느끼며, 제가 개발을 하는 이유이기도 합니다.

Work Experience.

AI 기반 식단 추천·배송 스타트업, https://shipdan.me/

마이쉽단 Frontend Developer (2022.11 ~ 2024.02)

Tech Stack: TypeScript, Next.js, React, Recoil, TanStack Query, styled-components, Emotion, Vitest

전역 Bottom Sheet 시스템 구축

기존 bottom sheet 관리 방식의 문제점들을 해결한 시스템을 구축하며 bottom sheet 1개 평균 작업 시간 5분 → 1분으로 감축

코드
As-Is: 각 bottom sheet마다 개별적인 상태 관리 (ex: is{CertainBottomSheet}Open)로 인해 반복적인 코드 증가
To-Be:
- 단일 상태로 bottom sheet들을 관리해 코드량 대폭 감소
- 다른 bottom sheet을 중첩하여 열 수 있는 요구사항 개발을 위해 bottom sheet들을 배열로 관리하고 그 배열을 렌더링하는 방법을 선택
  - DOM에 bottom sheet들이 쌓임으로 인한 성능 저하 여부를 판단하기 위해, 메모리 사용량 변화를 직접 측정 후 팀 내 논의를 진행했고 그 결과 영향이 미미하다고 평가됨
  - 이 외에 컴포넌트를 교체해 보여주는 방법도 고려했으나, 상태 관리 및 데이터 캐싱 관련 리팩토링이 수반되기에 시간 측면에서 선택하지 않음
As-Is: 상위 컴포넌트에서의 local 상태 관리에 의한 props drilling, 페이지마다 bottom sheet UI 코드 중복, 상태 변경 시 불필요한 리렌더링 발생