Skip to content

Commit 0b9bad0

Browse files
pyjun01pyjun01
committed
feat: upgrade gatsby to v5
1 parent b779c32 commit 0b9bad0

19 files changed

+6957
-8477
lines changed

‎.vscode/settings.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,6 @@
1919
"[javascript]": { "editor.formatOnSave": true },
2020
"[javascriptreact]": { "editor.formatOnSave": true },
2121
"[typescript]": { "editor.formatOnSave": true },
22-
"[typescriptreact]": { "editor.formatOnSave": true }
22+
"[typescriptreact]": { "editor.formatOnSave": true },
23+
"typescript.tsdk": "./node_modules/typescript/lib"
2324
}

‎gatsby-config.js renamed to ‎gatsby-config.ts

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
1-
const { trackingId } = require('./key.json');
1+
import path from 'path';
22

3-
module.exports = {
3+
/** @type {import('gatsby').GatsbyConfig} */
4+
const config = {
45
siteMetadata: {
56
description: 'pyjun01 블로그',
67
siteUrl: 'https://pyjun01.github.io',
78
},
89
trailingSlash: 'always',
910
plugins: [
10-
'gatsby-plugin-sitemap',
11-
'gatsby-plugin-react-helmet',
12-
'gatsby-plugin-styled-components',
13-
'gatsby-plugin-image',
14-
'gatsby-plugin-sharp',
15-
'gatsby-transformer-sharp',
1611
{
1712
resolve: 'gatsby-plugin-typescript',
1813
options: {
19-
isTSX: true, // defaults to false
14+
isTSX: true,
15+
allExtensions: true,
2016
jsxPragma: `jsx`, // defaults to "React"
21-
allExtensions: true, // defaults to false
2217
},
2318
},
19+
'gatsby-plugin-sitemap',
20+
'gatsby-plugin-react-helmet',
21+
'gatsby-plugin-styled-components',
22+
'gatsby-plugin-image',
23+
'gatsby-plugin-sharp',
24+
'gatsby-transformer-sharp',
2425
'gatsby-plugin-mdx',
25-
{
26-
resolve: 'gatsby-plugin-mdx-frontmatter',
27-
},
2826
{
2927
resolve: 'gatsby-source-filesystem',
3028
options: {
3129
name: 'blog',
32-
path: `${__dirname}/src/blog`,
30+
path: path.resolve('./src/blog'),
3331
},
3432
},
3533
{
@@ -40,3 +38,5 @@ module.exports = {
4038
},
4139
],
4240
};
41+
42+
export default config;

‎gatsby-node.js

-16
This file was deleted.

‎gatsby-node.mjs

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import slugify from '@sindresorhus/slugify';
2+
import { compileMDXWithCustomOptions } from 'gatsby-plugin-mdx';
3+
4+
import remarkHeadingsPlugin from './remark-headings-plugin.mjs';
5+
6+
/**
7+
* Greets a user.
8+
* @param {import('gatsby').CreateSchemaCustomizationArgs} args
9+
*/
10+
export const createSchemaCustomization = async ({
11+
getNode,
12+
getNodesByType,
13+
pathPrefix,
14+
reporter,
15+
cache,
16+
actions,
17+
schema,
18+
store,
19+
}) => {
20+
const { createTypes } = actions;
21+
22+
const headingsResolver = schema.buildObjectType({
23+
name: `Mdx`,
24+
fields: {
25+
headings: {
26+
type: `[MdxHeading]`,
27+
async resolve(mdxNode) {
28+
const fileNode = getNode(mdxNode.parent);
29+
30+
if (!fileNode) {
31+
return null;
32+
}
33+
34+
const result = await compileMDXWithCustomOptions(
35+
{
36+
source: mdxNode.body,
37+
absolutePath: fileNode.absolutePath,
38+
},
39+
{
40+
pluginOptions: {},
41+
customOptions: {
42+
mdxOptions: {
43+
remarkPlugins: [remarkHeadingsPlugin],
44+
},
45+
},
46+
getNode,
47+
getNodesByType,
48+
pathPrefix,
49+
reporter,
50+
cache,
51+
store,
52+
}
53+
);
54+
55+
if (!result) {
56+
return null;
57+
}
58+
59+
return result.metadata.headings;
60+
},
61+
},
62+
},
63+
});
64+
65+
createTypes([
66+
`
67+
type MdxHeading {
68+
value: String
69+
depth: Int
70+
}
71+
`,
72+
headingsResolver,
73+
]);
74+
};
75+
76+
/**
77+
* Greets a user.
78+
* @param {import('gatsby').CreateNodeArgs<{ frontmatter: { title: string } }>} args
79+
*/
80+
export const onCreateNode = ({ node, actions }) => {
81+
const { createNodeField } = actions;
82+
if (node.internal.type === `Mdx`) {
83+
createNodeField({
84+
node,
85+
name: `slug`,
86+
value: `${slugify(node.frontmatter.title)}`,
87+
});
88+
}
89+
};

‎package.json

+23-26
Original file line numberDiff line numberDiff line change
@@ -22,41 +22,38 @@
2222
"deploy": "gatsby build && gh-pages -d public"
2323
},
2424
"dependencies": {
25-
"@mdx-js/mdx": "^1.6.22",
26-
"@mdx-js/react": "^1.6.22",
25+
"@mdx-js/mdx": "^2.3.0",
26+
"@mdx-js/react": "^2.3.0",
27+
"@sindresorhus/slugify": "^2.2.1",
2728
"@types/github-slugger": "^1.3.0",
2829
"@types/react-helmet": "^6.1.3",
29-
"@types/styled-components": "^5.1.25",
30-
"babel-plugin-styled-components": "^2.0.7",
31-
"gatsby": "^4.13.1",
32-
"gatsby-plugin-image": "^2.13.0",
33-
"gatsby-plugin-mdx": "^3.13.0",
34-
"gatsby-plugin-mdx-frontmatter": "^0.0.4",
35-
"gatsby-plugin-react-helmet": "^5.15.0",
36-
"gatsby-plugin-sharp": "^4.13.0",
37-
"gatsby-plugin-sitemap": "^5.15.1",
38-
"gatsby-plugin-styled-components": "^5.13.0",
39-
"gatsby-plugin-typescript": "^4.13.0",
40-
"gatsby-remark-autolink-headers": "^5.14.0",
41-
"gatsby-source-filesystem": "^4.13.0",
42-
"gatsby-transformer-remark": "^5.14.0",
43-
"gatsby-transformer-sharp": "^4.13.0",
30+
"gatsby": "^5.14.0",
31+
"gatsby-plugin-image": "^3.14.0",
32+
"gatsby-plugin-mdx": "^5.14.0",
33+
"gatsby-plugin-react-helmet": "^6.14.0",
34+
"gatsby-plugin-sharp": "^5.14.0",
35+
"gatsby-plugin-sitemap": "^6.14.0",
36+
"gatsby-plugin-styled-components": "^6.14.0",
37+
"gatsby-plugin-typescript": "^5.14.0",
38+
"gatsby-remark-autolink-headers": "^6.14.0",
39+
"gatsby-source-filesystem": "^5.14.0",
40+
"gatsby-transformer-remark": "^6.14.0",
41+
"gatsby-transformer-sharp": "^5.14.0",
4442
"github-slugger": "^1.4.0",
43+
"mdast-util-to-string": "^4.0.0",
4544
"mdx-embed": "^1.1.2",
4645
"prism-react-renderer": "^1.3.3",
4746
"prismjs": "^1.29.0",
48-
"react": "^17.0.1",
49-
"react-dom": "^17.0.1",
47+
"react": "18.3.1",
48+
"react-dom": "18.3.1",
5049
"react-helmet": "^6.1.0",
51-
"styled-components": "^5.3.5"
50+
"styled-components": "^6.0.0",
51+
"stylis": "^4.0.0",
52+
"unist-util-visit": "^5.0.0"
5253
},
5354
"devDependencies": {
54-
"babel-preset-gatsby": "^1.14.0",
55-
"eslint": "^7.32.0",
56-
"eslint-config-prettier": "^8.3.0",
57-
"eslint-plugin-import": "^2.24.2",
58-
"eslint-plugin-prettier": "^4.0.0",
59-
"eslint-plugin-react": "^7.25.1",
55+
"babel-plugin-styled-components": "^2.1.4",
56+
"babel-preset-gatsby": "^3.14.0",
6057
"gh-pages": "^3.2.3",
6158
"prettier": "^2.4.0"
6259
}

‎remark-headings-plugin.mjs

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { visit } from 'unist-util-visit';
2+
import { toString } from 'mdast-util-to-string';
3+
4+
const transformer = (tree, file) => {
5+
let headings = [];
6+
7+
visit(tree, `heading`, (heading) => {
8+
headings.push({
9+
value: toString(heading),
10+
depth: heading.depth,
11+
});
12+
});
13+
14+
const mdxFile = file;
15+
if (!mdxFile.data.meta) {
16+
mdxFile.data.meta = {};
17+
}
18+
19+
mdxFile.data.meta.headings = headings;
20+
};
21+
22+
const remarkHeadingsPlugin = () => transformer;
23+
24+
export default remarkHeadingsPlugin;

‎src/blog/css-in-js.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ title: "React CSS-in-JS 시스템 만들기"
33
date: "2022-06-01"
44
preview: "styled-components 같은 React CSS-in-JS 시스템을 만드는 내용을 다룹니다."
55
tag: ["javascript", "vanilla", "css-in-js"]
6+
slug: 'css-in-js'
67
---
78

8-
import TableOfContents from '../components/blog/TableOfContents.tsx';
99
import HelloWorld from '../components/blog/css-in-js/step1/HelloWorld.tsx';
1010
import App2 from '../components/blog/css-in-js/step2/App';
1111
import App3 from '../components/blog/css-in-js/step3/App';
1212

13-
<TableOfContents headings={props.headings} />
13+
<TableOfContents />
1414

1515
이 포스트는 styled-components를 리버스 엔지니어링 하면서 얻은 지식을 이용해 간단한 CSS-in-JS 시스템을 만들어보는 내용이다.
1616

‎src/blog/declarative-ui.mdx

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ title: 'Declarative UI 생각하기'
33
date: '2023-11-24'
44
preview: '선언형 UI와 그 요소들을 생각하고 플랫폼별 형태를 살펴봅니다.'
55
tag: ['declarative UI', '선언형 UI', 'component', '컴포넌트', 'composability', 'reactive', 'reactivity', 'react', 'svelte', 'Android', 'Jetpack Compose', 'iOS', 'SwiftUI']
6+
slug: 'declarative-ui'
67
---
78

8-
import TableOfContents from '../components/blog/TableOfContents.tsx';
9-
109
# 들어가기 전에
1110

1211
UI 개발 패러다임은 Imperative(명령형)에서 Declarative(선언형)로의 전진이 과거부터 지속해서 이루어져 왔고 현재도 진행 중이다. Web은 이미 2010년대에 SPA 기반의 Declarative UI들로 넘어왔고, App은 현재 iOS의 SwiftUI와 Android의 Jetpack Compose로 전환의 과정 중에 있다.
@@ -15,7 +14,7 @@ UI 개발 패러다임은 Imperative(명령형)에서 Declarative(선언형)로
1514
- <b>Declarative UI</b>에 대한 필자(= Web FE가 사고의 중심인 개발자)의 멘탈모델
1615
- 주력 플랫폼, 언어, 프레임워크가 아닌 곳의 Declarative UI 코드에 대한 조금이나 마의 익숙함
1716

18-
<TableOfContents headings={props.headings.slice(1)} />
17+
<TableOfContents />
1918

2019
# Declarative, Imperative
2120

‎src/blog/million-js.mdx

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ title: 'Million.js는 어떻게 React보다 최대 70% 빠를까?'
33
date: '2023-05-29'
44
preview: 'React의 Virtual DOM replacement인 Million.js의 코어 로직을 탐구하며 소개합니다.'
55
tag: ['javascript', 'react', 'react reconciliation', 'million.js', 'millionjs', 'virtual dom', 'react million.js']
6+
slug: 'million-js'
67
---
78

8-
import TableOfContents from '../components/blog/TableOfContents.tsx';
9-
10-
<TableOfContents headings={props.headings} />
9+
<TableOfContents />
1110

1211

1312
> 해당 글은 Million.js v2.3.2을 기준으로 작성되었습니다

‎src/blog/rsc.mdx

+3-5
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@ title: 'React Server Component 이모저모 알아보기'
33
date: '2023-08-22'
44
preview: 'React Server Component와 지탱하는 기술을 다룹니다.'
55
tag: ['javascript', 'react', 'rsc', 'server component', 'react component', 'react server component', 'next.js', 'app router']
6+
slug: 'rsc'
67
---
78

8-
import TableOfContents from '../components/blog/TableOfContents.tsx';
9-
10-
11-
<TableOfContents headings={props.headings} />
9+
<TableOfContents />
1210

1311
> 해당 글은 Next.js Server Component(app router, dynamic rendering)를 사용한다는 전제로 작성되어 있습니다. RSC의 동작과 구현은 프레임워크, 렌더링 방식 별로 다를 수 있습니다.
1412
@@ -285,7 +283,7 @@ export default function ClientComponent({ children }) {
285283

286284
둘은 서로 다른 목적과 개념을 가지고 있다. 요청에 맞는 HTML 생성이 목적인 dynamic rendering과 server에서 실행되는 component가 목적인 RSC는 서로 대체할 수 있는 게 아닌 <b>상호보완적인 관계</b>에 가깝다.
287285

288-
이 부분은 app router가 기본으로 dynamic rendering 처리를 해줘서 많은 사람이 헷갈려 하는데 <b style="color: #1971c2">server component</b>가 SSR을 하는 건 맞지만, SSR의 결과물은 기본적으로 HTML이 아닌 UI description(`["$","div",null,{"children":[...]}]`)이다. RSC 개념에 SSR은 들어가 있지만 dynamic rendering은 들어가 있지 않은 것이다. (<b style="color: #2f9e44">client component</b>는 당연하게도 CSR만 한다)
286+
이 부분은 app router가 기본으로 dynamic rendering 처리를 해줘서 많은 사람이 헷갈려 하는데 <b style={{color: "#1971c2"}}>server component</b>가 SSR을 하는 건 맞지만, SSR의 결과물은 기본적으로 HTML이 아닌 UI description(`["$","div",null,{"children":[...]}]`)이다. RSC 개념에 SSR은 들어가 있지만 dynamic rendering은 들어가 있지 않은 것이다. (<b style={{color: "#2f9e44"}}>client component</b>는 당연하게도 CSR만 한다)
289287

290288
그렇기 때문에 RSC를 사용하더라도 dynamic rendering이 필요하다면 여전히 dynamic rendering 처리를 해주어야 하며 아직 유효한 기술이다.
291289

‎src/blog/shadcn-ui.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
title: 'shadcn ui 자세히 알아보기'
33
date: '2024-05-13'
44
preview: 'shadcn/ui가 무엇인지와 동작 방식을 탐구하고 그 인기를 파헤칩니다.'
5-
tag: ['React', ‘shadcn ui’, 'shadcn', ‘shadcn ui under the hood’, ‘radix ui’, ‘tailwind css’, ‘nextjs’, ‘vitejs’]
5+
tag: ['React', ‘shadcn ui’, 'shadcn', ‘shadcn ui under the hood’, ‘radix ui’, ‘tailwind css’, ‘nextjs’, ‘vitejs’, 'shadcnui']
6+
slug: 'shadcn-ui'
67
---
78

8-
import TableOfContents from '../components/blog/TableOfContents.tsx';
99
import { OutLink } from "../components/OutLink"
1010

1111
<figure>
@@ -31,7 +31,7 @@ UI 도구가 Excalidraw와 Bun을 제쳤다는 게 굉장히 신기하지 않은
3131
</figure>
3232
</OutLink>
3333

34-
<TableOfContents headings={props.headings} />
34+
<TableOfContents />
3535

3636
# shadcn/ui
3737

‎src/components/List.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ function List({ nodes }) {
3939
return (
4040
<ListContainer>
4141
{nodes.map((node) => (
42-
<Item key={node.id}>
42+
<Item key={node.slug}>
4343
<h2>
44-
<Link to={`/v/${node.slug}/`}>{node.frontmatter.title}</Link>
44+
<Link to={`/v/${node.frontmatter.slug}/`}>{node.frontmatter.title}</Link>
4545
</h2>
4646
<p>
4747
{node.frontmatter.preview} - {node.frontmatter.date}

‎src/components/blog/TableOfContents.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22

33
import GithubSlugger from 'github-slugger';
4-
import { Link } from 'gatsby';
54
import styled from 'styled-components';
5+
import { Headings } from '../../utils/type';
66

77
const { slug } = GithubSlugger;
88

@@ -19,10 +19,10 @@ const Item = styled.li<{ depth: number }>`
1919
margin-left: ${({ depth }) => `${(depth - 1) * 20}px`};
2020
`;
2121

22-
function TableOfContents({ headings }: { headings: Array<{ depth: number; value: string }> }) {
22+
function TableOfContents({ headings }: { headings: Headings }) {
2323
return (
2424
<TableOfContentsWrapper>
25-
{headings.map((heading) => (
25+
{headings?.map((heading) => (
2626
<Item key={heading.value} depth={heading.depth}>
2727
<a href={`#${slug(heading.value)}`}>{heading.value}</a>
2828
</Item>

0 commit comments

Comments
 (0)