Folder Structure
https://velog.io/@teo/folder-structure
"ํ์ ์์ฐ์ฑ์ ๊ธฐ์ฌํ๋ ํต์ฌ์ ๋ฐ๋ก ๊ฐ๋ฐ์์ ๋ฉํ ๋ชจ๋ธ์ ํด๋ ๊ตฌ์กฐ์ ๋ช ํํ ๋๋ฌ๋์ผ๋ก์จ ์ป๋ ์๋์ง ํจ๊ณผ์ ์์ต๋๋ค. "
ํด๋ ๊ตฌ์กฐ
ํด๋ ๊ตฌ์กฐ์๋ ์ ๋์ ์ธ ์ ๋ต์ด ์๋ค. ํ์ ์ํฉ์ด๋ ๊ท๋ชจ, ์๋น์ค์ ์ฑ์๋์ ๋ฐ๋ผ ์ธ์ ๋ ์ง ๋ฌ๋ผ์ง ์ ์๋ค.
์๋น์ค ์ด๊ธฐ์ ๊ตฌ์กฐ๋ฅผ ์ก์ ๋ ์๋น์ค์ ๋ฐฉํฅ์ฑ๊ณผ ๊ตฌ์กฐ๊ฐ ์์ง ๋ถํ์คํ ์ํ์ด๊ธฐ ๋๋ฌธ์, ๋๋ฌด ๋นก๋นกํ๊ฒ ๊ท์น์ ์ ํ๊ธฐ๋ณด๋ค๋ ์ต์ํ์ ๊ท์น๋ง ์ ํ๊ณ ์ ์ฐํ๊ฒ ์์ํ๋ ๊ฒ์ด ์ข์
์ํ์ฐฉ์ค๋ฅผ ๊ฒช์ผ๋ฉฐ ๋ถํธํจ์ด ๋ฐ๋ณต๋ ๋, ๊ทธ๋ ๊ตฌ์กฐ๋ฅผ ์ ์ฐจ ์ ๋ฆฌํด๋๊ฐ๋ ๋ฐฉ์์ด ๋ ํ์ค์
๊ตฌ์กฐ๊ฐ ์กํ ์๊ฑฐ๋ ์ฌ๋ฌ ๋ฒ์ ์ํ์ฐฉ์ค๋ฅผ ํตํด ๋ฌธ์ ์ ์ ์ธ์งํ๊ณ ์๋ค๋ฉด, ์ข ๋ ์ฒด๊ณ์ ์ด๊ณ ๊ตฌ์ฒด์ ์ธ ํด๋ ๊ตฌ์กฐ๋ฅผ ๊ตฌ์ฑํ๋ ๊ฒ์ด ์ข๋ค.
Techincal Folders
๋น์ฆ๋์ค ๋๋ฉ์ธ๊ณผ ๋ฌด๊ดํ๊ฒ, ์ฑ์ ๊ธฐ๋ฅ์ ๊ตฌ์ฑํ๋ ๊ธฐ์ ์ญํ ์ค์ฌ์ ํด๋ ๊ตฌ์กฐ
src/
โโโ app/ # ์ฑ ์ด๊ธฐ ์ค์ (๋ผ์ฐํ
, Layout, Providers ๋ฑ)
โโโ assets/ # ์ด๋ฏธ์ง, ํฐํธ ๋ฑ ์ ์ ๋ฆฌ์์ค
โโโ components/ # ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ์ปดํฌ๋ํธ๋ค (Button, Modal ๋ฑ)
โโโ hooks/ # ์ ์ญ/๋ฒ์ฉ ์ปค์คํ
ํ
โโโ libs/ # ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ํ, API ํด๋ผ์ด์ธํธ ๋ฑ
โโโ styles/ # ์ ์ญ ์คํ์ผ, ํ
๋ง, reset
โโโ utils/ # ์ ํธ ํจ์ ๋ชจ์
โโโ config/ # ํ๊ฒฝ ์ค์ (env, constants, routes ๋ฑ)
โโโ store/ # ์ ์ญ ์ํ ๊ด๋ฆฌ (Redux, Zustand, Recoil ๋ฑ)
โโโ types/ # ๊ธ๋ก๋ฒ ํ์
์ ์
์ฅ์
๊ธฐ์ค์ด ๊ฐ๋จํ๊ณ ๋ช ํํด์ ์์ฌ๊ฒฐ์ ์ด ์ฌ์
ํน์ ํจ์๋ ์ปดํฌ๋ํธ๊ฐ ์ด๋ฏธ ์๋์ง ํ์ ํ๊ธฐ ์ฌ์ ์ค๋ณต์ ๋ฐฉ์งํ ์ ์์
์๊ท๋ชจ ํ๋ก์ ํธ์ ์ ํฉ
๋จ์
๊ท๋ชจ๊ฐ ์ปค์ง์๋ก ๊ด๋ จ๋ ์ฝ๋๋ค์ด ํด๋ ๊ณณ๊ณณ์ ํฉ์ด์ ธ ํ์ ํ๊ธฐ ์ด๋ ค์
๋น์ฆ๋์ค ๋ก์ง์ด ๋ถ์ฐ๋๊ธฐ ๋๋ฌธ์ ์ ์ฒด ํ๋ฆ์ ํ์ ํ๊ธฐ ์ด๋ ค์
ํ๋์ ๊ธฐ๋ฅ์ ์์ ํ ํ์ ํ๋ ค๋ฉด ์ฌ๋ฌ ํด๋๋ฅผ ๋๋๋ค์ด์ผ ํจ
๊ธฐ๋ฅ ๋จ์๋ก ๋ฆฌํฉํฐ๋งํ๊ฑฐ๋ ์ถ์ํํ๋ ค ํ ๋ ๊ด๊ณ ํ์ ์ด ์ด๋ ต๊ณ ๋ฆฌ์คํฌ ์์
์๊ฐ์ด ์ง๋ ์๋ก ํด๋๊ฐ ๊ฑฐ๋ํด์ง๊ณ ๋ค์์ผ ๊ด๋ฆฌ๊ฐ ์ด๋ ค์์ง ์ ์์
Feature Folders
๋น์ฆ๋์ค ๋๋ฉ์ธ(๊ธฐ๋ฅ) ๋จ์๋ก ํด๋๋ฅผ ๊ตฌ์ฑํ๋ ๋ฐฉ์
src/
โโโ features/
โ โโโ auth/
โ โ โโโ components/
โ โ โโโ hooks/
โ โ โโโ index.ts
โ โโโ dashboard/
โ โ โโโ components/
โ โ โโโ hooks/
โ โ โโโ index.ts
โโโ shared/
โ โโโ components/
โ โโโ hooks/
โ โโโ utils/
...
์ฅ์
๊ด๋ จ๋ ์ฝ๋๊ฐ ํ ํด๋์ ๋ชจ์ฌ ์์ด ๋งฅ๋ฝ ํ์ ๊ณผ ๋๋ฒ๊น ์ด ์ฌ์
๊ธฐ๋ฅ ๋จ์๋ก ๋ถ๋ฆฌ๋์ด ์์ผ๋ฏ๋ก ๊ธฐ๋ฅ ๋ฆฌํฉํฐ๋ง, ์ญ์ , ์ด๊ด์ด ์์
๋ก์ปฌํ ๊ฐ๋ฐ์ด ๊ฐ๋ฅ (ex. ํน์ ๊ธฐ๋ฅ ๊ฐ๋ฐํ ๋ ๋ค๋ฅธ ์ฝ๋์ ๊ฑฐ์ ์ํฅ ์ ์ค)
์ถํ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋(MFA) ๊ตฌ์กฐ๋ก ์ด๊ดํ๊ธฐ ์ฌ์ด ํํ
๋จ์
๊ณตํต ๋ก์ง ์ค๋ณต์ด ์๊ธฐ๊ธฐ ์ฌ์ (๋น์ทํ ํ , ์ ํธ ํจ์ ๋ฑ)
์ค๋ณต๋ ๋ก์ง์ ์ฐพ๊ณ
shared/
๋ก ์ฎ๊ธฐ๋ ์์ ์ด ๋ฒ๊ฑฐ๋ก์๊ตฌ์กฐ๊ฐ ๋ณต์กํด ๋ณด์ผ ์ ์๊ณ , ํ ๋ด ๋ช ํํ ๊ธฐ์ค ์์ด ์ ์ฉํ๋ฉด ํด๋ ์ง์ฅ ๊ฐ๋ฅ์ฑ ์์
FSD(Feature-Sliced Design)๋ Feature Folder ๊ตฌ์กฐ๋ฅผ ๋ ์ฒด๊ณํํ๊ณ ํ์ฅํ ์ค๊ณ ๋ฐฉ์
Last updated