🐳 FE 기술스택

🍀 기술스택 선정 기준

• 짧은 기간동안 가장 좋은 퍼포먼스를 내기 위한 기술스택.
• 2명의 멤버가 모두 사용해 본 기술 위주로 선택.

🕺 세부 기술 스택

Yarn berry(yarn 3)

• toss yarn berry 정리
• 리멤버 yarn berry 도입기

Next.js v13

• SEO를 위한 SSR을 쉽게 사용할 수 있음.
• Next V13이 이슈가 많긴 해도 Turbopack , next/image 개선, next/link , /app/ 디렉터리 사용등의 이점이 있기 때문에 선택하였음.
• Next.js unplugged 이유는 yarn berry pnp 기능을 사용할 때 build가 실패하기 때문이다.
  • https://github.com/vercel/next.js/issues/42427
• Next.js 13 변경점

React v18

• React는 팀원 모두 경험을 가지고 있음.
• v18 변경점

styled-Components

• CSS in JS 방식
• Emotion을 사용하려고 했지만, Emotion 이 아직 app dir을 지원하지 않음.
  • https://github.com/emotion-js/emotion/issues/2928
  • https://beta.nextjs.org/docs/styling/css-in-js
• styled-coomponents 의 버전을 beta 버전으로 사용하는 이유
  • https://github.com/vercel/next.js/issues/42526#issuecomment-1323549851

TanStack Query

• server state lib.
• react query의 이름이 v4부터 TanStack Query로 변경.
• 공식문서

recoil

• client state lib.
• redux를 선택하지 않은 이유는 client state만 관리하기 위해서 작성해야할 보일러플레이트가 많고, third party library가 포함되어있는 있는 리덕스 및 리덕스 툴킷을 사용하기보단 hook 형식으로 되어있고 atom단위로 해당 책임의 컴포넌트에서만 필요할 때 가져다 쓸 수 있게 편리하게 사용할 수 있는 recoil를 선택.
• 경험은 별로 없지만 공식문서를 보면 충분히 해결될 것이라 생각하기에 선택하게 됨.

TypeScript

• TypeScript는 필수적인 선택!(컴파일 단계에서 오류를 포착할 수 있고, 자동완성의 장점 또한 가진다. 그 외 등등 장점이 너무 많음)

Unit Test

• Jest
• react-testing-library
• 견고한 프로그램을 만들기 위해서는 Test Code 작성은 필수이다.
• 테스트에 대한 오해가 분명히 존재할 순 있지만, 테스트가 개발 속도를 늦춘다고 생각하지 않고 테스트를 진행했을 때의 이점이 압도적으로 많기 때문에 Unit Test 진행.

E2E Test

• Cypress
• 대중적으로 많이 사용하고 정보도 가장 많은 Cypress 선택.

ESLint

• Code Convention
• airbnb기반으로 진행하되 서로 rule을 정해서 사용하면 좋을 것 같음. 개발로 맞춰가는 것이 필요할 듯.

Husky

• Git hook 도구
• pre commit , commitlint 적용 예정.
• Git Commit Convention은 commitlint 기본 룰로 진행.

Github Action

• CI

  • lint
  • unit test
  • e2e test(cypress)
  • code coverage(codecov)
  • lighthouse
  • next bundle size
  • chatgpt review

• CD

  • 배포(Vercel 사용할 것 같음)

Sentry

• 프론트엔드 에러 추적
• react guide

react-ga4(보류)

• 기획자분들과 상의가 필요하므로 일단 보류
• react-ga4

next-pwa

• pwa란?
• 스토어 배포를 위해서 필수임. 물론 웹뷰 제작 후 배포도 있지만, PWA로 선택.
• next-pwa

🎯 아키텍처

• Project Structure

📦 popo-client
 ┣ 📂 .github
 ┣ 📂 .husky
 ┣ 📂 .yarn
 ┣ 📂 @types
 ┣ 📂 __mocks__
 ┣ 📂 cypress
 ┣ 📂 images
 ┣ 📂 public
 ┣ 📂 src
 ┃ ┣ 📂 app
 ┃ ┃ ┣ 📂 api
 ┃ ┃ ┣ 📜 head.tsx
 ┃ ┃ ┣ 📜 layout.tsx
 ┃ ┃ ┣ 📜 page.tsx
 ┃ ┣ 📂 components
 ┃ ┣ 📂 lib
 ┃ ┣ 📂 styles
 ┃ ┣ 📂 utils
 ┣ 📜 .eslintrc.js
 ┣ 📜 .gitignore
 ┣ 📜 .lintstagedrc.json
 ┣ 📜 .pnp.cjs
 ┣ 📜 .pnp.loader.mjs
 ┣ 📜 .yarnrc.yml
 ┣ 📜 .commitlint.config.js
 ┣ 📜 cypress.config.ts
 ┣ 📜 jest.config.js
 ┣ 📜 jest.setup.js
 ┣ 📜 LICENSE
 ┣ 📜 lighthouserc.js
 ┣ 📜 next.config.js
 ┣ 📜 package.json
 ┣ 📜 README.md
 ┣ 📜 tsconfig.json
 ┗ 📜 yarn.lock