$$config title: [gatsby] gatsby plugin keywords: - IT - gatsby $$ # Gatsby 플러그인란? - atsby 용어로 플러그인 은 사이트에 추가 기능을 추가하기 위해 설치하는 별도의 npm 패키지 # Gatsby 플러그인 용도 - 1. 일부 플러그인은 사전 구축된 구성 요소를 제공하고, 다른 플러그인은 분석을 추가하고, 다른 플러그인은 데이터를 사이트로 가져올 수 있습니다. - 2. 일부 플러그인은 Gatsby 직원이 빌드하고 다른 플러그인은 커뮤니티 구성원이 빌드하고 유지 관리 # Gatsby 플러그인 추가방법 - 1. npm을 사용 하여 플러그인을 설치합니다 . - 2. 사이트 gatsby-config.js파일 에서 플러그인을 구성 합니다. - 3. 필요에 따라 사이트 의 플러그인 기능을 사용 합니다. # Gatsby 플러그인 종류 및 설명 - gatsby-plugin-image : 높은 성능 점수를 유지하면서 사이트에 반응형 이미지를 추가 - gatsby-plugin-sharp : 사용하는 실제 이미지 처리를 처리 - gatsby-source-filesystem : 컴퓨터의 파일 시스템에서 데이터를 가져올 수 있다. # Gatsby 플러그인 구성요소 활용(인터넷에 올라와있는 배경사용) - src(문자열): 로드하려는 이미지의 URL입니다. ( HTML 요소 의 src속성에 입력한 것과 동일합니다 .) - alt(문자열): 이미지를 설명하는 대체 텍스트입니다. 이것은 스크린 리더에서 사용하거나 이미지를 로드하는 데 문제가 있는 경우에 사용됩니다. ```js import * as React from 'react' import Layout from '../components/layout' import { StaticImage } from 'gatsby-plugin-image' const IndexPage = () => { return (

I'm making this by following the Gatsby Tutorial.

) } export default IndexPage ``` # Gatsby 플러그인 구성요소 활용(다운받은 배경사용) ```js import * as React from 'react' import Layout from '../components/layout' import { StaticImage } from 'gatsby-plugin-image' const IndexPage = () => { return (

I'm making this by following the Gatsby Tutorial.

) } export default IndexPage ```