Gatsby 프로젝트 생성

npx gatsby-cli new "NEW PROJECT"

/**
 * @type {import('gatsby').GatsbySSR['onRenderBody']}
 */
const { gtmNoscript, gtmScript } = require('./src/components/Common/gtm-tag')

exports.onRenderBody = ({
  setHtmlAttributes,
  setHeadComponents,
  setPreBodyComponents,
}) => {
  setHtmlAttributes({ lang: `en` })
  setHeadComponents([gtmScript])
  setPreBodyComponents([gtmNoscript])
}

yarn add typescript --dev gatsby-plugin-typescript

module.exports = {
	plugins: [
    {
      resolve: 'gatsby-plugin-typescript',
      options: {
        isTSX: true,
        allExtensions: true,
      },
    },
    ...
  ],
}

yarn tsc --init

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "allowJs": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "baseUrl": "./src",
    "paths": {
      "components/*": ["./components/*"],
      "utils/*": ["./utils/*"],
      "hooks/*": ["./hooks/*"]
    },
    "strict": true,
    "jsx": "preserve",
    "jsxImportSource": "@emotion/react",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*.tsx"],
  "exclude": ["node_modules"]
}

/**
 * @type {import('gatsby').GatsbyNode['createPages']}
*/
const path = require('path')

// Setup Import Alias
exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
  const output = getConfig().output || {}

  actions.setWebpackConfig({
    output,
    resolve: {
      alias: {
        components: path.resolve(__dirname, 'src/components'),
        utils: path.resolve(__dirname, 'src/utils'),
        hooks: path.resolve(__dirname, 'src/hooks'),
      },
    },
  })
}

import {FunctionComponent} from 'react'

const SomePage: FunctionComponent = function(){
	return <Text />
}
export default SomePage

import {FunctionComponent} from 'react'

interface SomeProps {
	text: string
}

const SomePage: FunctionComponent<SomeProps> = function(){
	return <Text />
}
export default SomePage

interface SomeProps {
	title: string
}
interface SomeProps {  // 선언적 확장도 가능
	body: string
}
interface SomeProps2 extends SomeProps {
	SomeBody: string
}
const MyContents: SomeProps2 = {
	title: '...',
	body: '...',
	SomeBody: '...',
}

type SomeProps{
	title: string
} & {
	body: string
}

type SomeArray = {
	[key in Somes]: string
}

yarn add gatsby-plugin-emotion @emotion/react @emotion/styled

module.exports = {
	plugins: [
		...
    `gatsby-plugin-emotion`,
    ...
  ],
}

import { Global, css } from '@emotion/react'
const defaultStyle = css`
  body {
    margin: 0;
    padding: 0;
    font-family: Pretendard, system-ui, -apple-system, BlinkMacSystemFont,
      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
      'Helvetica Neue', sans-serif;
    color: #333;
  }
`
const GlobalStyle: FunctionComponent = function () {
  return <Global styles={defaultStyle} />
}
export default GlobalStyle

import { css } from '@emotion/react'
const SomeStyle = css`
	font-size:14px;
`
...
<div css={SomeStyle}></div>
...

import { styled } from '@emotion/react'
const SomeStyledComponent = styled.div`
	font-size:14px;
`
<SomeStyledComponent></SomeStyledComponent>

import { styled } from '@emotion/react'
const SomeStyledComponent = styled('div')(() =>({
	fontSize: '14px'
}))
<SomeStyledComponent></SomeStyledComponent>

const SomeStyledComponent = styled.div<{ disable: boolean }>`
	text-decoration: ${({ disable })=>( disable ? `line-through` : `none`)}
`

const SomeComponent = styled('div')<{ disable: boolean}>(({ disable })=>({
	textDecoration: disable ? `line-through` : `none`,
}))

const Component = styled(({ active, ...props }: Props타입명시) =>(
	<Link {...props} />
)) <Some타입명시>`
	font-size: 14px;
`

yarn add gatsby-transformer-remark gatsby-remark-images gatsby-remark-prismjs prismjs gatsby-remark-smartypants gatsby-remark-copy-linked-files gatsby-remark-external-links

module.exports = {
	...
	plugins: [
		{
			resolve: `gatsby-plugin-typescript`,
			options: {
				isTSX: true,
				allExtensions: true,
			},
		},
		`gatsby-plugin-emotion`,
		{
			resolve: `gatsby-source-filesystem`,
			options: {
				name: `contents`,
				path: `${__dirname}/contents`,
			},
		},
		{
			resolve: `gatsby-source-filesystem`,
			options: {
				name: `images`,
				path: `${__dirname}/static`,
			},
		},
		`gatsby-transformer-sharp`,
		`gatsby-plugin-sharp`,
		{
			resolve: `gatsby-omni-font-loader`,
			options: {
				enableListener: true,
				preconnect: [`https://cdn.jsdelivr.net/gh/orioncactus/pretendard`],
				web: [
					{
						name: `Pretendard`,
						file: `https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css`,
					},
				],
			},
		},
		{
			resolve: `gatsby-transformer-remark`,
			options: {
				plugins: [
					{
						resolve: `gatsby-remark-smartypants`,
						options: {
							dashes: `oldschool`,
						},
					},
					{
						resolve: `gatsby-remark-autolink-headers`,
						options: {
							className: `link-headers`,
							elements: [`h2`],
						},
					},
					`gatsby-remark-code-titles`,
					{
						resolve: `gatsby-remark-prismjs`,
						options: {
							classPrefix: `language-`,
						},
					},
					{
						resolve: `gatsby-remark-images`,
						options: {
							maxWidth: 768,
							quality: 100,
							withWebp: true,
						},
					},
					{
						resolve: `gatsby-remark-copy-linked-files`,
						options: {},
					},
					{
						resolve: `gatsby-remark-external-links`,
						options: { target: `_blank`, rel: `nofollow` },
					},
				],
			},
		},
		...
	],
}

import 'prismjs/themes/prism-tomorrow.css';

View GraphiQL, an in-browser IDE, to explore your site's data and schema

	http://localhost:8000/___graphql 

import { graphql } from 'gatsby'
type SomeContentProps = {  // GraphQL 스키마 정의
	data: {
		someQuery:{
			some: string
		}
	}
}
const SomeContent: FunctionComponent<SomeContentProps> = function({
	// 결과 값 : Props(data 키)
	data: {
		someQuery: {
			some
		}
	}
}) {
	return(
		<div> {some} </div>
	)
}
export default SomeContent

export const someQuery = graphql`  // Query export(질의)
	query someQuery { // 디버깅 시 로그에서 쿼리 이름(someQuery) 확인 가능
		{
			some{}
		}
	}
`

import { graphql } from 'gatsby'
type SomePageProps = {
	data:{
		allMarkdownRemark:{
			edges: {node:{id...}}
		}
		file:{
			childrenImagesharp: string
		}
	}
}
const SomePage: FunctionComponent<SomePageProps> = function({
	data: {
		allMarkdownRemark: {edges},
		file:{
			childrenImageSharp: {gatsbyImageData},
		}
	}
}) {

	return (<div />)
}
export default SomePage

export const SomeQuery = graphql`
	query SomeQuery {
		allMarkdownRemark(sort){
			edges{
				node{
					id
					frontmatter{ title summary....}
				}
			}
		}
		file(name: {} ){
			childImageSharp{
				gatsbyImageData(width:..., height:,,,)
			}
		}
	}
`