Skip to content

Latest commit

 

History

History
151 lines (109 loc) · 13 KB

README.md

File metadata and controls

151 lines (109 loc) · 13 KB

U'STOCK Logo

U'STOCK

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

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

-----------------------------------------------------

스크린샷 2024-10-13 오후 4 21 46 스크린샷 2024-10-13 오후 4 21 56 스크린샷 2024-10-13 오후 4 22 27 스크린샷 2024-10-13 오후 4 23 17 스크린샷 2024-10-13 오후 4 23 20 스크린샷 2024-10-13 오후 4 23 23 스크린샷 2024-10-13 오후 4 23 56 스크린샷 2024-10-13 오후 4 24 10 스크린샷 2024-10-13 오후 4 24 27 스크린샷 2024-10-13 오후 4 24 42

-----------------------------------------------------

🏙️ 아키텍쳐

스크린샷 2024-10-11 오전 12 47 12
  • 배포 파이프라인
스크린샷 2024-10-11 오전 12 45 06

📍 기술스택

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

🔸 표준 개발 환경

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

-----------------------------------------------------

💡 트러블 슈팅 및 최적화

🔸 Zustand 도입

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

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


🔸 커스텀 훅 분리

스크린샷 2024-10-11 오전 1 13 51
--문제--
- 비즈니스 로직이 컴포넌트 코드에서 많은 부분을 차지

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

🔸 페이지 성능 문제

스크린샷 2024-10-11 오전 1 19 09
--문제--
- 불필요한 리소스의 일괄 로드로 인한 페이지 성능 문제

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

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

🔸 API 중복 요청

스크린샷 2024-10-11 오전 1 23 34
--문제--
- 종목 검색 시 onChange 이번트를 적용하여 불필요한 API 호출이 과도하게 발생

--해결--
- lodash 라이브러리의 debounce함수 적용

--개선--
- '카카오', '카카오게임즈', '카카오뱅크'를 검색했을 때의 검색 API 호출량을 기존 48회에서 3회로 감소

-----------------------------------------------------

📜 프론트엔드 배포 플로우

🔸 Cloud front

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

🔸 Github action

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

-----------------------------------------------------