Vanilla JavaScript를 사용하여 Flash 이외의 사진 검색 어플리케이션 구축

이 문서에서는 JavaScript를 사용하여 이미지 검색 응용 프로그램을 구축하는 방법에 대해 설명합니다.이것은 사용자의 검색 조회에 따라 Unsplash 그림을 가져와 표시합니다.이것은 내가 세운 몇 개의 개인 프로젝트 중의 하나이다. 이런 프로젝트들은 내가 배운 것을 실천할 수 있게 한다.

태그 및 스타일 설정

나는 내가 원하는 페이지의 외관을 고려하여 간단한 흰색 페이지를 사용하기로 결정했다. (위의 그림과 같이) 맨 위에 입력과 제출 단추가 있고 그 결과 격자가 형성되었다.아래에서 전체 코드를 볼 수 있습니다.

JavaScript 문제 해결

나는 먼저 폼과 다른 HTML 요소에 대한 인용을 전역적으로 저장했다.앞으로도 나는 함수 중에서 다른 함수를 선택할 것이다.나는 또한 표에 submit 사건 탐지기를 추가했다.

const form = document.querySelector('.js-form');
form.addEventListener('submit', handleSubmit);
const nextBtn = document.querySelector('.js-next');
const prevBtn = document.querySelector('.js-prev');
let resultStats = document.querySelector('.js-result-stats');
let searchQuery;

그리고 이벤트 탐지기에서 리셋 함수handleSubmit를 정의했습니다. 다음과 같습니다.

function handleSubmit(event) {
    event.preventDefault();
    const inputValue = document.querySelector('.js-search-input').value;
    searchQuery = inputValue.trim();
    console.log(searchQuery);
    fetchResults(searchQuery);
}

이 함수는 이벤트를 매개 변수로 하고, 우선 preventDefault() 방법으로 페이지를 다시 불러오는 것을 방지합니다.그리고 검색 입력한 값을 inputValue 에 저장하고 trim() 방법으로 모든 공백을 삭제합니다.이것은 편집된 입력 값을 searchQuery에 저장하고 그것을 매개 변수로 fetchResults 함수에 전달합니다. 이 함수는 그곳에서 호출됩니다.정확한 값이 전달되었는지 확인하기 위해서 searchQuery의 값을 컨트롤러에 기록합니다.

비Flash에서 결과 가져오기

async function searchUnsplash(searchQuery) {
    const endpoint = `https://api.unsplash.com/search/photos?query=${searchQuery}&client_id=YOUR_ACCESS_KEY`;
    const response = await fetch(endpoint);
    if (!response.ok) {
        throw Error(response.statusText);
    }
    const json = await response.json();
    return json;
}

async function fetchResults(searchQuery) {
    try {
        const results = await searchUnsplash(searchQuery);
        console.log(results);
        displayResults(results);
    } catch(err) {
        console.log(err);
        alert('Failed to search Unsplash');
    }
} 

Unsplash의 API를 사용하려면 개발자 계정을 만들어야 합니다.그 후에만 유일한 API 키를 얻을 수 있으며, 웹 사이트의 사진을 방문할 수 있습니다.AJAX는 Flash를 취소하기 위해 끝점 및 관련 질의 매개변수가 포함된 URL을 사용하도록 요청했습니다.그들 사이트의 Documentation 페이지는 더 많은 정보를 제공했다.
함수searchUnsplash는 하나의 매개 변수(searchQuery를 사용하고 이 매개 변수는 query 조회 매개 변수의 값으로 단점에 삽입된다.이제 URL은 변수endpoint에 저장되며 이 변수는 매개변수로 전달됩니다fetch.fetch() 방법은 자원을 가져올 경로인 파라미터를 받아들인다. 이 예에서 이 파라미터는 endpoint에 저장된다.그것은 항상 하나 Promise 로 돌아간다.이제 응답이 200 OK이면 JSON으로 처리되어 json 변수에 저장됩니다.JSON의 내용이 콘솔에 기록되어 있기 때문에 JSON의 결과는 콘솔에 기록됩니다.
상술한 두 함수는 모두 비동기적이다. 이것은 await 키워드가 함수의 실행을 중단하고 해결될 때까지 사용할 수 있음을 의미한다.이것은 함수를 성명하기 전에 async 키워드를 놓는 것을 통해 이루어진 것이다.나는 try...catch 함수에서 fetchResults 블록을 사용했다.try 블록'시도'가 코드를 실행하고 예외나 오류가 발생하면 catch 블록은 날짜를 저장하고 기록된 코드로 적절한 응답을 합니다.이것은 결과를 가져올 때 오류가 발생할 때 코드가 붕괴되는 것을 방지하는 흐름 제어 메커니즘이다.

페이지에 결과 표시

다음 단계는 페이지에 결과를 표시하는 것입니다.콘솔에 유입된 JSON 데이터를 확인하면 여러 컨텐트가 포함된 속성을 확인할 수 있습니다.
results 속성은 검색 결과를 포함하는 그룹입니다.각 검색 결과는 점 또는 괄호 표현을 사용하여 액세스할 수 있는 객체입니다.

function displayResults(json) {
    const searchResults = document.querySelector('.js-search-results');
    searchResults.textContent = '';
    json.results.forEach(result => {
        const url = result.urls.small;
        const unsplashLink = result.links.html;
        const photographer = result.user.name;
        const photographerPage = result.user.links.html;
        searchResults.insertAdjacentHTML(
            'beforeend',
            `<div>
                <a href="${unsplashLink}" target="_blank">
                    <div class="result-item" style="background-image: url(${url});"></div>
                </a>
                <p class="photographer-name">
                    <a href="${photographerPage}" target="_blank" style="color: black; text-decoration: none;">Photo by ${photographer}</a>
                </p>
            </div>`
        );  
    });
    totalResults = json.total;
    resultStats.textContent = `About ${totalResults} results found`;
};

HTML 파일에 클래스 div의 비어 있음search-results이 만들어졌습니다.그런 다음 JS 파일의 이름displayResults이라는 새 함수에서 JSON 객체를 매개변수로 선택할 수 있습니다.또한 textContent를 빈 문자열로 설정하여 이전 결과를 모두 지웁니다.

현재 results 방법을 사용하여 forEach 그룹을 교체합니다.리셋 함수에서 result 매개 변수를 통해 플러그인 대상에 접근할 수 있다.위의 그림을 자세히 살펴보면, 그룹의 모든 대상에 여러 개의 키가 포함되어 있습니다. 예를 들어 links, user, urls.이러한 정보는 객체의 다양한 범주에 대한 정보에 액세스할 수 있습니다.
리셋 함수의 첫 번째 줄은 서로 다른 값을 저장하는 변수입니다.점 기호를 사용하여 액세스합니다.

이미지 URL

Unsplash

의 이미지에 대한 링크

사진작가의 이름

사진작가의 비섬광 개인 정보 링크

그리고 insertAdjacentHTML 방법을 사용하여 모든 결과searchResults 요소를 삽입합니다.이 방법에는 요소의 위치와 HTML로 해석할 텍스트라는 두 가지 매개 변수가 있습니다.두 번째 파라미터는 코드의 일부분이 끊임없이 변화하기 때문에 템플릿 텍스트를 사용합니다.이것들은 코드의 자리 차지 문자로 표시됩니다.그리고 displayResults에서 함수fetchResults를 호출합니다.
각 이미지는 해당 컨테이너의 배경으로 설정되며 Flash가 아닌 페이지에 대한 링크이기도 합니다.사진작가의 이름은 그/그녀의 비 플래시 프로필에 연결되어 그림의 바로 아래에 놓여 있고 그 결과 CSS 격자를 사용하여 디자인된 것으로 나타났다.

로드 표시기 표시

검색어를 실행할 때 표시되는 내용입니다. 작업이 진행 중임을 알 수 있도록 합니다.나는 this website에서 모뎀을 선택하여 HTML과 CSS를 코드에 붙여 넣었다.마이크로스피커에 대한 참조 전역은 변수spinner에 저장되고 함수fectchResults는 다음과 같이 업데이트됩니다.

const spinner = document.querySelector('.js-spinner');

async function fetchResults(searchQuery) {
    spinner.classList.remove('hidden');
    try {
        const results = await searchUnsplash(searchQuery);
        pagination(results.total_pages);
        console.log(results);
        displayResults(results);
    } catch(err) {
        console.log(err);
        alert('Failed to search Unsplash');
    }
    spinner.classList.add('hidden');
} 

결론

이 자습서에서는 JavaScript를 사용하여 대화식 응용 프로그램을 구축하는 방법에 대해 설명합니다.나는 네가 중학교에서 많은 것을 배울 수 있기를 바란다.
나는 현재 일자리에 대해 개방적인 태도를 가지고 있다.만약 빈자리에 관한 어떤 정보가 있다면, 우리는 감격을 금할 수 없을 것입니다.
읽어주셔서 감사합니다!