내용 목차
오늘은 세계적으로 알려진 무료 이미지 제공 사이트인 Unsplash API 액세스키 만드는 방법을 간단히 설명합니다.
결국 나중에 API를 이용해서 원하는 이미지를 가져와서(fetching) 웹페이지에 뿌려주는 방법까지 설명할 예정입니다.
하지만 오늘은 일단 unsplash API의 액세스키와 시크릿키를 만드는 방법까지만 설명합니다.
Unsplash API 액세스키 가져오는 방법
Unsplash API 를 사용하려면 먼저 Unsplash developers에 가입을 해야 합니다.
https://unsplash.com/developers
Register as a developer 버튼을 눌러서 등록을 시작합니다.
이름과 성, 이메일 주소 등의 기본정보를 입력하고 “Join” 버튼을 클릭합니다.
기본 정보 입력을 끝마치면 위와 같이 새로운 앱을 등록하는 과정이 나옵니다. “New Application” 버튼을 클릭합니다.
우리는 간단히 데모용으로만 사용할 예정입니다. Demo 용은 시간 당 50번의 요청으로 제한됩니다. 보다 많은 Production 용은 몇 가지 설정을 더 거친 후에 unsplash Team에 요청을 하고 승인이 이루어져야 합니다.
어플리케이션 등록을 위한 약관 같은 것들입니다. API 사용 시 지켜야 할 사항들이죠. 체크하고 Accept terms 버튼을 클릭합니다.
위와 같은 박스가 뜨면 간단히 어플리케이션의 이름과 설명을 써줍니다. 저는 image search 라고 이름을 정했습니다.
위와 같이 API 사용을 위한 Access Key와 Secret Key가 생성되었습니다. 이것들은 보안이 지켜져야 합니다. 다른 사람이 알면 안되겠죠.
Unsplash Developers의 상단 메뉴 바를 보면 여러가지가 있습니다. 그 중에서 Document를 잘 활용하면 보다 많은 정보를 활용할 수 있습니다.
Unsplash API 액세스키 활용한 간단 예제
Unsplash API 액세스키 를 이용해서 JSON 형태로 가져오는 코드 예제입니다. 먼저 html에서 <script src=”test.js”></script>이용해서 링크를 걸고 아래의 test.js 코드를 작성합니다.
집(house)과 관련된 이미지만 페이지 당 20개 가져옵니다.
const keyword = 'house';
const Access_Key = 'YOUR ACCESS KEY';
const url = `https://api.unsplash.com/search/photos?page=1&query=${keyword}&client_id=${Access_Key}&per_page=20`;
fetch(url)
.then((response) => response.json())
.then((data) => console.log(data))
.catch((err) => console.error(err));결과 화면입니다.
오늘은 unsplash API 활용을 위한 사전 작업으로 액세스키를 만드는 방법과 간단한 사용 방법에 대해 알아봤습니다.
나중에는 가져온 데이터를 자바스크립트, React를 이용하여 이미지를 화면에 뿌려주는 것에 대해 코딩해보겠습니다.