리액트 앱과 임시 백엔드 사이의
연결을 만들어 봅시다
이제 주의해야할 것은
백엔드 서버가 실행 중이라는 점입니다
그러므로 로컬로 사용하려고 하기엔
npm run dev로 실행하기 충분치 않습니다
대신, 터미널 창이 따로 필요합니다
그래야 npm run dev 실행을 유지할 수 있습니다
백엔드 폴더를 디렉토리로 설정해야 합니다
그 다음 node app.js를 실행해서 백엔드 서버를 시작합니다
이게 가능하려면 Node.js를 설치해야 합니다
다시 말씀드리지만, 코드샌드박스에서는 필요 없습니다
거기에서는 자동 실행이 됩니다
하지만 로컬 방식을 사용할 경우
Node.js를 시스템에 설치해야 합니다
Mac OS, 윈도우, 리눅스를 모두 지원합니다
그러고 나면 node app.js를 실행해야 합니다
이 백엔드 폴더에 실행해야 하고
실행이 잘 유지될 수 있게 해야합니다
그래야 두 개의 프로세스를 실행하는데
실행 중인 두 프로세스 모두
이 백엔드에 연결해야 하기 때문입니다
그럼 연결해 봅시다
가능한 장소들을 fetch로 가져오는 것부터 시작해봅시다
그래서 이 아래쪽 박스에서
웹사이트 방문자들이 고르고 선택한 장소들을
여기 보여줄 수 있도록 합니다
비슷한 프로젝트로 작업을 했던
이전과는 다르게 이번 과정에서는
이제 이 장소들은 리액트 프로젝트의 일부가 아닙니다
장소의 데이터와 이미지들은
이 프로젝트에 속하지 않습니다
대신, 데이터는 전부 백엔드에 저장되어 있고
API를 통해 접근이 가능합니다
전에 말씀드렸던 노출된 endpoint를 사용하면 가능합니다
그러니까 이제 리액트 코드 내에서 HTTP 요청을
백엔드 코드로 보내서 데이터 목록을 가져와야 합니다
이 초기 앱 안에
제가 준비해뒀는데
분리된 AvailablePlaces 컴포넌트가 있습니다
고를 수 있는 장소들을 나타내주는 역할을 합니다
그리고 여기서, 장소 데이터가
임시 백엔드 서버로부터 fetch되는 것입니다
백엔드 API는 프로젝트의 일부로 제가 제공해드릴 겁니다
이전 강의들에서는
localStorage에서 데이터를 가져오기 위해
getItem 메소드를 사용하기도 했습니다
localStorage 즉 로컬 저장소의 큰 장점은
실시간으로 접속할 수 있다는 것이고
가져오려는 데이터가 즉각 준비되어 있다는 겁니다
기다릴 필요가 없습니다
그러니까 localStorage를 사용하면
예를 들어, AvailablePlaces를
리액트의 useState를 가져와서 상태로 관리할 수 있습니다
여기 상태가 있습니다
그리고 여기 AvailablePlaces가 있습니다
이 앱의 경우는 그렇습니다
그리고 초기에 가지고 있는 이 AvailablePlaces의 배열도
localStorage에서 가져올 수 있습니다
그래서 그 places을 fetch해서
그걸 여기서 다시 돌려받으면
이게 places의 배열이라고 가정해봅시다
그러면 그 places를 여기서 쓸수 있습니다
그러면 이건 localStorage로는 작동하지만
백엔드로부터 데이터를 받지는 못합니다
왜냐하면 백엔드와 소통할 때는
HTTP 요청을 보내야 하고
그건 인터넷을 통해 백엔드로 전달되기 때문입니다
그 다음 백엔드 서버가 필요한 작업을 해서
응답을 보내줍니다
그리고 그건 시간이 조금 소요됩니다
즉각적인 과정은 아닙니다
밀리초 단위나 초 단위의 시간이 소요될 수 있습니다
하지만 여기서 문제는
만약 이 과정이 밀리초나 초 단위가 소요된다면
이 컴포넌트는 그 데이터를 기다릴 수가 없습니다
왜냐하면 이 컴포넌트 함수는 그 어떤 데이터도
기다리지 않기 때문입니다
대신 거의 바로
즉각적으로 실행됩니다
그러니까 이 places 데이터가 초기에 준비돼 있지 않으면
일단 이 컴포넌트를 데이터 없이 렌더링 해야 하고
그 다음 데이터가 준비됐을 때 업데이트해야 합니다
그러니까 여기서 뭘 해야 하면
일단 빈 배열을 초기 값으로 시작하고
그 availablePlaces를 이 밑에서 사용합니다
그 다음 HTTP 요청을 보내서
데이터가 준비되면 이 상태를 업데이트해줍니다
그러면 UI가 다시 렌더링되어 업데이트가 됩니다