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

Frontend Dev/๐Ÿฅ ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  FE ๋ถ€ํŠธ์บ ํ”„

Section2 Unit2 JavaScript ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ - OOP์™€ ํด๋ž˜์Šค ๋ฌธ๋ฒ•

๋ฐ˜์‘ํ˜•


Section2 Unit2 [JavaScript] ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ - OOP์™€ ํด๋ž˜์Šค ๋ฌธ๋ฒ•

 

๐Ÿ“Œ Chapter1. ๊ฐ์ฒด ์ง€ํ–ฅ

• ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜์˜ ์–ธ์–ด๋กœ, ์—„๋ฐ€ํžˆ ๋งํ•˜๋ฉด ๊ฐ์ฒด ์ง€ํ–ฅ ์–ธ์–ด๋Š” ์•„๋‹ˆ์ง€๋งŒ ๊ฐ์ฒด ์ง€ํ–ฅ ํŒจํ„ด์œผ๋กœ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

๊ฐ์ฒด์ง€ํ–ฅ์— ๋Œ€ํ•œ ๋‚ด์šฉ์€ ์ด๋ฒˆ์— ์ˆ˜์—…์„ ๋“ฃ๊ณ  ๋” ์ฐพ์•„๋ณด๋ฉฐ ๋”ฐ๋กœ ์ •๋ฆฌ๋ฅผ ํ–ˆ๋‹ค. ์•„๋ž˜ ๊ธ€์„ ์ฐธ๊ณ ํ•˜๋ฉด ์ข‹์„๊ฒƒ ๊ฐ™๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ (Object Oriented Programming)

๐Ÿ‘พ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ (OOP) ์ด๋ž€? Java, C++, C# ๋“ฑ ํ˜„๋Œ€์˜ ์–ธ์–ด๋“ค์€ ๋Œ€๋ถ€๋ถ„ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง€์›ํ•œ๋‹ค. ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ์‹ค์„ธ๊ณ„์— ์กด์žฌํ•˜๊ณ  ์ธ์ง€ํ•˜๊ณ  ์žˆ๋Š” ๊ฐ์ฒด(Object)๋ฅผ ์†Œํ”„ํŠธ์›จ

fay-story.com

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

 ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ๋ฌด์กฐ๊ฑด ์ข‹์€ ๊ฑด ์•„๋‹ˆ๊ณ , ํ•˜๋‚˜์˜ ๋ฐฉ๋ฒ•๋ก ์ด๋ฉฐ ํ˜„์žฌ ์œ ํ–‰ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„์ผ ๋ฟ์ด๋‹ค. ๊ฐ ๋ฐฉ๋ฒ•๋ก ์˜ ์žฅ๋‹จ์ ์„ ์ž˜ ์•Œ๊ณ , ์ƒํ™ฉ์— ๋งž๋Š” ๋ฐฉ๋ฒ•๋ก ์„ ์„ ํƒํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

 ์˜ˆ๋ฅผ ๋“ค์–ด ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ๊ฐ€ ์ค‘์š”ํ•˜๋‹ค๋ฉด ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์ ๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ์ ˆ์ฐจ์ง€ํ–ฅ์„, ์‚ฌ๋žŒ๋“ค๊ณผ์˜ ํ˜‘์—…์ด ํ•„์š”ํ•˜๋‹ค๋ฉด ์ฝ”๋“œ ์ดํ•ด๊ฐ€ ์‰ฌ์šด ๊ฐ์ฒด์ง€ํ–ฅ์„ ๋Œ€์ฒด์ ์œผ๋กœ๋Š” ์‚ฌ์šฉํ•˜๋Š” ํŽธ์ด๋ผ๊ณ  ํ•œ๋‹ค.

 

ํด๋ž˜์Šค์— ๋Œ€ํ•œ ํ•™์Šต๋„ ํ–ˆ๋Š”๋ฐ, ํด๋ž˜์Šค๋„ ์ฃผ๋ง์— ๋”ฐ๋กœ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณด์•˜๋‹ค.

 ์ด๋ฒˆ์— ์ •๋ฆฌํ•œ๊ฑด ํด๋ž˜์Šค์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๊ณผ ์ƒ์†์— ๊ด€ํ•œ ๋ถ€๋ถ„์ด์—ˆ๋Š”๋ฐ, ๊ณต๋ถ€๋ฅผ ํ•˜๋‹ค๋ณด๋‹ˆ ๊ธฐ๋ณธ ๋ฌธ๋ฒ• ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ static ๋ฉ”์„œ๋“œ, private ํ‚ค์›Œ๋“œ ๋“ฑ ์•„์ง ํด๋ž˜์Šค์— ๋Œ€ํ•ด ๋ฐฐ์›Œ์•ผ ํ•  ๊ฒƒ๋“ค์ด ์ •๋ง ๋งŽ์•˜๋‹ค. ์˜ˆ์ „์— ๊ณต๋ถ€๋ฅผ ํ•  ๋•Œ ํ•œ๋ฒˆ์”ฉ ํ›‘์€ ์ ์€ ์žˆ์—ˆ๋Š”๋ฐ, ๋‹ค์‹œ ๋ณด๋‹ˆ ์ƒˆ๋กœ์šด ๋งค์ง...

 ์—ฌํŠผ ์ด๋ฒˆ์— ์ •๋ฆฌํ•œ ๊ฑด ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๋งŒ! ์ข€ ๋” ์‹ฌํ™”๋œ(?) ๋‚ด์šฉ์€ ๋‚˜๋„ ์•„์ง ์ž˜ ์ •๋ฆฌ๊ฐ€ ์•ˆ๋˜์„œ ๋‹ค์Œ๋ฒˆ์— ํด๋ž˜์Šค ์‹ฌํ™” ๋ถ€๋ถ„์ด ์ˆ˜์—…์— ๋“ฑ์žฅํ•˜๋ฉด ๊ทธ๋•Œ ๋‹ค์‹œ ํ•œ๋ฒˆ๋” ๋ณผ๊นŒ ํ•œ๋‹ค. 

 

ES6, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํด๋ž˜์Šค(class) ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๊ณผ ํด๋ž˜์Šค ์ƒ์†

๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ํด๋ž˜์Šค ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ํ•˜๋‚˜์˜ ๋ชจ๋ธ์ด ๋˜๋Š” ์ฒญ์‚ฌ์ง„(blueprint)์„ ๋งŒ๋“ค๊ณ , ๊ทธ ์ฒญ์‚ฌ์ง„์„ ๋ฐ”ํƒ•์œผ๋กœ ํ•œ ๊ฐ์ฒด(object)๋ฅผ ๋งŒ๋“œ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจํ„ด์ด๋‹ค. → ์ฒญ์‚ฌ์ง„์„ ํด๋ž˜์Šค

fay-story.com

 


๐ŸŒ™  ์˜ค๋Š˜์˜ ํšŒ๊ณ 

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

๋ฐ˜์‘ํ˜•