[Nodejs, axios] 영화 필터링 웹사이트

devsr·2022년 1월 23일
0
  • 프로젝트 설명: Nodejs 와 axios 를 사용한 영화 필터링 웹사이트입니다. 이전에 mongoDB를 사용하여 같은 웹사이트를 제작하였으나, 이번에는 API 에서 정보를 받아와(axios 라이브러리 사용) 웹사이트를 제작하였기에 누구나 접근 가능합니다.

"/" : DB에 연결하여 DB 에 있는 모든 영화의 제목들을 볼 수 있는 메인 페이지
"/:id" : 각 영화 제목을 누르면, 해당 영화의 구체적인 정보를 볼 수 있는 페이지
"/filter" : 연도별 및 별점 필터링 기능



주요 코드

// db.js

//movieController.js


db.js 자세히 보기 (1~22번째줄)

  • 5번째줄: axios.create()
  • 15번째줄: client.get() -> get 메서드. 정보를 가져온다. https://yts.mx/api/v2/list_movies.json?limit=50 페이지 속 data 긁어오는 것과 같다!

  • get 메서드로 대체 어떤 정보를 가져오는지 알아보자. 우선 response 변수 만들어서 console.log 해봤더니,
    data 안에, data 안에, movies 가 있었다는 것을 확인할 수 있었다.
    data.data 안의 movies 를 console.log 찍어봤더니,
    다음과 같은 정보들이 나왔다. 굿. 이것을 이용하는 것.
({
   data: {
      data: { movies }
      }
  } = await client.get("/list_movies.json", { params: { limit: 50 } })
);
({
   data: {
      data: { 
          movies:movies } //이름같으므로 생략 가능
      }
  } = await client.get("/list_movies.json", { params: { limit: 50 } })
);

let movies = [] 라고 만든 빈배열에 get 메서드로 받아온 정보를 넣는다! 참고로, movies 라는 이름이 같으므로 생략해준 것이다.


✓ Axios 란?

https://axios-http.com/docs/intro

  • Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.
  • Ajax, Fetch와 같은 웹 통신 기능을 제공하는 라이브러리입니다.
  • HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동으로 변경해 줍니다.
  • 브라우저 호환성이 뛰어납니다.

Ajax와 Axios 그리고 fetch 의 차이

profile
웹/앱 개발자

0개의 댓글