๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Progress/๐ŸŽ€ ๋…ธ๋งˆ๋“œ์ฝ”๋” ๋ฆฌ์•กํŠธ4๊ธฐ

[3์ฃผ์ฐจ] ์ฃผ๊ฐ„ํšŒ๊ณ ๋ก

728x90

 

 

๐Ÿ—บ๏ธ 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 ์— ์†์„ฑ๊ฐ’์„ ์ฃผ๋Š” ๋ฐฉ๋ฒ•

(๋ถ„๋ช… ๊ฑฐ์˜ ๋‹ค ์•ˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์—ˆ๋Š”๋ฐ, ์™œ ์ฒ˜์Œ ๋ณธ ๊ฒƒ ๊ฐ™์ง€!)

 

 

 

 

๐Ÿ‘Ÿ ์ฃผ๊ฐ„ ํšŒ์˜์™€ ์กฐ๋ณ„ ํ™œ๋™

 ๋Œ€ํ›ˆ๋‹˜์ด ๋ฐœํ‘œํ•˜์‹œ๋Š” ๊ฑธ ๋ณด๊ณ  ๋งŽ์€ ๊ฑธ ๋ฐฐ์› ๋‹ค.

 ๋ฐœํ‘œ๊ฐ€ ๋„ˆ๋ฌด ์žฌ๋ฐŒ์–ด์„œ ๊ฐ‘์ž๊ธฐ ๊ธ‰๋ชฐ์ž…ํ–ˆ๋Š”๋ฐ ๋‚˜ ๋ฟ๋งŒ ์•„๋‹ˆ๊ณ  ๋‹ค๋ฅธ ๋ถ„๋“ค๋„ ๋น„์Šทํ•˜๊ฒŒ ์ด์•ผ๊ธฐ ํ•˜๋Š” ๊ฑธ ๋ณด๊ณ  ์—ญ์‹œ ์ƒ๊ฐ์ด ๋‹ค ๋น„์Šทํ•˜๊ตฌ๋‚˜ ์‹ถ์—ˆ๋‹ค.

 ๋‚ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€ ์ด์•ผ๊ธฐ๋งŒ ํ•˜๋Š” ๊ฒƒ๊ณผ ์ฒญ์ค‘์ด ํ•˜๊ณ  ์‹ถ์€ ์ด์•ผ๊ธฐ๋ฅผ ์ƒ๊ฐํ•ด์„œ ๊ฑธ๋Ÿฌ๋‚ธ ๊ฑด ๋“ฃ๋Š” ์‚ฌ๋žŒ์˜ ์ž…์žฅ์—์„œ ํฐ ์ฐจ์ด๊ฐ€ ์žˆ๊ตฌ๋‚˜ ๊นจ๋‹ฌ์•˜๋‹ค. ์ด์ „ ๊ธฐ์ˆ˜ ๋•Œ ๋ฐœํ‘œ๋ฅผ ๋‘ ๋ฒˆ ํ•ด๋ดค์ง€๋งŒ, ์ฒญ์ค‘์˜ ์ž…์žฅ์—์„œ ์ƒ๊ฐํ•˜๊ณ  ๋ฐœํ‘œํ•˜์ง„ ์•Š์•˜์—ˆ๋Š”๋ฐ.. ์ข‹์€ ๋ฐœํ‘œ์— ๋Œ€ํ•ด ์ƒ๊ฐํ•˜๊ฒŒ ๋œ ์ฃผ๊ฐ„ํšŒ์˜์˜€๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์–ด๋–ค ๊ฐœ๋…์— ๋Œ€ํ•ด ์„ค๋ช…ํ•  ๋•Œ ๋ช…ํ™•ํ•˜๊ณ  ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋ง์”€ํ•˜์‹œ๋Š” ๊ฑธ ๋ณด๊ณ  ์ •๋ง ๋ฉ‹์ง€๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค! ๊ฐœ๋ฐœ ๊ณต๋ถ€๋ฅผ ํ•˜๋‹ค๋ณด๋ฉด ์ถ”์ƒ์ ์ธ ๊ฐœ๋…์ด ๋งŽ์•„ ๋จธ๋ฆฌ๋กœ๋Š” ๋Œ€์ถฉ ์•Œ๊ณ  ์‚ฌ์šฉํ•˜๋ฉด์„œ๋„ ๋ˆ„๊ตฐ๊ฐ€ ์„ค๋ช…ํ•ด๋‹ฌ๋ผ๊ณ  ํ•˜๋ฉด ์žฅํ™ฉํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๊ฒŒ ๋œ๋‹ค. ๊ฐ„๊ฒฐํ•˜๊ณ  ๋ช…ํ™•ํ•˜๊ฒŒ ๊ฐœ๋…์ •๋ฆฌ๋ฅผ ํ•˜๋ฉด์„œ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค. 

 

 

๐ŸŒต ์ƒ๊ฐ ๊ธฐ๋ก

์š”์ฆ˜์€ ๊ฐœ๋ฐœ ๊ณต๋ถ€ ์™ธ์— ๋‚ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ๋“ค์— ์‹œ๊ฐ„ ํˆฌ์ž๋ฅผ ํ•˜๋ฉด์„œ ๋ณด๋‚ด๊ณ  ์žˆ๋‹ค. ๋ถˆํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋Š” ํ™œ๋™๋“ค์„ ๊ฑท์–ด๋‚ด๊ณ , ๊ทธ ์‹œ๊ฐ„์— ํˆฌ์ž๋ฅผ ํ•˜๊ณ  ์žˆ๋Š”๋ฐ ์ตœ๊ทผ์— ์•„์ฃผ ์ž‘์€ ์„ฑ๊ณผ๊ฐ€ ๋ณด์—ฌ์„œ ๊ธฐ๋ปค๋‹ค. ๊ฐœ๋ฐœ ๊ณต๋ถ€์™€ ์ทจ์—…๋„ ๋ฌผ๋ก  ์ค‘์š”ํ•˜์ง€๋งŒ, ์‚ถ ์ „์ฒด๋ฅผ ๋ณด๋ ค๋Š” ๋…ธ๋ ฅ์„ ํ•˜๊ณ  ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ทธ๋Ÿฐ์ง€ ๊ฐ™์€ ๊ณต๋ถ€๋ฅผ ํ•ด๋„, ์ž ์„ ์ œ๋Œ€๋กœ ๋ชป์ž๋Š” ๋‚ ์ด ์žˆ์–ด๋„ ์ŠคํŠธ๋ ˆ์Šค๋ฅผ ์•ˆ๋ฐ›๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๋Œ€์‹  ๊ธฐ๋ก๊ณผ ์ฒด๊ณ„์ ์ธ ๋ฃจํ‹ด์„ ๋งŒ๋“œ๋Š” ๋ฐ๋Š” ์กฐ๊ธˆ ๋” ํž˜์„ ์จ์•ผํ•œ๋‹ค. ๋‚˜์ค‘์— ๊ธฐ์–ต๋„ ์•ˆ๋‚˜๊ณ  ์ž˜ ๋ณด๋‚ธ ํ•˜๋ฃจ์ผ์ง€๋ผ๋„ ์•„๋ฌด๊ฒƒ๋„ ์•ˆํ•œ ๊ธฐ๋ถ„์ด ๋“œ๋Š” ๋‚ ์ด ์žˆ๊ธฐ์—. 

 ๋ณ„๊ฐœ๋กœ ๋ฆฌ์•กํŠธ ์ฝ”์–ด๋ฐฉ์— ๋ชจ์—ฌ์„œ ๊ฐ™์ด ๊ณต๋ถ€ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ์—ด์‹ฌํžˆ, ํ™”๋ชฉํ•˜๊ฒŒ ๊ณต๋ถ€ํ•˜์…”์„œ ๊ฐ™์ด ์žˆ์œผ๋ฉด ์ฐธ ์ฆ๊ฒ๊ณ  ๋™๊ธฐ๋ถ€์—ฌ๊ฐ€ ๋œ๋‹ค. ํ”Œ๋Ÿฌํ„ฐ๋Š” ๋˜ ์–ผ๋งˆ๋‚˜ ์žฌ๋ฐŒ์—ˆ์„๊นŒ โ˜บ๏ธ ์ด์ œ ๋งŒ๋งŒํ•˜์ง€ ์•Š์€ ๋‚ด์šฉ๋“ค์ด ๋‚˜์˜ค๋‹ˆ ์ฐฌ์ฐฌํžˆ ๊ณต๋ถ€ํ•ด์•ผ์ง€. 

๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ๊ณผ์ œ๋ฅผ ํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ์™œ ์ƒˆ๋กœ ์•Œ๊ฒŒ ๋œ ๋‚ด์šฉ์ด ๋งŽ์€์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค. ๊ทธ๋งŒํผ ๋‚ด๊ฐ€ ๋Œ€์ถฉ ๊ณต๋ถ€ํ–ˆ๊ฑฐ๋‚˜, ์ดํ•ด๋ฅผ ๋ชปํ–ˆ๋‚˜๋ณด๋‹ค. ์ต์ˆ™ํ•˜๋ฉด์„œ ์ƒˆ๋กœ ์•Œ๊ฒŒ๋œ ๋‚ด์šฉ์ด ๋งŽ์•„์„œ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ์ฐธ ์žฌ๋ฐŒ๋‹ค๋Š” ์ƒ๊ฐ์„ ๋งŽ์ด ํ•œ๋‹ค. ์ด๊ฒŒ ์ด์ „ ๊ธฐ์ˆ˜๋ž‘ ๋‹ฌ๋ผ์ง„ ์•„์ฃผ ํฐ ์ฐจ์ด! (๊ทธ๋ž˜๋„ ํƒ€์Šค ๋งˆ์ง€๋ง‰ ๊ณผ์ œ๋Š” ์–ด๋ ค์› ๋‹ค.)

 

์ƒˆ ํ‚ค๋ณด๋“œ๋ฅผ ์ƒ€๋‹ค. ์ด์ „์— ์“ฐ๋˜ ํ•œ๋ฌด๋ฌด๋ณด๋‹ค๋Š” ๋‹น์—ฐํžˆ ๋ฌด๊ฒ๊ณ  ํž˜์ด ๋” ๋“ค์–ด๊ฐ€์ง€๋งŒ, 

์ซ€๋“ํ•˜๋‹ˆ ์ข‹๋‹ค. ์•Œ๋ฅ˜๋ฏธ๋Š„๋„ ๋ฌต์งํ•ด์„œ ์•ˆ์ •์ ์ด๋‹ค. 

์•ฝ๊ฐ„ ํ•‘ํฌ๋น›์ด ๋Œ์•„์„œ ๋งŒ๋“  ํ‚ค์บก ์ค‘์— ํ•‘์ฟ ์ƒ‰์„ ์ฃ„๋‹ค ๊บผ๋‚ด์™€์„œ ๋ผ์›Œ๋’€๋‹ค. ๊ท€์—ฌ์›Œ 

728x90
๋ฐ˜์‘ํ˜•