프론트엔드 기술 스택

스택 선정 기준

1. 낮은 러닝 커브
2. 활발한 생태계
3. 친절한 공식문서
4. 팀원 모두의 사용 경험

기본

(24.07.09 기준)

• React v18.3.1
• React-Router v6.24.1
• TypeScript 5.5
• Webpack v5.92.1
• ESLint
• Prettier
• babel

브라우저 지원 범위

• 데스크탑, 테블릿, 모바일
• 크롬, 사파리, 파이어폭스, 오페라, 엣지

패키지 라이브러리

• yarn
  • npm의 보안 문제 해결
  • 여러 패키지를 병렬적으로 설치하기 때문에 속도가 빠르다
  • 최근에는 npm보다 yarn을 더 많이 사용하는 추세
  • 초기에 npm을 통해 별도로 설치해야 함

스타일 라이브러리

• emotion

  • CSS-in-CSS 방식보다는 초기 로딩을 비롯해 속도가 느리다는 단점이 있으나 CSS-in-CSS를 사용해야 할 정도로 속도를 올려야 할 필요가 없음
  • props로 전달해서 동적 스타일링 가능
  • styled-components를 모두가 사용해 봤기 때문에 러닝 커브는 높지 않을 것으로 판단
  • css, style의 2가지 기능 제공: 동적, 정적 상황에 맞게 사용할 수 있음
    • style을 우선으로 사용하되 동적 스타일링 등 필요한 상황이라면 css를 유연하게 사용
  • ThemeProvider 사용

• CSS Loader 사용

상태 관리 라이브러리

로컬 상태 관리

• React

전역 상태 관리

• Recoil
  • 현재 도입은 하지 않지만 추후 도입이 필요한 경우 바로 도입
    • 예) 로그인 정보 저장
    • 서비스의 핵심 기능이 전역 상태에 의존하고 있지 않음
    • 팀원 모두가 사용해봄
    • 비록 업데이트가 로그인 정보 정도의 단순한 데이터는 리코일로 관리해도 충분

서버 상태 관리

• TanStack Query + devtools
  • 데이터의 사용이나 동기화 및 업데이트 처리가 간편하기 때문
  • 데이터의 상태(로딩 중, 에러, 성공 등)에 따른 UI/UX 처리가 간편하기 때문

테스트 범위 및 도구

• Jest
  • 테스트 도구를 정하기에는 디자인, 기획 픽스가 안 된 상황
  • 만약 사용한다면 Jest로 기본 로직 테스트만 할 것 같다.

Mocking

• MSW
  • 프로덕션, 테스트 등 다양한 상황에 활용 가능

배포

• AWS(LMS에 안내되어 있음)