Gatsby 페이지 구현하기

import queryString, { ParsedQuery } from 'query-string'

const somePage: FunctionComponent<~Props> = function(){
	const parsed: ParsedQuery<string> = queryString.parse(location.search)
	const selected: string =
		typeof parsed.someCategory !== 'string' || !parsed.someCategory
			? 'All' 
			: parsed.someCategory

	return <div />
}

array.reduce((accumulator, current)=>{
	...
	return accumulator;
}, {initialValue})

array.filter((sort) => result)
// array 반환
// true : 배열에 요소 유지 | false : 배열에 요소 제거

const somePage: FunctionComponent<~Props> = function(){
	const listTabs = useMemo(()=>
		data.reduce((list, {node:{ frontmatter: { querys }}}) =>{
			querys.forEach((query)=>{
				query in list ? list[query]++ : (list[query] = 1)
			})
			list['All']++
			return list
		},{ All: 0 })
	,[])

	const data = useMemo(() => (
			items.filter({node:{someCategory}}) =>
				selected === 'All' ? true : someCategory.includes(selected)

		), [selected]
	)

	return (
		<Template>
			<Tabs listTabs={listTabs} />
			<ListWrapper ref={}> // Infinity Scroll
				{data.map(
					({node:{props, slug}}) => <Item {...props} link={slug} />
				)}
			</ListWrapper>
		</Template>
	)
}

const List: FunctionComponent<ListProps> =({ propsData }) =>{
	const { containerRef, itemsList } = hook( propsData )
	return(
		<ListWrapper ref={containerRef}>
			{itemsList.map(
				({node:{props, slug}}) => (
					<Item {...props} link={slug} />
				)
			)}
		</ListWrapper>
	)
}

const hook = ({ propsData }) => {
	const containerRef = MutableRefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null)
	const observer: MutableRefObject<IntersectionObserver | null> = useRef<IntersectionObserver>(null)
	const [count, setCount] = useState<number>(1)

	const itemsData = [...propsData] // propsData 필터 하기(propsData.filter((selected) => true array)

	useEffect(()=>{
		observer.current = new IntersectionObserver((entries, observer) =>{
				if (!entries[0].isIntersecting) return
				setCount(val => val + 1)
				observer.unobserve(entries[0].target)
			},
			{ threshold:1 },
		)
	}, [])

	useEffect(() =>{
		if(데이터 없을 시, 데이터 적을 시 ||
			containerRef.current === null ||
			containerRef.current.children.length === 0
		)
			return
		
		// 감지 할 object : 제일 마지막 children
		observer.current.observe(
			containerRef.current.children[containerRef.current.children.length - 1]
		)
	}, [count])

	return{
		containerRef,
		itemsList: itemsData.slice(0, count);
	}
}

const path = require('path')
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
	const { createNodeField } = actions
	if (node.internal.type === `MarkdownRemark`) {
		const slug = createFilePath({ node, getNode })
		createNodeField({ node, name: 'slug', value: slug })
	}
}

import React, { FunctionComponent } from 'react'

const someTemplate: FunctionComponent<~Props> = function (props) {
  console.log(props)

  return <div></div>
}

export default someTemplate

const path = require('path')

exports.createPages = async ({ actions, graphql, reporter }) => {
	const { createPage } = actions

	const queryAllMarkdownData = await graphql(
		`
			{
				allMarkdownRemark(
					sort: {
						order: DESC
						fields: [frontmatter___date, frontmatter___title]
					}
				) {
					edges {
						node {
							fields {
								slug
							}
						}
					}
				}
			}
		`,
	)

	// Handling GraphQL Query Error
	if (queryAllMarkdownData.errors) {
		reporter.panicOnBuild(`Error While running query`)
		return
	}

	// Import Post Template Component
	const PostTemplateComponent = path.resolve(
		__dirname,
		`src/templates/some_template.tsx`,
	)

	// Page Generating Function
	const generatePage = ({
		node: {
			fields: { slug },
		},
	}) => {
		const pageOptions = {
			path: slug,
			component: PostTemplateComponent,
			context: { slug },
		}
		createPage(pageOptions)
	}
	// Generate Post Page And Passing Slug Props for Query
	queryAllMarkdownData.data.allMarkdownRemark.edges.forEach(generatePage)
}

...
query queryMarkdownDataBySlug($slug: String){
	allMarkdownRemark(filter: { fields: { slug: { eq: $slug } } }) {edges{node...}}
}

interface ContentProps{
	html: string
}
const Content: FunctionComponent<ContentProps> = ({html}) =>{
	return <Some dangerouslySetInnerHTML={{_html: html}}>
}

yarn add @types/react-helmet

import { Helmet } from 'react-helmet'

const Template: FunctionComponent<TemplateProps> = function({
	title,
	descriptions,
	url,
	...
}){
	return(
		<Wrapper>
			<Helmet>
				<title>WebSite</title>
				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />

				<meta property="og:title" content={title} />
				<meta property="og:description" content={description} />
				<meta property="og:image" content={image} />
				<meta property="og:url" content={url} />
				<meta property="og:site_name" content={title} />				
			</Helmet>
			...
		</Wrapper>
	)
}

module.exports = {
  siteMetadata: {
    title: `사이트 이름`,
    description: `사이트 설명`,
    author: `이름`,
    siteUrl: `~/`,
  },
}

type IndexProps = {
	...
	data: {
		site: {
			shiteMetadata: {
				title: string
				description: string
				siteUrl: string
			}
		}
	}
	...
	file: {
		publicURL: string
	}
}

const Index: FunctionComponent<IndexProps> = function({
	data: {
		site: {
			siteMetadata: {title, description, siteUrl}
		}
	}
}) {
	return (
		<Template
			title={title}
      description={description}
      url={siteUrl}
      image={publicURL}
		/>
	)
}

export const getIndex = graphql`
	query getIndex {
		site{
			siteMetadata{
				title
				description
				siteUrl
			}
		}
	}
`

type TemplateProps = {
	...
	location: {
		href: string
	}
}

const Template: FunctionComponent<TemplateProps> = function({
	...
	location: { href },
}) {

	return (
		<Template
			title={title}
      description={summary}
      url={href}
      image={publicURL}
		/>
	)
}

export const queryMarkdown = graphql`
	query queryMarkdown($slug: String) {
		allMarkdownRemark(sort){
			edges {
				node{ ... }
			}
		}
	}
`

<head>
	<link rel="canonical" href="https://www.~.com" />
</head>

yarn add gatsby-plugin-canonical-urls

module.exports = {
	plugins: [
		{
			resolve: `gatsby-plugin-canonical-urls`,
			options: {
				siteUrl: `https://www.~.com`,
				stripQueryString: true,
			},
		},
	],
};

yarn add gatsby-plugin-sitemap

module.exports = {
	plugins: [
		'gatsby-plugin-sitemap',
	],
};

yarn add gatsby-plugin-robots-txt

module.exports = {
	plugins: [
		{
			resolve: 'gatsby-plugin-robots-txt',
			options: {
				policy: [{ userAgent: '*', allow: '/' }],
			},
		},
	],
};