gatsby.js에서 API를 사용하지 않고 인스타그램 사진을 표시하는 방법

개념

gatsby의 블로그 등에서 자신의 인스타의 사진을 표시하고 싶어서, Instagram Graph API는 너무 조금 너무 결국 포기해 버리는 경우가 많다고 생각합니다.
이 기사에서는 gatsby-source-instagram이라는 플러그인을 사용하여 표시하려는 프로필을 사용자 이름으로 지정하고 사진을 표시하는 간단한 방법을 소개합니다.
인스타그램 사진을 도입하는 단계에서 시작하는 gatsby.js가 필요하므로 준비하십시오.

(EDIT 29.09.2020): gatsby-source-instagram 플러그인에서 더 이상 "해시태그로 조리개"및 "사용자 이름 조리개"기능을 사용할 수 없습니다. 자세한 내용은 플러그인 페이지을 참조하십시오.

프로젝트 폴더 내용

프로젝트 폴더는 다음과 같습니다.

 - src
    -- components
        --- instagram.js
        --- layout.js
        …
    -- hooks
        --- use-instagram.js
        …
    -- pages
        --- index.js
        --- about.js
        …
- gatsby-config.js
- gatsby-node.js
- package.json
…

필요한 플러그인 및 종속성 설치

먼저 다음 플러그인을 설치합니다.

플러그인 목록

gatsby-source-filesystem ※ gatsby에 데이터를 복사하기 위해

gatsby-transformer-sharp ※ 이미지의 사이즈

gatsby-plugin-sharp ※ max-width, max-height를 사용할 수 있도록

gatsby-image ※ 이미지 로딩

gatsby-source-instagram ※ 인스타그램 제휴

터미널에서 npm을 사용하여 플러그인을 단번에 설치합니다.

terminal

npm install gatsby-source-filesystem gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image gatsby-source-instagram --save

gatsby-config.js 작성

설치한 플러그인을 gatsby-config.js에서 설정합니다.
gatsby-source-instagram의 username 위치에 사용자 ID를 입력합니다.

gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: 'images',
      }
    },
    {
      resolve: 'gatsby-source-instagram',
      options: {
        username: '//インスタのユーザーID'
      }
    }
  ],
}

사용자 ID를 확인하려면 로드할 인스타그램 프로필 페이지를 마우스 오른쪽 단추로 클릭한 다음 페이지 소스 보기를 클릭합니다. 소스에서 profilePage_를 찾아 오른쪽에 있는 번호를 username에 입력합니다. 예를 들어, 이 페이지의 사용자 ID를 찾으면 "profilePage_25573873494"가 나오므로 ID는 25573873494입니다.

use-instagram.js 작성

다음은 인스타그램의 hooks(hooks/use-instagram.js)를 만들고 query로 사진을 가져옵니다.limit:12 위치에 사진 수를 설정할 수 있습니다. (상한은 최근 12사진까지)fluid(maxWidth: 120 maxHeight: 120) 위치에 사진의 크기를 설정할 수 있습니다. px가 됩니다.

use-instagram.js

import { graphql, useStaticQuery } from 'gatsby';

const useInstagram = () => {
    const data = useStaticQuery(graphql`
    query {
        allInstaNode(limit: 12) {
            nodes {
              id
              caption
              username
              localFile {
                childImageSharp {
                  fluid(maxWidth: 120, maxHeight: 120) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
    }
    `)
return data.allInstaNode.nodes.filter(function(node) {
    if (node.localFile === null) {
      return false;
    }
    return true;
}).map(node => ({
    ...node.localFile.childImageSharp,
    id: node.id,
    caption: node.caption,
    username: node.username,
}))
};
export default useInstagram;

인스타그램 구성 요소 만들기

다음은 components 폴더에 인스타그램 구성 요소를 만듭니다. 여기에는 gatsby-image가 필요합니다.
위에 쓴 use-instagram.js도 사용하므로 가져오기를 잊지 마세요.

instagram.js

import React from 'react';
import Image from 'gatsby-image';
import useInstagram from '../hooks/use-instagram';

const Insta = () => {
    const instaPhotos = useInstagram();
    const { username } = instaPhotos[0];
    return (
        <>
            <h2>Instagram posts from @{username}</h2>
            <div>
                {instaPhotos.map(photo => (
                    <a 
                        key={photo.id}
                        href={`https://instagram.com/p/${photo.id}`}
                    >
                      <Image
                          fluid={photo.fluid}
                          alt={photo.caption}
                      />
                    </a>
                ))}
            </div>
            <a href={`https://instagram.com/${username}`}>See more on Instagram</a>
        </>
    )
}
export default Insta;

원하는 페이지에 인스타의 구성 요소를 올려 놓습니다.

마지막으로 사진을 보려는 페이지의 파일(예: 톱 페이지)에 앞서 쓴 인스타그램 컴포넌트를 가져와서 적당한 곳에 컴포넌트를 넣습니다.

index.js

import React from 'react';
import Insta from '../components/instagram';
export default () => {
    return (
        <>
            <Layout>
                <Insta />
            </Layout>
        </>
    )
}

결론

후에는 css 등을 조금 궁리하면 이렇게 되었습니다.