Skip to content

Commit

Permalink
docs: READ.ME 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
bottlewook authored Jan 18, 2024
1 parent b8fa9ac commit 831f726
Showing 1 changed file with 50 additions and 3 deletions.
53 changes: 50 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
# 🚗 안전한 세차용품 정보 제공 플랫폼

- 배포 URL: https://f1-wash-pedia-fe.vercel.app
- 스토리북 URL: https://www.chromatic.com/library?appId=659a0cf1b613430cc09b3672
- 피그마 URL: https://www.figma.com/file/B4wGiQ4M4k3mtcSyyK0ATf/washpedia?type=design&node-id=241-4547&mode=design&t=IuuBM2gGXeTFVTIW-0
## 🔗 프로젝트 링크

- [배포 URL](https://f1-wash-pedia-fe.vercel.app)
- [스토리북 URL](https://www.chromatic.com/library?appId=659a0cf1b613430cc09b3672)
- [피그마 URL](https://www.figma.com/file/B4wGiQ4M4k3mtcSyyK0ATf/washpedia?type=design&node-id=241-4547&mode=design&t=IuuBM2gGXeTFVTIW-0)
- [노션 URL](https://www.notion.so/Wash-pedia-0d4a31ff248349b3a3ea202e048303d5)

<br />

Expand All @@ -17,8 +19,10 @@
<br />

## 🕹️ 기술적 성취

- 백엔드 팀과 비동기적 소통 및 협업 경험
- 기획부터 디자인까지 참여한 경험
- storybook을 이용한 시각적 회귀 테스트 및 vitest, msw를 이용한 테스트 코드 작성

<br />

Expand Down Expand Up @@ -77,3 +81,46 @@
**그 외**<br />
![Eslint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)

<br />

## 👍 성능 최적화
- 웹 폰트 다운로드 시간을 줄이기 위해 woff2 확장자 추가 및 3초 이상 폰트가 다운로드 되지 못한 경우, 기존 폰트를 사용하도록 fallback 설정
- 필요한 시점에 이미지를 불러오도록 lazy loading을 적용 및 layout shift를 방지하기 위한 Next.js image 태그 적용
- 렌더링 시 불필요한 연산을 줄이기 위해 useCallback, useMemo 사용
- dynamic import를 사용하여 빌드 타임이 아닌 런타임에서 컴포넌트를 랜더링 하도록 코드 스플리팅 적용
- react-hook-form을 사용하여 불필요한 리랜더링 방지 및 마운팅 속도 증가
- 불필요한 api 요청을 방지하기 위해 tanstack-query를 활용한 데이터 캐싱

<br />

## ✈️ 진행 사항
- 초기 환경 설정
- 린트 및 스타일 린트 설정
- tanstack-query 보일러 플레이트 제작
- redux-toolkit 보일러 플레이트 제작
- storybook 보일러 플레이트 제작
- vitest 보일러 플레이트 제작
- msw 보일러 플레이트 제작
- pretandard 폰트 설정
- 컬러 팔레트 제작
- ci / cd workflow 작성
- vercel 배포

- 20개 공통 컴포넌트 제작
- [스토리북 URL](https://www.chromatic.com/library?appId=659a0cf1b613430cc09b3672) <- 참고해주세요!

- 페이지 <- 모바일 환경에서 봐주세요!
- 메인 페이지 UI 제작 [홈 페이지](https://f1-wash-pedia-fe.vercel.app)
- 회원 가입 페이지 UI 및 테스트 코드 작성 [회원가입 페이지](https://f1-wash-pedia-fe.vercel.app/signup)
- 로그인 페이지 UI 제작 [로그인 페이지](https://f1-wash-pedia-fe.vercel.app/login)

## 🖐️ 질문 사항
1. 스토리북을 사용하고 있지만 단순히 props만 바꿔가며 변경된 UI만 볼 수 있도록 테스팅을 하고 있는데 현업에선 어떤 식으로 스토리북을 사용하나요?
2. next.js에서 private router 구현하려면 HOC를 이용하여 컴포넌트를 감싸 유저가 가진 token을 이용하여 유효한 회원인지 판단하는 로직 일반적인가요? 그게 아니라면
어떤 식으로 구현하는 게 좋을까요?
3. swiper.js를 사용하여 캐러셀을 제작했는데 초기 랜더링 시 layout shift가 발생하는 문제점이 있어요. 이 문제점을 해결할 수 있는 좋은 방법이 있을까요?

<img src="https://github.com/Kernel360/F1-WashPedia-FE/assets/103362820/db7a22ee-b51a-45f9-8ec4-52e7d4e515d6" width="300" height="400"/>



0 comments on commit 831f726

Please sign in to comment.