이제 이 AvailablePlaces 파일에 있는
코드를 조금 정리해보고
조금 더 보기 좋게 만들겠습니다
따로 헬퍼(helper) 파일을 추가해보겠습니다
loc.js 파일 옆에다가 이름은 http.js로 지을 건데
꼭 하실 필요는 없습니다
하지만 비동기 함수를 따로 추가해서
fetchAvailablePlaces라고 부르고 내보내겠습니다
그리고 데이터를 가져오는 코드를 넣어서
이 코드가 이 http.js 파일에서 place 데이터를
fetch로 가져오도록 합니다
요청을 보냈던 이 코드를 가지고
AvailablePlaces에서 잘라내도 되는지 확인해보겠습니다
그러고 나서 이 fetchAvailablePlaces에 이동해보겠습니다
그리고 응답이 올바른지 확인하고 나서
에러가 발생하지 않았다면
여기에 resData.places도 반환하겠습니다
그래서 이게 기능성(utility) 함수로써
요청을 보내기 위해 호출하거나
에러나 places를 돌려받기 위해 호출하겠습니다
다시 AvailablePlaces에는 이제 이 함수를
http.js 파일에서 추가해줍니다
여기선 함수 이름을 fetchAvailablePlaces로 지었습니다
이제 try 블록 안에 그 함수를 불러오면
fetchAvailablePlaces에 에러가 발생할 수 있습니다
우리 때문이든
fetch 함수 때문이든 발생할 겁니다
그러니 여기 try 블록 안에서 실행하면 아직 await 상태입니다
왜냐하면 fetchAvailablePlaces가 프로미스(promise)를 반환하기 때문입니다
비동기를 사용한 모든 함수는
프로미스를 반환합니다
그래서 여기 이걸 await해서
places든 에러든 받을 수 있지만
하지만 이제 이 places를
여기다 resData.places 대신 사용할 수 있습니다
나머지 코드는 그대로 두어도 됩니다
하지만 이제 데이터를 가져오는 코드를 외부로 분리할 수 있습니다
즉 HTTP 요청을 보내는 실제 코드입니다
그리고 그걸 다른 애플리케이션 내
같은 데이터를 필요한 곳에 쓸 수 있습니다
그럼 저장을 하고 새로고침을 해보면
잘 작동되는 게 보이실 거고
여전히 장소를 여기에 가져오고 있습니다