๊ฐ์
๋ฏธ์ | ๊ธฐ๊ฐ | Repository | PR & Review | github pages | storybook |
---|---|---|---|---|---|
์ฅ๋ฐ๊ตฌ๋ 1๋จ๊ณ | 23-05-26 - 23-06-05 | Repo | PR & Review | ๐ ์ฅ๋ฐ๊ตฌ๋ | ๐ ์คํ ๋ฆฌ๋ถ |
๋ฏธ์ ํ๊ณ
2๋จ๊ณ ๋ฏธ์ ์์๋ ์ฐํ ์ฝ 3, 4๋จ๊ณ์์ ๋ง์ฃผ์น๊ฒ ๋ ํ์ ์ ๊ณผ์ ์ ๋ฏธ๋ฆฌ ์ฒดํํ ์ ์๋ ๊ฒฝํ์ ํ ์ ์์๋ค. ํจ๊ป 2๋จ๊ณ ์๊ตฌ์ฌํญ์ ๋ํ ๋ช ์ธ์๋ฅผ ์์ฑํ๊ณ ์ฌํ ๊ด๋ จ ์๋น์ค๋ฅผ ๋ฌด์์ผ๋ก ํ ์ง๋ฅผ ์ ํ๋ ๊ฒ์ด ๊ทธ๊ฒ์ด์๋ค.
์ฅ๋ฐ๊ตฌ๋ ํ์ ๋ฏธ์ ์ ์๊ตฌ์ฌํญ์ ๋ค์๊ณผ ๊ฐ์ด ํฌ๊ฒ 2๊ฐ์ง์ด๋ค.
1. ์ฌํ ๊ณผ๋ จ ์๋น์ค(ํฌ์ธํธ, ์ฟ ํฐ, ํ ์ธ)
2. ์ฃผ๋ฌธ ๋ชฉ๋ก
1๋จ๊ณ ๋ฏธ์ ์ด ๋๋ ๋ค์๋ ์ธ 26์ผ ๊ธ์์ผ ๋์ ๋๋ฆฌ๋ ์๋จ, ๋ฒ ๋ฒ ์ ํจ๊ป ์ด์ ๋ํด ์ด์ผ๊ธฐ๋ฅผ ํ๊ณ ์ ์ ์ค ์บ ํผ์ค๋ก ํฅํ๋ค. ๋ค๋ฅธ ํฌ๋ฃจ๋ค๋ ์ ์ค๋ก ๋ง์ด ์ด๋ํ๊ธฐ ๋๋ฌธ์ ์ ์ค ์บ ํผ์ค๋ ์ฌ๋๋ค๋ก ๋ถ๋ณ๋ค. ๋๋ฌธ์ ์ฝ๊ฐ์ ํผ๋์ค๋ฌ์ ๊ณ ์ง์ค์ด ์ ์ ๋๋ ๋๋์ ๋ฐ์๋ค.(์ญ์ ์ฌ๋์ด ๋๋ฌด ๋ง์ ๊ณณ์ ์ ๋ง์ง ์๋ ๋ณด๋ค ๐ญ) ๊ทธ๋๋ ํ ์๊ฐ ๋จ์ง ์ง์คํ์ฌ 2๋จ๊ณ ์๊ตฌ์ฌํญ์ ๋ํด ์ด์ผ๊ธฐ๋ฅผ ํ์๋ค.
๋ค์์ ํจ๊ป ์ด์ผ๊ธฐํ์ฌ ์ ํ ๊ธฐ๋ฅ๊ณผ ๋๋ถ์ด ์ด๋ฅผ ์ ์ฉํ๋ฉด์ ๋๋ ์ ์ด๋ค.(+ ๋ฏธ์ ์ค ๊ณ ๋ฏผํ ๋ด์ฉ)
ํ ์ธ์ ํด๋ณด์!
์ฌํ๊ด๋ จ ์๋น์ค์ ๋ํด ๊ณ ๋ฏผ์ ํ๋ค ๊ฐ์ฅ ์ฌ์ธ ๊ฒ ๊ฐ์ ํ ์ธ์ ์ ์ฉํ๊ธฐ๋ก ํ์๋ค. ํ์ง๋ง ์ง๊ธ ์๊ฐํด ๋ณด๋ฉด ํ ์ธ์ ๋ฐฑ์๋์ ํ์ ์ ํ์ง ์๊ณ ํ๋ก ํธ์์ ์์ฒด์ ์ผ๋ก ๊ณ์ฐํ์ฌ ์ ์ฉํ๊ธฐ ๋๋ฌธ์ ์๋ชป๋ ๋ฐฉํฅ์ด์๋ค๊ณ ์๊ฐํ๋ค.
์ ๊ทธ๋ ๊ฒ ํ์๊น?
์ด๊ธฐ ์ฅ๋ฐ๊ตฌ๋ ์๋น์ค๋ฅผ ๋ณด๋ฉด ์ฅ๋ฐ๊ตฌ๋์์ ๋ฐ๋ก ์ฃผ๋ฌธ์ ํ ์ ์๋ ๊ตฌ์กฐ๋ก ๋์ด์๋ค.
์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง์์ ์ํ์ ์ ํํ ์ ์๊ณ ์๋ ๋ํ ์์ ํ ์ ์๋ค. ๋๋ฌธ์ ์ฅ๋ฐ๊ตฌ๋ ํ์ด์ง์์ ํ ์ธ์จ์ ๊ณ์ํด์ ๊ณ์ฐ์ ํด์ผํ๋ค. ์ด๋ฐ ๊ณ์ฐ์ ๋ฐฑ์๋์์ ํ ํ ํต์ ์ ํตํด ํ๋ก ํธ์ ์ ๋ฌํ๊ณ UI์ ๋์ฐ๋ ๊ฒ์ ๋๋ฌด ๋ง์ ์ฐ์ฐ์ด๋ผ๊ณ ์๊ฐํ๋ค. ๊ทธ๋์ ๊ตณ์ด ๋ฐฑ์๋๊น์ง ๊ฐ์ง ์๊ณ ํ๋ก ํธ์์ ์ฒ๋ฆฌํ๋๋ก ๊ฒฐ์ ์ ํ์๋ค.
๋ง์ฝ ๊ทธ๋ , ์ฃผ๋ฌธํ๊ธฐ ํ์ด์ง๋ฅผ ๋๊ตฐ๊ฐ๊ฐ ์ด์ผ๊ธฐ๋ฅผ ํ๋ค๋ฉด ํ ์ธ ๊ฐ๊ฒฉ ๊ณ์ฐ์ ๋ฐฑ์๋์ ๋๊ฒผ์ ๊ฒ์ด๋ค. ํ์ง๋ง ์์ฝ๊ฒ๋ ๊ทธ๋ ์ ์ฃผ๋ฌธํ๊ธฐ ํ์ด์ง์ ๋ํด์ ๋ฏธ์ณ ์๊ฐ์ ํ์ง ๋ชปํ๋ค. ๋์ค์ ๋ค๋ฅธ ํฌ๋ฃจ๋ค์ ์๋น์ค๋ฅผ ๋ณด๋ฉฐ ์์ด๋์ด๋ฅผ ์ป์๋ค.
์๋ฌดํผ,, ํ ์ธ์ ์ ์ฉํ๊ธฐ๋ก ํ์ง๋ง ๋์ ๋๋ฆฌ๋ ์๋ก ๋ค๋ฅธ ํ ์ธ์ ํ๊ณ ์๋ ์์ด๋ฌ๋ํ ์ํฉ์ด ๋ฐ์ํ๋ค.
๋ํ ์ด๋ฐ ์ฌํ ๊ด๋ จ๋ ์ ์ฑ ์ ํ๋ก ํธ๊ฐ ์๋๋ผ ๋ฐฑ์๋์์ ์ผ๊ด์ ์ผ๋ก ๊ด๋ฆฌํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด์ฃผ๋ ๊ฒ์ด ์ข๋ค๊ณ ์๊ฐํ๋ค. ์๋ฌด๋๋ ์กฐ๊ธ ๋ ์์ ํ ์์ญ์ด๊ณ ์ฌํ๋ ์ฌ์ฉ์์๊ฒ ์กฐ์ฌ์ค๋ฌ์ด ๋ถ๋ถ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
๋ญ, ์๋ฌดํผ ๊ทธ๋์ ์ด๋ค ํ ์ธ?
ํ ์ธ์ ์ข ๋ฅ๋ ๊ต์ฅํ ๋ง๋ค. ๋น์ฅ ๋ ์ค๋ฅด๋ ๊ฒ๋ง ํด๋ ๋ค์๊ณผ ๊ฐ๋ค.
1. ํน์ ๋ฌผํ์ ๋ํ ํ ์ธ
2. ์ ์ฒด ์ฃผ๋ฌธ ๊ธ์ก์ ๋ํ ํ ์ธ
3. ๋ฐฐ์ก๋น ํ ์ธ
์ด ์ค ์ด๋ค ๊ฒ์ ์ฑํํ ์ง๋ฅผ ์ ํด์ผ ํ๋ค. ๋๋ ์ ์ฒด ์ฃผ๋ฌธ ๊ธ์ก์ ๋ํ ํ ์ธ์ ์ ํํ์๊ณ ๋ค์๊ณผ ๊ฐ์ ๊ธฐ์ค์ผ๋ก ํ ์ธ์ ์ ์ฉํ์๋ค.
- 10๋ง์ ์ด์์ผ ๋ 1% ํ ์ธ
- 30๋ง์ ์ด์์ผ ๋ 3% ํ ์ธ
- 50๋ง์ ์ด์์ผ ๋ 5% ํ ์ธ
์ด ์ํ๊ฐ๊ฒฉ์ ๋ฐํ์ผ๋ก ํ ์ธ๋ ๊ธ์ก์ ๊ตฌํ๋ ๊ฒ์ ์ด๋ ต์ง ์๋ค. ๋จ์ํ ๊ณ์ฐ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
์ฟ ํฐ๋ ์ฌ์ฉํด๋ณผ๊น?
ํ ์ธ๋ง ์๋ค๋ฉด ์ฌ์ฌํ์ง ์์๊น? ํ๋ ์๊ฐ์ ์ฟ ํฐ๋ ์ ์ฉํ๊ธฐ๋ก ํ์๋ค. ์ฟ ํฐ์ ๋ฐ๊ธํ๊ณ , ์ ์ฉํ๊ณ , ์ญ์ ํ๋ ๊ณผ์ ์ ๊ฑฐ์น๊ฒ ๋๋๋ฐ ์ด๋ ๋ชจ๋ ์๋ฒ์ ํต์ ์ ํ๊ธฐ ๋๋ฌธ์ ๋ช ์ธ์๊ฐ ํ์ํ๋ค. ์ด์ ๋ํด ์ด์ผ๊ธฐ๋ฅผ ๋๋๋ฉฐ ์ด๋ค ์ฟ ํฐ์ ์๋น์ค์ ๋์ ํ๋ฉด ์ข์์ง ํจ๊ป ์๊ฐํ๋ค.
์ฐ๋ฆฌ๊ฐ ์ ํ ์ฟ ํฐ์ ๋ค์๊ณผ ๊ฐ๋ค. ๋ชจ๋ 5๋ง ์ ์ด์ ์ฃผ๋ฌธํ ๋ ์ฟ ํฐ์ ์ ์ฉํ ์ ์๋ค.
- 1,000์ ํ ์ธ
- 3,000์ ํ ์ธ
- 5,000์ ํ ์ธ
- 10,000์ ํ ์ธ
์ฟ ํฐ์ ์ ์ฉํ๊ณ ๊ฐ๊ฒฉ์ ๊ณ์ฐํ๋ ๊ฒ์ ๋น์ฐํ ์ฌ์ ๋ค. ์ด๊ฒ๋ ๋จ์ํ ๊ณ์ฐ์ด๊ธฐ ๋๋ฌธ์ด๋ค. ๊น๋ค๋ก์ ๋ ๋ถ๋ถ์ ์ฟ ํฐ์ ๋ฐ๊ธํ๊ณ ์ ์ฉํ๊ณ ์ญ์ ํ๋ ์ ์ฒด์ ์ธ ๊ณผ์ ์ด์๋ค.
๊ฐ์ ์๊ฐ์ ๊ฐ์ง๊ณ ์๋ ๊ฒ์ด ์๊ฐ๋ณด๋ค ์ฝ์ง ์์๋ค.
๋ ํผ์ ์๊ฐํ๊ณ ์ด๋ฅผ ์๋น์ค์ ํํํ๋ ๊ฒ์ ๋๋ฌด๋ ์ฝ๋ค. ๋ด ๋จธ๋ฆฟ์์ ๋ชจ๋ ํ๋ฆ์ด ๋ด๊ฒจ์ ธ ์๊ธฐ ๋๋ฌธ์ด๋ค. ํ์ง๋ง ์ด๋ฒ ๋ฏธ์ ์ ์ฃผ๋ ๋ชฉ์ ์ ํ์ ์ ๊ฒฝํํ๋ ๊ฒ์ด๋ค. ๋๋ฌธ์ ๋ด ์๊ฐ๋ง ๊ฐ์ง๊ณ ๋ฏธ์ ์ ์งํํ ์ ์์๋ค. ๋ด ์๊ฐ์ ๋ค๋ฅธ ํฌ๋ฃจ๋ค์๊ฒ ์๋ ค์ฃผ๊ณ ๋ชจ๋๊ฐ ๋ฉ๋ํ๋ ๊ณผ์ ์ ๊ฑฐ์ณ์ผ ํ๋ค.
์ด๋ฅผ ์ง์ ๋๋ผ๊ฒ ๋ ์ด์ ๋ ์์ง ์ฟ ํฐ API๋ฅผ ๋ฐ๊ธฐ ์ MSW๋ก ์์ ์ ํ ๋ ์์ํ๊ฒ ์ฟ ํฐ์ด ์ ์ฉ์ด ๋๊ณ ์ญ์ , ๋ฐ๊ธ์ ํ ์ ์์์ง๋ง ์ฟ ํฐ API๋ฅผ ๋ฐ๊ณ ๋์๋ ์๊ฐ๋๋ก ๋์ํ์ง ์์๋ ๊ฒ์ด์๋ค. ๋ถ๋ช ๊ฐ์ด ์ด์ผ๊ธฐ๋ฅผ ํ๊ณ ๋ช ์ธ๊น์ง ๋ง์ท๋๋ฐ ๋ฌด์์ด ๋ฌธ์ ์์๊น?๋ผ๋ ์๊ฐ์ ํ๊ฒ ๋์๊ณ ์ด๋ฅผ ํด๊ฒฐํ๊ณ ์ ์ฌ๋ ์ ์ง๋ฌธ์ ๋จ๊ฒผ๋ค. ์ ๋ง์ถฐ๊ฐ๋ฉฐ ํด๊ฒฐ์ ํ์์ง๋ง, ์ฒ์๋ถํฐ ๊ผผ๊ผผํ๊ฒ ์ด์ผ๊ธฐ๋ฅผ ๋๋์์ผ๋ฉด ๋์ฑ ์ข์ ํ์ ์ด์๋ค๊ณ ์๊ฐํ๋ค.
์ด์ ๊ฐ์ ๋ฌธ์ ๋ ๋ ๋ค๋ฅธ ๊ณณ์์๋ ๋ฐ์ํ์๋ค. ๋ค์์ ์ ์ฒด ์ฟ ํฐ ์กฐํ ๋ช ์ธ์๋ค.
// response
[
{
id: number;
name: string;
discountAmount: number;
description: string;
},
{
id: number;
name: string;
discountAmount: number;
description: string;
},
// ...
]
์์ ๊ฐ์ด ์ฟ ํฐ์ id, name, discountAmount, description์ ๊ฐ์ง๊ณ ์๋ค. id์ discountAmount๋ ์ด๋ค ์๋ฏธ์ด๊ณ ์ด๋ป๊ฒ ์ฐ์ด๋์ง ๊ตฌ๋ถ์ด ๋๋ค. ํ์ง๋ง name๊ณผ description์ ๊ทธ๋ ์ง ์๋ค.
๊ฐ๊ฐ ์ด๋ค ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋ฉด ์ด๋ป๊ฒ ์ฐ์ด์ง๋ ํ์คํ๊ฒ ์ง๊ณ ๋์ด๊ฐ์ผ ์๋ก ๊ฐ์ ๋ฐฉํฅ์ผ๋ก ๊ฐ๋ฐ์ ํ ์ ์์์ ๊ฒ์ด๋ค.
๊ฒฐ๋ก ์ ๋ด ์๊ฐ์ด ๋ค๋ฅธ ์ด๋ค๊ณผ ๋ค๋ฅธ๋ค๋ ๊ฒ์ ํญ์ ์๊ฐํ์.
์ปดํฌ๋ํธ์ ์ฌํ์ฉ
์ฅ๋ฐ๊ตฌ๋ ์๋น์ค์๋ ๋ค์๊ณผ ๊ฐ์ ๋ง์ ์ํ ์ปดํฌ๋ํธ๋ค์ด ์กด์ฌํ๋ค.
1. ProductItem
2. OrderItem
3. OrderSheetItem
4. CartItems
์ด๋ฌํ ์ํ ์ปดํฌ๋ํธ๋ค์ ๋ชจ๋ ๊ณตํต์ ์ ๊ฐ์ง๊ณ ์๋ค. ๋ฐ๋ก ์ํ์ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ค๋ค๋ ๊ฒ์ด๋ค. ๊ทธ๋ ๋ค๋ฉด ๊ณตํต์ ์ด ์์ผ๋ ํ๋์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด ์ฌํ์ฉ์ ํด์ผ ํ๋ ๊ฒ์ธ๊ฐ?๋ผ๋ ๊ณ ๋ฏผ์ ํ๊ฒ ๋์๋ค. ์ฌ์ค ์ด๋ฐ ๊ณ ๋ฏผ์ ์ฅ๋ฐ๊ตฌ๋ ํ์ ๋ฏธ์ ์ด์ ์ธ ์ฅ๋ฐ๊ตฌ๋ ๋ฏธ์ ์์ ๋ถํฐ ์ด์ด์ ธ ์๋ ๊ณ ๋ฏผ์ด์๋ค.
๊ฐ๋ ์ฑ์ ๊ด์ฐฎ์?
4๊ฐ์ ์ํ ์ปดํฌ๋ํธ๋ค์ ๋ชจ๋ ํ๋์ ์ปดํฌ๋ํธ์์ Props๋ง ๋ค๋ฅด๊ฒ ํ์ฌ ์ฌํ์ฉ์ ํ๊ฒ ๋๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น? ์ฝ๋๋ก ๊ตฌํํ์ง ์์์ง๋ง ๊ตณ์ด ๊ทธ๋ฌ์ง ์์๋ ๊ต์ฅํ ๋ณต์กํด์ง ๊ฒ์ด๋ค.
๊ณตํต์ ์ผ๋ก ๋ฐ๋ Props์ ๋ฌด์์ผ๊น? ๋ฐ๋ก ์ํ ๊ฐ์ฒด์ด๋ค. ๋น์ฐํ ์ํ์ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ค์ผ ํ๊ธฐ ๋๋ฌธ์ ์ํ ๊ฐ์ฒด๋ ๊ณตํต์ ์ผ๋ก ๋ชจ๋ ๋ฐ์ ๊ฒ์ด๋ค. ํ์ง๋ง ๊ทธ ์ธ์ ๊ฒ๋ค์ ์๊ฐํ๋ฉด ๋ชจ๋ optional์ด๊ธฐ ๋๋ฌธ์ ์กฐ๊ฑด๋ฌธ, ์ผํญ์ฐ์ฐ์๊ฐ ๋๋ฌดํ ๊ฒ์ด๋ค. ์๋ฅผ ๋ค์ด ์๋์ ์กฐ์ ํ๋ ๋ฒํผ์ด ์๋ ๊ฒฝ์ฐ๊ฐ ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ, ์ญ์ ๋ฒํผ์ด ์๋ ๊ฒฝ์ฐ์ ๊ทธ๋ ์ง ์๋ ๊ฒฝ์ฐ, ๋ ์ง๊ฐ ์๋ ๊ฒฝ์ฐ์ ๊ทธ๋ ์ง ์๋ ๊ฒฝ์ฐ.... ๋ฑ๋ฑ ๋ฒ์จ ์ด๋ฅผ ์ฝ๋๋ฅผ ๊ตฌํํ๊ณ ์ ํ๋ค๊ณ ํ๋ฉด ๋ณต์กํด์ง์ ๋๋ผ์ง ์๋๊ฐ?
์คํ์ผ ๋ํ ๋ง์ฐฌ๊ฐ์ง์ด๋ค. ์ ์ฒด์ ์ธ ๋ฐฐ์น๋ ๋น์ทํด ๋ณด์ด๋ ์ปดํฌ๋ํธ๋ค์ด ์์ง๋ง ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ๋ ์๋ค. ์ด๋ ์คํ์ผ ์ปดํฌ๋ํธ์๋ Props๋ฅผ ๋๊ฒจ ์ผํญ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค๋ ๊ฒ์ด๋ค. ๊ทธ๋ด ๋ฐ์ ํ๋ํ๋ ๋ง๋๋ ๊ฒ์ด ๊ฐ๋ ์ฑ ์ธก๋ฉด์์ ๋์ฑ ์ข์ง ์์๊น? ๋ํ ๋ฐ์ํ๊น์ง ๊ณ ๋ คํ๋ค๋ฉด ์ด๋ ์ฐ ๋์ด ์ฐ์ด๋ค.
ํ์ฅ์ฑ์ ์ด๋?
์๋น์ค๋ ์ธ์ ๋ ์ง ํ์ฅ ๊ฐ๋ฅ์ฑ์ด ์๋ค. ProductItem์ ์ฅ๋ฐ๊ตฌ๋ ๋ฒํผ์ด ๋ฐ๋ ์ ์๊ณ , ์ฅ๋ฐ๊ตฌ๋ ์์ดํ ์ ๊ตฌ์ฑ, ๋ฐฐ์ก ์ ๋ณด, ์ํ ๋ณ ํ ์ธ ํํ ๋ฑ๋ฑ ๋ค์ํ ๋ฐฉํฅ์ผ๋ก ๋ฐ๋ ์ ์๋ค. ์ด๋ฅผ ๊ณ ๋ คํ๋ค๋ฉด ์๋ฌด๋ฆฌ ๊ฐ์ ๋ชฉ์ ์ ๊ฐ์ง ์ปดํฌ๋ํธ์ฌ๋ ๊ฐ๊ฐ ํ์ฅ๋ ๊ฐ๋ฅ์ฑ์ด ์๋ ์ปดํฌ๋ํธ๋ผ๋ฉด ์ฌํ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ก ๋ง๋๋ ๊ฒ๋ณด๋ค ํ๋์ ์ปดํฌ๋ํธ๋ก ๋ง๋ค์ด ํ์ฅ ๊ฐ๋ฅํ ์ ์๋๋ก ๋ง๋๋ ๊ฒ์ด ์ข๋ค๊ณ ์๊ฐํ๋ค.
๋ง์ฝ 4๊ฐ์ ์ปดํฌ๋ํธ๊ฐ ๋ชจ๋ ํ๋์ ์ปดํฌ๋ํธ์์ ๋ง๋ค์ด์ง๊ณ ์๋ก์ด ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋๋ค๋ฉด ์ด๋๋ถํฐ ๊ฑด๋ค์ด์ผ ํ๋์ง ๋ง๋งํ ์ํฉ์ด ์ฐพ์์ฌ ์ ์๋ค. ๊ฐ๋ฐ ์๋๋ ๋ฆ์ถฐ์ง๋ฟ๋๋ฌ ์์น ์๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ ๊ฐ๋ฅ์ฑ์ด ์๊ธด๋ค.
๊ทธ๋ ๋ค๋ฉด ์ธ์ ์ปดํฌ๋ํธ ์ฌํ์ฉ์ ํ๋ค๋ ๊ฑฐ์ผ?
์ง๊ธ๊น์ง ์ด๋ค ์ปดํฌ๋ํธ๋ฅผ ์ฌํ์ฉํ ์ ์๋๋ก ๋ง๋ค์๋์ง ์๊ฐํด ๋ณด์.
์ด๋ฒ ๋ฏธ์ ์์๋ ๋ค์๊ณผ ๊ฐ์ ์ปดํฌ๋ํธ๋ค์ ๋ง๋ค์ด ์ฌํ์ฉํ์ฌ ์ฌ์ฉํ์๋ค.
- Button
- Checkbox
- HelperMessage
๋ ๋ง์ ์ปดํฌ๋ํธ๋ค์ด ์์ง๋ง ์์ 3๊ฐ์ ์ปดํฌ๋๋ค์ด ๋ํ์ ์ผ๋ก ์ฌํ์ฉํ ์ ์๋ ์ปดํฌ๋ํธ๋ค์ด๋ผ๊ณ ์๊ฐํ๋ค. ์ด๋ค์ ์ด๋ค ํน์ง์ ๊ฐ์ง๊ณ ์์๊น?
์์ผ๋ก ๋ง์ ์ปดํฌ๋ํธ๋ค์ ๋ง๋ค์ด ๋ณด๋ฉด์ ๋๋ง์ ๊ธฐ์ค์ ์ ๋ฆฝํ๊ฒ ์ง๋ง ์ง๊ธ ๋น์ฅ ๋ ์ค๋ฅด๋ ์ฌํ์ฉํ๋ ์ปดํฌ๋ํธ๋ค์ ํน์ง์ ๋ค์๊ณผ ๊ฐ๋ค.
1. ๊ฐ๋จํ๋ค.(์์กด์ฑ์ด ์๋ค.)
2. ํ๋์ ์ฌ์ฉ์ฑ์ ๊ฐ์ง๊ณ ์๋ค.
3. ๋ฐ์ดํฐ๋ฅผ ์ธ๋ถ์์ ๋ฐ๋๋ค.
4. ํน์ ์ปดํฌ๋ํธ๋ค์์๋ง ์ฌ์ฉ๋์ง ์๋๋ค.(์์ ๋ฒ์ฉ์ ์ด๋ค.)
5. ๋ชจ๋ ํ์ด์ง์์ ๊ณตํต์ ์ผ๋ก ์ฐ์ธ๋ค.(์ด๋ Header ๋๋ NavgationBar์ ๊ฐ์ ๊ฒ๋ค์ด ํด๋น)
์ธ์ ํ ๋ฒ ์์ ๊ธฐ์ค์ ํ ๋๋ก ์ ๋ฆฌํด ๋ด์ผ๊ฒ ๋ค.
๊ฒฐ๋ก ์...
๊ฐ์ ๊ณตํต์ (์ํ์ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ค๋ค.)์ ๊ฐ์ง๊ณ ์๋ค ํ๋ค ์ด๋์์ ์ด๋ป๊ฒ ์ฌ์ฉํ๋๋? ๊ฐ ๋ค๋ฅด๋ค๋ฉด ์ด๋ ํ๋์ ์ปดํฌ๋ํธ๋ฅผ ์ฌํ์ฉํ๋ ๊ฒ๋ณด๋ค ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๋ค์ ๋ง๋๋ ๊ฒ์ด ์ข๋ค๊ณ ์๊ฐํ๋ค. ์๋ฌด๋ฆฌ ์๊ฐํด๋ ์์ง ์์ํ ๊ฒฐ๋ก ์ ๋ด๋ฆฌ๊ธฐ์ ๋๋ฌด ์ด๋ ค์ด ๋ถ๋ถ์ด๋ค.
๐จ๐ป PR Review
๋ค์์ ์ด๋ฒ ๋ฏธ์ ์์ ๋ฐ์ PR/Code Review ๋ด์ฉ์ด๋ค.
z-index ๊ด๋ฆฌํ๊ธฐ
์ด๋ค ๋ ์ด์ด๊ฐ ์์ ์์นํ ์ง, ์๋์ ์์นํ ์ง๋ฅผ ์ ํ๊ธฐ ์ํด์ css์ ์์ฑ์ธ z-index๋ฅผ ์ฌ์ฉํ๋ค. ๊ฐ์ ์ซ์์ด๋ฉฐ ์ซ์๊ฐ ํด์๋ก ์์ ์์นํ๋ค. ์ด๋ฅผ ์ฌ๋ฌ ๋ฏธ์ ์์ ์ฌ์ฉ์ ํ๋ฉฐ ์ํ๋ ๋์์ธ์ ํ ์ ์์๋ค.
์ด๋ฒ ๋ฏธ์ ์์๋ ์ฌ์ฉ์ ํ์๋๋ฐ, ์ซ์๊ฐ ์์๋ก ์กด์ฌํ๋ค ๋ณด๋ ์ฝ๋์ ์์ด ๋ง์์ง๋ ๋๊ท๋ชจ ํ๋ก์ ํธ์์๋ ์ด๋ฅผ ๊ด๋ฆฌ๋ฅผ ํด์ผ ํ๋ค. ๋๋ฌธ์ ์ด๋ป๊ฒ ๊ด๋ฆฌ๋ฅผ ํด์ผ ํ๋์ง ์ฌ๋ฌ ๊ธฐ์ ๋ธ๋ก๊ทธ๋ค์ ์ฐพ์๋ณด๋ ๋ค์ํ ๋ฐฉ๋ฒ์ด ์์๋ค. ์ด๋ฒ ๋ฏธ์ ์์๋ ๋ค์๊ณผ ๊ฐ์ด z-index๋ฅผ ๊ด๋ฆฌํ์๋ค.
export const Z_INDEX = {
base: 0,
above: 1,
};
ํ์ฌ๋ ๊ท๋ชจ๊ฐ ํฌ์ง ์์ ๋ ๊ฐ์ ์์๋ก ๊ตฌ๋ถํ์ฌ ๊ด๋ฆฌํ์๋๋ฐ ๋ ๋ฒจ 3์ด ์์๋๋ฉด ์ด๋ ํ์๋ค๊ณผ ํจ๊ป ์ด์ผ๊ธฐ๋ฅผ ๋๋๋ฉฐ ์ปจ๋ฒค์ ์ ๋ง๋ค์ด๋ด์ผ๊ฒ ๋ค.
์คํ์ผ ์ฝ๋์์์ &&
์คํ์ผ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ฉด props๋ฅผ ๋ฐ์ ๊ฐ์ ๋ฐ๋ฅธ ๋ค๋ฅธ ์คํ์ผ์ ์ ํ ์ ์๋ค. ์ด๋, ์ผํญ์ฐ์ฐ์๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ค. ํ์ง๋ง ๋ฐ๋ํธ์ ์คํ์ผ์ด ํ์ ์๋ ๊ฒฝ์ฐ ์ผํญ์ฐ์ฐ์๊ฐ ์๋๋ผ &&์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์๋ค. ์๋ฅผ ๋ค์ด ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๊ฐ ์๋ค.
export const Wrapper = styled.div`
position: ${(props) => props.isFixScrollPosition && 'fixed'};
`
์ ์ฝ๋์ ๋ด์ฉ์ isFixScrollPosition ๊ฐ์ด true์ผ ๋ position ์์ฑ์ fixed๋ก ํ๋ค๋ ๊ฒ์ด๋ค. ์ด ๋ง์ isFixScrollPosition๊ฐ์ด false๋ผ๋ฉด ์ ๊ฒฝ์ ์ฐ์ง ์๋๋ค๋ ๊ฒ๊ณผ ๊ฐ๋ค.
ํ์ง๋ง isFixScrollPosition ๊ฐ์ด false๋ผ๋ฉด postion ๊ฐ์ false๊ฐ ๋๋ค. ์ด๋ฅผ ์ฝ๋๋ฅผ ๋ํ๋ด๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
export const Wrapper = styled.div`
position: false;
`
position ์์ฑ ์ค false๊ฐ ์๋๊ฐ? ์๋ค. ๊ทธ๋ ๋ค๋ฉด ์ ์ฝ๋๋ ์๋ชป๋์๋ค. ๋น์ฅ ๋์ํ ๋ ์ค๋ฅ๊ฐ ์๊ฒ ์ง๋ง ์์ฑ์ ๋ง์ถฐ์ฃผ๋ ๊ฒ์ด ์ข์ ๊ฒ์ด๋ค. ๋๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ด ๋ฆฌํฉํฐ๋ง์ ์งํํ์๋ค.
export const Wrapper = styled.div<WrapperProps>`
position: ${(props) => (props.isFixScrollPosition ? 'fixed' : 'static')};
`
๐ ์ํ ์
1. ํ์ ์ ์ํด ์ํต์ ์ด์ฌํ ํ๊ณ ์ ๋ ธ๋ ฅํ๋ค.
2. MSW๋ฅผ ์ต๋ํ ์ ํ์ฉํ์๋ค.
๐ ์์ฌ์ด ์
1. ๋ ์ด์ ํ์ง์์ ๋ฆฌ๋ทฐ๊ฐ ์๋คใ ใ
2. ์์ง ๋จธ๋ฆฟ์์ด ์ ๋ฆฌ๋์ง ์์๋ค. ์ธ์ ์ ๋ฆฌ๊ฐ ๋ ์ง..
๐ ์์ผ๋ก์ ๋ค์ง
1. ์ฐ์ต์ ๋๋ฌ๊ณ ์ค์ ์ด ๋ค๊ฐ์๋ค.
2. ์ง๊ธ๊น์ง ๋ฐฐ์ด ๊ฑธ ๋ น์ฌ๋ณด์.
'๐ ์ฐ์ํํ ํฌ์ฝ์ค > Level2' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋ ๋ฒจ2 - ์ธํฐ๋ทฐ (0) | 2023.06.23 |
---|---|
๋ ๋ฒจ2 ์ฅ๋ฐ๊ตฌ๋ ํ์ - Step1 (0) | 2023.06.20 |
๋ ๋ฒจ2 ์ฅ๋ฐ๊ตฌ๋ - Step2 (0) | 2023.06.06 |
๋ ๋ฒจ2 ์ฅ๋ฐ๊ตฌ๋ - Step1 (0) | 2023.05.27 |
๋ ๋ฒจ2 ํ์ด๋จผ์ธ - Step3 (0) | 2023.05.15 |