안녕하세요 Lotts 입니다 😉
nomadCoders에서 ReactJS로 웹 서비스만들기 강의를 듣고 있습니다.
강의에서는 영화 정보를 yts사이트에서 가져와서 사용하고 있습니다만
이번 포스팅에서 소개할 내용은
우리에게 익숙한 네이버 검색 영화 API를 이용하여
영화 정보를 React에서 받아보도록 하겠습니다
👏👏👏
니꼴라스쌤의 ReacJS로 웹 서비스 만들기가 궁금하신 분들을 위해 링크를 걸어놓겠습니다
우선 오늘의 포스팅에서는
✅ ReactJS 시작하기
✅ 네이버 검색 영화 API 사전 준비
에 대해서 알아보겠습니다
📢 React 시작하기
React App를 시작할 때 여러 방법이 있지만
가장 추천하는 방법으로 진행하도록 할게요
가장 간편하고 쉬운 방법으로..
우선 React App을 만들기 전에
필요한 개발 환경을 만들어 보도록 하겠습니다 😉
🔅 사전 준비
node.js 8.10 이상 버전 설치 및 npm 5.6 이상 버전을 node.js 사이트에 접속하여 설치를 줍니다
그다음 npx를 설치해 줍니다
npm install npx -g💡NPX ?
npx는 npm 5.2+ 버전의 패키지 실행 도구입니다
React App을 만들기 위한 사전 준비는 끝났습니다
이제 React App을 만들어보도록 하겠습니다 😊😊
🔅 Create React App
npx create-react-app movie_app
cd movie_app
npm start
자, React App을 만들었습니다.
응? 이게 끝인가? 😲 생각하시는 분들도 있겠지만
맞습니다 👌👌
React의 새로운 싱글 페이지 애플리케이션을 만들었습니다
👏👏👏
그래도 수상하다 여기신다면 😤😤
React 공식 사이트에 Create React App 를 보시면 확인할 수 있습니다 🔎
공식 사이트 그대로 했습니다 역시 공식 사이트가 쵝오
다음으로
☝ naver 검색 API 등록하기
☝ naver 검색 API 사용하기
☝ naver 검색 API 예제
에 대해서 알아보겠습니다
React의 기본적인 개념인 Component, Props, state, 생명주기에 대해서는
저도 React를 공부 중이라
나중에 따로 포스팅해보도록 하겠습니다 🙏
📢 네이버 검색 영화 API 등록하기
우선 네이버 검색 API 영화 개발 가이드에 접속을 합니다 💨
다음 오픈 API 이용 신청을 선택해주세요
만약 네이버 오픈 API가 처음이시면 애플리케이션 등록 먼저 해주셔야 합니다
간단하게 애플리케이션 이름을 등록하고
사용 API를 ❛ 검색 ❜ 으로 하시면 됩니다
WEB설정은 로컬에서 테스트하기 때문에 localhost:3000로 설정하였습니다 😄
등록과 오픈 API 이용 신청이 완료되면
내 애플리케이션의 client ID, client Secret가 보이실 겁니다
API 호출 시 사용하게 되는 key입니다
매우 중요한 정보입니다
❗ Client Secret 키가 노출되지 않게 조심하게 사용해야 합니다 ❗
네이버 영화 API를 사용하기 위한 준비가 되었습니다
다음 사용방법을 알아보겠습니다. 🔎
📢네이버 검색 영화 API 사용
사용법은 위에서 언급했던 네이버 검색 API 영화 개발 가이드에 상세히 나와있습니다만
영화 App를 만들기 위해
제가 사용한 정보에 대해서 말씀드리겠습니다 🤘🤘
✅ API 기본 정보
https://openapi.naver.com/v1/search/movie.json - JSON 포맷
✅ 요청 변수
query - 필수 - 검색을 원하는 질의
display - 선택 - 검색 결과 출력 건수
✅ 출력 결과
items - items 속성으로 표현된 개별 검색 결과
title - 영화의 제목
image - 썸네일 이미지의 URL
director - 영화의 감독
actor - 영화의 출연 배우
userRating - 유저들의 평점
link - 영화의 하이퍼텍스트 link
pubDate - 영화 제작연도
API를 사용하기 위한 준비는 끝났습니다 😉
하지만
해당 정보를 토대로
실제로 호출해봐야 이해가 쉬울 거 같습니다 👌👌
그래서 테스트로 호출하여 확인해 보도록 하겠습니다 🔎
📢네이버 검색 영화 API 예제
실제 정보가 어떻게 나오는지 확인하기 위해
postman을 이용하여 확인해보도록 하겠습니다
⚪ Request
Params에 query(검색) 은 아이언맨
display(검색 결과)는 20개로 설정하였습니다
🔵 Response
정상적으로 아래와 같은 응답 메시지를 받을 수 있습니다
👏👏
items 안에 영화 정보가 개별로 들어가 있는 걸 확인할 수 있습니다 🔎
{
"lastBuildDate": "Fri, 27 Mar 2020 18:20:43 +0900",
"total": 12,
"start": 1,
"display": 12,
"items": [
{
"title": "<b>아이언맨</b>",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=123684",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/1236/123684_P00_161340.JPG",
"subtitle": "",
"pubDate": "2014",
"director": "김용수|",
"actor": "이동욱|신세경|김갑수|",
"userRating": "4.94"
},
{
"title": "<b>아이언맨</b> & 캡틴 아메리카",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=133519",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/1335/133519_P01_183929.jpg",
"subtitle": "Iron Man & Captain America: Heroes United",
"pubDate": "2014",
"director": "",
"actor": "아드리안 패스더|로저 크레이그 스미스|",
"userRating": "9.00"
},
{
"title": "<b>아이언맨</b> 3",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=70254",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/0702/70254_P35_153229.jpg",
"subtitle": "Iron Man 3",
"pubDate": "2013",
"director": "셰인 블랙|",
"actor": "로버트 다우니 주니어|기네스 팰트로|벤 킹슬리|돈 치들|가이 피어스|레베카 홀|",
"userRating": "8.86"
},
{
"title": "<b>아이언 맨</b>: 라이즈 오브 테크노보어",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=106595",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/1065/106595_P01_175329.jpg",
"subtitle": "Iron Man: Rise of Technovore",
"pubDate": "2013",
"director": "하마사키 히로시|",
"actor": "후지와라 케이지|이리노 미유|",
"userRating": "3.28"
},
{
"title": "<b>아이언맨</b> & 헐크",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=133520",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/1335/133520_P01_182323.jpg",
"subtitle": "Iron Man & Hulk: Heroes United",
"pubDate": "2013",
"director": "에릭 라돔스키|레오 릴리|",
"actor": "아드리안 패스더|프레드 타타시오르|",
"userRating": "4.00"
},
{
"title": "<b>아이언맨</b> 2",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=49008",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/0490/49008_P52_162130.jpg",
"subtitle": "Iron Man 2",
"pubDate": "2010",
"director": "존 파브로|",
"actor": "로버트 다우니 주니어|기네스 팰트로|돈 치들|스칼렛 요한슨|미키 루크|",
"userRating": "7.36"
},
{
"title": "<b>아이언맨</b>",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=44885",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/0448/D4885-01.jpg",
"subtitle": "Iron Man",
"pubDate": "2008",
"director": "존 파브로|",
"actor": "로버트 다우니 주니어|테렌스 하워드|제프 브리지스|기네스 팰트로|",
"userRating": "8.91"
},
{
"title": "인빈서블 <b>아이언 맨</b>",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=66121",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/0661/F6121-01.jpg",
"subtitle": "The Invincible Iron Man",
"pubDate": "2007",
"director": "프랭크 포어|",
"actor": "마크 워든|구엔돌린 예오|",
"userRating": "7.24"
},
{
"title": "특수공작원 <b>아이언맨</b> - 시리즈",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=74459",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/0744/74459_P04_205653.jpg",
"subtitle": "Cover Up",
"pubDate": "1984",
"director": "필 본델리|리처드 A. 콜라|피터 크레인|돈 칼로스 듀너웨이|월터 그루먼|존 D. 핸콕|제프리 헤이든|시드니 헤이어스|크리스토퍼 히블러|브루스 케슬러|가이 마거|버나드 맥이비티|아서 알랜 세이들먼|마이클 베자|돈 웨이스|",
"actor": "제니퍼 오닐|리차드 앤더슨|미켈티 윌리암슨|이레나 페리스|데이너 스파크스|잉그리드 앤더슨|데보라 러드윅 데이비스|존 에릭 히섬|",
"userRating": "7.63"
},
{
"title": "특수공작원 <b>아이언맨</b>",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=74460",
"image": "",
"subtitle": "Cover Up",
"pubDate": "1984",
"director": "피터 크레인|",
"actor": "리차드 앤더슨|피터 브라운|메리 크로스비|캔디스 댈리|패트릭 고먼|존 에릭 히섬|",
"userRating": "9.00"
},
{
"title": "<b>아이언 맨</b>",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=77056",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/0770/77056_P01_055722.jpg",
"subtitle": "Iron Man",
"pubDate": "1951",
"director": "조셉 페브니|",
"actor": "제프 캔들러|에블린 키예스|",
"userRating": "5.37"
},
{
"title": "<b>아이언 맨</b>",
"link": "https://movie.naver.com/movie/bi/mi/basic.nhn?code=77057",
"image": "https://ssl.pstatic.net/imgmovie/mdi/mit110/0770/77057_P01_092258.jpg",
"subtitle": "Iron Man",
"pubDate": "1931",
"director": "토드 브라우닝|",
"actor": "루 에어스|로버트 암스트롱|",
"userRating": "7.54"
}
]
}
자 한번 확인해 봅시다❗❗
✅ React App 만들기
✅ 네이버 영화 API 애플리케이션 등록
✅ 네이버 영화 API 정보 확인
✅ 네이버 영화 API 사용하기
👏👏👏👏
다음 포스팅에서는
네이버 검색 API를 이용한 영화 정보를 React에서 해보도록 하겠습니다
'Programming > ReactJS' 카테고리의 다른 글
| React로 영화 검색 사이트를 만들어보자 - 세번째 네이버 API 사용 / React 배포 / CORS 설정 하기 (7) | 2020.04.03 |
|---|---|
| React로 영화 정보를 검색해보자 - 두번째 네이버 API 사용 / CORS 설정 하기 (6) | 2020.03.31 |