[React 10] - Codegen, Eslint, Prettier, Husky

yiwoojungยท2022๋…„ 7์›” 8์ผ
0

{C} Codecamp FE 06

๋ชฉ๋ก ๋ณด๊ธฐ
10/21

๐Ÿ—ฟ ์˜ค๋Š˜์˜ ๋ชฉํ‘œ

  1. graphql-codegen
  2. Utility-Type
  3. Eslint / Prettier
  4. Husky

1. graphql-codegen

(graphql code๋ฅผ generateํ•œ๋‹ค.)

api๋กœ ๋ฐ›์•„์˜ค๋Š” ์‘๋‹ต์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž…์„ ์ค„ ๋•Œ๋Š” graphql-codegen์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜๋‚˜ํ•˜๋‚˜ ํƒ€์ž…์„ ์ฃผ๊ธฐ์—๋Š” ๋„ˆ๋ฌด ๋ฒˆ๊ฑฐ๋กญ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ์ž๋™ํ™”ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ์ด codegen์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿš€ ์ฝ”๋“œ์   ๊ธฐ๋ณธ ์„ค์ • ๋ฐฉ๋ฒ•

๐Ÿ“Œ ์„ค์น˜ํ•˜๊ธฐ

GraphQL Codegen - https://www.graphql-code-generator.com/docs/getting-started/installation
NPM - https://www.npmjs.com/package/@graphql-codegen/cli

yarn add graphql
yarn add @graphql-codegen/cli

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋„ ๊ฐ™์ด ์‚ฌ์šฉํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋„ ์„ค์น˜ํ•ด์ค€๋‹ค.

Codegen & Typescript - https://www.graphql-code-generator.com/docs/guides/react

yarn add @graphql-codegen/typescript

๐Ÿ“Œ codegen.yaml ํŒŒ์ผ ์„ค์ •ํ•˜๊ธฐ

  • apollo-client๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ”Œ๋Ÿฌ๊ทธ์ธ ๋‚ด์šฉ๋“ค์€ ์ง€์› ๋‹ค.
  • schema์—๋Š” graphql ์ฃผ์†Œ๋ฅผ ๋„ฃ์–ด์ค€๋‹ค.
  • types ํŒŒ์ผ ๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•ด์ค€๋‹ค.
    • generates ๋ฐ‘์— ./src/generated.ts ๋ถ€๋ถ„
  • ์ฝ”๋“œ์  ์„ ์‹คํ–‰ํ•˜๋ ค๋ฉด ์ธํ„ฐ๋„ท์ด ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์–ด์•ผ ํ•˜๊ณ  ๋ฐฑ์—”๋“œ ์„œ๋ฒ„๊ฐ€ ํ•ญ์ƒ ์ผœ์ ธ์žˆ์–ด์•ผ ํ•œ๋‹ค.

๋‚ด codegen.yaml ํŒŒ์ผ์ด๋‹ค.
6,7 ๋ฒˆ์งธ ์ค„์€ ๋ชจ๋“  types ์•ž์— I๋ฅผ ๋ถ™์—ฌ๋‹ฌ๋ผ๋Š” ๋ช…๋ น์ด๋‹ค.


๐Ÿ“Œ types.ts ํŒŒ์ผ ๋งŒ๋“ค๊ธฐ

./src/commons/types/generated/types.ts ๊ฒฝ๋กœ ๋ณ€๊ฒฝํ•ด์ค€๋‹ค.


๐Ÿ“Œ script ์ถ”๊ฐ€ํ•˜๊ธฐ

package.json ํŒŒ์ผ์— script ๋ถ€๋ถ„์— ๋‹ค์Œ์„ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.


๐Ÿ“Œ yarn generate ๋ช…๋ น์–ด ์ž…๋ ฅํ•˜๊ธฐ

์ด์ œ ์ฝ”๋“œ์  ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋ชจ๋“  ์ค€๋น„๊ฐ€ ๋๋‚ฌ๋‹ค. ๋‹ค์Œ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•ด์ฃผ์ž.

์™„๋ฃŒ!

์ด์ œ ์ฝ”๋“œ์  ์„ ์ ์šฉํ•ด๋ณด์ž.

Mutation

Query


2. Utility-Type

Utility-Type์ด๋ž€ ๊ธฐ์กด์— ์žˆ๋Š” ํƒ€์ž…์„ ๊ฐœ์กฐํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.
๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ํƒ€์ž…๋“ค ๋ช‡๊ฐœ๋งŒ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.

๋” ๋‹ค์–‘ํ•œ ํƒ€์ž…๋“ค์€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ docs์—์„œ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค.
Typescript์˜ Utility-Type ๋”๋ณด๊ธฐ

  • Pick ํƒ€์ž… - ์›ํ•˜๋Š” ๊ฒƒ์„ ๋ฝ‘์•„์˜ด

  • Omit ํƒ€์ž… - ํ•ด๋‹น ํƒ€์ž…๋งŒ ๋นผ์„œ ๊ฐ€์ ธ์˜ด

  • Partial ํƒ€์ž… - ๋ชจ๋‘ ๋ถ€๋ถ„์ ์œผ๋กœ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ๋ณ€๊ฒฝ (์ „์ฒด ๋‹ค ?๋ฅผ ๋ถ™์—ฌ์คŒ)

  • Required ํƒ€์ž… - ๋ชจ๋‘ ๋‹ค ํ•„์ˆ˜๋กœ ๋ณ€๊ฒฝ (์ „์ฒด ๋‹ค ? ๋นผ์คŒ)

  • Record ํƒ€์ž… - ๋ฏธ๋ฆฌ ์ง€์ •ํ•œ ํƒ€์ž…๋งŒ ์‚ฌ์šฉ๊ฐ€๋Šฅ (Union Type - ํ•ฉ์ง‘ํ•ฉ)

    ์ง€์ •ํ•œ ์ด๋ฆ„์ด ํ‚ค๊ฐ€ ๋œ๋‹ค.


type์„ ์„ ์–ธํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ interface์™€ type์ด ์žˆ๋‹ค. 
๋‘๊ฐœ๋Š” ์„ ์–ธ๋ณ‘ํ•ฉ ๋ถ€๋ถ„์—์„œ ์ฐจ์ด์ ์ด ์žˆ๋‹ค. 
interface๋Š” ์—ฌ๋Ÿฌ๊ฐœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์ง€๋งŒ type์€ ํ•œ๊ฐœ๋งŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. 
๋˜ํ•œ interface๋กœ ๋งŒ๋“  ์ด๋ฆ„์ด ๊ฐ™์€ ํƒ€์ž…๋“ค์€ ์ž๋™์œผ๋กœ ํ•ฉ์ณ์ง„๋‹ค. 



3. Eslint / Prettier

๐Ÿš€ ์ฝ”๋“œ ๋ฆฐํ„ฐ - Eslint

https://eslint.org/

yarn add eslint --dev
eslint --init

eslint extension ์„ค์น˜

  • npx eslint . ํ˜น์€ npx eslint "**/*.{ts,tsx} ์น˜๋ฉด eslint error ํ™•์ธ ๊ฐ€๋Šฅ
  • eslint ๋„๋Š” ๋ฒ•
  • .eslintignore ์„ค์ •ํ•˜๊ธฐ

๐Ÿš€ ์ฝ”๋“œ ํฌ๋ฉงํ„ฐ - Prettier

https://prettier.io/docs/en/install.html

yarn add --dev --exact prettier
echo {}> .prettierrc.json

Prettier extension ์„ค์น˜


eslint ์™€ prettier๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•


https://github.com/prettier/eslint-config-prettier#installation

yarn add eslint-config-prettier --dev
๋˜๋Š”
npm install --save-dev eslint-config-prettier


.eslintrc.* ํŒŒ์ผ์— ๋‹ค์Œ ์ถ”๊ฐ€

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

.vscode ํด๋”์— settings.json ํŒŒ์ผ์— ๋‹ค์Œ ์ถ”๊ฐ€

4. Husky

ํ˜‘์—…์„ ํ•  ๋•Œ ๋” ์•ˆ์ „ํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿš€ 4-1 Husky, lint-staged ์„ค์น˜ํ•˜๊ธฐ

Husky ์„ค์น˜ํ•˜๊ธฐ

npm ๋ฐ”๋กœ๊ฐ€๊ธฐ

4๋ฒ„์ „์ด ๊ฐ€์žฅ ์•ˆ์ •์ ์ด๋ฏ€๋กœ version 4๋กœ ์„ค์น˜ํ•˜๋„๋ก ํ•˜์ž.

yarn add husky@4 --dev
npm install husky@4 --save-dev

lint-staged ์„ค์น˜ํ•˜๊ธฐ

yarn add lint-staged --dev

๐Ÿš€ 4-2 package.json์— ์ถ”๊ฐ€ํ•˜๊ธฐ

husky๊ฐ€ commit ํ•˜๊ธฐ ์ „์— ๊ฐ€๋กœ์ฑˆ(hooks) ๋’ค lint-staged๋ฅผ ์‹คํ–‰์‹œํ‚จ๋‹ค. ๊ทธ๋ฆฌ๊ณ  lint-staged๋Š” ๋ชจ๋“  ํด๋” ์•ˆ์— ๋ชจ๋“  ํŒŒ์ผ๋“ค(.ts,.tsx๋กœ ๋๋‚˜๋Š” ํŒŒ์ผ๋“ค)์— ๋Œ€ํ•ด eslint๋ฅผ ๊ฒ€์ฆํ•ด์ค€๋‹ค. ๋ผ๋Š” ๋‚ด์šฉ์„ package.json์— ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.

"husky": {
	"hooks":{
    	"pre-commit": "link-staged"
    }
},
"lint-staged": {
	"**/*.{ts,tsx}": [
    	"npx eslint '**/*.{ts,tsx}'"
    ]
}

npx eslint '**/*.{ts,tsx}' ์ด ๋ถ€๋ถ„์— ๋‹ค๋ฅธ ์กฐ๊ฑด์„ ์ถ”๊ฐ€ํ•ด๋„ ๋œ๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€