[jQuery + Ajax]실습으로 완전히 체득한 jQuery AJAX + 영화 API 연동

[jQuery + Ajax]실습으로 완전히 체득한 jQuery AJAX + 영화 API 연동

2025. 6. 26. 12:38ㆍJavaScript/Node.js

🎥 실습으로 완전히 체득한 jQuery AJAX + 영화 API 연동

자바스크립트를 공부하면서 "AJAX"와 "비동기 통신", "JSON 데이터 처리"에 대한 개념은 여러 번 들어봤습니다.
이론적으로도 알고 있었고, 강의도 봤지만… 직접 손으로 실습해보기 전까진 그게 왜 중요한지 피부로 느끼지 못했습니다.

이번 실습에서는 jQuery의 $.ajax()를 통해 KOBIS 영화진흥위원회 API로부터 데이터를 받아와서, 일일 박스오피스 영화 제목들을 가져오는 작업을 해보았습니다.

✅ 실습 목표

버튼 클릭 시 AJAX로 외부 영화 API 요청
성공 응답 시 영화 순위/제목을 콘솔에 출력
(추가 실습 예정) 받아온 데이터를 HTML에 출력

📂 전체 코드 (HTML + JS)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>영화 데이터 실습</title>
  <script src="jquery-3.7.1.min.js"></script>
</head>

<body>
  <button id="btn">영화데이터 요청</button>
  <ul id="result"></ul>

  <script>
    $("#btn").on("click", () => {
      $.ajax({
        url: "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=본인APIKEY&targetDt=20250624",
        success: (res) => {
          alert("통신성공");

          const list = res.boxOfficeResult.dailyBoxOfficeList;
          for (const movie of list) {
            console.log(`${movie.rank}위 - ${movie.movieNm}`);
          }
        },
        error: () => {
          alert("통신실패");
        }
      });
    });
  </script>
</body>
</html>

🧠 JSON 데이터 구조 분석

AJAX로 받아온 데이터는 res라는 응답 객체에 담겨 있고, 영화 리스트는 다음 경로로 접근합니다:

res.boxOfficeResult.dailyBoxOfficeList

이 안에는 영화 정보들이 객체 형태로 배열에 들어있습니다. 예:


[
  { "rank": "1", "movieNm": "드래곤 길들이기", ... },
  { "rank": "2", "movieNm": "인사이드 아웃", ... },
  ...
]

그래서 영화 제목에 접근하려면 movie.movieNm, 순위는 movie.rank로 꺼낼 수 있어요. 이 부분이 가장 핵심이고, 실무 API 연동에서도 구조 파악이 제일 중요하다는 걸 느꼈습니다.

📌 느낀 점

처음에는 AJAX 문법도 생소하고 막막했지만, 구조를 뜯어보니 결국은 요청 → 응답 → 데이터 꺼내기의 반복이라는 걸 깨달음
JSON 데이터를 탐색하는 방법(.key / [index])이 이제는 손에 익었고, 다른 API도 충분히 다룰 수 있을 것 같은 자신감이 생김
이론으로만 공부할 땐 절대 몰랐던 것들이, 직접 콘솔에 찍어보고 오류도 겪으면서 확실히 내 것이 되었다는 느낌

🎯 취준생으로서의 다짐

기본적인 개발 지식및 기본베이스를 강화시키며 공부를 하면 정말 수많은 문법과 개념들을 접합니다.
하지만 그 중에서도 이렇게 실제 데이터를 다뤄보는 경험은 실무와 가장 닮아있는 훈련이라는 걸 알게 되었습니다.

앞으로는 JSON을 불러와 출력하는 것에 그치지 않고, 이러한 내용들을 백엔드와 연관지어 전체적인 개발 프로세스를 알아가는 과정을 공부하려합니다.

오늘도 한 걸음 성장했습니다. 🙌

'JavaScript > Node.js' 카테고리의 다른 글

Node.js와 Express.js 서버 개발 – 포트, 라우팅, chunk/buffer 완전 이해 (0)	2025.07.02

Node.js와 Express.js 서버 개발 – 포트, 라우팅, chunk/buffer 완전 이해 2025.07.02

Heyjinu Dev