지금까지 강의를 들으면서
여러분이 배운 내용은
더 심화된 리액트 기능과 기술입니다
이제 배운 내용을 실습하면서
이 모든 개념들을 실제 예시에
적용해 보겠습니다
그래서 이번 강의부터는
새로운 예시 프로젝트를 작업해 보겠습니다
바로 음식 주문 앱입니다
여기에서 이용자가 다양한 종류의 음식을 탐색하고
그 음식을 장바구니에 담고, 장바구니에서 음식 내용을 수정하고
주문 양식으로 넘어가서
주문을 모두 검토한 뒤에
임시 백엔드로 주문을 제출합니다
백엔드 코드는 제가 제공해 드리겠습니다
이 강의는 백엔드 개발을 다루지 않기 때문입니다
하지만 프론트엔드에 해당하는 모든 요소는
처음부터 하나하나 모두 작업하겠습니다
오늘부터 작업할 이 프로젝트의 목적은 바로
백지 상태부터 시작해서 모든 요소를 작업하는 것이기 때문입니다
컴포넌트 빌드 및 구성
속성(state)과 컨텍스트(context) 작업
그리고 더 많은 것들을 할 것입니다
HTTP 요청 제어 및 전송과 이에 대한 부작용들
그리고 지금까지의 모든 강의에서 다룬
이 모든 기능들을 사용해 보겠습니다
제가 제안드리는 과제도 있습니다
이 앱, 즉 이 프로젝트 전체를
제 도움 없이 혼자 한 번 구축해 보시기 바랍니다
말씀드린대로 임시 백엔드는 제공해 드리겠습니다
해당 파일은 이 프로젝트에
이미 첨부해 두었습니다
이전대로 로컬 버전과 코드샌드박스 버전이 있습니다
만약 로컬 버전을 사용하신다면
npm install을 한 번 실행해서
프로젝트에 필요한 모든 요소를 설치해야 합니다
이 작업을 백엔드 폴더 안에서도 해야 합니다
이렇게 npm install을
두 위치 모두에서 실행했다면
npm start를 실행해야 하는데
백엔드 폴더에서 하되 해당 프로세스를 계속 실행시켜야 합니다
그 다음에 메인 프로젝트 폴더로 돌아와서
npm run dev를 실행하셔서 개발 서버를
프론트엔드에 열어 두겠습니다
그 다음에 두 프로세스를 모두 열어 두시되
프로젝트 작업 도중에는 계속 열어 두셔야 합니다
만약 코드샌드박스에서 작업하신다면
이 작업은 불필요합니다
이렇게 프로젝트의 기본 구성이 주어졌으니
여러분께 드리는 과제는
이 앱을 백지 상태부터 쭉 작업하셔서
모든 컴포넌트를 더하고
코드를 작성해서 프로젝트용 임시 음식 데이터를 가져오고
코드를 작성해서 장바구니 부분을 제어하고
주문을 임시 백엔드에 전송하기까지 작업해 보십시오
즉 백엔드 부분을 제외하고는
모두 직접 작업하는 것입니다
제공된 프로젝트의 기본 구성에
index.css가 있습니다
여기에서 할 작업은
어떤 컴포넌트를 더할지
혹은 웹사이트에 어떤 영역을 더할지에 대한 작업입니다
물론
이 모든 형식을 직접 작성하셔도 됩니다
자유롭게 하시면 됩니다
여기서의 과제는 지금까지 배운 내용을
실제 프로젝트에 직접 반영해 보는 것입니다
물론 확실히 해 두고 싶은 점은
일단 이것은 어려운 과제라는 것이고
또 여러 방식으로 완성할 수 있으므로
단 한 가지 정답만이 있지 않다는 점입니다
옳은 방식이 수십 개는 될 것입니다
그러므로 이 과제를 스스로의 방식으로 작업하는 기회로 삼으시고
남은 강의를 들으시면서
제 방식대로 작업하는 과정을 보여드릴테니
스스로 작업하신 방식과 비교해 보시거나
제 방식을 따라해 보시면서 리액트를 더 익히셔도 됩니다
이 경우에는 제가 드린 과제를
하지 않으셔도 괜찮습니다