Development tips

자바스크립트, 파이썬, 노드.js를 사용하여 Unsplash API로 이미지 검색기 만드는 방법

0

이 글에서는 각각 순수 자바스크립트와 파이썬, 그리고 노드.js를 사용하여 특정 키워드 기반으로 Unsplash API를 통해 이미지 검색기를 만드는 방법을 자세히 알아보겠습니다 Unsplash API를 웹 및 서버 프로젝트에 어떻게 통합할 수 있을 까요? 지금부터 그 방법을 간단히 알아보겠습니다.

1. 소개

Unsplash는 고품질의 무료 이미지를 제공하는 인기 있는 플랫폼입니다. 이들의 API를 활용하면 개발자들이 쉽게 프로젝트에 이미지를 통합할 수 있습니다. 이번 튜토리얼에서는 순수 자바스크립트, 파이썬, 그리고 노드.js를 사용하여 키워드 기반 이미지 검색 기능을 구현하는 방법을 배워보겠습니다.

2. 사전 준비

이 튜토리얼을 시작하기 전에 Unsplash API 키가 필요합니다. API 키를 얻으려면 Unsplash 개발자 계정에서 계정을 생성하고 애플리케이션을 등록해야 합니다.

3. 순수 자바스크립트를 사용한 이미지 검색

먼저, 기본 HTML 파일과 자바스크립트 파일을 설정합니다. 다음은 기본 HTML 파일의 예입니다:

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unsplash 이미지 검색</title>
</head>
<body>
    <h1>Unsplash 이미지 검색</h1>
    <div id="results"></div>
    <script src="script.js"></script>
</body>
</html>

script.js

// Unsplash API 키를 여기에 입력하세요
const UNSPLASH_ACCESS_KEY = 'YOUR_UNSPLASH_API_KEY';

// 키워드 목록을 여기에 입력하세요
const keywords = ['nature', 'technology', 'business', 'health', 'travel'];

async function getUnsplashImages(keywords) {
    const url = 'https://api.unsplash.com/search/photos';
    const headers = new Headers({
        'Authorization': `Client-ID ${UNSPLASH_ACCESS_KEY}`
    });
    const imageResults = {};

    for (const keyword of keywords) {
        try {
            const response = await fetch(`${url}?query=${keyword}&per_page=5`, {
                headers: headers
            });
            const data = await response.json();
            const imageUrls = data.results.map(result => result.urls.small);
            imageResults[keyword] = imageUrls;
        } catch (error) {
            console.error(`키워드 '${keyword}'에 대한 이미지 검색 오류:`, error);
            imageResults[keyword] = [];
        }
    }

    return imageResults;
}

getUnsplashImages(keywords).then(images => {
    const resultsDiv = document.getElementById('results');
    for (const [keyword, urls] of Object.entries(images)) {
        const keywordDiv = document.createElement('div');
        keywordDiv.innerHTML = `<h2>키워드: ${keyword}</h2>`;
        urls.forEach(url => {
            const img = document.createElement('img');
            img.src = url;
            img.alt = keyword;
            img.style.margin = '10px';
            keywordDiv.appendChild(img);
        });
        resultsDiv.appendChild(keywordDiv);
    }
});

4. 파이썬을 사용한 이미지 검색

다음으로, 파이썬을 사용하여 이미지를 검색하는 방법을 알아봅니다. 우선 `requests` 라이브러리가 필요합니다. 설치하려면 다음 명령어를 실행하세요:

pip install requests

script.py

import requests

# Unsplash API 키를 여기에 입력하세요
UNSPLASH_ACCESS_KEY = 'YOUR_UNSPLASH_API_KEY'

def get_unsplash_images(keywords):
    url = 'https://api.unsplash.com/search/photos'
    headers = {'Authorization': f'Client-ID {UNSPLASH_ACCESS_KEY}'}
    image_results = {}

    for keyword in keywords:
        params = {
            'query': keyword,
            'per_page': 5  # 각 키워드당 반환할 이미지 수 (조정 가능)
        }
        response = requests.get(url, headers=headers, params=params)
        
        if response.status_code == 200:
            data = response.json()
            image_urls = [result['urls']['small'] for result in data['results']]
            image_results[keyword] = image_urls
        else:
            print(f"Error fetching images for keyword '{keyword}': {response.status_code}")
            image_results[keyword] = []

    return image_results

# 키워드 목록을 여기에 입력하세요
keywords = ['nature', 'technology', 'business', 'health', 'travel']

# 이미지 검색 결과를 가져옵니다
images = get_unsplash_images(keywords)

# 검색 결과 출력
for keyword, urls in images.items():
    print(f"\nKeyword: {keyword}")
    for url in urls:
        print(url)

5. 노드.js를 사용한 이미지 검색

마지막으로, 노드.js를 사용하여 이미지를 검색하는 방법을 알아봅니다. `axios` 라이브러리가 필요합니다. 설치하려면 다음 명령어를 실행하세요:

npm install axios

script.js

const axios = require('axios');

// Unsplash API 키를 여기에 입력하세요
const UNSPLASH_ACCESS_KEY = 'YOUR_UNSPLASH_API_KEY';

// 키워드 목록을 여기에 입력하세요
const keywords = ['nature', 'technology', 'business', 'health', 'travel'];

async function getUnsplashImages(keywords) {
  const url = 'https://api.unsplash.com/search/photos';
  const headers = { Authorization: `Client-ID ${UNSPLASH_ACCESS_KEY}` };
  const imageResults = {};

  for (const keyword of keywords) {
    try {
      const response = await axios.get(url, {
        headers,
        params: {
          query: keyword,
          per_page: 5, // 각 키워드당 반환할 이미지 수 (조정 가능)
        },
      });

      const data = response.data;
      const imageUrls = data.results.map(result => result.urls.small);
      imageResults[keyword] = imageUrls;
    } catch (error) {
      console.error(`Error fetching images for keyword '${keyword}':`, error);
      imageResults[keyword] = [];
    }
  }

  return imageResults;
}

getUnsplashImages(keywords).then(images => {
  for (const [keyword, urls] of Object.entries(images)) {
    console.log(`\nKeyword: ${keyword}`);
    urls.forEach(url => console.log(url));
  }
});

결론

이번 튜토리얼에서는 순수 자바스크립트, 파이썬, 그리고 노드.js를 사용하여 Unsplash API를 통해 키워드 기반으로 이미지를 검색하고, 검색된 이미지를 표시하는 방법을 배웠습니다. 이 방법을 통해 다양한 프로젝트에서 무료 이미지를 손쉽게 통합할 수 있습니다. 앞으로도 Unsplash API를 활용하여 더욱 다양한 기능을 구현해 보세요.

답글 남기기