Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev #270

Merged
merged 8 commits into from
Oct 11, 2024
Merged

Dev #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b4d71cd
Fix : Debounce 주석 해제
lucy726j Oct 10, 2024
13fca32
Merge pull request #266 from 100-hours-a-week/feature/lucy
Yeonsu00-12 Oct 10, 2024
05a4467
Feature/veronica
yzooop Oct 10, 2024
d161f8c
Docs : Readme init
yzooop Oct 11, 2024
87c8e9e
Merge branch 'dev' into feature/veronica
yzooop Oct 11, 2024
e100df3
Merge pull request #268 from 100-hours-a-week/feature/veronica
yzooop Oct 11, 2024
45463c1
Fix : fontSize 수정
yzooop Oct 11, 2024
365ae75
Merge pull request #269 from 100-hours-a-week/feature/veronica
Yeonsu00-12 Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 146 additions & 26 deletions README.md
View file
Open in desktop
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>
# 🛠️ 아키텍쳐
(새로이 그릴 예정)
![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)

<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와의 결합도 낮춤
- 비즈니스 로직 : 서비스 레이어로 분리해 모듈화
- 이를 통해 코드의 가독성을 높임, 변경 시 영향 범위를 최소화

![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)

<!-- 트러블 슈팅 -->
<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함수 적용

--개선--
-
```

![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)

<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>
![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
Loading
Loading