응답 NextJS Instagram UI 클론 생성 - 프로파일 페이지 6부

반응형

이 기사에서는 불플래시 이미지를 게시물로 가져올 것입니다.

클라이언트 키 가져오기

플래시되지 않은 개발자로 이동하여 "앱"을 클릭하면 "액세스 키" 및 "비밀 키"가 있습니다.

 

.env.local 생성

클라이언트 키가 123456이라고 가정한 다음 .env.local 파일 내에 다음을 입력합니다.

NEXT_PUBLIC_client_id=123456

서버를 재시작해야 작동합니다.

 

API 사용

언플래시 API를 사용하려면 axios 를 사용해야 합니다.

yarn add axios

그 후, 우리는 상단에 있는 공리를 수입합니다.

import axios from 'axios';

 

데이터를 가져오려면 useEffect with axiosis를 사용합니다.

useEffect(() => {
  console.log('NEXT_PUBLIC_client_id', process.env.NEXT_PUBLIC_client_id)
  const fetchData = async () => {
    const data = await axios.get(`https://api.unsplash.com/search/photos?page=1&query=office&client_id=${process.env.NEXT_PUBLIC_client_id}`)
    console.log('data',data)
  }
  fetchData()
}, [])

우리는 이미지 링크만 받고 싶기 때문에 json을 해체하고 어레이 맵 기능을 사용해야 합니다.

우리는 결과를 얻고, 결과를 매핑하고, item.link.download를 얻기 위해 분석한다.

 

useEffect(() => {
  const fetchData = async () => {
    const { data: { results } } = await axios.get(`https://api.unsplash.com/search/photos?page=1&query=office&client_id=${process.env.NEXT_PUBLIC_client_id}`)
    const edited_results = results.map(item => item.links.download)
    console.log('data', edited_results);
  }
  fetchData()
}, [])

이제 이미지 링크만 있는 깔끔한 배열이 제공됩니다.

만약 당신이 이 이야기를 좋아한다면, 당신은 미디엄 멤버십을 좋아할 수도 있습니다. 한 달에 5달러(커피 한 잔 가격!)에 불과하지만, 여러분이 좋아하는 작가들을 지원하면서 이야기를 무제한으로 접할 수 있게 해 줄 것입니다. 당신이 이 링크를 이용해 가입하면 나는 약간의 수수료를 벌게 됩니다. 고마워!

팔로우: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora

 

돈을 벌기 위해 계열사에 가입하세요.

https://ckmobile.gumroad.com/affiliates