사진 갤러리는 웹 페이지에서 사진을 보여주고 관리하는 기능을 말합니다. 이번에는 JavaScript의 Promise를 활용하여 사진 갤러리 기능을 구현하는 방법을 알아보겠습니다.

1. 사진 데이터 가져오기

먼저, 사진 데이터를 가져오기 위해 비동기적으로 서버에서 데이터를 요청하는 작업이 필요합니다. 이를 위해 fetch API를 사용할 수 있습니다.

function fetchPhotos() {
  return new Promise((resolve, reject) => {
    fetch('api/photos')
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

위 코드는 fetchPhotos 함수를 정의한 것입니다. 이 함수는 ‘api/photos’ 엔드포인트로 GET 요청을 보내고, 응답을 JSON 형태로 파싱한 후 데이터를 Promise의 resolve 함수로 전달합니다. 실패할 경우에는 reject 함수를 호출합니다.

2. 사진 목록 보여주기

다음으로, 가져온 사진 데이터를 사용하여 갤러리에 사진 목록을 보여주는 작업을 해야합니다. 예를 들어, <ul> 태그에 각 사진의 제목을 리스트 형태로 보여줄 수 있습니다.

function renderPhotoList(photos) {
  const list = document.getElementById('photo-list');
  
  photos.forEach(photo => {
    const listItem = document.createElement('li');
    listItem.textContent = photo.title;
    
    list.appendChild(listItem);
  });
}

위 코드는 renderPhotoList 함수를 정의한 것입니다. photos 매개변수로 받은 사진 데이터를 기반으로 <li> 요소를 생성하고, 각 사진의 제목을 텍스트로 설정한 후 <ul> 태그에 추가합니다.

3. 전체 과정 실행하기

마지막으로, Promise를 적절하게 활용하여 위에서 정의한 함수들을 실행하는 작업을 진행해야합니다. 이를 통해 전체 과정을 순차적으로 실행할 수 있습니다.

fetchPhotos()
  .then(photos => renderPhotoList(photos))
  .catch(error => console.error(error));

위 코드는 fetchPhotos 함수를 실행한 후, 데이터를 가져오는데 성공하면 renderPhotoList 함수를 실행하여 사진 목록을 보여줍니다. 만약 에러가 발생하면 catch 블록에서 에러를 처리합니다.

마무리

위와 같이 Promise를 활용하여 사진 갤러리 기능을 구현할 수 있습니다. Promise를 사용하면 비동기 작업을 보다 효과적으로 관리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다. #JavaScript #Promise