이제 이 섹션부터는
새로운 초기 프로젝트를 준비했습니다
로컬과 코드샌드박스 버전이 있습니다
코드샌드박스 버전은 이미 실행할 준비가 되어 있고
로컬 버전은 npm install을 실행해야 합니다
다운로드 받고 첨부파일을 추출해서
npm dev를 실행하시기 바랍니다
그 다음엔 이 웹사이트가 보일텐데
장소를 고르는 Placepicker 웹사이트로 아직 작동하지는 않습니다
이 섹션이 마무리될 때면
장소를 고르고 선택하거나 선택을 해제할 수 있게 됩니다
이 내용은 섹션 초기와 비교했을 때
큰 변화입니다
즉 이 앱의 버전과 비교했을 때 큰 변화입니다
모든 데이터는 백엔드로부터 fetch로 가져올 예정입니다
그리고 예를 들어, 우리가 장소를 고르고
선택을 하면
그 변동 사항 또한 백엔드에 저장될 것입니다
그러니까 이 초기 프로젝트도
백엔드 폴더와 함께 있으며
분리된 백엔드 웹 API를 담고 있습니다
백엔드 프로젝트는 리액트로 쓰이지 않았으며
이 경우 NodeJS로 쓰였습니다
하지만 전에 말했듯이 백엔드는
어느 프로그래밍 언어를 사용해서든 구축할 수 있습니다
이제 여기 아주 간단한 임시 백엔드가 있습니다
그리고 최종적으로는 전체 백엔드 로직은
앱 파일(app.js)에 상주하게 됩니다
여기 아주 간단한 백엔드 API를 설정해볼 텐데
특정 종류의 요청만 받게 하겠습니다
이전에 말씀드린 내용입니다
백엔드는 어떤 종류의 요청을 허락하고
또 어떤 요청들을 차단할지 통제합니다
그러니까 이용자가 우리가 원하는 것만
할 수 있도록 하는 겁니다
그리고 이 초기 프로젝트의 임시 백엔드 안에
예를 들어, 백엔드 URL에 getHTTP 요청을 허용해 봅시다
그 다음 /places로 유저가 고를 수 있는 장소들을
fetch로 가져옵니다
그리고 user-place 경로(route)가 있는데
사용자가 이 웹사이트에서
저장한 장소들을 받아오는 데 사용할 수 있고
그 저장된 장소들을 바꾸는 데 사용할 수 있습니다
말씀드렸듯이, 이건 간단한 백엔드입니다
여기 또 예를 들어서, 전 세계의 유저들이
유저 데이터를 공유하려 합니다
데이터 fetching을 시작하기에 가장 좋은 예시입니다
GET 요청이나 URL이라는 용어 자체로는
아무것도 알 수가 없습니다
제가 권장하는 것은
웹 개발이나 웹 기능의 기본을 복습해 보는 것입니다
그래야 이 용어들을 확실히 알 게 될 것입니다
그리고 첨부된 파일에 그런 개념들을
복습하기 좋은 자료가 있습니다
이 섹션에서는
백엔드 코드에 중점을 맞추진 않을 겁니다
이건 백엔드 개발 과정이 아니기 때문입니다
대신, 이 임시 백엔드를 사용해
리액트 앱 내부에서 연결해보겠습니다
이 내용을 이 초기 프로젝트에서 찾으실 수 있습니다