이 게시글은 현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList) 시리즈중 하나입니다Vite 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing Library & Vitest로 테스트 하기, CI 적용하기 소프트웨어 공학에서 테스트란, 소프트웨어의 품질을 보장하기 위해서 소프트웨어가 요구사항에 맞게 동작하는지, 결함이 없는지, 사용자가 기대하는 결과를 제공하는지 검증하는 과정입니다. 테스트는 왜 하는가?테스트는 코드의 안정성을 높이고, 장기적으로 생산성을 향상시키기 위해 매우 중요한 ..

이 게시글은 현업에서 사용하는 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 ..