[javascript] 비동기 데이터 요청을 이용한 이미지 갤러리 작성

11 Dec 2023

javascript

이미지 갤러리를 동적으로 로드하여 보여주는 웹 애플리케이션을 만들고 싶다고 가정해 봅시다. 한 가지 방법은 비동기 데이터 요청을 사용하여 이미지를 가져와서 갤러리에 표시하는 것입니다.

필요한 기술

JavaScript: 비동기 데이터 요청을 처리하기 위해 JavaScript를 사용합니다.
HTML/CSS: 이미지를 표시할 갤러리의 마크업과 스타일링을 위해 HTML과 CSS를 사용합니다.

단계별 구현

1. HTML 구조 설정

<!DOCTYPE html>
<html>
<head>
    <title>이미지 갤러리</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="gallery">
        <!-- 이미지를 동적으로 추가할 영역 -->
    </div>

    <script src="scripts.js"></script>
</body>
</html>

2. JavaScript를 이용한 이미지 로드

// 이미지를 가져오는 함수
function fetchImages() {
    return new Promise((resolve, reject) => {
        // 이미지를 가져오는 비동기 요청 코드
        // 예: fetch('https://example.com/images')
        //     .then(response => response.json())
        //     .then(data => resolve(data))
        //     .catch(error => reject(error));
    });
}

// 이미지를 갤러리에 추가하는 함수
function addImagesToGallery(images) {
    const gallery = document.querySelector('.gallery');
    images.forEach(image => {
        const imgElement = document.createElement('img');
        imgElement.src = image.url;
        gallery.appendChild(imgElement);
    });
}

// 이미지 로드 요청 및 처리
fetchImages()
    .then(images => {
        addImagesToGallery(images);
    })
    .catch(error => {
        console.error('이미지를 가져오는 중 오류가 발생했습니다:', error);
    });

3. CSS 스타일링

/* styles.css */

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

마치며

이렇게하면 JavaScript를 사용하여 비동기 데이터 요청을 처리하고 이미지 갤러리를 동적으로 렌더링할 수 있습니다. 코드는 프로젝트에 맞게 수정하여 사용할 수 있으며, 필요에 따라 추가적인 기능을 구현할 수도 있습니다.