이 게시글은 현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList) 시리즈중 하나입니다Vite 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing Library & Jest로 테스트 하기. CI 적용하기1. MSW란?MSW는 Mock Service Worker로 클라이언트의 http 요청을 가로채 mocking한 응답을 반환해주는 라이브러리입니다. 이를 이용하여 서버와 통신하는 것 처럼 흉내낼 수 있습니다.만약 여러분이 프로젝트를 하는데 아직 서버의 API 개발이 안되었거나 문제가 있는..

이 게시글은 현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList) 시리즈중 하나입니다Vite 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing Library & Jest로 테스트 하기. CI 적용하기오늘은 스타일링까지 끝난 투두리스트의 기능을 완성하고 배포까지 해보겠습니다!1. React Hook으로 비즈니스 로직 관리하기이전 시간에는 App에서 TodoList의 데이터를 관리했습니다. 이럴 경우 다음과 같은 문제점이 생길 수 있습니다.App의 역할이 너무 거대해진다.비즈니스 로직의..

이 게시글은 현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList) 시리즈중 하나입니다Vite 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing Library & Jest로 테스트 하기. CI 적용하기1. 프로젝트 생성(Create Vite)다음 명령어를 입력하여 새로운 vite 프로젝트를 만들어봅시다!npm create vite@latest프로젝트 이름을 적어주세요~ 프레임워크를 선택해주세요~ 저희는 React로 하겠습니다 Typescript 또는 Typescript + SWC로 해..

Vite가 널리 쓰인지도 이제 1년 가까이 되는 것 같습니다. vite를 사용해 react 프로젝트를 여러번 만든 경험으로 새로운 react 프로젝트를 시작하는 방법을 알려드리도록 하겠습니다.뭐든 새로 배울 때는 만들면서 하는 것이 가장 좋은 것 같은데요 TodoList를 만들면서 진행하면 좋을 것 같습니다.핵심 로직만 구현한 상태에서 실질적으로 프로젝트를 운영할 수 있는 수준의 프로젝트를 구성할 예정입니다.다음과 같이 여러 시리즈로 구성될 것 같습니다.Vite로 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing ..