1. google maps 연동하기
우선 google geocoing api를 검색해서 사이트에 접속해준다.
이때 구글 아이디가 필요하며 결재수단을 지정해야 api를 사용할 수 있고 사용시 돈을 지불해야 하는데 어느정도는 무료로 사용할 수 있으며 개인적인 공부를 위해서는 무료로 제공해주는 데이터도 충분하기 때문에 무료로 사용해준다.
https://developers.google.com/maps/documentation/geocoding/start#geocoding-request-and-response-latitudelongitude-lookup
에 들어가서 docs를 쓱 봐준 후 계정과 결제수단 지정 후 사용하도록 한다.
이후 좌측의 탭에서 사용자 인증 정보를 들어간다.
키표시를 누르고 나온 키를 복사해준다.
키를 복사해 줬으면 다시 VS코드로 돌아가준다.
2. 폴더 만들어주기
루트 경로에 util이라는 폴더를 만들어주고 location.js파일을 만들어준다.
이후 axios를 설치해준다.
npm install --save axios
위의 사이트에 들어가서 우측 지오코딩 요청 및 응답을 클릭해서 아래 주소를 복사해준다.
다음으로 함수를 만들어 준다.
const axios = require('axios')
const API_KEY = '구글api키'
async function getLocation(address){
const response = await axios.get(
`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
address
)}&key=${API_KEY}`
);
const data = response.data
if(!data || data.status === "ZERO_RESULTS"){
const error = new HttpError("에러", 422)
throw error
}
const locationData = data.results[0].geometry.location
return locationData
}
modules.exports = getLocation
getLocation이라는 함수를 만들어준다.
위에서 복사한 api 요청 주소를 async await 함수를 이용해서 결과값을 받아준다.
이후 address부분에 encodeURIComponent를 이용해서 파라미터를 인코딩해주고 key값을 입력해준다.
밑의 if문을 통해서 에러를 처리하고 locationData라는 변수를 선언해 결과값인 data의 좌표를 받아와서 리턴해주면 좌표를 받아오는 함수를 완성할 수 있다.
3. api 만들기
create부분에 주소를 넣어서 post요청을 해볼 것이다.
기존의 에러처리 등은 생략하고 data 생성에 관한 것만 써보면
이때 기존의 throw로 에러를 반환한 코드는 비동기 함수로 변경되었기 때문에 반드시 next()를 이용해서 에러를 반환한다
// 기존
throw new HttpError('에러', 404)
// 수정
next(new HttpError('에러', 404))const createData = async (req, res, next) => {
const {title, address 등등} = req.body
let locationData
try{
locationData = await getLocation(address)
}catch(error){return next(error)}
const createData = {
title,
location : locationData,
address
}
DUMMY_DATA.push(createData)
res.status(201).json({createData})
}try catch문을 이용해 에러처리를 하고 await를 이용해서 location.js에서 만들어둔 getLocation에 인자값으로 address를 넣어서 결과값을 저장해둔다.
이후 createData라는 객체에 location에 getLocation의 결과값을 받아서 넣어주고
데이터에 푸쉬해주고 res.status를 통해 결과를 알려준다.
이러면 구글 api에서 address에 입력된 주소를 자동으로 변환하여 좌표값을 getLocation을 통해 추출해 낼 수 있다.
