monorepo ์์ prettier , eslint ์ธํ ํ๋ ๋ฐฉ๋ฒ์ 3๊ฐ์ง๊ฐ ์กด์ฌํฉ๋๋ค.
๊ฐ์ธ์ ์ผ๋ก๋ monorepo ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด , ๋ถ๊ฐํผํ ๊ฒฝ์ฐ๋ฅผ ์ ์ธํ๊ณ ๋ root์์ ์ค์ ํ๋ ๊ฒ์ด ์ข๋ค๋ ์๊ฒฌ์ ๋๋ค. ์ด์ ๊ธ์์ ๋งํ๋ฏ์ด , ์ฝ๋ ์ปจ๋ฒค์ ๋ฑ์ ๋ง์ถ๊ณ ํ๋ฒ์ ์ค์ ํ๋ค๋ ์ฅ์ ์ด ํฌ๊ฒ ๋ค๊ฐ์์ ์ ๋๋ค. ๋ค๋ง ์ฌ๋ฌ ํ๋ก์ ํธ ์ฌ์ด์์ ํฐ ์ฐจ์ด ๋ฑ์ด ์กด์ฌํ๋ค๋ฉด , 2๋ฒ์ ์ด์ฉํด์ ๊ธฐ๋ณธ์ ์ธ ์ค์ ํ ๋ด๋ถ์์ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ํํ ์๋ ์์ ๊ฒ ๊ฐ์ต๋๋ค. ๋ค๋ง ์ด ๊ฒฝ์ฐ์๋ ์ถ๊ฐ์ ์ธ ์ค์ ์ด ํ์ํ ์๋ ์์ต๋๋ค. ์ด๋ฒ ๊ธ์์๋ root์์ ํ๋ฒ์ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๋ ค๊ณ ํฉ๋๋ค.
yarn plugin import typescript์ด ๋ช
๋ น์ด๋ ํ์
์๋ dependency ์ @type ํจํค์ง๋ฅผ ์๋์ผ๋ก ์ค์นํด์ฃผ๋ ํ๋ฌ๊ทธ์ธ์ด๋ค.
( yarn 4๋ฒ์ ์ด์๋ถํฐ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ค์น๋์ด ์๋ค. )
yarn dlx @yarnpkg/sdks vscodevscode ์์ pnp ๋ฅผ ์ฌ์ฉํ ๋ , ํ์
์คํฌ๋ฆฝํธ ๋์์ ์ํด์ ํ์ํ๋ค. ์๋ฌด๋ฐ ์ค์น๊ฐ ๋์ด์์ง ์์ ์ํ์์ , monorepo ๋ด๋ถ์ tsx, ts ํ์ผ์ ๋ค์ด๊ฐ๊ฒ ๋๋ฉด

์ด๋ฐ์์ผ๋ก ์๋ฌ๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค. ํ์ ์คํฌ๋ฆฝํธ๊ฐ ์์ง๋ง pnp ๋ชจ๋์์ ์ธ์ํ์ง ๋ชปํด์ ๋ฐ์ํ๋ ๋ฌธ์ ๋ผ ์ฐ๊ฒฐํด ์ฃผ์ด์ผ ํ๋ค.
๊ฐ์ฅ ๋จผ์ , root ์ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ค์นํด์ค๋ค.
shell
yarn add typescript
๊ทธ ํ , @yarnpkg/sdks ๋ฅผ ์ค์นํด์ค๋ค. ๊ณต์๋ฌธ์
shell
yarn dlx @yarnpkg/sdks vscode
๊ทธ ํ , tsx ๋๋ ts ํ์ผ์์ ctrl + shift + p ๋ฅผ ์
๋ ฅ ํ , typescript ๋ฒ์ ์ ํ -> ์์
์์ญ ๋ฒ์ ์ฌ์ฉ ํด๋ฆญํ๋ฉด


์ ์์ ์ผ๋ก ์ถ๋ ฅ๋๋ค.
root ์์ prettier ๋ฅผ ์ค์นํ๋ค.
shell
yarn add -D prettier
๊ทธ ํ , .prettierrc.cjs ํ์ผ์ ์ถ๊ฐํ๋ค. ๋๋ ๋ค์๊ณผ ๊ฐ์ด ์ถ๊ฐํ๋ค.
js
module.exports = {
singleQuote: true,
semi: true,
useTabs: false,
tabWidth: 2,
trailingComma: 'all',
printWidth: 100,
bracketSpacing: true,
arrowParens: 'always',
};
singleQuote : ' ๋ฅผ ์ฌ์ฉํ ์ง ์ฌ๋ถ์ด๋ค. false ์ธ ๊ฒฝ์ฐ , " ๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ์ฌ์ฉํ๋ค.semi : ์ธ๋ฏธ์ฝ๋ก ์ ๋์ ๋ถ์ด๋์ง ์ฌ๋ถ์ด๋ค.useTabs : ์คํ์ด์ค ๋์ tab์ ์ฌ์ฉํ ์ง ์ฌ๋ถ์ด๋ค.tabwidth : ํญ ๋๋น ์ค์ ์ด๋ค. ( ๊ธฐ๋ณธ 2 )trailingComma : ์ฌ๋ฌ ์ค์ ์ฌ์ฉํ ๋ , ํํ ์ฝค๋ง ์ฌ์ฉํ๋ ๋ฐฉ์์ด๋ค.printWidth : ์ค ๋ฐ๊ฟ์ด ์ผ์ด๋ ํญ ๋๋น๋ฅผ ์ง์ ํ๋ค.braketSpacing : ๊ฐ์ฒด์์ ๊ดํธ์ ๊ณต๋ฐฑ์ ์ฝ์
ํ๋์ง ์ฌ๋ถ์ด๋ค.arrowParens : ํ์ดํ ํจ์์์ ๊ดํธ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ์์ด๋ค. ๊ธฐ๋ณธ๊ฐ์ด always ๋ค.( ์ถ๊ฐ )
๋ง์ฝ ์ ๋ฐฉ๋ฒ์ ํ๋๋ฐ prettier ๊ฐ ์ ์ฉ๋์ง ์๋๋ค๋ฉด , @yarnpkg/sdks ์ฌ์ค์น ํ ํ์
์คํฌ๋ฆฝํธ๋ฅผ ๋ค์ ์ค์ ํ๋ค.
eslint ์ ๊ฒฝ์ฐ , prettier ๋ณด๋ค๋ ํ๋ก์ ํธ๋ง๋ค ๋ณ๊ฒฝ๋๋ ๋ถ๋ถ์ด ๋ง๋ค๋ณด๋ 2๋ฒ์ฒ๋ผ root์ ์ค์ ํ , ๋ด๋ถ์์ ์ถ๊ฐ๋ก ์ค์ ํ๋ ๊ฒฝ์ฐ๋ ๋ง์ด ์๋ค. ์ด๋ฒ์๋ root ์์ ๊ณตํต์ ์ผ๋ก ์ค์ ํ๋ค.
root ์์ eslint ๋ฅผ ์ค์นํ๋ค.
shell
yarn add -D eslint
๊ทธ ํ , ํ๋ก์ ํธ ๋ด๋ถ์ ๊ณตํต์ ์ผ๋ก ์กด์ฌํ๋ .eslintrc.cjs ํ์ผ์ root๋ก ์ด๋์ํจ๋ค. ๋ง์ฝ ์๋ค๋ฉด , root์ ํ์ผ์ ์์ฑํ๊ธฐ๋ง ํ๋ฉด ๋์ด๋ค.
yarn p1 build

yarn p2 dev

monorepo์์ prettier ๋ eslint์ ๊ฒฝ์ฐ , ํ๋ก์ ํธ๋ง๋ค ์ค์ ํ์ง ์๊ณ ํ๋ฒ์ ์ค์ ํ ์ ์์ด์ ํฐ ์ฅ์ ์ด ๋๋ ๊ฒ ๊ฐ๋ค. ๋ค์ํธ์์๋ ๊ณตํต์ component , hook ์ ์ค์ ํ๋ ๊ฒฝ์ฐ๋ฅผ ์์ฑํด๋ณด๋ ค๊ณ ํ๋ค.
์๋ชป๋ ๋ถ๋ถ์ด ์์ผ๋ฉด ์๋ ค์ฃผ์๋ฉด ๊ฐ์ฌ๋๋ฆฌ๊ฒ ์ต๋๋ค. ์ ์์ ์ด ์๋ repo ๋ ์ฌ๊ธฐ๋ฅผ ํ์ธํด์ฃผ์ธ์ !