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 입문 블로그 만들어서 서버에 올려보자

튜토리얼

이번에 실시하는 gatsby의 튜토리얼은 이쪽
htps //w w. tsbyys. 코 m/트리어 l/파 rt-오네/
개츠비 빌딩 블록이라는 것을 알 수 있는 것 같습니다.

Using Gatsby starters

지난번 , hello-world 사이트를 명령으로 만든 것처럼 다음 명령으로 gatsby 사이트를 만들 수 있습니다.gatsby new [サイトのディレクトリ名] [ベースとなるgatsbyサイトのリポジトリURL(Github)]리포지토리 URL을 생략하면 다음이 기본입니다.
htps : // 기주 b. 이 m /은 tsbyjs /

Open up the code

VS Code로 만든 hello-world 디렉토리를 엽니다.

hello-world 사이트를 시작하지 않은 경우 시작합니다.cd hello-world(gatsbyを作成したディレクトリ)gatsby develop

Familiarizing with Gatsby pages

Make changes to the “Hello World” homepage

1. hello-world 디렉토리의 src/pages 디렉토리로 이동하여 index.js를 변경하면 사이트 정보가 업데이트되는지 확인합니다.
원본 데이터

수정

핫 로딩 확인!
2. 보다 알기 쉽게 변화를 실감한다
src/pages/index.js를 다음으로 다시 작성

src/pages/index.js

import React from "react"

export default function Home() {
  return <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>
}

알기 쉬운 변화! !
3. 좀 더 변화
src/pages/index.js를 다음으로 다시 작성

src/pages/index.js

import React from "react"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
    </div>
  );
}

4. 이미지 추가

src/pages/index.js

import React from "react"

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

다음은 컴퍼넌트에 대해서이지만 오늘 바빴기 때문에, 매우 졸린다.
오늘 여기까지입니다.

고마워요.