-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #270 from 100-hours-a-week/dev
Dev
- Loading branch information
Showing
8 changed files
with
1,024 additions
and
1,091 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,154 @@ | ||
| # 5-HRTH-ustock-fe | ||
| 카카오 테크 부트캠프 과정 파이널 프로젝트 프론트엔드 리포지토리 | ||
| <p align="center"> | ||
| <img src="images/ustock logo.webp" alt="U'STOCK Logo" width="80px" height="80px"> | ||
| </p> | ||
| <h1 align="center"> U'STOCK </h1> | ||
| <h3 align="center"> 뉴스 중심의 차트 분석 서비스 U'STOCK의 frontend repository </h3> | ||
| <h5 align="center"> 카카오테크 부트캠프 클라우드 네이티브 제주 1기 2팀 HRTH (2024-07-02 ~ 2024-10-11) </h5> | ||
|
|
||
| <br><br> | ||
| # 💡 **프로젝트 소개** | ||
| <br> | ||
| ### 핵심 키워드 | ||
| 1. elle 키워드 | ||
| 2. veronica 키워드 | ||
| 3. lucy 키워드 | ||
| <!-- 목차 --> | ||
| <h2 id="table-of-contents"> :book: 목차</h2> | ||
|
|
||
| ### 사용한 데이터 | ||
| - 한국투자증권 api 주식 데이터 | ||
| - 크롤링한 뉴스 데이터 | ||
| - 54 건의 유저 데이터 + 전체 유입 유저 | ||
| <details open="open"> | ||
| <summary>목차</summary> | ||
| <ol> | ||
| <li><a href="#architecture"> ➤ 아키텍쳐</a></li> | ||
| <li><a href="#tech"> ➤ 기술 스택</a></li> | ||
| <li><a href="#directory"> ➤ 디렉토리 구조</a></li> | ||
| <li><a href="#trouble"> ➤ 트러블 슈팅</a></li> | ||
| <li><a href="#refactor"> ➤ 리팩토링</a></li> | ||
| <li><a href="#auth"> ➤ Google OAuth</a></li> | ||
| <li><a href="#api"> ➤ REST API 개요</a></li> | ||
| <li><a href="#stocks"> ➤ /v1/stocks</a></li> | ||
| <li><a href="#portfolio"> ➤ /v1/portfolio</a></li> | ||
| <li><a href="#news"> ➤ /v1/news</a></li> | ||
| <li><a href="#game"> ➤ /v1/game</a></li> | ||
| <li><a href="#teammates"> ➤ 팀 소개</a></li> | ||
| </ol> | ||
| </details> | ||
|
|
||
| <br><br> | ||
| # 🛠️ 아키텍쳐 | ||
| (새로이 그릴 예정) | ||
|  | ||
|
|
||
| <br><br> | ||
| <!-- 아키텍쳐 --> | ||
| <h2 id="architecture"> 🏙️ 아키텍쳐</h2> | ||
| <img width="734" alt="스크린샷 2024-10-11 오전 12 47 12" src="https://github.com/user-attachments/assets/21049fc3-6f96-42bb-98d0-2bff5fbc25a7"> | ||
|
|
||
| <br/> | ||
|
|
||
| - 배포 파이프라인 | ||
|
|
||
| <img width="801" alt="스크린샷 2024-10-11 오전 12 45 06" src="https://github.com/user-attachments/assets/fd6c3e8a-a341-4cb1-a5ae-185822f7009e"> | ||
|
|
||
| <hr> | ||
| <!-- 기술 스택 --> | ||
|
|
||
| # 📍 기술스택 | ||
| |분류|기술| | ||
| |:- |:- | | ||
| |Language|<img src="https://img.shields.io/badge/TypeScript-blue?style=for-the-badge&logo=typescript&logoColor=white">| | ||
| |Framework|<img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white"/> | ||
| |Remote Data|<img src="https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white"/> | ||
| |Data Management|<img src="https://img.shields.io/badge/Zustand-gray?style=for-the-badge&logo=Zustand&logoColor=white"/> <img src="https://img.shields.io/badge/Tanstack Query-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white"/> | ||
| |Library|<img src="https://img.shields.io/badge/Styled components-DB7093?style=for-the-badge&logo=StyledComponents&logoColor=white"/> <img src="https://img.shields.io/badge/React spring-E00033?style=for-the-badge&logo=ReactSpring&logoColor=white"/> <img src="https://img.shields.io/badge/Embla Carousel-FAFAFA?style=for-the-badge&logo=EmblaCarousel&logoColor=white"/> <img src="https://img.shields.io/badge/Lottie-00FFDA?style=for-the-badge&logo=Lottie&logoColor=white"/> <img src="https://img.shields.io/badge/Frarmer Motion-0055FF?style=for-the-badge&logo=Framer&logoColor=white"/> <img src="https://img.shields.io/badge/Sweetalert-F6D70?style=for-the-badge&logo=Sweetalert&logoColor=white"/> <img src="https://img.shields.io/badge/ApexCharts-ECD53F?style=for-the-badge&logo=ApexCharts&logoColor=white"/> | ||
| |DevOps|<img src="https://img.shields.io/badge/Github-181717?style=for-the-badge&logo=Github&logoColor=white"/> <img src="https://img.shields.io/badge/Github Actions-2088FF?style=for-the-badge&logo=Github Actions&logoColor=white"/> <img src="https://img.shields.io/badge/Amazon S3-569A31?style=for-the-badge&logo=Amazon S3&logoColor=white"/> <img src="https://img.shields.io/badge/Amazon CloudFront-FFFF66?style=for-the-badge&logo=Amazon CloudFront&logoColor=white"/> | ||
|
|
||
| | 분류 | 기술 | | ||
| | :-------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | Language | <img src="https://img.shields.io/badge/TypeScript-blue?style=for-the-badge&logo=typescript&logoColor=white"> | | ||
| | Framework | <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white"/> | | ||
| | Remote Data | <img src="https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white"/> | | ||
| | Data Management | <img src="https://img.shields.io/badge/Zustand-gray?style=for-the-badge&logo=Zustand&logoColor=white"/> <img src="https://img.shields.io/badge/Tanstack Query-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white"/> | | ||
| | Library | <img src="https://img.shields.io/badge/Styled components-DB7093?style=for-the-badge&logo=StyledComponents&logoColor=white"/> <img src="https://img.shields.io/badge/React spring-E00033?style=for-the-badge&logo=ReactSpring&logoColor=white"/> <img src="https://img.shields.io/badge/Embla Carousel-FAFAFA?style=for-the-badge&logo=EmblaCarousel&logoColor=white"/> <img src="https://img.shields.io/badge/Lottie-00FFDA?style=for-the-badge&logo=Lottie&logoColor=white"/> <img src="https://img.shields.io/badge/Frarmer Motion-0055FF?style=for-the-badge&logo=Framer&logoColor=white"/> <img src="https://img.shields.io/badge/Sweetalert-F6D70?style=for-the-badge&logo=Sweetalert&logoColor=white"/> <img src="https://img.shields.io/badge/ApexCharts-ECD53F?style=for-the-badge&logo=ApexCharts&logoColor=white"/> | | ||
| | DevOps | <img src="https://img.shields.io/badge/Github-181717?style=for-the-badge&logo=Github&logoColor=white"/> <img src="https://img.shields.io/badge/Github Actions-2088FF?style=for-the-badge&logo=Github Actions&logoColor=white"/> <img src="https://img.shields.io/badge/Amazon S3-569A31?style=for-the-badge&logo=Amazon S3&logoColor=white"/> <img src="https://img.shields.io/badge/Amazon CloudFront-FFFF66?style=for-the-badge&logo=Amazon CloudFront&logoColor=white"/> | | ||
|
|
||
| <hr> | ||
| <!-- FE 디렉토리 구조 --> | ||
| <h3 id="directory"> 🔸 표준 개발 환경</h3> | ||
| <img width="634" alt="스크린샷 2024-10-11 오전 12 48 15" src="https://github.com/user-attachments/assets/33998fbc-3033-41b6-90fe-100f3ac8b8e2"> | ||
|
|
||
| - 개발 환경 : 유지 보수를 용이하게 하기 위해 역할 명확히 구분 | ||
| - 커스텀 훅 : 데이터 fetching과 상태 관리에 집중하여 UI와의 결합도 낮춤 | ||
| - 비즈니스 로직 : 서비스 레이어로 분리해 모듈화 | ||
| - 이를 통해 코드의 가독성을 높임, 변경 시 영향 범위를 최소화 | ||
|
|
||
|  | ||
|
|
||
| <!-- 트러블 슈팅 --> | ||
| <h2 id="trouble"> 💡 트러블 슈팅 및 최적화</h2> | ||
|
|
||
| <h3> 🔸 Zustand 도입</h3> | ||
|
|
||
| <table> | ||
| <tr> | ||
| <td><img width="837" alt="스크린샷 2024-10-11 오전 12 52 13" src="https://github.com/user-attachments/assets/01012b97-d57a-473b-8b98-3b7d147a1126"></td> | ||
| <td><img width="837" alt="스크린샷 2024-10-11 오전 12 52 19" src="https://github.com/user-attachments/assets/1cf8b110-afed-4efb-a3d7-7fcecbde6f08"></td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| ``` | ||
| --문제-- | ||
| - 한 페이지에 컴포넌트와 모달 수가 증가하면서 여러 컴포넌트를 거쳐야 하는 프롭스드릴링 이슈가 발생 | ||
| - 자식 컴포넌트에서 부모컴포넌트로 state를 올려줘야 하기 때문에 코드가 복잡해짐 | ||
| - 가독성 하락 및 유지보수 불편 | ||
| --해결-- | ||
| - 상태관리 라이브러리 zustand 도입 | ||
| - state를 전역에서 관리 | ||
| - drilling 없이 state를 사용하고 싶은 곳에서 꺼내씀 | ||
| ``` | ||
|
|
||
| <hr> | ||
| <h3> 🔸 커스텀 훅 분리</h3> | ||
| <img width="829" alt="스크린샷 2024-10-11 오전 1 13 51" src="https://github.com/user-attachments/assets/382d020d-654b-4354-bce2-052039b9a166"> | ||
|
|
||
| ``` | ||
| --문제-- | ||
| - 비즈니스 로직이 컴포넌트 코드에서 많은 부분을 차지 | ||
| --해결-- | ||
| - 비즈니스 로직을 커스텀 훅으로 분리 | ||
| - 컴포넌트 코드를 화면 렌더링에 집중 | ||
| ``` | ||
|
|
||
| <hr> | ||
| <h3> 🔸 페이지 성능 문제</h3> | ||
| <img width="664" alt="스크린샷 2024-10-11 오전 1 19 09" src="https://github.com/user-attachments/assets/c3675353-abcf-445d-a249-537507bb7445"> | ||
|
|
||
| ``` | ||
| --문제-- | ||
| - 불필요한 리소스의 일괄 로드로 인한 페이지 성능 문제 | ||
| --해결-- | ||
| - code spliting | ||
| - lazy loading | ||
| --개선-- | ||
| - 초기 로딩 시간 단축 | ||
| - 번들 크기 단축 | ||
| - 성능 64 -> 94 | ||
| ``` | ||
|
|
||
| <hr> | ||
| <h3> 🔸 API 중복 요청</h3> | ||
| <img width="886" alt="스크린샷 2024-10-11 오전 1 23 34" src="https://github.com/user-attachments/assets/5875e393-6325-4c85-95d1-64a0a670d0f0"> | ||
|
|
||
| ``` | ||
| --문제-- | ||
| - (루시 여기좀 적어주세요) | ||
| --해결-- | ||
| - debounce함수 적용 | ||
| --개선-- | ||
| - | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| <h2 id="api"> 📜 프론트엔드 배포 플로우</h2> | ||
|
|
||
| <h3> 🔸 Cloud front</h3> | ||
|
|
||
| 1. github repository에 코드가 병합 | ||
| 2. github action을 통해 자동으로 배포가 진행 | ||
| 3. 이때 깃헙액션에서 리액트 정적 파일을 빌드 | ||
| 4. 빌드된 파일을 S3에 업로드 | ||
| 5. CloudFront로 배포 | ||
|
|
||
| <h3> 🔸 Github action</h3> | ||
|
|
||
| - 브랜치에 따라 각각 `개발용 버킷`과 `운영용 버킷`에 업로드 | ||
|
|
||
| <br><br><br> | ||
|  |
Oops, something went wrong.