현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList)

Vite가 널리 쓰인지도 이제 1년 가까이 되는 것 같습니다. vite를 사용해 react 프로젝트를 여러번 만든 경험으로 새로운 react 프로젝트를 시작하는 방법을 알려드리도록 하겠습니다.

뭐든 새로 배울 때는 만들면서 하는 것이 가장 좋은 것 같은데요 TodoList를 만들면서 진행하면 좋을 것 같습니다.

핵심 로직만 구현한 상태에서 실질적으로 프로젝트를 운영할 수 있는 수준의 프로젝트를 구성할 예정입니다.

다음과 같이 여러 시리즈로 구성될 것 같습니다.

1. Vite로 시작하기, TailwindCss로 TodoList UI 구성하기
2. React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기
3. MSW로 API Mocking하기, React Query 사용하기
4. React Testing Library & Jest로 테스트 하기. CI 적용하기

간단한 TodoList지만 이것 하나로 정말 많은 것을 배울 수 있죠?

 

이번 프로젝트의 스펙은 다음과 같습니다 진행하시기 전에 참고 바랍니다!

 

기본

• node: 20.x.x
• vite: 5.x.x
• react: 18.x.x
• typescript: 5.2.x
• pnpm을 사용합니다, npm, yarn 쓰셔도 됩니다!
  • (나중에 Bun이 정식 버전이 나오면 소개드리겠습니다)

스타일링

• tailwind

상태 관리

• react-query

테스트

• react-test-library
• jest
• msw

이 프로젝트는 기존에 Create React App으로 리액트를 한번이라도 개발해본 사람들을 위한 것으로 완전 처음 하시는 분들은 어려울 수 있습니다. 댓글로 요청해주시면 나중에 입문 프로젝트로 기획해보겠습니다!

꾸준히 연재할테니 많은 관심 부탁드립니다!