자바스트립트에서 객체 데이터를 받아오는 것을 정리하기 전에 export와 import부터 정리해 보려 한다.
일단, import는 가져오는 것, export는 외부 라이브러리라고 생각하면 쉽다.
한 파일에 export는 여러 개를 만들 수 있고, 만든 함수 이름을 import 중괄호 안에 명시해 주어야 한다. 여기서, export default로 만든다면, import에서 이름을 지어주어서 { }에 넣어햐 한다.
이제 이 글의 주 내용인 AJAX에 대해 정리할 것이다.
AJAX란?
자바스크립트를 이용한 서버와의 통신 기능이다.
프로그래밍에서 언어는 사실 서버와 통신을 용이하게 하는 도구 그 이상도 이하도 아니라 생각한다.
자바스크립트로 서버와 통신하는 방법을 살펴보자.
첫번째로, fetch() 함수를 사용한다.
두번째로 json을 사용하여 객체로 변환시켜야 한다.
const a = fetch(url);
const b = a.json;fetch, json 함수는 논블럭킹 방식으로 동작하기 때문에 await를 붙여, 대기를 시켜주어야한다.
const a = **await** fetch(url);
const b = **await** a.json;또 여기서, await를 사용하려면 async가 필요한데, async는 함수 앞에 붙여 사용한다. 이를 모두 적용한 최종 코드를 보면,
let url = '서버 주소';
async function run() {
const a = fetch(url);
const data = a.json;
const results = data.results; -> json을 통해 객체로 받아온 데이터를 변수 결과에 넣음.
}이 이후에는 객체인지 리스트인지 보고 적절히 파싱하여 쓰면 된다.
밑의 코드는, 영화 정보 api를 가져와서 '해리포터'글자가 포함된 영화 제목들을 뽑아내는 코드이다.
<body>
<div>
</div>
<script>
let url = 'https://api.themoviedb.org/3/search/movie?api_key=cba95d401a14ab806ffc13a5052aab89&query=해리포터'
async function run() {
const a = await fetch(url);
const data = await a.json();
const results = data.results;
let html = '';
results.forEach((v) => {
// v는 객체
let title = v.title;
html += `<h2>${title}</h2>`
});
document.querySelector('div').innerHTML = html;
}
run();
</script>
</body>출력 결과는,
아주 출력이 잘 되었다.
영화 api를 살펴보면,
여기서 title의 정보를 뽑은 것이다!
파랑입니다.