[Vue.js] 영화 검색 사이트 예제 - 40. 영화 정보 반환 API 만들기

이제 Netlify 서버리스 함수를 활용하여 영화 정보를 반환하는 API를 만들어보자.

API 제작

/functions/movie.js

기존에 /src/store/movie.js의 _fetchMovie()에 작성했던 로직을 이관해온다.

여기서 payload를 받아와야 하고, axios를 사용할 수 있게 만들어줘야 한다.

netlify 서버리스 함수에서는 기존 프로젝트에 설치한 패키지를 그대로 사용할 수 있다.

다만 주의할 점은, 브라우저 환경이 아닌 node.js 환경에서 작동하므로 import / export 키워드 대신

require와 exports 키워드를 사용해야 하는 것에 주의한다.

axios 추가하기

로직 수정하기

서버리스 함수는 statusCode, body같은 구조를 가진 객체로 만들어야 하므로 구조를 수정해야한다.

또한, 전체 함수가 async 키워드를 사용하여 비동기로 실행되므로 .then .catch문을 try catch문으로 수정한다.

data의 Error에는 에러 내용이 단순 문자열로 들어오므로 body에 그대로 할당할 수 있다.

그 외에 다른 데이터는 객체 데이터와 같이 문자열이 아니므로 JSON.stringify를 사용한다.

 

catch문에는 에러객체가 들어오므로 다음과 같이 작성해주면 된다.

참조) axios/axios: Promise based HTTP client for the browser and node.js (github.com)

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

payload 받아오기

네트워크 상으로 데이터를 주고받을 때는 용량과 속도의 문제로 데이터를 문자열로 변환하여 송수신한다.

따라서 event 객체 또한 문자열로 들어오게 되므로 JSON.stringify를 통해 원래 데이터 형식으로 바꿔주어야 한다.

/src/store/movie.js _fetchMovie() 수정하기

서버리스 함수가 저장된 위치로 payload를 넘겨주기 위해 axios.post를 사용한다.

axios는 get방식과 post 방식이 있는데

get방식은 쿼리스트링 형태를 통해 데이터를 전달하는 방식이고

post 방식은 데이터를 body 속성에 문자열 데이터로 저장하여 전달하는 방식이다.

 

get방식보다 post방식이 더 편하므로 post를 사용한다.

비동기식으로 작동해야 하므로 비동기 형태로 만들어준다.

 

주의할 점

서버리스 함수를 이용하여 데이터를 받아올 때 에러 데이터 또한 에러 객체에 한번에 담겨서 온다.

따라서 기존 searchMovies와 같은 함수에서 에러 발생 시 메세지를 그대로 message에 사용했던 부분을 수정해주어야 한다.

기존

변경

여기서 객체 구조분해를 사용하면 기존처럼 사용할 수 있다.

결과 테스트

사이트가 정상적으로 동작하는 것을 볼 수 있다.

console.log(event)를 넣어보면, VS Code의 터미널에 이벤트 객체를 출력할 수 있다.

개발서버를 실행시킨 뒤 임의의 영화를 검색하면 다음처럼 콘솔에 이벤트 객체가 출력된다.

여기서 path 속성을 확인해보면 /.netlify/functions/movie로 해당 서버리스 함수가 제대로 동작함을 확인할 수 있다.

body 속성에는 검색에 사용된 객체 데이터가 담겨있는 것을 볼 수 있다.