영화 세부 정보를 반환하는 내부 API 작성 (APIkey 숨기기)

store/movie.js

fetch함수를 통해서 서버로 내용을 전송할 때 body 부분에는 문자데이터를 담아줘야 한다. 객체데이터를 담아버리면 제대로 전송을 할 수 없으니 JSON.stringify method를 통해서 객체데이터 내용을 json문자로 만들어서 body에 담아 /api/movie라는 내부주소로 post method와 함께 전송할 수 있게 된다.

 

api/movie.js

그럼 movie.js의 서버코드가 request라는 이름의 변수로 받아서 그 request에 우리가 담았던 body라는 속성을 json의 parse method로 분석하여 다시 객체 데이터로 결과를 내어줄 수 있다. 이때 title과 page만 담고 id는 따로 담아주지않았기에 삼항연산자에서 : 뒤의 코드를 실행하게 된다. 그래서 url이 fetch함수를 통해 전송이 되고 그것을 json으로 분석한 다음에 그 결과를 response 객체에서 정상적인 응답의 상태코드(200)와 json method로 다시 내어줄 수가 있는 것이다.

 

이를 통해 api키는 서버에만 담기게 되고 store폴더에 있는 위의 사진 부분에 fetch함수를 통해서는 이제 api키 내용이 보이지 않게 된다. -> api키 정보를 서버로 숨길 수 있게 됨!