๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Daily/Today I Learned

210114_TIL (OOP์™€ ํ•จ๊ป˜ํ•œ ํ•˜๋ฃจ..)

by joooing 2021. 1. 15.
๋ฐ˜์‘ํ˜•

๐ŸŽ ์˜ค๋Š˜ ํ•œ ์ผ


โœ”๏ธ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(OOP) ๊ด€๋ จ ๊ฐœ๋… ๋ธ”๋กœ๊น… 
๊ฐ์ฒด๊ฐ€ ๋ฌด์—‡์ธ์ง€๋ถ€ํ„ฐ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๋„ค๊ฐ€์ง€ ํŠน์ง•(์บก์ƒ๋‹ค์ถ”), ํด๋ž˜์Šค๊ฐ€ ๋ฌด์—‡์ธ์ง€๊นŒ์ง€ ๋จผ์ € ์ •๋ฆฌ๋ฅผ ํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ Javascript๋Š” ํด๋ž˜์Šค๋ผ๋Š” ๊ฐœ๋…์ด ์—†๋Š” 'ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜'์–ธ์–ด๋ผ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์œ„ํ•ด์„œ๋Š” ํ”„๋กœํ† ํƒ€์ž…์ด๋ผ๋Š” ๊ฐ์ฒด๋ฅผ ๊ฐ€์ง€๊ณ  ํด๋ž˜์Šค์˜ ์ž‘๋™ ๋ฐฉ์‹์„ ํ‰๋‚ด๋‚ด์•ผ ํ–ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ ์–ด๋–ป๊ฒŒ ํ‰๋‚ด๋‚ด์™”๋Š”์ง€ ๋‹ค์–‘ํ•œ ์‹œ๋„๋“ค์ด ์žˆ์—ˆ๋Š”๋ฐ, ์ด๋ฅผ ๋‚˜๋„ ๊ตฌํ˜„ํ•ด๋ณด๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ด์™€ ๊ด€๋ จ๋œ prototype, __proto__, constructor ์†์„ฑ๋“ค์˜ ์—ญํ• ๋“ค์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ํ•„์š”ํ•ด ์ž์„ธํžˆ ๊ณต๋ถ€ํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ Object.create ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•ด ์ƒˆ๋กœ์šด ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ๋„ ํ–ˆ๋‹ค. + ๋…ธ์…˜ ๊ณต์œ  ํŽ˜์ด์ง€์— ๋™๊ธฐ๋ถ„๋“ค์ด ์ž‘์„ฑํ•œ ๊ธ€๋“ค์˜ url์ด ์žˆ์–ด์„œ ๋“ค์–ด๊ฐ€๋ดค๋Š”๋ฐ, ๊ฐ์ž ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๋ถ€๋ถ„๋„ ๋‹ฌ๋ผ์„œ ๋‚ด๊ฐ€ ๋†“์น˜๊ฑฐ๋‚˜ ๋ฏธ์ฒ˜ ์ƒ๊ฐํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๋ถ€๋ถ„๋“ค์— ๋Œ€ํ•ด ๋” ๋ฐฐ์šธ ์ˆ˜๋„ ์žˆ์—ˆ๊ณ , ํŠนํžˆ ๊ฐ™์€ ์ฃผ์ œ์ธ๋ฐ๋„ ๊ฐ์ž๊ฐ€ ๋‹ค๋ฅธ ๋น„์œ ๋ฅผ ์จ์„œ ์„ค๋ช…ํ•˜๊ณ  ์žˆ์–ด์„œ ๋ณด๋Š” ์žฌ๋ฏธ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ง์ ‘์ ์œผ๋กœ๋Š” ์•„๋‹ˆ์ง€๋งŒ ์ด๋ ‡๊ฒŒ ๋‹ค์–‘ํ•œ ๊ด€์ ์—์„œ์˜ ๊ธ€๋“ค์„ ๋ณผ ์ˆ˜ ์žˆ์–ด ์ข‹์€ ๊ธฐํšŒ์˜€๋˜ ๊ฒƒ ๊ฐ™๋‹ค.  

 

๐ŸŽ ๊ธฐ์–ตํ•  ๊ฒƒ


โœ”๏ธ ๊ฐ์ฒด = (์†์„ฑ + ํ–‰๋™) = (๋ณ€์ˆ˜ + ํ•จ์ˆ˜)

โœ”๏ธ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ํŠน์ง• 4๊ฐ€์ง€
1. ์บก์Šํ™” (Encapsulation) :  ํ•œ ๊ฐ์ฒด์—์„œ ๋น„์Šทํ•œ ์—ญํ• ์„ ํ•˜๋Š” ์†์„ฑ, ๋ฉ”์„œ๋“œ๋ฅผ ์บก์Š์ฒ˜๋Ÿผ ํ•œ ๊ณณ(ํด๋ž˜์Šค)์— ๋‹ด๋Š” ๊ฒƒ
2. ์ถ”์ƒํ™”(Abstraction) : ๋ณต์žกํ•œ ๋ฌธ์ œ๋ฅผ ๋‹จ์ˆœํ™”
3. ์ƒ์†(Inheritance) : ๋ถ€๋ชจํด๋ž˜์Šค์˜ ์†์„ฑ๊ณผ ๊ธฐ๋Šฅ์„ ๊ทธ๋Œ€๋กœ ์ด์–ด๋ฐ›์•„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒํ•จ (์ผ๋ถ€ ๋ณ€๊ฒฝ, ์ถ”๊ฐ€ ๊ฐ€๋Šฅ)
4. ๋‹คํ˜•์„ฑ(Polymorphism) : ๋‹ค์–‘ํ•œ ํ˜•ํƒœ๋ฅผ ๊ฐ€์ง€๋Š” ํŠน์„ฑ (by ์˜ค๋ฒ„๋ผ์ด๋”ฉ, ์˜ค๋ฒ„๋กœ๋”ฉ)

โœ”๏ธ prototype & __proto__
1. Constructor๋ฅผ new ์—ฐ์‚ฐ์ž๋กœ ํ˜ธ์ถœํ•˜๋ฉด instance๊ฐ€ ๋งŒ๋“ค์–ด์ง„๋‹ค. 
2. instance์˜ ์†์„ฑ์ธ __proto__๋Š” Constructor์˜ prototype์„ ์ฐธ์กฐํ•œ๋‹ค. 
3. __proto__๋Š” ์ƒ๋žต ๊ฐ€๋Šฅํ•˜๋‹ค. 

Constructor์˜ prototype์— ์–ด๋–ค ์†์„ฑ์ด๋‚˜ ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ๋‹ค๋ฉด, instance๋„ ์ž๊ธฐ๊ฒƒ์ธ ๊ฒƒ ๋งˆ๋ƒฅ ๊ทธ ์†์„ฑ, ๋ฉ”์„œ๋“œ์— ์ ‘๊ทผ
ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค!

โœ”๏ธ constructor ์†์„ฑ
์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์ฐธ์กฐํ•˜๋Š” ์†์„ฑ์œผ๋กœ, instance์˜ ์›ํ˜•์ด ๋˜๋Š” ์ƒ์„ฑ์žํ•จ์ˆ˜๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ๊ฒŒ ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

 

๐ŸŽ ๋” ๊ณต๋ถ€ํ•  ๊ฒƒ


โœ”๏ธ JavaScript์—์„œ Object๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•๋“ค ๋ธ”๋กœ๊น…
โœ”๏ธ Object.create ๋ฉ”์„œ๋“œ ๋ธ”๋กœ๊น…
โœ”๏ธ ES6 class ํ‚ค์›Œ๋“œ, super ํ‚ค์›Œ๋“œ ์‚ฌ์šฉ๋ฒ• ๋ธ”๋กœ๊น…

 

 

โœ๏ธ ์†Œ์†Œํ•œ ๋ฐœ๊ฒฌ์ด๋ผ๋Š” ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ์ถ”๊ฐ€ํ•ด๋ดค๋‹ค. ์—ฌ๊ธฐ์—๋Š” ์ž์ž˜ํ•˜๊ฒŒ ์•Œ๊ฒŒ๋œ ์ง€์‹๋“ค ์ค‘ ๊ธฐ์–ตํ•˜๊ฑฐ๋‚˜ ๋‚˜์ค‘์— ์“ธ๋งŒํ•œ ๊ฒƒ๋“ค์„ ๊ทธ๋•Œ๊ทธ๋•Œ ์งง๊ฒŒ ๊ธฐ๋กํ•ด๋‘๋ ค๊ณ  ํ•œ๋‹ค. ๋งŒ๋“  ๊ธฐ๋…์œผ๋กœ ์˜ค๋Š˜๋„ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋‹ค๊ฐ€ ์•Œ๊ฒŒ๋œ ๊ฒƒ๋„ ํ•˜๋‚˜ ์ถ”๊ฐ€ํ•ด๋ดค๋‹ค..!

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€