๐บ๏ธ 3์ฃผ์ฐจ (24.02.28 - 3.3)
๐ชด ํต์ฌ 3์ค ์์ฝ
- ์๋ฉด ํจํด ์ ์ ๋ฒ์๋ก ๋๋ฆฌ๊ธฐ
- ๊ณํํ๊ณ , ์ฐ์ ์์ ์ธ์ฐ๊ณ , ๊ธฐ๋กํ๋ฉฐ ํ๋ฃจ๋ฅผ ๋ณด๋ด์
- ์ข์ ๋ฐํ์ ๋ํ ๊ณต๋ถ
๐ ์ด๋ฒ ์ฃผ ๋ชฉํ
โ ํ์ค & ๋ฆฌ์กํธ ๋ง์คํฐ ๊ฐ์ ๋ฏธ๋ฆฌ๋ฏธ๋ฆฌ ๋ฃ๊ธฐ
โ ์ฑ๋ฆฐ์ง ์ฌ์ถํ๊ธฐ
โ ์ฃผ๊ฐํ์ ์ฐธ์ฌํ๊ธฐ
๐ฅ ์นญ์ฐฌํ๊ณ ์ถ์ ์
- ํ๊ณ ์ ํ ๊ฒ๋ค์ ๋ง์ด ํด๋ธ ๊ฒ
- ๊ณผ์ ์ฌ์ถํ ์
- ์๋ก์ด ๊ฒ๋ค์ ๋์ ํ ์ .
๐ ๊ณ ์น๊ฑฐ๋ ๋ฒ๋ ค์ผ ํ ์
- ๊ธฐ๋กํ์ง ์๊ณ ์ฝ๊ฐ ์ถฉ๋์ ์ผ๋ก ํ๊ณ ์ถ์ ๊ฒ ๋จผ์ ํ ์ (์ฐ์ ์์ ์ ํ๊ณ ํจ์จ์ ์ผ๋ก ๋ณด๋ด์!)
- ์๋ฉด ํจํด ๋ฐ์ด๋ ์ . ์ด์ 4์์ ์๊ณ ์๋๋ฐ, ์ด์ํ๊ฒ ์กธ๋ฆฐ๋ฐ ๋ญ๊ฐ ํด์ผํ ๊ฒ ๊ฐ๋ค.
- ๊ณต๋ถํ๋ ํํ์ด ๋ฐฐ์ด ๋ด์ฉ ๊ธฐ๋กํ๋ ค๊ณ ํ์๋๋ฐ, ์ฐ๋ค๋ค ํ๋ค๊ฐ ๋ชปํ๋ค. ์ด๊ฒ๋ ์ฌ์ ๋ฅผ ๊ฐ์ง๊ณ ํ๋ฉด์ ๊ณ ์ณ์ผ๊ฒ ๋ค.
๐ ์ด๋ฒ ์ฃผ ๋ฐฐ์ด ๋ด์ฉ
๐ ๊ธฐ์ตํ๊ณ ์ถ์ ๋ด์ฉ
1.
ํ์ค ๊ณผ์ ์์ prepend ํจ์ ๊ตฌํ์ undshift() ๋ฅผ ์ฌ์ฉํ๋๋ฐ,
์ ๋ต์ง ๋ณด๋ ๊ตฌ๋ฅ ... <- ๊ตฌ์กฐ๋ถํด ํ ๋น์ ์ผ์ด๋ ๋๋ค.
์ญ์ ์๊ณ ๋ฆฌ์ฆ ์ํธ๋๊น ์๊ฐ์ด ์๋๋๊ตฌ๋ง!
2. interface ์ type ์ ์ฐจ์ด์
JS ์ฝ๋๋ก ๋ณด๋ฉด, ๋์ ์ฐจ์ด๋ ์ ์ ์๋ค. ๋ชฉํ๋ ๋์ผํ๊ณ type ๊ณผ interface ๋ผ๊ณ ํ๊ธฐํ ๋ถ๋ถ์ด JS ์ฝ๋์์๋ ๋ณด์ด์ง ์๋๋ค.
์ค๋ธ์ ํธ์ ๋ชจ์์ ์๋ ค์ฃผ๊ณ ์ถ์ผ๋ฉด interface ์ type ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
(1) ์์ํ๋ ๋ฒ
- type : ๋ ๋ค๋ฅธ ํ์ ํ๋๋ฅผ ๋ง๋ค์ด์ & ๋ก ์ฐ๊ฒฐ์์ผ์ค๋ค.
- interface : extends ๋ฅผ ์จ์ค๋ค.
๋์ค์ property ๋ฅผ ํ์ ์ ์ถ๊ฐํ๊ณ ์ถ๋ค๋ฉด?
- type : ์ด๋ ๊ฒ ํด์ค ์ ์์. - ์ property๋ฅผ ์ถ๊ฐํ๊ธฐ ์ํด ๋ค์ ์ ์ธ๋ ์ ์์.
- interface : ๋ฌธ์ ์์ด ํ ์ ์์. - ์์์ด ๊ฐ๋ฅ.
์ด๋ ๊ฒ ์จ์ฃผ๋ฉด ์์์ ํฉ์ณ์ง.
์ด๋ก ์ ์ผ๋ก ์ด๋ ๊ฒ๋ ๊ฐ๋ฅํ๋จ ๋ง. (๊ฐ์ ์ด๋ฆ์ interface ๋ฅผ ์ค๋ณต์ ์ผ๋ก ์ฌ์ฉํด์ ํ์ ์ ์ง์ ํด์ค ์ ์์)
ํ์ ๊ณผ ์ธํฐํ์ด์ค ๋ ๋ค ๋ชจ๋ ์ถ์ ํด๋์ค๋ฅผ ๋์ฒดํด์ ์ฌ์ฉํ ์ ์์.
type PlayerA = {
name: string
}
interface PlayerB{
name: string
}
class User implements PlayerA{
constructor(
public name: string
){}
}
class User2 implements PlayerB{
constructor(
public name: string
){}
}
์ด๋ ๊ฒ implements ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
๋ง์ ์ปค๋ฎค๋ํฐ์์
ํด๋์ค๋ ์ค๋ธ์ ํธ์ ๋ชจ์์ ์ ์ํ๊ณ ์ถ๋ค๋ฉด ๐ ์ธํฐํ์ด์ค interface
๋ค๋ฅธ ๋ชจ๋ ๊ฒฝ์ฐ ๐ ํ์ type
์ ์ฐ๋ผ๊ณ ํ๊ณ ์์.
3. Styled Components
- ์์ ์ปดํฌ๋ํธ ์ค ํน์ components ์ ์์ฑ๊ฐ์ ์ฃผ๋ ๋ฐฉ๋ฒ
(๋ถ๋ช ๊ฑฐ์ ๋ค ์๋ค๊ณ ์๊ฐํ์๋๋ฐ, ์ ์ฒ์ ๋ณธ ๊ฒ ๊ฐ์ง!)
๐ ์ฃผ๊ฐ ํ์์ ์กฐ๋ณ ํ๋
๋ํ๋์ด ๋ฐํํ์๋ ๊ฑธ ๋ณด๊ณ ๋ง์ ๊ฑธ ๋ฐฐ์ ๋ค.
๋ฐํ๊ฐ ๋๋ฌด ์ฌ๋ฐ์ด์ ๊ฐ์๊ธฐ ๊ธ๋ชฐ์ ํ๋๋ฐ ๋ ๋ฟ๋ง ์๋๊ณ ๋ค๋ฅธ ๋ถ๋ค๋ ๋น์ทํ๊ฒ ์ด์ผ๊ธฐ ํ๋ ๊ฑธ ๋ณด๊ณ ์ญ์ ์๊ฐ์ด ๋ค ๋น์ทํ๊ตฌ๋ ์ถ์๋ค.
๋ด๊ฐ ํ๊ณ ์ถ์ ์ด์ผ๊ธฐ๋ง ํ๋ ๊ฒ๊ณผ ์ฒญ์ค์ด ํ๊ณ ์ถ์ ์ด์ผ๊ธฐ๋ฅผ ์๊ฐํด์ ๊ฑธ๋ฌ๋ธ ๊ฑด ๋ฃ๋ ์ฌ๋์ ์ ์ฅ์์ ํฐ ์ฐจ์ด๊ฐ ์๊ตฌ๋ ๊นจ๋ฌ์๋ค. ์ด์ ๊ธฐ์ ๋ ๋ฐํ๋ฅผ ๋ ๋ฒ ํด๋ดค์ง๋ง, ์ฒญ์ค์ ์ ์ฅ์์ ์๊ฐํ๊ณ ๋ฐํํ์ง ์์์๋๋ฐ.. ์ข์ ๋ฐํ์ ๋ํด ์๊ฐํ๊ฒ ๋ ์ฃผ๊ฐํ์์๋ค.
๊ทธ๋ฆฌ๊ณ ์ด๋ค ๊ฐ๋ ์ ๋ํด ์ค๋ช ํ ๋ ๋ช ํํ๊ณ ๊ฐ๊ฒฐํ๊ฒ ๋ง์ํ์๋ ๊ฑธ ๋ณด๊ณ ์ ๋ง ๋ฉ์ง๋ค๊ณ ์๊ฐํ๋ค! ๊ฐ๋ฐ ๊ณต๋ถ๋ฅผ ํ๋ค๋ณด๋ฉด ์ถ์์ ์ธ ๊ฐ๋ ์ด ๋ง์ ๋จธ๋ฆฌ๋ก๋ ๋์ถฉ ์๊ณ ์ฌ์ฉํ๋ฉด์๋ ๋๊ตฐ๊ฐ ์ค๋ช ํด๋ฌ๋ผ๊ณ ํ๋ฉด ์ฅํฉํ๊ฒ ์ค๋ช ํ๊ฒ ๋๋ค. ๊ฐ๊ฒฐํ๊ณ ๋ช ํํ๊ฒ ๊ฐ๋ ์ ๋ฆฌ๋ฅผ ํ๋ฉด์ ๊ณต๋ถํด์ผ๊ฒ ๋ค.
๐ต ์๊ฐ ๊ธฐ๋ก
์์ฆ์ ๊ฐ๋ฐ ๊ณต๋ถ ์ธ์ ๋ด๊ฐ ํ๊ณ ์ถ์ ๊ฒ๋ค์ ์๊ฐ ํฌ์๋ฅผ ํ๋ฉด์ ๋ณด๋ด๊ณ ์๋ค. ๋ถํ์ํ๋ค๊ณ ์๊ฐ๋๋ ํ๋๋ค์ ๊ฑท์ด๋ด๊ณ , ๊ทธ ์๊ฐ์ ํฌ์๋ฅผ ํ๊ณ ์๋๋ฐ ์ต๊ทผ์ ์์ฃผ ์์ ์ฑ๊ณผ๊ฐ ๋ณด์ฌ์ ๊ธฐ๋ปค๋ค. ๊ฐ๋ฐ ๊ณต๋ถ์ ์ทจ์ ๋ ๋ฌผ๋ก ์ค์ํ์ง๋ง, ์ถ ์ ์ฒด๋ฅผ ๋ณด๋ ค๋ ๋ ธ๋ ฅ์ ํ๊ณ ์๋ค. ๊ทธ๋์ ๊ทธ๋ฐ์ง ๊ฐ์ ๊ณต๋ถ๋ฅผ ํด๋, ์ ์ ์ ๋๋ก ๋ชป์๋ ๋ ์ด ์์ด๋ ์คํธ๋ ์ค๋ฅผ ์๋ฐ๋ ๊ฒ ๊ฐ๋ค. ๋์ ๊ธฐ๋ก๊ณผ ์ฒด๊ณ์ ์ธ ๋ฃจํด์ ๋ง๋๋ ๋ฐ๋ ์กฐ๊ธ ๋ ํ์ ์จ์ผํ๋ค. ๋์ค์ ๊ธฐ์ต๋ ์๋๊ณ ์ ๋ณด๋ธ ํ๋ฃจ์ผ์ง๋ผ๋ ์๋ฌด๊ฒ๋ ์ํ ๊ธฐ๋ถ์ด ๋๋ ๋ ์ด ์๊ธฐ์.
๋ณ๊ฐ๋ก ๋ฆฌ์กํธ ์ฝ์ด๋ฐฉ์ ๋ชจ์ฌ์ ๊ฐ์ด ๊ณต๋ถํ์๋ ๋ถ๋ค์ด ์ด์ฌํ, ํ๋ชฉํ๊ฒ ๊ณต๋ถํ์ ์ ๊ฐ์ด ์์ผ๋ฉด ์ฐธ ์ฆ๊ฒ๊ณ ๋๊ธฐ๋ถ์ฌ๊ฐ ๋๋ค. ํ๋ฌํฐ๋ ๋ ์ผ๋ง๋ ์ฌ๋ฐ์์๊น โบ๏ธ ์ด์ ๋ง๋งํ์ง ์์ ๋ด์ฉ๋ค์ด ๋์ค๋ ์ฐฌ์ฐฌํ ๊ณต๋ถํด์ผ์ง.
๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ๊ณผ์ ๋ฅผ ํ๊ณ ์๋๋ฐ, ์ ์๋ก ์๊ฒ ๋ ๋ด์ฉ์ด ๋ง์์ง ๋ชจ๋ฅด๊ฒ ๋ค. ๊ทธ๋งํผ ๋ด๊ฐ ๋์ถฉ ๊ณต๋ถํ๊ฑฐ๋, ์ดํด๋ฅผ ๋ชปํ๋๋ณด๋ค. ์ต์ํ๋ฉด์ ์๋ก ์๊ฒ๋ ๋ด์ฉ์ด ๋ง์์ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ์ฐธ ์ฌ๋ฐ๋ค๋ ์๊ฐ์ ๋ง์ด ํ๋ค. ์ด๊ฒ ์ด์ ๊ธฐ์๋ ๋ฌ๋ผ์ง ์์ฃผ ํฐ ์ฐจ์ด! (๊ทธ๋๋ ํ์ค ๋ง์ง๋ง ๊ณผ์ ๋ ์ด๋ ค์ ๋ค.)
์ ํค๋ณด๋๋ฅผ ์๋ค. ์ด์ ์ ์ฐ๋ ํ๋ฌด๋ฌด๋ณด๋ค๋ ๋น์ฐํ ๋ฌด๊ฒ๊ณ ํ์ด ๋ ๋ค์ด๊ฐ์ง๋ง,
์ซ๋ํ๋ ์ข๋ค. ์๋ฅ๋ฏธ๋๋ ๋ฌต์งํด์ ์์ ์ ์ด๋ค.
์ฝ๊ฐ ํํฌ๋น์ด ๋์์ ๋ง๋ ํค์บก ์ค์ ํ์ฟ ์์ ์ฃ๋ค ๊บผ๋ด์์ ๋ผ์๋๋ค. ๊ท์ฌ์
'Progress > ๐ ๋ ธ๋ง๋์ฝ๋ ๋ฆฌ์กํธ4๊ธฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[6์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.03.27 |
---|---|
[5์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.03.20 |
[4์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.03.08 |
[2์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.02.21 |
[1์ฃผ์ฐจ] ์ฃผ๊ฐํ๊ณ ๋ก (0) | 2024.02.19 |