Ajax 2 - 영화진흥위원회 API 실습해보기 2 : JSON으로 영화 정보 받아오기

이어서 영화진흥위원회에서 받은 키로 JSON 실습을 진행해보겠다.

---

 

 

 

 

영화진흥위원회 API 실습해보기

 

 

1. JSON의 객체 타입

 

객체 안에 키와 VALUE를 접근하는 실습을 진행했었다. 이제 본 프로젝트 실습으로 넘어가보자.

---

 

 

 

 

2. 폼 태그에서 중요한 3가지 

내가 만든 사이트의 정보를 가지고 오고 싶다면 비동기 통신의 Ajax를 사용할 수 있다. 요청을 받으면 사이트로 요청을 보낼 것이다. 클릭할 때마다 데이터를 가져오되 화면에서만 가져오는 비동기로 만들어보려고 한다.

 

폼 태그에서 제일 중요한 것은 action과 method이다. 서버의 주소와 전달할 방법, 그리고 넘겨줄 데이터가 필요하다. 

 

 

이것을 제이쿼리 방식으로 받아오려고 한다.

---

 

 

 

 

3. 기본적인 정보 작성하기

조금 전에 보았던 영화 정보를 내 웹 페이지에서 보고 싶다면 어떻게 해야 할까? 제이쿼리에 요청하여 전달한다. 제이쿼리 안에 있는 ajax를 사용하는데 객체 형태로 가져온다.

 

---

 

 

 

 

4. 버튼 클릭시 요청을 보내는 코드 작성하기

url이라는 키값에는 요청을 보낼 공간을, value에는 실제 서버의 주소이다. 여기서는 가지고 오는 것만 사용하니 get 방식으로 하면 된다. 데이터 전송에 성공했을 때는 함수를, 실패했을 때는 오류를 띄운다. 그리고 버튼을 클릭할 때 처리할 수 있는 함수를 생성하고 이 안에 조금 전에 작성한 ajax를 넣어준다.

 

 

 

 

이제 실행해보면 버튼이 뜨는데 이걸 누르면 통신 성공이라는 메시지가 뜬다. 통신은 성공했으나 성공 결과는 어디에도 나오지 않는다. 

---

 

 

 

 

5. 성공했을 때 콘솔창에 가져온 데이터 찍기

요청을 받아주려면 매개변수가 필요한데 성공했을 때의 키워드를 넣어준다. 실패했을 때는 매개변수가 필요하지 않다. 그런 다음 콘솔 로그를 찍는다.

 

 

그리고 개발자 도구 켠 상태에서 버튼을 누르면 정보가 들어와있다. 조금 전에 가져온 데이터를 자바스크립트 코드로 내 컴퓨터에 받아온 것이다.

클릭했을 때 페이지가 깜박거리지 않는데 비동기 통신으로 처리했기 때문이다.

---

 

 

 

 

 

6. 객체 형태로 특정 영화 정보 가져오기

지금 넘어온 데이터의 하위 내역을 열고 특정 영화 정보만 출력하는 코드를 작성해보려고 한다. 선생님은 인사이드아웃2를 가져오셨지만 난 5달 후의 날짜라 다른 영화 모아나 2를 가져왔다.

 

데이터를 담을 수 있는 공간에는 객체와 배열이 있다. 객체는 키값, 배열은 인덱스 값으로 구분된다. 내가 넘겨온 키 값이 일별 박스 오피스에 담겨있다. 여기에 점을 찍고 가져올 정보의 이름인 boxOfficeResult를 쓰면 정보를 가져올 수 있다.

 

 

 

 

그리고 개발자 모드를 켜고 버튼을 누르면 조금 전과 다른 화면이 보인다.

---

 

 

 

 

 

7. 계속 해서 정보 세분화하여 찾아가기

dailyBoxOfficeList를 복사하고 점을 찍고 파고 들어간다.

 

 

 

저장하고 다시 한번 실행하며 들어간다.

 

 

 

 

이번에는 객체가 아니라 배열 형태로 되어 있다. 이 중에서 첫번째 것을 꺼내려면 어떻게 해야 할까? 데이터를 꺼내는 방법은 딱 2가지이다. 객체 아니면 배열. 여기서 첫 번째 것을 꺼낼 때는 [0]을 사용하면 된다.

---

 

 

 

 

 

8. 모아나 2 영화 정보 찾기

찾으려는 영화의 배열을 쓰고 저장 후 실행해본다.

 

 

 

여기 살펴보니 movieNm에 모나아 2 영화가 있다. 다시 한번 더 꺼내면 영화 제목을 볼 수 있다.

---

 

 

 

 

 

9. 찾으려는 영화 제목 찾기

이제 영화 제목만 나올 수 있도록 출력해보겠다.

 

 

 

 

 

 

 

 

정리하면 다음과 같다.

---

 

 

 

 

학습을 마치고

이렇게 해서 영화 정보를 꺼내오는 실습을 진행해보았다. 공부를 하다 중간에 너무 졸려서 잠을 잘까 고민을 했지만 잠을 깨기 위해 영상을 3분 정도 시청하고 쉬었다가 다시 공부를 이어갔다.

자바스크립트도 이제 많이 즐거워졌다. 12월 말까지 웹 개발 인공지능반에서 배운 것들을 모두 학습한 후에 내년 1월에 자바스크립트 두꺼운 책으로 더욱 깊이있는 공부를 해볼 생각이다.

 

남은 20분 동안은 선생님이 작은 과제를 하나 내주셨는데 이건 안 하려고 한다. 자바와 연동하는 건데 지금은 파일이 어디있는지도 찾을 수 없고 이걸 알려면 JDBC 등 다른 내용을 알아야 하는 부분도 있었다. 난 인사교에 늦게 들어와서 JDBC 수업을 들을 때 하나도 알아듣지 못했다.

스스로에게 너무 화가 나서 수업을 듣다가 눈물까지 났던 기억도 난다. 그만큼 난 배우고 싶고 알고 싶은 열정이 있는 것 같다. 수료식 때 강점 검사를 해보았는데 그때 난 창의성, 호기심, 학우열, 용감성, 영성이 가장 높은 영역으로 나왔다. 이 항목은 만점이거나 만점에 아주 가까웠다.

 

학구열이 있으니 지금까지 잘 달려왔던 것 같다. 나중에 시간나면 강점 분석에 대한 에세이도 한 편 써볼 것이다.