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/๋กœ ์˜ฎ๊ธฐ๋Š” ์ž‘์—…์ด ๋ฒˆ๊ฑฐ๋กœ์›€

  • ๊ตฌ์กฐ๊ฐ€ ๋ณต์žกํ•ด ๋ณด์ผ ์ˆ˜ ์žˆ๊ณ , ํŒ€ ๋‚ด ๋ช…ํ™•ํ•œ ๊ธฐ์ค€ ์—†์ด ์ ์šฉํ•˜๋ฉด ํด๋” ์ง€์˜ฅ ๊ฐ€๋Šฅ์„ฑ ์žˆ์Œ

Last updated