gatsby의 작업 내역

gatsby 입문 자습서를 다루는 0. 개발 환경 설정
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1)
이번 : gatsby 입문 튜토리얼을 해낸다 1. 개츠비 빌딩 블록에 대해 아는 (2)
gatsby 입문 자습서 2. 개츠비 스타일링 개요
gatsby 시작하기 튜토리얼 3. 중첩 된 레이아웃 구성 요소 만들기
gatsby 입문 자습서 4. 개츠비 데이터
gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링
gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역
gatsby 입문 튜토리얼을 다루는 7. 프로그래밍 방식으로 데이터에서 페이지 만들기
gatsby 입문 자습서 8. 게시할 사이트 준비
gatsby 입문 블로그 만들어서 서버에 올려보자

튜토리얼

튜토리얼의 1.Get to Know Gatsby Building Blocks의 계속
htps //w w. tsbyys. 코 m / 쓰리 아 l / 파 rt 오네 / # 부이 l ぢ g ぃ th-코 m 포넨 ts
에서 튜토리얼을 해 나갑니다.

Building with components

구성 요소를 사용한 구축
components는 사용하는 느낌의 UI 부속이라고 하는 감각?

Using page components

src/pages/about.js를 만들어 다음을 설명

src/pages/about.js

import React from "react"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <h1>About Gatsby</h1>
      <p>Such wow. Very React.</p>
    </div>
  )
}

만든 후 액세스http://localhost:8000/about
예!
page는 작성한 파일의 파일명에 연동하는 것인가.

Using sub-components

Header 컴포넌트 만들기
다음 디렉토리 만들기src/componentssrc/components/header.js를 만들어 다음을 설명

src/components/header.js

import React from "react"

export default function Header() {
  return <h1>This is a header.</h1>
}

src/pages/about.js에 Header 구성 요소를 추가합니다.

src/pages/about.js

import React from "react"
import Header from "../components/header"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header />
      <p>Such wow. Very React.</p>
    </div>
  )
}

Header가 반영되었는지 확인

다음으로 Header를 다음과 같이 수정

src/components/header.js

import React from "react"

export default function Header(props) {
  return <h1>{props.headerText}</h1>
}

src/pages/about.js를 다음과 같이 수정

src/pages/about.js

import React from "react"
import Header from "../components/header"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header headerText="About Gatsby" />
      <p>Such wow. Very React.</p>
    </div>
  )
}

반영되었는지 확인
props를 사용하는 것으로 컴퍼넌트에 값의 전달을 할 수 있기 때문에, 재이용하기 쉽다고.
. . . 규칙 제대로 하지 않으면 각 사람이 할 수 있을 것 같네요.

Using layout components

layout components는 별도 튜토리얼로 기재라고.

Using the <Link /> component

src/pages/index.js를 다음과 같이 수정

src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <Link to="/contact/">Contact</Link>
      <Header headerText="Hello Gatsby!" />
      <p>What a world.</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  )
}

src/pages/contact.js를 만들고

src/pages/contact.js

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default function Contact() {
  return (
    <div style={{ color: `teal` }}>
      <Link to="/">Home</Link>
      <Header headerText="Contact" />
      <p>Send us a message!</p>
    </div>
  )
}

화면 전환이 가능한지 확인

Deploying a Gatsby site

배포는 후회!

이 튜토리얼은 이상.
이번은 여기까지.

고마워요.