Skip to content

fe folder structure

ryan-kim-dev edited this page Sep 18, 2022 · 1 revision

FE - ํŒŒ์ผ๊ตฌ์กฐ

1. ๊ตฌ์กฐ๋„

  • client
    • src
      • assets
      • components
        • Footer
        • Form
          • FormStyles.js
          • user
            • LoginForm.js
            • SignupForm.js
          • Nav
      • redux
        • store
          • store.js
        • userSlice.js
      • pages
        • HomePage.js
        • LoginPage.js
        • SignupPage.js

2. ์„ค๋ช…

  • assets
    • ๋กœ๊ณ  ์ด๋ฏธ์ง€, ์•„์ด์ฝ˜ ์ด๋ฏธ์ง€ ๋“ฑ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„์— ํ•„์š”ํ•œ ํŒŒ์ผ๋“ค์„ assets ํด๋”์— ๋‹ด์Šต๋‹ˆ๋‹ค.
  • components
    • ์ „์—ญ์—์„œ ๊ณตํ†ต์œผ๋กœ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ
    • Form ์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ๊ณณ์—์„œ ๋‹ค์–‘ํ•˜๊ฒŒ ์žฌ์‚ฌ์šฉ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ํด๋” ์•ˆ์˜ ํด๋”๋กœ ๊ธฐ๋Šฅ๋ณ„๋กœ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
      • Form > user > ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธํผ
      • Form > FormStyle.js (์—ฌ๋Ÿฌ ํผ์—์„œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ styled-component ์ •์˜๋งŒ ๋œ ํŒŒ์ผ)
  • pages
    • ๋ผ์šฐํŒ… ๊ฒฝ๋กœ์— ๋”ฐ๋ผ ๋ผ์šฐํŒ…๋˜๋Š” ํŽ˜์ด์ง€ ๋‹จ์œ„์˜ ์ปดํฌ๋„ŒํŠธ
    • ํ•ด๋‹น ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉ๋  ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์€ components ํด๋”์—์„œ import ํ•ด์˜ต๋‹ˆ๋‹ค.
  • redux
    • store ํด๋”: ์ „์—ญ์œผ๋กœ ์ƒํƒœ๊ด€๋ฆฌํ•˜๋Š” ์—ฌ๋Ÿฌ slice๋“ค์˜ state๊ฐ€ ๋‹ด๊ธด store.js ํŒŒ์ผ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.
    • userSlice.js : ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ๊ด€๋ จ