U'STOCK

뉴스 중심의 차트 분석 서비스 U'STOCK의 frontend repository

카카오테크 부트캠프 클라우드 네이티브 제주 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회로 감소

📜 프론트엔드 배포 플로우

🔸 Cloud front

1. github repository에 코드가 병합
2. github action을 통해 자동으로 배포가 진행
3. 이때 깃헙액션에서 리액트 정적 파일을 빌드
4. 빌드된 파일을 S3에 업로드
5. CloudFront로 배포

🔸 Github action

• 브랜치에 따라 각각 개발용 버킷과 운영용 버킷에 업로드