최근 React로 개인 프로젝트를 진행하면서 30장이 넘는 상품 이미지와 상품명 등 데이터를 하나씩 목업으로 작성하면서 렌더링 이슈가 생겼다. 오늘은 프로젝트에 적용할 수 있는 오픈 데이터API를 연결하는 과정으로 (회원가입, 인증키를 발급/등록, 이용/활용) 연습을 해보고자 한다!
Hyper foucus를 위해 'Foucus Flight'를 키고 시작해보자.
API는 무엇일까?
API (Application Programming Interface / 응용 프로그래밍 인터페이스)
API는 서로 다른 두 소프트웨어(컴퓨터 프로그램)가 상호 작용하고 정보를 교환할 수 있도록 규정한 규칙 또는 통로이다.
이를 비유하자면,
식당에 밥을 먹으러 가서 주문하고 종업원이 주문서를 주방에 전달하며 주방에서 만든 음식을 받아서 나에게 전달해 주는 중개자 역할인 샘이다.
프로그래밍 관점에서 보면,
클라이언트가 정해진 형식과 규칙(API 규격)에 맞춰 오픈 데이터의 서버에 특정 기능의 실행 또는 데이터를 요청
서버는 요청을 받고, 요청 내용을 분석하여 내부적으로 작업 처리
서버는 처리 결과를 다시 정해진 형식(대부분 JSON 또는 XML 형식의 데이터)으로 포장하여 요청한 클라이언트에게 응답으로 돌려주는 것이다.
즉, 시스템의 복잡한 내부 동작을 숨기고, 사용자가 필요로 하는 특정 기능이나 데이터에만 접근할 수 있도록 도와주는 역할이다.
공공 데이터란?
일반적으로 공기업 또는 공공기관에서 제공하는 데이터을 말한한다.
오픈 데이터란?
일반 포털사이트에서 제공하는 데이터를 말한다. 통용되는 표현으로 많이 쓴다.
알아야할 핵심적인 웹 기술 개념
1. JSON과 XML (데이터 형식)
API가 데이터를 주고받을 때 사용하는 표준 형식
- JSON (JavaScript Object Notation):
- 개념: 자바스크립트 객체 표기법을 기반으로 하는 가장 널리 사용되는 데이터 형식이다.
- 특징: 사람이 읽고 쓰기 쉽고, 데이터를 주고받는 용량이 가볍다는 특징이 있다. Key-Value 쌍으로 데이터를 구조화하는 방식이다.
- 예시:
{"이름": "홍길동", "나이": 30}
- XML (Extensible Markup Language):
- 개념: HTML과 유사하게 태그를 사용하여 데이터를 구조화하는 형식이다.
- 특징: 구조가 복잡할 수 있지만, 데이터의 구조와 의미를 정의하는 데 유연하다.
- 예시:
<person><name>홍길동</name><age>30</age></person>
2. AJAX (비동기 통신 기술)
웹 페이지를 새로고침하지 않고 서버와 데이터를 주고받는 기술
- AJAX (Asynchronous JavaScript and XML):
- 개념: Asynchronous (비동기), JavaScript and XML의 약자로, 페이지 전체를 로드하지 않고 필요한 데이터만 비동기적으로 서버에서 받아오는 기술이다.
- 역할: API 요청 시, 사용자는 페이지를 계속 이용하고 있는 동안 백그라운드에서 데이터를 가져올 수 있게 해준다.
- 핵심: API 요청을 보내고 응답을 받을 때까지 기다리지 않고 다음 작업을 진행할 수 있는 특징이 있다.
3. JavaScript / jQuery (프로그래밍 언어 및 라이브러리)
실제로 API 요청을 보내고 받은 데이터를 처리하는 역할을 한다.
- JavaScript (JS):
- 개념: 웹 브라우저가 이해하는 동작 언어이다. HTML은 구조를, CSS는 스타일을 담당한다면, JS는 웹 페이지의 상호작용과 동적인 기능을 담당
- 역할: API 요청을 보내고(AJAX 역할 수행), 서버에서 받은 JSON/XML 데이터를 분석하여 웹 페이지에 표시하도록 명령하는 역할
- jQuery:
- 개념: 자바스크립트 라이브러리로, 복잡한 자바스크립트 코드를 간결하게 작성할 수 있도록 돕는다.
- 역할: 특히 AJAX 통신을 매우 쉽게 처리할 수 있게 해주며, DOM 조작을 단순화하여 개발 효율을 높인다. (최근에는 순수 JS나
fetchAPI도 많이 사용된다.)
4. DOM (웹 페이지의 구조)
받아온 데이터를 웹 페이지의 특정 위치에 삽입하고 수정하는 대상
- DOM (Document Object Model):
- 개념: 웹 페이지(HTML 문서)의 내용을 객체 형태로 구조화하여, 자바스크립트가 접근하고 수정할 수 있도록 만든 모델이다.
- 역할: API를 통해 데이터를 받아왔을 때, JS/jQuery를 사용하여 이 DOM의 특정 부분을 찾아(예:
<div id="data-area">) 새로운 데이터(API 결과)를 삽입하거나 기존 내용을 변경한다. - 예시: API로 받아온 날씨 데이터를
<p>태그 안에 넣어 화면에 표시