자, 이제 장소를
성공적으로 가져오고 있습니다
그 데이터에 할 일이 한 가지 더 남았습니다
places를 availablePlaces로 설정하기 전에 할 일입니다
이 앱에서는
장소들을 사용자의 거리에 따라 분류하고 싶습니다
그러기 위해서 이 loc.js 파일을 사용하겠습니다
분류하는 데 필요한 기능과 함수들이
여기 전부 있습니다
그래서 마지막에는, 두 위치의 거리를
계산하겠습니다
이 때 위도와 경도를 사용하겠습니다
이 파일은 이미 여기 있지만 AvailablePlaces에는
사용자의 위치를 가져와야 합니다
그 다음에 availablePlaces를 설정할 수 있기 때문입니다
이미 이전 강의에서도 다룬 내용입니다
여기서 다시 해 보겠습니다
왜냐하면 브라우저에 내장되어 있는 navigator 객체로
브라우저 유저의 위치를 fetch할 수 있기 때문입니다
이건 리액트나 제가 제공하는 것이 아니라
브라우저로부터 제공 받는 것입니다
이 navigator 객체에는 위치를 위한 geolocation 객체가 있고
getCurrenPostion이라는 메소드가 있습니다
그리고 이 메소드를 불러서 사용자의 현재 위치를
불러올 수 있습니다
현재 위치를 받는 건
HTTP 요청을 보내는 것처럼 시간이 좀 소요됩니다
위치는 즉각적으로 제공되지 않으며
그래서 getCurrentPosition은
나중에 브라우저가 실행할 함수를
가져오고 동작합니다
위치가 fetch됐다는 전체 하에 그렇습니다
그래서 여기서는 async await를 사용할 수 없습니다
왜냐하면 getCurrentPosition은 프로미스(promise)를 반환하지 않기 때문입니다
하지만 여기선 이 콜백(callback) 패턴을 사용하여
위치 정보를 받았을 때 실행되어야 하는
코드를 정의합니다
그리고 이 함수는 데이터를 받은 후에만
브라우저로부터 실행될 것이며
그 다음 position 객체를 받고
그 안에는 사용자의 좌표가 있을 겁니다
그러니까 이 함수 안에서
availablePlaces를 설정해야 합니다
근데 그 전에 분류부터 해야 합니다
그러기 위해서 sortedPlaces 상수나 변수를 추가하고
sortPlacesByDistance를 불러온
결과를 담습니다
sortPlacesByDistance는 loc.js 파일의 함수이기 때문에
꼭 이 AvailablePlaces.jsx 파일에
import로 가져와야 합니다
다 가져왔으니
여기에 호출하고 resData.places를 전달합니다
그리고 사용자의 위도와 경도 좌표 또한
sortPlacesByDistance에 전달해야 합니다
그리고 그건 position 객체에서 받을 수 있습니다
여기, position.corrds.latitude가 위도
position.coords.longitude가 경도입니다
그리고 이제 sortedPlaces를
AvailablePlaces로 설정해줍니다
제가 강조하고 싶은 건
이 돌려받을 데이터를
당연히 여러분 마음대로 사용해도 됩니다
시간이 걸리는 동작들도 수행할 수 있습니다
그리고 나서 그냥 AvailablePlaces를
업데이트할 수도 있습니다
하지만 여기서 주의해야 할 것이 있습니다
우리가 async await을 사용하지 않고
대신 이 콜백 함수를 사용하기 때문에
setIsFetching을 부르는 위치를 바꾸고
False로 설정해야 합니다
왜냐하면 지금은 이 밑에
False가 너무 일찍 지정되었기 때문입니다
그리고 또 해야 하는 것은
위치의 분류와 fetching이 다 될 때까지 기다리는 것입니다
하지만 여기서 await을 할 수 없고
작동되지도 않을 것이기 때문에 setIsFetching을 여기서 부를 수 없습니다
이 코드가 너무 일찍 실행될 것이기 때문입니다
자바는 이 코드를 실행하는 데
콜백 함수가 올 때까지 기다리지 않습니다
그러니까, 이 코드를 불러오는 시점은
우리가 position 불러오는 함수를 실행하는 즉시입니다
그래서 setIsFetching을
이 콜백 함수 안으로 이동합니다
그전에 AvailablePlaces는 물론 설정해야 합니다
그리고 에러가 있다면, 그것부터 설정하고
불러와야 합니다
장소 fetching과 분류가 끝났거나
에러가 있을 때 그래야 isFetching을 False로
설정할 수 있습니다
이제 저장을 해봅시다
새로고침을 해 보면
사용자의 위치를 받기 위한 허가를 받습니다
그리고 그 전까지 로딩 문구가 보입니다
그러고 나서, 제 위치 정보를 받아갑니다
그리고 그러는 동안 계속 로딩 문구가 있습니다
하지만 위치를 가져오고 나면
장소들이 표시됩니다
그리고 앱을 새로고침하면, 이미 허가를 받았기 때문에
더 빨리 진행됩니다
그래도 위치를 불러오는데
시간이 조금 걸릴 수 있습니다