- src/: ๋ชจ๋ ์์ค ์ฝ๋๋ฅผ ๋ด๋ ํด๋์
๋๋ค.
- components/: ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ๋ด๋ ํด๋์
๋๋ค.
- pages/: ๊ฐ ํ์ด์ง ์ปดํฌ๋ํธ๋ฅผ ๋ด๋ ํด๋์
๋๋ค.
- styles/: CSS ํ์ผ์ด๋ CSS-in-JS ์คํ์ผ๋ง ๊ด๋ จ ํ์ผ์ ๋ด๋ ํด๋์
๋๋ค.
- utils/: ์ ํธ๋ฆฌํฐ ํจ์๋ ์์๊ฐ ๋ฑ์ ๋ด๋ ํด๋์
๋๋ค.
- ํ์ผ๋ช
์ ์๋ฌธ์๋ก ์์ฑํ๊ณ , ์ฌ๋ฌ ๋จ์ด๋ ํ์ดํ(-)์ผ๋ก ๊ตฌ๋ถํฉ๋๋ค.
- ์ปดํฌ๋ํธ ํ์ผ์ ํด๋น ์ปดํฌ๋ํธ์ ๊ธฐ๋ฅ์ ๋ํ๋ด๋ ์ด๋ฆ์ผ๋ก ์์ฑํฉ๋๋ค. ์: header-navigation.js
- ์คํ์ผ ํ์ผ์ ํด๋น ์ปดํฌ๋ํธ๋ ํ์ด์ง ์ด๋ฆ์ ๋ฐ๋ผ ์์ฑํฉ๋๋ค. ์: header-navigation.styles.css
- ๋ค์ฌ์ฐ๊ธฐ๋ ์คํ์ด์ค 2๊ฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ๋ณ์๋ช
๊ณผ ํจ์๋ช
์ ์นด๋ฉ ์ผ์ด์ค๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- JSX์์๋ JSX๋ฅผ ์ฝ๊ธฐ ์ฝ๊ฒ ํ๊ธฐ ์ํด ํ๊ทธ์ ์์ฑ์ ๊ฐ ์ค๋ง๋ค ์์ฑํฉ๋๋ค.
<Component prop1={value1} prop2={value2} />- ์ปค๋ฐ ๋ฉ์์ง๋ ๋ช
ํํ๊ณ ๊ฐ๊ฒฐํ๊ฒ ์์ฑํฉ๋๋ค.
- ์ปค๋ฐ ๋ฉ์์ง๋ ์์ด๋ก ์์ฑํ๋ฉฐ, ์ฒซ ๊ธ์๋ ๋๋ฌธ์๋ก ์์ํ๊ณ ๋ง์นจํ๋ฅผ ๋ถ์ด์ง ์์ต๋๋ค.
- ์ปค๋ฐ ๋ฉ์์ง๋ ํด๋น ์ปค๋ฐ์ด ์ด๋ค ๋ณ๊ฒฝ์ฌํญ์ ๊ฐ์ง๊ณ ์๋์ง ์ดํดํ๊ธฐ ์ฝ๋๋ก ์์ฑํฉ๋๋ค.
- ์ฝ๋์ ํ์ํ ์ฃผ์์ ์ต์ํํ๋, ํ์ํ ๊ฒฝ์ฐ์๋ ๋ช
ํํ๊ฒ ์์ฑํฉ๋๋ค.
- ์ฃผ์์ ์์ด๋ก ์์ฑํ๋ฉฐ, ์ฃผ์ ์์ //๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์ฃผ์์ ์ฝ๋๋ฅผ ์ดํดํ๊ธฐ ์ด๋ ค์ด ๋ถ๋ถ์ด๋ ์ค์ํ ์ฌํญ์ ์์ฑํฉ๋๋ค.