AJAX란?

• Asynchronous JavaScript And XML의 약어
• 웹페이지에서 비동기 방식으로 서버와 통신을 하는 기술
• 웹 페이지 전체를 갱신하지 않고 서버로부터 필요한 데이터를 받아와 일부분만 갱신 가능
• 대표적으로 Fetch API방식과 axios방식을 사용
• 일반적으로 JSON 또는 XML 형식으로 서로 데이터를 주고 받는다.

function myAxiosGet(){
    // URL 획득
    const URL = document.querySelector('#input-url').value;

    // Axios 처리
    axios.get(URL)
    .then(response => {
        myMakeImg(response.data);
    })
    .catch()
    ;

}

// 사진 데이터를 화면에 추가 함수
function myMakeImg(data) {
    data.forEach(item => {
        // 부모요소 접근
        const CONTAINER = document.querySelector('.img-container');

        // img 태그 생성
        const ADD_IMG = document.createElement('img');
        ADD_IMG.setAttribute('src', item.download_url);
        ADD_IMG.style.width = '200px';
        ADD_IMG.style.height = '200px';
        
        // 이미지 화면에 추가
        CONTAINER.appendChild(ADD_IMG);
    });
}

// API호출 버튼 이벤트
const BTN_API = document.querySelector('#btn-api');
BTN_API.addEventListener('click', myAxiosGet);

CDN 이용 링크