U'STOCK

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

카카오테크 부트캠프 클라우드 네이티브 제주 1기 2팀 HRTH (2024-07-02 ~ 2024-10-11)

📖 목차

목차

1. ➤ 아키텍쳐
2. ➤ 기술 스택
3. ➤ 디렉토리 구조
4. ➤ 트러블 슈팅
5. ➤ 리팩토링
6. ➤ Google OAuth
7. ➤ REST API 개요
8. ➤ /v1/stocks
9. ➤ /v1/portfolio
10. ➤ /v1/news
11. ➤ /v1/game
12. ➤ 팀 소개

🏙️ 아키텍쳐

• 배포 파이프라인

---

📍 기술스택

분류	기술
Language
Framework
Remote Data
Data Management
Library
DevOps

---

🔸 표준 개발 환경

• 개발 환경 : 유지 보수를 용이하게 하기 위해 역할 명확히 구분
• 커스텀 훅 : 데이터 fetching과 상태 관리에 집중하여 UI와의 결합도 낮춤
• 비즈니스 로직 : 서비스 레이어로 분리해 모듈화
• 이를 통해 코드의 가독성을 높임, 변경 시 영향 범위를 최소화

💡 트러블 슈팅 및 최적화

🔸 Zustand 도입

--문제--
- 한 페이지에 컴포넌트와 모달 수가 증가하면서 여러 컴포넌트를 거쳐야 하는 프롭스드릴링 이슈가 발생
- 자식 컴포넌트에서 부모컴포넌트로 state를 올려줘야 하기 때문에 코드가 복잡해짐
- 가독성 하락 및 유지보수 불편

--해결--
- 상태관리 라이브러리 zustand 도입
- state를 전역에서 관리
- drilling 없이 state를 사용하고 싶은 곳에서 꺼내씀

---

🔸 커스텀 훅 분리

--문제--
- 비즈니스 로직이 컴포넌트 코드에서 많은 부분을 차지

--해결--
- 비즈니스 로직을 커스텀 훅으로 분리
- 컴포넌트 코드를 화면 렌더링에 집중

---

🔸 페이지 성능 문제

--문제--
- 불필요한 리소스의 일괄 로드로 인한 페이지 성능 문제

--해결--
- code spliting
- lazy loading

--개선--
- 초기 로딩 시간 단축
- 번들 크기 단축
- 성능 64 -> 94

---

🔸 API 중복 요청

--문제--
- (루시 여기좀 적어주세요)

--해결--
- debounce함수 적용

--개선--
-

📜 프론트엔드 배포 플로우

🔸 Cloud front

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

🔸 Github action

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