프론트엔드 - [여행 포트폴리오 ]

HTML, CSS, JavaScript를 활용해서 만들었습니다.

API는 Unsplash API 를 사용했습니다.

 

 

 

이 코드에서 핵심 부분은 JavaScript 부분입니다.

JavaScript를 사용하여 Unsplash API에서 이미지를 가져와서 HTML에 표시하고 있습니다.

여기서 중요한 부분은 다음과 같습니다

 

1. Unsplash API 키

 

Unsplash API 키: accessKey 변수에 Unsplash API의 액세스 키가 포함되어 있습니다. 이 키를 사용하여 API에 인증하고 이미지를 가져옵니다.

 

2. 이미지 가져오기 

이미지 가져오기: fetchImages 함수에서는 fetch 함수를 사용하여 Unsplash API에서 랜덤 이미지를 가져옵니다. API 요청은 client_id 매개변수에 API 키를 포함하여 이루어집니다.

 

3. 이미지 표시하기

 

이미지 표시하기: API로부터 가져온 이미지 데이터는 showImages 함수를 통해 HTML 갤러리에 표시됩니다. 각 이미지는 div.photo 요소로 감싸져 있으며, 이미지는 <img> 태그를 사용하여 표시됩니다. 이 코드를 사용하면 페이지가 로드될 때 자동으로 Unsplash API에서 이미지를 가져와서 표시하게 됩니다. 이를 통해 동적으로 콘텐츠를 로드하고 표시할 수 있습니다.