[컴][웹] gatsby 프로젝트 생성하고 page 만들기

게츠비 / gatsbyjs / 개츠비 /

gatsby 프로젝트 생성하고 page 만들기

npm init gatsby -ts로 시작하기 (typescript)

• TypeScript and Gatsby | Gatsby

npm i gatsby-cli
npm init gatsby -ts

d:\a\prog\sashow\gatsby-inint\my-gatsby-site2>npm init gatsby -ts
create-gatsby version 3.6.0
...
This command will generate a new Gatsby site for you in d:\a\prog\sashow\gatsby-inint\my-gatsby-site2 with the setup you select. Let's answer some questions:


What would you like to call your site?
√ · my-site-test
What would you like to name the folder where your site will be created?
√ my-gatsby-site2/ my-site-test
√ Will you be using JavaScript or TypeScript?
· TypeScript
√ Will you be using a CMS?
· No (or I'll add it later)
√ Would you like to install a styling system?
· No (or I'll add it later)
√ Would you like to install additional features with other plugins?No items were selected

npm run develop

이제 http://localhost:8000 으로 접속할 수 있다.

typescript를 쓸때 제약사항들:

• Current limitations | TypeScript and Gatsby | Gatsby

gasby new 로 생성

npm i gatsby-cli
node_modules\.bin\gatsby.cmd new my-gatsby-site

my-gatsby-site
node_modules\.bin\gatsby.cmd init

npx gatsby new my-gatsby-site

위 command 로 생성을 하면, 아래처럼 파일이 만들어진다.(gatsby 5.6.1)

src\
    - components\
        - header.js
        - index.module.css
        - layout.css
        - layout.js
        - seo.js
    - images\
        - example.png
        - gatsby-icon.png
    - pages\
        - 404.js
        - index.js
        - page-2.js
        - using-ssr.js
        - using-typescript.tsx
    - templates\ 
        - using-dsg.js
.gitignore
.prettierignore
.prettierrc
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
LICENSE
package.json
package-lock.json
README.md

gatsby develop을 하면 실행된다.

node_modules\.bin\gatsby.cmd develop

이러면 /public 폴더에 static page 들이 만들어진다.

page 만들기

여기 를 보면 된다.

• Part 2: Use and Style React Components | Gatsby

src/pages/about.tsx 를 만들면 된다. 그러면 이것은 http://localhost:8000/about 으로 가서 접근할 수 있다.

pages folder 내에 있는 page 에서 Head 를 export 하면 자동으로 head tag 에 넣어준다.(참고)

// about.tsx 예시
import * as React from 'react'

const AboutPage = () => {
  return (
    <main>
      <h1>About Me</h1>
      <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
    </main>
  )
}

// pages folder 내에 있는 page 에서 Head 를 export 하면 자동으로 head tag 에 넣어준다.
export const Head = () => <title>About Me</title>

export default AboutPage

gatsby 에 대한 짧은 생각

gatsby 로 page 에 원하는 .js/ts 를 만들면 된다. 그러면, 결국은 각 page 로 나눠진 react 를 만들 수 있다.

여기에 더해, 쇼핑몰 같은 homepage 를 만든다고 하면, 특정 상품마다, url 이 다르고, page 가 있다. 이런 경우는 각 page를 만드는 것이 오래 걸릴 수 밖에 없고, 그것을 수동으로 하기엔 양이 너무 많아진다.

즉 이것은 이전에 서버단에 있던 template engine 같은 것들을 이용할 수 있다.

그런데, 이것을 굳이 template page 를 사용하고 싶지 않다. 그리고 template engine 도 써야하고, react library 도 써야 한다. 이것이 오히려 복잡하다는 느낌을 준다.

이것을 미리 build 시점에 만들어서 serve를 하게 되면, 우리는 react 의 이점은 누리면서, 굳이 template engine 을 사용하지 않아도 된다.

Reference

1. Part 1: Create and Deploy Your First Gatsby Site | Gatsby