[JavaScript] ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด

๊ฐ์ฒด๋ž€? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐœ์ฒด๊ธฐ๋ฐ˜์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ, ์›์‹œ ๊ฐ’์„ ์ œ์™ธํ•œ ๋ชจ๋“  ๊ฐ’์€ ๊ฐ์ฒดํƒ€์ž…์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋‹ค์–‘ํ•œ ํƒ€์ž…์˜ ๊ฐ’์„ ํ•˜๋‚˜์˜ ๋‹จ์œ„๋กœ ๊ตฌ์„ฑํ•œ ๋ณตํ•ฉ์ ์ธ ์ž๋ฃŒ๊ตฌ์กฐ๋กœ ์›์‹œ ๊ฐ’๊ณผ ๋‹ค๋ฅด๊ฒŒ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๊ฐ์ฒด๋ฅผ ์ •์˜ํ•˜์ž๋ฉด ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋กœ ๊ตฌ์„ฑ๋œ ์ง‘ํ•ฉ์ฒด์ž…๋‹ˆ๋‹ค. ํ”„๋กœํผํ‹ฐ : ๊ฐ์ฒด์˜ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฐ’. key๊ณผ value๋กœ ๊ตฌ์„ฑ. ๋ฉ”์„œ๋“œ : ํ”„๋กœํผํ‹ฐ(์ƒํƒœ ๋ฐ์ดํ„ฐ)๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๋™์ž‘. var counter = { num: 0, increase() { this.num++; } }; ์œ„์˜ ์˜ˆ์‹œ์™€ ๊ฐ™์ด ๊ฐ์ฒด๋Š” ์ƒํƒœ์™€ ๋™์ž‘์„ ํ•˜๋‚˜์˜ ๋‹จ์œ„๋กœ ๊ตฌ์กฐํ™” ํ•  ์ˆ˜ ์žˆ์–ด์„œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์— ์˜ํ•œ ๊ฐ์ฒด ์ƒ์„ฑ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๋กœ์„œ ๋‹ค์–‘ํ•œ ๊ฐ์ฒด ์ƒ์„ฑ ๋ฐฉ๋ฒ•์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์ฒด *๋ฆฌ..

[JavaScript] ๋ณ€์ˆ˜

๋ณ€์ˆ˜๋ž€? ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅ๋ฐ›์•„ ์ฒ˜๋ฆฌํ•˜๊ณ  ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ์ด๋Ÿฌํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ํ•ต์‹ฌ ๊ฐœ๋…์œผ๋กœ, ์‚ฌ๋žŒ๊ณผ ๋‹ค๋ฅด๊ฒŒ ์ปดํ“จํ„ฐ๋Š” CPU๋ฅผ ์‚ฌ์šฉํ•ด ์—ฐ์‚ฐ์„ ํ•˜๊ณ , *๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ์–ตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์…€์€ ๊ณ ์œ ํ•œ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๋ฅผ ๊ฐ€์ง€๊ฒŒ ๋˜๊ณ  CPU๋Š” ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ์—์„œ ์›ํ•˜๋Š” ๊ฐ’์„ ์ฝ์–ด ๋“ค์—ฌ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๋ฅผ ํ†ตํ•ด ๊ฐ’์— ์ง์ ‘ ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์•ˆ์ „ํ•˜์ง€ ์•Š์•„์„œ ๋ณ€์ˆ˜๋ผ๋Š” ๋งค์ปค๋‹ˆ์ฆ˜์„ ์ด์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. *๋ฉ”๋ชจ๋ฆฌ : ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”๋ชจ๋ฆฌ ์…€์˜ ์ง‘ํ•ฉ์ฒด. ์…€ 1๊ฐœ = 1๋ฐ”์ดํŠธ(8๋น„ํŠธ) ๋ณ€์ˆ˜(variable)๋Š” ํ•˜๋‚˜์˜ ๊ฐ’์„ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด ํ™•๋ณดํ•œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„ ์ž์ฒด ๋˜๋Š” ๊ทธ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ์‹๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด ๋ถ™์ธ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค. ์ฆ‰, ๊ฐ’์˜ ์œ„์น˜๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์ƒ์ง•์ ์ธ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค..

[JavaScript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์™€ Node.js๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ•ด์„ํ•˜๊ณ  ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ๋‚ด์žฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ข…๋ฅ˜ ๋ชฉ์  ๋ธŒ๋ผ์šฐ์ € HTML, CSS, JS๋ฅผ ์‹คํ–‰ํ•ด ์›นํŽ˜์ด์ง€๋ฅผ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ๋ Œ๋”๋ง ํ•˜๋Š”๊ฒƒ Node.js ๋ธŒ๋ผ์šฐ์ € ์™ธ๋ถ€์—์„œ JS ์‹คํ–‰ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ ๋”ฐ๋ผ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ฝ”์–ด์ธ ECMAScript ์ด์™ธ์— ์ถ”๊ฐ€๋กœ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค์€ ์„œ๋กœ ํ˜ธํ™˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋ธŒ๋ผ์šฐ์ €๋Š” *DOM API๋ฅผ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณตํ•˜๊ณ , Node.js๋Š” *ํŒŒ์ผ ์‹œ์Šคํ…œ์„ ๊ธฐ๋ณธ ์ œ๊ณตํ•˜์ง€๋งŒ ์ด๋Š” ์„œ๋กœ ํ˜ธํ™˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด์ฒ˜๋Ÿผ ๋ธŒ๋ผ์šฐ์ €๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ Web API๋ฅผ ์ง€์›ํ•˜๊ณ , Node.js๋Š” ๊ณ ์œ ์˜ API๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. *DOM API : ํŒŒ์‹ฑ๋œ HTML ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๊ฑฐ๋‚˜ ์กฐ์ž‘ํ•˜๋Š” ๊ธฐ๋Šฅ์œผ๋กœ..

[ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„] OOP์™€ FP

OOP๋ž€? OOP๋Š” Object Oriented Programming์˜ ์•ฝ์ž๋กœ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋œปํ•ฉ๋‹ˆ๋‹ค. class์™€ object์— ๊ธฐ๋ฐ˜ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„(๋””์ž์ธ ํŒจํ„ด)์œผ๋กœ, ๊ด€๋ จ๋œ ๋ฐ์ดํ„ฐ๋ผ๋ฆฌ ๋ฌถ์–ด์„œ class๋ฅผ ํ˜•์„ฑํ•˜๊ณ  ๊ทธ ์•ˆ์—์„œ object instance๋ฅผ ๋งŒ๋“ค์–ด ํ”„๋กœ๊ทธ๋žจ์„ ๋””์ž์ธ ํ•ฉ๋‹ˆ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ ์ž๋ฐ”๊ฐ€ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ๊ฐ์ฒด๋“ค์˜ ์ง‘ํ•ฉ์œผ๋กœ ํ”„๋กœ๊ทธ๋žจ์˜ ์ƒํ˜ธ ์ž‘์šฉ์„ ํ‘œํ˜„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ์ฒด๋กœ ์ทจ๊ธ‰ํ•˜์—ฌ ๊ฐ์ฒด ๋‚ด๋ถ€์— ์„ ์–ธ๋œ ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ์‹ OOP์˜ ์žฅ์  ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ๋ฅ ์„ ๋†’์ด๊ณ  ์ฝ”๋“œ๋ฅผ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ํ•จ์œผ๋กœ์จ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›€ ๋ฐ์ดํ„ฐ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๋ณด์กด์‹œํ‚ฌ ์ˆ˜ ์žˆ์Œ(์บก์Šํ™”) OOP์˜ ํŠน์ง• 4๊ฐ€์ง€ ์บก์Šํ™”(Encapsulation) ์บก์Šํ™”๋Š” ๊ฐ์ฒด์˜ ๋‚ด๋ถ€ ๋กœ์ง์€ ๊ฐ์ถ”๊ณ  ์™ธ๋ถ€์—๋Š” ์ƒ๋Œ€์ ์œผ๋กœ ์•ˆ์ •..

CS/Design Pattern 2022. 7. 3. 21:55