Skip to content

Commit 9614203

Browse files
chayeoichayeoi
committed
build(typescript): gatsby 앱 코드베이스를 typescript로 변경
- 의존성 모듈 및 그에 따른 타입 정의 모듈 추가 - 코드베이스를 typescript로 변경함에 따른 tsconfig 추가 - eslint 적용 Signed-off-by: chayeoi <[email protected]>
1 parent bcafffa commit 9614203

File tree

15 files changed

+1720
-134
lines changed

15 files changed

+1720
-134
lines changed

‎.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
gatsby-browser.js
2+
gatsby-config.js
3+
gatsby-node.js
4+
gatsby-ssr.js

‎.eslintrc.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
jest: true,
6+
node: true,
7+
},
8+
extends: [
9+
'xo',
10+
'xo-space/esnext',
11+
'xo-react/space',
12+
'xo-typescript',
13+
],
14+
parser: '@typescript-eslint/parser',
15+
plugins: [
16+
'react',
17+
'react-hooks',
18+
'simple-import-sort',
19+
'@typescript-eslint',
20+
],
21+
rules: {
22+
'@typescript-eslint/explicit-function-return-type': 'off',
23+
'@typescript-eslint/indent': ['error', 2, { SwitchCase: 1 }],
24+
'@typescript-eslint/semi': 'off',
25+
'capitalized-comments': 'off',
26+
'comma-dangle': ['error', 'always-multiline'],
27+
'complexity': 'off',
28+
'no-warning-comments': 'off',
29+
'object-curly-spacing': ['error', 'always'],
30+
'react/jsx-pascal-case': 'off',
31+
'react/jsx-tag-spacing': 'off',
32+
'react/prop-types': 'off',
33+
'semi': ['error', 'never'],
34+
},
35+
overrides: [
36+
{
37+
files: ['*.js'],
38+
rules: {
39+
'@typescript-eslint/explicit-function-return-type': 'off',
40+
'@typescript-eslint/no-var-requires': 'off',
41+
'@typescript-eslint/restrict-plus-operands': 'off',
42+
},
43+
},
44+
],
45+
settings: {
46+
'import/parsers': {
47+
'@typescript-eslint/parser': ['.ts', '.tsx'],
48+
},
49+
'import/resolver': {
50+
typescript: {},
51+
},
52+
},
53+
};

‎gatsby-config.js

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,66 @@ module.exports = {
55
author: '@chayeoi',
66
},
77
plugins: [
8+
'gatsby-plugin-emotion',
9+
'gatsby-plugin-lodash',
10+
'gatsby-plugin-offline',
811
'gatsby-plugin-react-helmet',
12+
'gatsby-plugin-sharp',
13+
'gatsby-plugin-sitemap',
14+
'gatsby-plugin-typescript',
15+
{
16+
resolve: 'gatsby-plugin-google-analytics',
17+
options: {
18+
trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID',
19+
},
20+
},
921
{
1022
resolve: 'gatsby-source-filesystem',
1123
options: {
1224
name: 'images',
1325
path: `${__dirname}/src/images`,
1426
},
1527
},
28+
{
29+
resolve: 'gatsby-transformer-remark',
30+
options: {
31+
plugins: [
32+
{
33+
resolve: 'gatsby-remark-images',
34+
options: {
35+
maxWidth: 590,
36+
linkImagesToOriginal: false,
37+
},
38+
},
39+
{
40+
resolve: 'gatsby-remark-images-medium-zoom',
41+
options: {
42+
margin: 36,
43+
scrollOffset: 0,
44+
},
45+
},
46+
{
47+
resolve: 'gatsby-remark-responsive-iframe',
48+
options: {
49+
wrapperStyle: 'margin-bottom: 1.0725rem',
50+
},
51+
},
52+
{
53+
resolve: 'gatsby-remark-prismjs',
54+
options: {
55+
inlineCodeMarker: '%',
56+
},
57+
},
58+
'gatsby-remark-autolink-headers',
59+
'gatsby-remark-copy-linked-files',
60+
'gatsby-remark-smartypants',
61+
],
62+
},
63+
},
64+
'gatsby-remark-autolink-headers',
65+
'gatsby-remark-copy-linked-files',
66+
'gatsby-remark-smartypants',
1667
'gatsby-transformer-sharp',
17-
'gatsby-plugin-sharp',
1868
{
1969
resolve: 'gatsby-plugin-manifest',
2070
options: {

‎package.json

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,56 @@
55
"version": "0.1.0",
66
"author": "chayeoi <[email protected]>",
77
"dependencies": {
8+
"@emotion/core": "^10.0.27",
89
"gatsby": "^2.19.7",
910
"gatsby-image": "^2.2.39",
11+
"gatsby-plugin-emotion": "^4.1.22",
12+
"gatsby-plugin-feed": "^2.3.27",
13+
"gatsby-plugin-google-analytics": "^2.1.35",
14+
"gatsby-plugin-lodash": "^3.1.20",
1015
"gatsby-plugin-manifest": "^2.2.39",
1116
"gatsby-plugin-offline": "^3.0.32",
1217
"gatsby-plugin-react-helmet": "^3.1.21",
1318
"gatsby-plugin-sharp": "^2.4.3",
19+
"gatsby-plugin-sitemap": "^2.2.27",
20+
"gatsby-plugin-typescript": "^2.1.27",
21+
"gatsby-remark-autolink-headers": "^2.1.24",
22+
"gatsby-remark-copy-linked-files": "^2.1.37",
23+
"gatsby-remark-images": "^3.1.44",
24+
"gatsby-remark-images-medium-zoom": "^1.4.0",
25+
"gatsby-remark-prismjs": "^3.3.31",
26+
"gatsby-remark-responsive-iframe": "^2.2.32",
27+
"gatsby-remark-smartypants": "^2.1.21",
1428
"gatsby-source-filesystem": "^2.1.46",
29+
"gatsby-transformer-remark": "^2.6.50",
1530
"gatsby-transformer-sharp": "^2.3.13",
31+
"lodash": "^4.17.15",
32+
"prismjs": "^1.19.0",
1633
"prop-types": "^15.7.2",
1734
"react": "^16.12.0",
1835
"react-dom": "^16.12.0",
19-
"react-helmet": "^5.2.1"
36+
"react-helmet": "^5.2.1",
37+
"typeface-montserrat": "^0.0.75"
2038
},
2139
"devDependencies": {
22-
"prettier": "^1.19.1"
40+
"@types/lodash": "^4.14.149",
41+
"@types/node": "^13.7.0",
42+
"@types/react": "^16.9.19",
43+
"@types/react-dom": "^16.9.5",
44+
"@types/react-helmet": "^5.0.15",
45+
"@typescript-eslint/eslint-plugin": "^2.19.0",
46+
"@typescript-eslint/parser": "^2.19.0",
47+
"eslint": "^6.8.0",
48+
"eslint-config-xo": "^0.27.2",
49+
"eslint-config-xo-react": "^0.22.0",
50+
"eslint-config-xo-space": "^0.22.0",
51+
"eslint-config-xo-typescript": "^0.26.0",
52+
"eslint-plugin-import": "^2.20.1",
53+
"eslint-plugin-react": "^7.18.3",
54+
"eslint-plugin-react-hooks": "^2.3.0",
55+
"eslint-plugin-simple-import-sort": "^5.0.1",
56+
"prettier": "^1.19.1",
57+
"typescript": "^3.7.5"
2358
},
2459
"keywords": [
2560
"gatsby"
@@ -32,7 +67,9 @@
3267
"start": "npm run develop",
3368
"serve": "gatsby serve",
3469
"clean": "gatsby clean",
35-
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
70+
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
71+
"lint": "eslint src/**/**/*.tsx",
72+
"lint:fix": "eslint --fix src/**/*/*.tsx"
3673
},
3774
"repository": {
3875
"type": "git",

‎src/components/header.js

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/components/header.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Link } from 'gatsby'
2+
import React from 'react'
3+
4+
interface Props {
5+
siteTitle?: string;
6+
}
7+
8+
const Header: React.FC<Props> = ({ siteTitle = '' }) => (
9+
<header
10+
style={{
11+
background: 'rebeccapurple',
12+
marginBottom: '1.45rem',
13+
}}
14+
>
15+
<div
16+
style={{
17+
margin: '0 auto',
18+
maxWidth: 960,
19+
padding: '1.45rem 1.0875rem',
20+
}}
21+
>
22+
<h1 style={{ margin: 0 }}>
23+
<Link
24+
to="/"
25+
style={{
26+
color: 'white',
27+
textDecoration: 'none',
28+
}}
29+
>
30+
{siteTitle}
31+
</Link>
32+
</h1>
33+
</div>
34+
</header>
35+
)
36+
37+
export default Header

‎src/components/image.js renamed to ‎src/components/image.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react"
2-
import { useStaticQuery, graphql } from "gatsby"
3-
import Img from "gatsby-image"
1+
import React from 'react'
2+
import { useStaticQuery, graphql } from 'gatsby'
3+
import Img from 'gatsby-image'
44

55
/*
66
* This component is built using `gatsby-image` to automatically serve optimized
@@ -13,7 +13,7 @@ import Img from "gatsby-image"
1313
* - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
1414
*/
1515

16-
const Image = () => {
16+
const Image: React.FC = () => {
1717
const data = useStaticQuery(graphql`
1818
query {
1919
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {

‎src/components/layout.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
html {
2-
font-family: sans-serif;
2+
font-family: montserrat, sans-serif;
33
-ms-text-size-adjust: 100%;
44
-webkit-text-size-adjust: 100%;
55
}

‎src/components/layout.js renamed to ‎src/components/layout.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,18 @@
55
* See: https://www.gatsbyjs.org/docs/use-static-query/
66
*/
77

8-
import React from "react"
9-
import PropTypes from "prop-types"
10-
import { useStaticQuery, graphql } from "gatsby"
8+
import React from 'react'
9+
import { useStaticQuery, graphql } from 'gatsby'
1110

12-
import Header from "./header"
13-
import "./layout.css"
11+
import Header from './header'
12+
import './layout.css'
13+
import 'typeface-montserrat'
1414

15-
const Layout = ({ children }) => {
15+
interface Props {
16+
children: React.ReactNode;
17+
}
18+
19+
const Layout: React.FC<Props> = ({ children }) => {
1620
const data = useStaticQuery(graphql`
1721
query SiteTitleQuery {
1822
site {
@@ -28,24 +32,20 @@ const Layout = ({ children }) => {
2832
<Header siteTitle={data.site.siteMetadata.title} />
2933
<div
3034
style={{
31-
margin: `0 auto`,
35+
margin: '0 auto',
3236
maxWidth: 960,
33-
padding: `0 1.0875rem 1.45rem`,
37+
padding: '0 1.0875rem 1.45rem',
3438
}}
3539
>
3640
<main>{children}</main>
3741
<footer>
3842
© {new Date().getFullYear()}, Built with
39-
{` `}
43+
{' '}
4044
<a href="https://www.gatsbyjs.org">Gatsby</a>
4145
</footer>
4246
</div>
4347
</>
4448
)
4549
}
4650

47-
Layout.propTypes = {
48-
children: PropTypes.node.isRequired,
49-
}
50-
5151
export default Layout

0 commit comments

Comments
 (0)