๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋ก2022/04 (9)

kingsubin

19์žฅ. ํ”„๋กœํ† ํƒ€์ž…

19์žฅ. ํ”„๋กœํ† ํƒ€์ž… ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ช…๋ นํ˜•, ํ•จ์ˆ˜ํ˜•, ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ง€์›ํ•˜๋Š” ๋ฉ€ํ‹ฐ ํŒจ๋Ÿฌ๋‹ค์ž„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ด๋‹ค. primitive type์˜ ๊ฐ’์„ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ๊ฐ’๋“ค์€ ๋ชจ๋‘ ๊ฐ์ฒด์ด๋‹ค. 19-1. ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐ์ฒด์˜ ์ง‘ํ•ฉ์œผ๋กœ ํ”„๋กœ๊ทธ๋žจ์„ ํ‘œํ˜„ํ•˜๋ ค๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„ ๋‹ค์–‘ํ•œ ์†์„ฑ ์ค‘์—์„œ ํ”„๋กœ๊ทธ๋žจ์— ํ•„์š”ํ•œ ์†์„ฑ๋งŒ ๊ฐ„์ถ”๋ ค ๋‚ด์–ด ํ‘œํ˜„ํ•˜๋Š”๊ฒƒ์„ ์ถ”์ƒํ™”(abstraction)๋ผ ํ•œ๋‹ค. ์†์„ฑ์„ ํ†ตํ•ด ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ฐ’์„ ํ•˜๋‚˜์˜ ๋‹จ์œ„๋กœ ๊ตฌ์„ฑํ•œ ๋ณตํ•ฉ์ ์ธ ์ž๋ฃŒ๊ตฌ์กฐ๋ฅผ ๊ฐ์ฒด๋ผ ํ•œ๋‹ค. ๊ฐ์ฒด๋Š” ์ƒํƒœ ๋ฐ์ดํ„ฐ์™€ ๋™์ž‘์„ ํ•˜๋‚˜์˜ ๋…ผ๋ฆฌ์ ์ธ ๋‹จ์œ„๋กœ ๋ฌถ์€ ๋ณตํ•ฉ์ ์ธ ์ž๋ฃŒ๊ตฌ์กฐ์ด๋‹ค. 19-2. ์ƒ์†๊ณผ ํ”„๋กœํ† ํƒ€์ž… ์ƒ์†(inheritance)๋Š” ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ํ•ต์‹ฌ ๊ฐœ๋…์œผ๋กœ, ์–ด๋–ค ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ๋˜๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๋‹ค๋ฅธ ๊ฐ์ฒด๊ฐ€ ..

2์žฅ. URL๊ณผ ๋ฆฌ์†Œ์Šค

2์žฅ. URL๊ณผ ๋ฆฌ์†Œ์Šค ํ‚ค์›Œ๋“œ ์ •๋ฆฌ URL ๋ฌธ๋ฒ• ๋‹ค์–‘ํ•œ ์Šคํ‚ด ๊ธฐ๋ณธ ์‚ฌ์šฉ์ž ์ด๋ฆ„๊ณผ ๋ธŒ๋ผ์šฐ์ €๋ณ„ ํŒจ์Šค์›Œ๋“œ ์กฐ๊ฐ ํŒŒ๋ผ๋ฏธํ„ฐ ์ธ์ฝ”๋”ฉ ์ฒด๊ณ„ ๋‹ค๋ฃฐ ๋‚ด์šฉ URL ๋ฌธ๋ฒ•, URL ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ด๋–ค ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๋ฉฐ ๋ฌด์—‡์„ ์ˆ˜ํ–‰ํ•˜๋Š”์ง€ ์—ฌ๋Ÿฌ ์›น ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ง€์›ํ•˜๋Š” ์ƒ๋Œ€ URL๊ณผ ํ™•์žฅ URL ๊ฐ™์€ ๋‹จ์ถ• URL์— ๋Œ€ํ•ด URL์˜ ์ธ์ฝ”๋”ฉ๊ณผ ๋ฌธ์ž ๊ทœ์น™ ์—ฌ๋Ÿฌ ์ธํ„ฐ๋„ท ์ •๋ณด ์‹œ์Šคํ…œ์— ์ ์šฉ๋˜๋Š” ๊ณตํ†ต URL ์Šคํ‚ด ๊ธฐ์กด ์ด๋ฆ„์€ ์œ ์ง€ํ•˜๋ฉด์„œ ๊ฐ์ฒด๋“ค์„ ๋‹ค๋ฅธ ์žฅ์†Œ๋กœ ์˜ฎ๊ธฐ๋Š” ๊ฒƒ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” URN์„ ํฌํ•จํ•œ URL์˜ ๋ฏธ๋ž˜ 2.1 ์ธํ„ฐ๋„ท์˜ ๋ฆฌ์†Œ์Šค ํƒ์ƒ‰ํ•˜๊ธฐ ex) http://www.joes-hardware.com/seasonal/index-fall.html http: URL์˜ scheme ์Šคํ‚ด์€ ์›น ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ฆฌ์†Œ์Šค์— ์–ด๋–ป๊ฒŒ ์ ‘๊ทผํ•˜๋Š”์ง€ ์•Œ๋ ค์ค€๋‹ค. ์ด ๊ฒฝ์šฐ..

1์žฅ. HTTP ๊ฐœ๊ด€

1์žฅ. HTTP ๊ฐœ๊ด€ 1.1 HTTP: ์ธํ„ฐ๋„ท์˜ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ๋ฐฐ๋‹ฌ๋ถ€ HTTP๋Š” ์‹ ๋ขฐ์„ฑ ์žˆ๋Š” ๋ฐ์ดํ„ฐ ์ „์†ก ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ๋ฐ์ดํ„ฐ๊ฐ€ ์ „์†ก ์ค‘ ์†์ƒ๋˜๊ฑฐ๋‚˜ ๊ผฌ์ด์ง€ ์•Š์Œ์„ ๋ณด์žฅํ•œ๋‹ค. 1.2 ์›น ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ HTTP ํด๋ผ์ด์–ธํŠธ์™€ HTTP ์„œ๋ฒ„๋Š” ์›”๋“œ ์™€์ด๋“œ ์›น์˜ ๊ธฐ๋ณธ ์š”์†Œ๋‹ค. 1.3 ๋ฆฌ์†Œ์Šค ์›น ์„œ๋ฒ„๋Š” ์›น ๋ฆฌ์†Œ์Šค๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์ œ๊ณตํ•œ๋‹ค. ์›น ๋ฆฌ์†Œ์Šค๋Š” ์›น ์ปจํ…์ธ ์˜ ์›์ฒœ์ด๋‹ค. ๊ฐ€์žฅ ๋‹จ์ˆœํ•œ ๋ฆฌ์†Œ์Šค๋Š” ํŒŒ์ผ ์‹œ์Šคํ…œ์˜ ์ •์  ํŒŒ์ผ์ด๋‹ค. (ํ…์ŠคํŠธ, HTML, ์›Œ๋“œ, ์ด๋ฏธ์ง€, ๋™์˜์ƒ ๊ทธ ์™ธ ๋ชจ๋“  ์ข…๋ฅ˜์˜ ํŒŒ์ผ) ๊ทธ๋Ÿฌ๋‚˜ ๋ฆฌ์†Œ์Šค๋Š” ๋ฐ˜๋“œ์‹œ ์ •์  ํŒŒ์ผ์ด์–ด์•ผ ํ•  ํ•„์š”๋Š” ์—†๋‹ค. ์š”์•ฝํ•˜์ž๋ฉด, ์–ด๋–ค ์ข…๋ฅ˜์˜ ์ฝ˜ํ…์ธ  ์†Œ์Šค๋„ ๋ฆฌ์†Œ์Šค๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค. ๋ฏธ๋””์–ด ํƒ€์ž… HTTP ๋Š” ์›น์—์„œ ์ „์†ก๋˜๋Š” ๊ฐ์ฒด ๊ฐ๊ฐ์— MIME(Multipurpose Inte..

18์žฅ. ํ•จ์ˆ˜์™€ ์ผ๊ธ‰ ๊ฐ์ฒด

18์žฅ. ํ•จ์ˆ˜์™€ ์ผ๊ธ‰ ๊ฐ์ฒด 18-1. ์ผ๊ธ‰ ๊ฐ์ฒด ๋ฌด๋ช…์˜ ๋ฆฌํ„ฐ๋Ÿด๋กœ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ๋Ÿฐํƒ€์ž„์— ์ƒ์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋ณ€์ˆ˜๋‚˜ ์ž๋ฃŒ๊ตฌ์กฐ์— ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. JS์˜ ํ•จ์ˆ˜๋Š” ์œ„์˜ ์กฐ๊ฑด์„ ๋ชจ๋‘ ๋งŒ์กฑํ•˜๋ฏ€๋กœ ์ผ๊ธ‰ ๊ฐ์ฒด์ด๋‹ค. ํ•จ์ˆ˜๊ฐ€ ์ผ๊ธ‰ ๊ฐ์ฒด๋ผ๋Š” ๊ฒƒ์€ ํ•จ์ˆ˜๋ฅผ ๊ฐ์ฒด์™€ ๋™์ผํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋œป์ด๋‹ค. ํ•จ์ˆ˜๋Š” ๊ฐ์ฒด์ด์ง€๋งŒ ์ผ๋ฐ˜ ๊ฐ์ฒด์™€๋Š” ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค. ์ผ๋ฐ˜ ๊ฐ์ฒด๋Š” ํ˜ธ์ถœํ•  ์ˆ˜ ์—†์ง€๋งŒ ํ•จ์ˆ˜ ๊ฐ์ฒด๋Š” ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•จ์ˆ˜ ๊ฐ์ฒด๋Š” ์ผ๋ฐ˜ ๊ฐ์ฒด์—๋Š” ์—†๋Š” ํ•จ์ˆ˜ ๊ณ ์œ ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์†Œ์œ ํ•œ๋‹ค. // 1. const increase = function (num) { return ++num; }; // 2. const auxs = { increase, decrease }; /..

17์žฅ. ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์˜ํ•œ ๊ฐ์ฒด ์ƒ์„ฑ

17์žฅ. ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์˜ํ•œ ๊ฐ์ฒด ์ƒ์„ฑ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ์‹๊ณผ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ์‹์˜ ์žฅ๋‹จ์ ์„ ์•Œ์•„๋ณด์ž. 17-1. Object ์ƒ์„ฑ์ž ํ•จ์ˆ˜ constructor ๋ž€ new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ํ˜ธ์ถœํ•˜์—ฌ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งํ•œ๋‹ค. ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์˜ํ•ด ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋ฅผ instance ๋ผ ํ•œ๋‹ค. JS๋Š” Object, String,, Number, Boolean, Function, Array, Date, RegExp, Promise ๋“ฑ์˜ ๋นŒํŠธ์ธ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ํŠน๋ณ„ํ•œ ์ด์œ ๊ฐ€ ์—†๋‹ค๋ฉด ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ํŽธํ•ด ๋ณด์ธ๋‹ค. 17-2. ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์— ์˜ํ•œ ๊ฐ์ฒด ์ƒ์„ฑ ๋ฐฉ์‹์˜ ๋ฌธ์ œ์  ๋‹จ ํ•˜๋‚˜์˜ ๊ฐ์ฒด๋งŒ ์ƒ์„ฑํ•˜๋ฏ€๋กœ ๋™์ผํ•œ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ–๋Š” ๊ฐ์ฒด๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ..

16์žฅ. ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ

16์žฅ. ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ 16-1. ๋‚ด๋ถ€ ์Šฌ๋กฏ๊ณผ ๋‚ด๋ถ€ ๋ฉ”์„œ๋“œ ๋‚ด๋ถ€ ์Šฌ๋กฏ๊ณผ ๋‚ด๋ถ€ ๋ฉ”์„œ๋“œ๋Š” JS ์—”์ง„์˜ ๊ตฌํ˜„ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•ด ECMAScript ์‚ฌ์–‘์—์„œ ์‚ฌ์–‘ํ•˜๋Š” ์˜์‚ฌ ํ”„๋กœํผํ‹ฐ(pseudo property) ์™€ ์˜์‚ฌ ๋ฉ”์„œ๋“œ(pseudo method)์ด๋‹ค. ๋‚ด๋ถ€ ์Šฌ๋กฏ๊ณผ ๋‚ด๋ถ€ ๋ฉ”์„œ๋“œ๋Š” JS ์—”์ง„์˜ ๋‚ด๋ถ€ ๋กœ์ง์ด๋ฏ€๋กœ ์›์น™์ ์œผ๋กœ JS๋Š” ์ง์ ‘์ ์œผ๋กœ ์ ‘๊ทผํ•˜๊ฑฐ๋‚˜ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋ชจ๋“  ๊ฐ์ฒด๋Š” [[Prototype]]์ด๋ผ๋Š” ๋‚ด๋ถ€ ์Šฌ๋กฏ์„ ๊ฐ–๋Š”๋‹ค. ์›์น™์ ์œผ๋กœ ์ง์ ‘ ์ ‘๊ทผ ํ•  ์ˆ˜ ์—†์ง€๋งŒ __proto__ ๋ฅผ ํ†ตํ•ด ๊ฐ„์ ‘์ ์œผ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. const o = {}; o.__proto__ // Object.prototype 16-2. ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์™€ ํ”„๋กœํผํ‹ฐ ๋””์Šคํฌ๋ฆฝํ„ฐ ๊ฐ์ฒด JS ์—”์ง„์€ ํ”„๋กœ..

14์žฅ. ์ „์—ญ ๋ณ€์ˆ˜์˜ ๋ฌธ์ œ์ 

14์žฅ. ์ „์—ญ ๋ณ€์ˆ˜์˜ ๋ฌธ์ œ์  global object ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ํ™˜๊ฒฝ(๋ธŒ๋ผ์šฐ์ €): window ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ํ™˜๊ฒฝ(Node.js): global ES11 ์—์„œ globalThis ๋กœ ํ†ต์ผ๋จ. ์ „์—ญ ๋ณ€์ˆ˜ ๋‹จ์  ์•”๋ฌต์  ๊ฒฐํ•ฉ(implict coupling): ์œ ํšจ ๋ฒ”์œ„๊ฐ€ ๋„ˆ๋ฌด ์ปค ๊ฐ€๋…์„ฑ์ด ๋‚˜์˜๊ณ  ์ƒํƒœ ๋ณ€๊ฒฝ์˜ ์œ„ํ—˜์ด ๋†’์Œ. ๊ธด ์ƒ๋ช… ์ฃผ๊ธฐ: ๋ฉ”๋ชจ๋ฆฌ ๋ฆฌ์†Œ์Šค ์˜ค๋žœ ๊ธฐ๊ฐ„ ์†Œ๋น„ ์Šค์ฝ”ํ”„ ์ฒด์ธ ์ƒ์—์„œ ์ข…์ ์— ์กด์žฌ: ๋ณ€์ˆ˜ ๊ฒ€์ƒ‰์‹œ ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰์— ๊ฒ€์ƒ‰๋œ๋‹ค๋Š” ๋œป. ์ฆ‰, ๊ฒ€์ƒ‰ ์†๋„๊ฐ€ ๊ฐ€์žฅ ๋Š๋ฆฌ๋‹ค. ๋„ค์ž„์ŠคํŽ˜์ด์Šค ์˜ค์—ผ: ์—ฌ๋Ÿฌ ํŒŒ์ผ์—์„œ ํ•˜๋‚˜์˜ ์ „์—ญ ์Šค์ฝ”ํ”„๋ฅผ ๊ณต์œ ํ•œ๋‹ค. ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๊ฒฐ๊ณผ ํ™•๋ฅ  ๋†’์Œ. ์ „์—ญ ๋ณ€์ˆ˜ ์‚ฌ์šฉ ์–ต์ œ ๋ฐฉ๋ฒ• ๋ณ€์ˆ˜์˜ ์Šค์ฝ”ํ”„๋Š” ์ข์„์ˆ˜๋ก ์ข‹๋‹ค. ์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜ ์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ง€์—ญ ๋ณ€์ˆ˜๊ฐ€ ๋œ๋‹ค. (functio..