Ajax 1 - AJAX 기본 개념 익히기 및 영화진흥위원회 API 실습해보기 1 : 키 발급에서 JSON 데이터 분석까지

제이쿼리에서 효율적으로 활용하는 Ajax에 대해서 공부해 볼 것이다. 이 수업부터는 인공지능 사관학교에서 진행되었던 자바스크립트 수업이다. 어제 수료식도 했지만 난 여전히 한 달 동안 열심히 공부해서 이곳에서 배웠던 모든 것들을 블로그에 정리해서 학습일지로 올릴 생각이다.

이번 달에는 공부일지를 많이 올리지 못해 남은 3일 동안 최대한 많이 올려야 매달 목표량인 300개를 채울 수 있을 것 같다.

---

 

 

 

 

 

Ajax 기본 개념과 동기와 비동기의 차이

 

 

XML은 HTML과 비슷하다. XML은 태그를 통해 주고 받는 것을 말한다. 동기화에서 synchro는 모든 동작을 똑같이 하는 것이다. 여기에 a가 불으면 부정의 뜻으로 비동기를 뜻한다.

 

 

 

 

 

 

클라이언트는 서버에게 요청을 하고, 서버는 그에 따른 응답을 한다.

 

 

 

 

---

 

 

 

 

 

 

 

넘겨받은 HTML 태그를 브라우저가 받아 화면을 만든다. 비동기 통신은 왜 필요할까? 동기 통신은 로그인 기능이다.

 

 

 

 

 

 

동기 통신에서 사용자는 데이터가 넘겨올 때까지 다른 작업을 하지 못한다는 단점이 있다. 사이트에 들어가면 로딩하는 시간이 있는데 그 사이트는 동기 통신을 하는 중이다. 비동기 통신은 위의 그림처럼 댓글 정보를 클릭하면 여기에 관한 정보만 나오며 다른 화면은 움직이지 않는다.

 

 

 

 

 

 

아이디 중복 검사를 할 때 주로 사용한다. 만약 동기 통신으로 하면 아이디나 비밀번호를 틀릴 때마다 전체 페이지가 새로고침된다. 이와 유사하게 실시간 검색어도 비동기 통신으로 만든다. 실시간으로 데이터를 받아올 수 있게 해당 내용만 초기화한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

동기 통신은 클라이언트가 정보를 요청했을 때 확인하는 작업을 진행한다. 이때 사용자는 아무런 작업도 할 수 없는 Blocking 상태가 된다. 사용자는 데이터가 넘어올 때 다음 작업을 할 수 있다. 이렇게 컴퓨터가 응답을 할 때까지 기다려야 하는 불편함이 있다.

이런 시간이 오래 걸리면 서버는 과부하된다. 이러한 것을 흔히 디도스라고 한다. 서버 컴퓨터에 요청을 무한히 보내 서버 컴퓨터가 다른 작업을 할 수 없게 만들어버리는 것을 디도스 공격이라고 한다.

 

만약 예매하는 프로그램을 비동기로 처리할 때, 사용자가 클릭하고 다른 작업을 클릭하게 되면 요청과 응답이 꼬인다. 그렇기 때문에 예배나 수강 신청하는 프로그램은 동기 통신을 사용한다.

 

 

 

 

 

 

비동기 통신은 사용자가 요청을 보내면 응답이 올 때까지 기다리는 것이 아니라 다른 페이지와 똑같이 이용할 수 있다. 기다리지 않고 다른 작업을 처리하면 된다.

 

 

 

 

 

 

그러면 비동기 통신은 언제 사용할까? 데이터베이스에서 데이터를 꺼내오는 작업은 대부분 동기 통신이다. API 즉 다른 사람이 공개해 놓은 데이터를 가져다 써볼 것이다. 그중에서 우리는 영화진흥위원회 API를 사용하는 예시를 진행해본다.

영화 박스오피스 순위를 직접 검색하기보다 이 사이트에서 제공해 주는 것을 가져오기만 하면 된다.

---

 

 

 

 

 

 

 

영화진흥위원회 API 사용하는 예제 실습하기

 

 

먼저 회원가입을 하면 키를 발급한다. 키는 받은 사람만 가지는 고유한 하나의 값을 주는 것이다. 키를 주는 이유는 디도스 같은 것을 방지하기 위함이다. 예를 들어 디도스 공격이 들어올 때 서버는 이 키의 사용자를 파악하고 그 연결을 끊어버릴 수 있다. 이를 위해 고유한 키값을 발급한다.

키 발급과 동시에 서비스를 등록한다. 서비스 등록은 이 기능을 어디에 쓸지 알려주는 것이다. 세 번째로는 샘플 코드를 분석한다. 실제 어떤 데이터가 있고 어떤 기능들 있는지 바로 사용하지 않고 샘플 코드로 분석한다. 그런 다음 내 코드로 변경하는 작업을 한다.

 

 

 

 

영화진흥위원회 API 사이트

영화진흥위원회 오픈API

 

 

 

1. 회원 가입이나 로그인하기

이 사이트에 들어가서 회원 가입을 하거나 로그인을 한다. 이 수업을 들을 즈음인 5달 전에 가입을 했었는데 오늘 해보니 로그인이 되지 않아서 다시 회원 가입을 했다.

근데 진행을 하다 보니 이 사이트가 아니라 다른 사이트에 회원 가입을 했다. 그냥 영화진흥위원회를 하면 안 되고 API까지 검색을 해야 한다.

 

가입을 탈퇴하고 다시 진행해 보았다. 로그인을 하고 키 발급을 누르는데 이전에 발급한 키가 있어서 그대로 사용하면 될 것 같다.

 

 

 

2. 키 발급하기

사용 URL은 자신이 실행한 URL의 주소의 앞부분을 복사해서 붙여 넣으면 된다. 사용 목적과 관리명은 아무거나 써넣으면 된다. 우리는 '그냥'이라고 썼는데 통과되었다.

 

발급 키를 복사하는데 이 키는 다른 사람에게 공유해서는 안된다. 이제 샘플 코드를 등록해 볼 것이다.

---

 

 

 

3. 샘플 코드 등록하기

메뉴에서 OPEN API의 제공 서비스를 클릭하고 왼쪽에 일별 박스오피스를 살펴본다. 가운데에는 API에 대한 설명이 상세히 되어 있다.

 

 

 

자바스크립트에서 가장 많이 사용하는 데이터 타입이다. 태그 안에 이러한 글자가 들어가 있는 것이다. 여기에 들어가면 오류가 뜨는데 이건 관리자가 관리를 하고 있지 않다는 뜻이다.

---

 

 

 

 

4. XML 형태 알아보기

 

XML은 이런 식으로 처음 보는 태그로 이루어져 있다. XML은 태그를 통해 데이터를 주고받을 수 있게 만들어진 것이다. 과거에는 많이 사용되었으나 지금은 그렇지 않다. 내용이 너무 많아 요즘에는 많이 선호하지 않는다.

 

아래쪽에 JSON이 있는데 이것은 JavaScript Objcet Notation의 약자이다. 자바스크립트 객체 형태를 JSON이라고 하는데 XML보다 훨씬 자주 쓰인다.

---

 

 

 

 

5. URL 주소 수정하기

JSON 사이트의 주소를 복사해서 메모장에 붙여 넣는다.

 

 

주소에 들어가면 유효하지 않은 키 값이라는 메시지가 뜨는데 이건 샘플 키 값이 잘못되었다는 것이다. 

 

 

 

 

조금 전에 받은 자신의 키 값을 복사하여 & 앞에까지 지우고 붙여 넣는다. 이제 이 URL은 나만의 URL이 되었다. 다른 사람은 키를 알아야 접속할 수 있다. 그리고 뒤에 있는 targetDt를 어제 날짜로 변경한다.

조금 전에 살펴보았던 API 정보를 보면 필수로 입력하라는 값이 나와 있다. 

---

 

 

 

6. JSON 형태 주소 접속하기

 

이것은 필수로 있어야 만들 수 있다. 이제 이 URL에 접속해 본다.

 

 

 

 

하얀색 배경으로 바꾸고 싶었는데 잘 안돼서 그냥 이렇게 보기로 했다. 이 데이터 타입이 JSON으로 되어 있어 키와 VALUE로 되어 있는 것을 볼 수 있다.

---

 

 

 

 

학습을 마치고

AJAX에 대한 이론적인 내용에 대해서 학습하고 영화진흥위원화에 가서 키를 발급하고 JSON 파일도 확인하는 실습을 진행해 보았다. 

다섯 달 전에 수업을 받을 때는 무얼 하는지도 모르고 키를 발급받고 그냥 따라 하기 바빴다. 하지만 지금은 대부분의 내용을 이해하고 알게 되니 배움이 정말 값지게 되었다. 남은 수업이 얼마 남지 않았지만 모두 잘 정리해 볼 것이다.

 

나중에 이 자료들은 내게 유용한 자산이 될 것 같다.