JS로 OMDb API 사용하기

API란?

 

Appication Programming Interface

두 소프트웨어(App)의 구성 요소가 프로토콜(통신규약) 집합을 사용하여 서로 요청과 응답하며 통신할 수 있게 되는 방법에 대해 정의해 놓은 것으로 그 정보는 API 문서에 들어 있다.

 

API는 생성 시기와 생성 이유에 따라 네 가지 방식으로 작동할 수 있다.

 

1. SOAP APIs : 단순 객체 접근(Simple Object Access) 프로토콜을 사용하는 API로, XLM을 사용하여 메세지를 교환. 

                        과거에 더 많이 사용되었으며 유연성이 떨어진다.

 

2. RPC APIs : 원격 프로시저 호출이라고도 불리는 이 API는 클라이언트가 서버에 대한 함수나 프로시저를 마치고,

                     서버는 클라이언트에게 다시 결과를 보낸다.

 

3. Websocket APIs :  웹소켓 API는 JSON 객체를 사용하여 데이터를 전달하고

                                  클라이언트와 서버 간의 양방향 통신을 지원하는 최신 웹 API이다.

                                  서버가 연결된 클라이언트에 콜백 메세지를 전송할 수 있어 REST API보다 효율적이다.

 

4. REST APIs : 오늘날 가장 많이 사용되고 유연한 API로,

                         클라이언트와 서버는  HTTP를 사용하여 데이터를 교환하는 Web API의 일종이다.

                         REST는 Representational State Transfer의 줄임말로,

                        클라이언트가 서버 데이터에 접근하는 데에 사용할 수 있는 GET, PUT, DELETE 등의 함수 집합을 뜻함.

                        특징은 서버가 요청들 사이의 클라이언트 데이터를 저장하지 않는 것을 의미하는 무상태(stateless).

                        서버에 대한 클라이언트 요청은 웹 사이트를 방문하기 위해 브라우저에 입력하는 URL과 비슷하고,

                        서버의 응답은 웹 페이지의 그래픽 요소가 없는 일반 데이터이다.

                         API를 통해 기존 소프트웨어 시스템의 코드를 활용할 수 있고,

                        기존 내부 DB에 접근하는 것과 비슷하게 접근할 수 있는 장점이 있다.

                        REST API는 사용자 확인과 액세스 권한을 확인하는 인증 토큰과

                        액세스 권한을 가진 API를 호출하는 프로그램인지를 확인하는 API 키를 사용하여 API를 보호 한다.

 

 

 

 

 

https://www.omdbapi.com/

OMDb API - The Open Movie Database

 

 

 

 

 

 

 

 

fetch(리소스)를 실행하면 요청(request)이 성공하든 실패하든 해당 요청 통신에 대한 응답(response) 객체를 얻게 된다.

이 때 반환되는 응답 객체가 Promise 객체(인스턴스)이다.  

 cf. fetch()의 두 번째 인수에 초기화에 사용되는 객체를 정의하는데, 따로 명시하지 않아도 함수의 동작에는 문제가 없다. 

 

위에 보이는 URL 형태의 리소스를 보면 그 구성이 '프로토콜 + 도메인 + ? + 쿼리스트링(key=value&ley=value.. 형식)

 

위의 콜백 스타일로 작성하다보면, 콜백 지옥이라는 현상에 빠지는 상황이 만들어질 때도 있으므로

좀 더 모던한 방식으로 async(비동기) 함수의 await 키워드로 작성할 수 있게 되었다 !

 

 

 

 

 

 

응답된 결과를 json()을 통해 확인해보면 위와 같은 형태인 것을 콘솔에서 확인할 수 있다.

이것 역시 Promise 객체로, 그 속성으로 Response, Search, totalResult이 있고,

그 중에 Search라는 속성은 요소가 객체들인 배열을 속성값으로 가지고 있다.

객체 형태인 배열의 요소들을 살펴보면 영화의 제목, 개봉연도, ID, 타입, 포스터를 속성으로 하고 있는 영화 정보가 담겨있는 것을 볼 수 있다.  

totalResults는 검색한 키워드를 포함하고 있는 결과들의 개수를 의미한다.

하지만, fetch 함수로 응답된 정보는 Search에서 확인하듯 한 번에 10개의 검색 결과만 불러들여지는 것을 알 수 있다.

 

 

 

 

이 영화 정보를 활용하기 위해 변수에 그 정보를 담아보고자 한다.

그 때 3개의 속성 중 한 개 속성의 속성값만 한 변수에 담고자 할 때, 객체 구조분해할당 문법(여러 개도 상관없음)으로 작성할 수 있다 !

영화의 정보들을 담고 있는 Search 속성을 불러들여 그 속성값을 movies라는 변수(명)에 담을 때, 기존 속성명 옆에 콜론(:)과 설정(/ 변경)하고 싶은 새 변수명을 써주면, Search 대신 새 이름에 기존 속성값들을 연결해 사용할 수 있게 된다 ! 

 

movies를 출력해보면 아까 Search의 속성값들이 출력되는 것을 확인할 수 있다.

 

 

 

 

배열을 반복하는 for문인 for of 문을 사용하여 영화 정보 목록에서 하나의 영화 정보에 접근할 수 있겠다.

 

 

 

 

 

 

 

HTML에 클래스 이름이 movies인 상위 요소를 만들어주고,

JS에서 querySelector로 요소를 변수에 담아 사용한다.

 

 

 

 

클래스명이 movies인 요소의 하위 요소로 클래스명이 movie인 요소들을 JS로 만들어 HTML에 렌더되도록 작성해준다.

이 때, 요소를 생성한 뒤 클래스 이름을 classList.add(클래스명)으로 붙여주는 것을 볼 수 있다.

배열이 for문을 돌면서 for문 안에 작성한 작업들에 사용되어 의도한 위의 HTML 결과를 만들어낸다.

 

 

 

 

CSS 스타일링

 

 

 

 

 

 

 

 

 

매개변수 별로 사용되는 의미를 살펴볼 때,

위의 By ID or Title 카테고리는

매개변수 i, t, type, y, plot, r, callback, v를 통해

ID나 title, 개봉연도, 간략한 혹은 긴 줄거리 등의 상세 정보를 불러올 수 있고, 

위의 By Search 카테고리는  

매개변수 s, type, y, r, page, callback, v를 통해

title, 개봉연도, 페이지 번호 등의 목록 정보를 불러올 수 있다.

 

 

 

Working on..