(μ£Ό)μΈλ°μ΄μ¦μ λμμΈμ λ°μν λμμΈ μμ€ν
ν¨ν€μ§μ
λλ€.
μ¬λ¬ ν¨ν€μ§ λ΄ μΌκ΄μ± μλ λμμΈμ μ μ©νκΈ° μν λͺ©μ μ κ°μ§κ³ μμ΅λλ€.
React
, TypeScript
λμμΈ μμ€ν
μΌλ‘, @emotion
μ μ¬μ©νμ¬ μ€νμΌμ μ§μ ν©λλ€.
- π© κ°λ° λꡬλ λ€μκ³Ό κ°μ΄ μ¬μ©ν©λλ€.
- λ²λ€λ§ λ° κ°λ° μλ² μ€ν:
Vite
- μ»΄ν¬λνΈ μ λ ν
μ€νΈ:
Jest
,@testing-library
- UI ν
μ€νΈ:
storybook
- λ¬Έλ² κ²μ¬(μ μ λΆμ):
ESLint
- μ½λ ν¬λ§·ν
:
Prettier
- κ·Έ μΈ:
Github Actions
,chromatic
,Netlify
- λ²λ€λ§ λ° κ°λ° μλ² μ€ν:
- ποΈ λμμΈ λꡬλ
Figma
λ₯Ό μ¬μ©ν©λλ€. ESM
λͺ¨λ μμ€ν μμ μ¬μ© κ°λ₯ν©λλ€.
β οΈ ν΄λΉ ν¨ν€μ§λ₯Ό μ¬μ©νκΈ° μν΄μλ μ¬μ©νλ €λ ν¨ν€μ§μ μμ‘΄μ± λͺ¨λλ‘@emotion/react
,@emotion/styled
κ° ν¬ν¨λμ΄ μμ΄μΌ ν©λλ€.
-
βοΈ .github
Github
μμ μ°Έμ‘°νλ μμ(Github Actions
,Issue
μPR
κ·μΉ λ±)μ΄ ν¬ν¨νλ ν΄λμ λλ€.chromatic
κ³ΌNetlify
λ‘main
μ νΈμ¬ν κ²½μ°, μλμΌλ‘storybook
λ¬Έμλ₯Ό λΉλνμ¬ μ λ‘λνλ μ€ν¬λ¦½νΈ λ±μ μ μΈν©λλ€.
-
βοΈ .storybook
storybook
κ³Ό κ΄λ ¨λ μ€μ μ μ§μ νλ ν΄λμ λλ€.Webpack
κΈ°λ°μΌλ‘ ꡬνλstorybook
μVite
μ μ°κ²°νκ³ ,storybook
μ μμ μΌλ‘ μ¬μ©ν΄μΌ νλ λ¬Έλ²μ μ§μ ν©λλ€.
-
βοΈ config
- νλ‘μ νΈμ μ€μ μ μν μΆκ° νμΌμ΄ ν¬ν¨νλ ν΄λμ λλ€.
-
Vite
λ‘ λΉλλ κ²°κ³Όλ¬Όμ΄ ν¬ν¨λλ ν΄λμ λλ€.- μΈλΆμμ μ¬μ©ν μ μλλ‘
ESM
λͺ¨λλ‘ μΆλ ₯λ©λλ€. - νλ‘μ νΈ μμ€ μ½λλ
TypeScript
λ‘, μΈλΆμμ λ°λ‘ μ¬μ©νκΈ° μν΄μλd.ts
κ° ν¬ν¨λJavaScript
νμΌλ‘ μ»΄νμΌ(νΈλμ€νμΌ)λμ΄ μμ΄μΌ ν©λλ€. - μ¦,
dist
ν΄λμ μ»΄νμΌλJavaScript
νμΌμ΄ μ‘΄μ¬νμ§ μλλ€λ©΄ ν΄λΉ ν¨ν€μ§λ μΈλΆμμ μ¬μ©ν μ μμ΅λλ€.
-
π docs
- ν¨ν€μ§ λ΄μμ μ§μΌμΌ ν κ·μΉ λ± λ¬Έμνλ μλ£λ₯Ό ν¬ν¨νλ ν΄λμ λλ€.
-
π public
Vite
κ° κ°λ° λͺ¨λλ‘ μ€νλ λReact
μ ν리μΌμ΄μ μμ μ°Έμ‘°ν μ μ νμΌμ ν¬ν¨νλ ν΄λμ λλ€.
-
π src
- νλ‘μ νΈμ μμ€ μ½λκ° ν¬ν¨νλ ν΄λμ λλ€.
- μΈλ°μ΄μ¦μμ μ¬μ©νλ λμμΈ μμ€ν μ λͺ¨λ ν¬ν¨ν©λλ€.
-
βοΈ .eslintrc
- λ£¨νΈ ν΄λμ μλ μ€μ μ μμ λ°κ³ ,
storybook
νμΌμμμ μ€μ μ μ§μ νκ³ μμ΅λλ€.
- λ£¨νΈ ν΄λμ μλ μ€μ μ μμ λ°κ³ ,
-
βοΈ .gitignore
Git
μμ μΆμ νμ§ μμμΌ νλ νμΌ λ¦¬μ€νΈλ₯Ό λͺ μν νμΌμ λλ€.storybook
λΉλ νμΌμ μ λ‘λνμ§ μλ μ€μ μ μΆκ°ν©λλ€.
-
π index.html
Vite
κ° κ°λ° λͺ¨λλ‘ μ€νλ λReact
μ ν리μΌμ΄μ μ΄ κ΅¬λλHTML
μνΈλ¦¬ ν¬μΈνΈ νμ΄μ§μ λλ€.
-
βοΈ jest.config.ts
- ν
μ€νΈ νκ²½μ ꡬμ±νλ
Jest
μ μ€μ μ λͺ μν©λλ€.
- ν
μ€νΈ νκ²½μ ꡬμ±νλ
-
π¦ package.json
invaiz-design-system
ν¨ν€μ§μμ μ¬μ©νλ μμ‘΄μ± λͺ¨λμ λͺ μν©λλ€.
-
βοΈ tsconfig.json
- λ£¨νΈ ν΄λμ μλ μ€μ μ μμλ°μ
alias
λ₯Ό μ§μ νκ³ μμ΅λλ€.
- λ£¨νΈ ν΄λμ μλ μ€μ μ μμλ°μ
-
βοΈ vite.config.ts
SVG
νμΌμ 리μ‘νΈ μ»΄ν¬λνΈμ²λΌ μ¬μ©ν μ μλvite-plugin-svgr
κ° λͺ μλμ΄ μμ΅λλ€.- μΈλΆμμ λΌμ΄λΈλ¬λ¦¬ λͺ¨λ ννλ‘ μ κ·Όν μ μλλ‘ λΉλνλ μ€μ λ₯Ό ν¬ν¨ν©λλ€.
- κ°λ° μλ²λ₯Ό μ΄κΈ° μν μ 보λ₯Ό ν¬ν¨νκ³ μμ΅λλ€.
node
:v16.x.x
μ΄μyarn
:v1.22.x
μ΄μ
-
Vite
κ°λ° νκ²½μΌλ‘ λμν©λλ€./src/**/*
λ΄μ νμΌ μμ μHot-Loader
κ° μ μ©λ©λλ€.8080
ν¬νΈμμ κ°λ° μλ²λ₯Ό μ€νν©λλ€.
-
Vite
λ₯Ό μ¬μ©ν΄μ ν¨ν€μ§ μμ€λ₯Ό μΈλΆμμ μ¬μ©ν μ μλλ‘ λ²λ€λ§, λΉλν©λλ€.- κ²°κ³Όλ¬Όμ΄
d.ts
μ ν¨κ»ESM
λͺ¨λλ‘dist
ν΄λμ μμ±λ©λλ€.
-
Jest
λ₯Ό μ¬μ©νμ¬ νλ‘μ νΈ ν΄λ λ΄μ ν μ€νΈλ₯Ό λͺ¨λ μ€νν©λλ€.*.test.js
,*.test.ts
,*.spec.js
,*.spec.ts
νμΌμ ν μ€νΈ νμΌλ‘ μΈμν©λλ€.`
-
Jest
λ₯Ό μ¬μ©νμ¬ νλ‘μ νΈ ν΄λ λ΄μ ν μ€νΈλ₯Ό λͺ¨λ μ€ννκ³ , νμΌμ λ³κ²½μ μ§μμ μΌλ‘ κ°μν©λλ€.`
-
Jest
λ₯Ό μ¬μ©ν΄ μ€λ μ· ν μ€νΈλ₯Ό μνν©λλ€.- μ€λ μ· ν μ€νΈλ‘ μ μΈλμ΄ μλ νμΌλ€μ μ»΄ν¬λνΈ λ λλ§ μνλ₯Ό νμΈνκ³ , μλ‘ μ°μ΄λ λλ€.
-
Jest
μ μΊμλ νμΌμ λͺ¨λ μμ ν©λλ€.`
-
src
λ΄μ μμ€ μ½λλ₯Όeslint
λ₯Ό μ¬μ©νμ¬ κ²μ¬ν©λλ€.
-
src
λ΄μ μμ€ μ½λλ₯Όeslint
λ₯Ό μ¬μ©νμ¬ κ²μ¬νκ³ , μμ ν μ μλ λΆλΆμ μλμΌλ‘ μμ ν©λλ€.
-
src
λ΄μ μμ€ μ½λλ₯Όprettier
λ₯Ό μ¬μ©νμ¬ κ²μ¬ν©λλ€.
-
src
λ΄μ μμ€ μ½λλ₯Όprettier
λ₯Ό μ¬μ©νμ¬ κ²μ¬νκ³ , μμ ν μ μλ λΆλΆμ μλμΌλ‘ μμ ν©λλ€.
-
Storybook
νμ΄μ§λ₯Ό κ°λ° νκ²½μ μ€νν©λλ€.6006
ν¬νΈμμ νμ΄μ§λ₯Ό μ€νν©λλ€.
-
Storybook
νμ΄μ§λ₯Ό λΉλν©λλ€.- λΉλ μλ£λ νμΌμ
storybook-static
ν΄λμ μμ±λ©λλ€.