You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
카카오테크 부트캠프 클라우드 네이티브 제주 1기 2팀 HRTH (2024-07-02 ~ 2024-10-11)
🏙️ 아키텍쳐
배포 파이프라인
📍 기술스택
분류
기술
Language
Framework
Remote Data
Data Management
Library
DevOps
🔸 표준 개발 환경
개발 환경 : 유지 보수를 용이하게 하기 위해 역할 명확히 구분
커스텀 훅 : 데이터 fetching과 상태 관리에 집중하여 UI와의 결합도 낮춤
비즈니스 로직 : 서비스 레이어로 분리해 모듈화
이를 통해 코드의 가독성을 높임, 변경 시 영향 범위를 최소화
💡 트러블 슈팅 및 최적화
🔸 Zustand 도입
--문제--
- 한 페이지에 컴포넌트와 모달 수가 증가하면서 여러 컴포넌트를 거쳐야 하는 프롭스드릴링 이슈가 발생
- 자식 컴포넌트에서 부모컴포넌트로 state를 올려줘야 하기 때문에 코드가 복잡해짐
- 가독성 하락 및 유지보수 불편
--해결--
- 상태관리 라이브러리 zustand 도입
- state를 전역에서 관리
- drilling 없이 state를 사용하고 싶은 곳에서 꺼내씀
🔸 커스텀 훅 분리
--문제--
- 비즈니스 로직이 컴포넌트 코드에서 많은 부분을 차지
--해결--
- 비즈니스 로직을 커스텀 훅으로 분리
- 컴포넌트 코드를 화면 렌더링에 집중
🔸 페이지 성능 문제
--문제--
- 불필요한 리소스의 일괄 로드로 인한 페이지 성능 문제
--해결--
- code spliting
- lazy loading
--개선--
- 초기 로딩 시간 단축
- 번들 크기 단축
- 성능 64 -> 94
🔸 API 중복 요청
--문제--
- 종목 검색 시 onChange 이번트를 적용하여 불필요한 API 호출이 과도하게 발생
--해결--
- lodash 라이브러리의 debounce함수 적용
--개선--
- '카카오', '카카오게임즈', '카카오뱅크'를 검색했을 때의 검색 API 호출량을 기존 48회에서 3회로 감소