unsplash API를 활용해서 이미지 검색 어플리케이션 만들기

국비 프론트 수업 중 API를 불러와서 웹사이트를 만드는 과제를 주셨는데 한번도 해본 적이 없어서 많이 어려웠다.

이 이미지 API의 장점은 url을 불러오지 않아도 검색만으로 불러올 수 있고 용량을 확 줄일 수 있다는 장점이다.

$(document).ready(() => {
    $("#search-form").submit((e) => {
        const perPage =20; // 예: 20개의 항목을 가져옴

        let searchText = $("#photo").val();
        let responseContainer = $("#img-thumbnail");	// 결과창을 저장하기 위한 컨테이너

        let userApi = `Ypo4TFbTd4iHDksg9sNx7CyyPNF7f4fly2xQ_orZb7o`
        let url = `https://api.unsplash.com/search/photos?query=${searchText}&client_id=${userApi}`;
        e.preventDefault();
        responseContainer.empty(); 

        $.ajax({
             method: 'GET',
             url : url,
             data: {
                  per_page: perPage, // 페이지당 항목 수 설정${searchField.val()}
             },
             success:(data) => {
                console.log(data);
                data.results.forEach((element) => {
                    // $("#img-thumbnail").append(`<img src=${element.urls.small} class="my-2">`)

                    // 이미지 요소를 만들고 초기에는 숨겨두기
                    const $img = $(`<img src=${element.urls.small} class="my-2 mx-10">`).hide();
                    $img.fadeIn(1000);

                    // 이미지를 #img-thumbnail에 추가한 후 fadeIn() 함수로 나타나게 합니다.
                    $("#img-thumbnail").append($img);
          
                
                })
          }  
      })
  })
})    // 제이쿼리와 연결 되었는지 잘 보여주기