(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
./src/generated.ts
๋ถ๋ถ๋ด codegen.yaml
ํ์ผ์ด๋ค.
6,7 ๋ฒ์งธ ์ค์ ๋ชจ๋ types ์์ I
๋ฅผ ๋ถ์ฌ๋ฌ๋ผ๋ ๋ช
๋ น์ด๋ค.
./src/commons/types/generated/types.ts
๊ฒฝ๋ก ๋ณ๊ฒฝํด์ค๋ค.
package.json ํ์ผ์ script ๋ถ๋ถ์ ๋ค์์ ์ถ๊ฐํด์ค๋ค.
์ด์ ์ฝ๋์ ์ ์ฌ์ฉํ๊ธฐ ์ํ ๋ชจ๋ ์ค๋น๊ฐ ๋๋ฌ๋ค. ๋ค์ ๋ช ๋ น์ด๋ฅผ ์คํํด์ฃผ์.
์๋ฃ!
์ด์ ์ฝ๋์ ์ ์ ์ฉํด๋ณด์.
Utility-Type์ด๋ ๊ธฐ์กด์ ์๋ ํ์
์ ๊ฐ์กฐํด์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค.
๊ฐ์ฅ ๋ง์ด ์ฐ์ด๋ ํ์
๋ค ๋ช๊ฐ๋ง ์์๋ณด๋๋ก ํ์.
๋ ๋ค์ํ ํ์
๋ค์ ํ์
์คํฌ๋ฆฝํธ docs์์ ์ฐพ์๋ณผ ์ ์๋ค.
Typescript์ Utility-Type ๋๋ณด๊ธฐ
Pick
ํ์
- ์ํ๋ ๊ฒ์ ๋ฝ์์ดOmit
ํ์
- ํด๋น ํ์
๋ง ๋นผ์ ๊ฐ์ ธ์ดPartial
ํ์
- ๋ชจ๋ ๋ถ๋ถ์ ์ผ๋ก ๊ฐ์ ธ์ฌ ์ ์๋๋ก ๋ณ๊ฒฝ (์ ์ฒด ๋ค ?
๋ฅผ ๋ถ์ฌ์ค)Required
ํ์
- ๋ชจ๋ ๋ค ํ์๋ก ๋ณ๊ฒฝ (์ ์ฒด ๋ค ?
๋นผ์ค)Record
ํ์
- ๋ฏธ๋ฆฌ ์ง์ ํ ํ์
๋ง ์ฌ์ฉ๊ฐ๋ฅ (Union Type - ํฉ์งํฉ)type์ ์ ์ธํ๋ ๋ฐฉ๋ฒ์ผ๋ก interface์ type์ด ์๋ค.
๋๊ฐ๋ ์ ์ธ๋ณํฉ ๋ถ๋ถ์์ ์ฐจ์ด์ ์ด ์๋ค.
interface๋ ์ฌ๋ฌ๊ฐ ๋ง๋ค ์ ์์ง๋ง type์ ํ๊ฐ๋ง ๋ง๋ค ์ ์๋ค.
๋ํ interface๋ก ๋ง๋ ์ด๋ฆ์ด ๊ฐ์ ํ์
๋ค์ ์๋์ผ๋ก ํฉ์ณ์ง๋ค.
yarn add eslint --dev
eslint --init
eslint extension ์ค์น
npx eslint .
ํน์ npx eslint "**/*.{ts,tsx}
์น๋ฉด eslint error ํ์ธ ๊ฐ๋ฅ .eslintignore
์ค์ ํ๊ธฐhttps://prettier.io/docs/en/install.html
yarn add --dev --exact prettier
echo {}> .prettierrc.json
Prettier extension ์ค์น
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๋ฒ์ ์ด ๊ฐ์ฅ ์์ ์ ์ด๋ฏ๋ก version 4๋ก ์ค์นํ๋๋ก ํ์.
yarn add husky@4 --dev
npm install husky@4 --save-dev
yarn add lint-staged --dev
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}'
์ด ๋ถ๋ถ์ ๋ค๋ฅธ ์กฐ๊ฑด์ ์ถ๊ฐํด๋ ๋๋ค.