๐Ÿ“‹ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ํ† ๋ง‰์ƒ์‹

(history)
Table of Contents

ํ”„๋กœ์ ํŠธํ•˜๋ฉด์„œ ์•Œ๊ฒŒ ๋œ ๊ฒƒ๋“ค๊ณผ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ๋ฅผ ํ†ตํ•ด ๋ฐฐ์šด ๊ฒƒ๋“ค, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ&์ œ์ด์ฟผ๋ฆฌ: ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ํ”„๋ก ํŠธ์—”๋“œ ์›น ๊ฐœ๋ฐœ ๊ต๊ณผ์„œ(Jon Duckett)์™€ JavaScript: The Good Parts(Douglas Crockford)๋ฅผ ํ†ตํ•ด ๊ณต๋ถ€ํ•œ ๊ฒƒ๋“ค, ๊ทธ๋ฆฌ๊ณ  Front-end Job Interview Questions์— ๋‚˜์™€์žˆ๋Š” ์งˆ๋ฌธ๋“ค์— ๋Œ€ํ•œ ๋Œ€๋‹ต์„ ๊ฐ„๋žตํ•˜๊ฒŒ ์ •๋ฆฌํ–ˆ๋‹ค.

์ผ๋ฐ˜์ ์ธ ๊ฒƒ๋“ค

ํ—๊ฐ€๋ฆฌ์•ˆ ํ‘œ๊ธฐ๋ฒ•

๋ณ€์ˆ˜ ์ด๋ฆ„์— ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ์ ‘๋‘์–ด๋กœ ๋ถ™์ด๋Š” ํ‘œ๊ธฐ๋ฒ•์ด๋‹ค. ์ˆซ์ž๋ผ๋ฉด nVar, ๋ฐฐ์—ด์ด๋ผ๋ฉด aVar ์ด๋Ÿฐ ์‹์œผ๋กœ ๋ถ™์ธ๋‹ค. 2015๋…„ ๋„ค์ด๋ฒ„์—์„œ ์ธํ„ด์‹ญ์„ ํ•  ๋•Œ ์ฝ”๋”ฉ์ปจ๋ฒค์…˜์ด ํ—๊ฐ€๋ฆฌ์–ธ ํ‘œ๊ธฐ๋ฒ• + ์บ๋ฉ€์ผ€์ด์Šค์—ฌ์„œ ๊ทธ๋•Œ ์ฒ˜์Œ ์ ‘ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋Š”๋ฐ, ์š”์ฆ˜์—๋Š” ํ—๊ฐ€๋ฆฌ์–ธ ํ‘œ๊ธฐ๋ฒ•์„ ์ง€์–‘ํ•œ๋‹ค๊ณ  ํ•œ๋‹ค. ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜ ํšจ์œจ์„ฑ์ด ๋–จ์–ด์ง„๋‹ค๊ณ . (์ฐธ๊ณ )

๋ธ”๋ก ์•ˆ์—์„œ ๋ณ€์ˆ˜ ์„ ์–ธ

Java์˜ ๊ฒฝ์šฐ ํ•œ ๋ธ”๋ก ์•ˆ์—์„œ๋งŒ ์“ฐ์ด๋Š” ๋ณ€์ˆ˜๋ฅผ ์ฝ”๋“œ ์œ„์ชฝ์— ์„ ์–ธํ•˜์ง€ ์•Š๊ณ  ๋ธ”๋ก ์•ˆ์— ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋ฉด ์ฝ”๋“œ๋ฅผ ํŒŒ์•…ํ•˜๊ธฐ ๋”์šฑ ์‰ฌ์›Œ์ง€๊ณ , ์Šค์ฝ”ํ”„๋ฅผ ์ œํ•œํ•  ์ˆ˜ ์žˆ์–ด ์•ˆ์ „ํ•˜๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ varํƒ€์ž…์€ ๋ธ”๋ก ์Šค์ฝ”ํ”„๊ฐ€ ์•„๋‹Œ ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๋ฅผ ์ ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋””์— ์„ ์–ธํ•˜๋“  ์•„๋ฌด๋Ÿฐ ์ฐจ์ด๊ฐ€ ์—†๋‹ค. ํ•˜์ง€๋งŒ let์ด๋‚˜ const๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์–˜๊ธฐ๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค. ์ด ๋‘˜์€ ๋ธ”๋ก ์Šค์ฝ”ํ”„์ด๋‹ค. (์ฐธ๊ณ )

์ ์ง„์  ํ–ฅ์ƒ๋ฒ•(Progressive enhancement)๊ณผ ์šฐ์•„ํ•œ ์„ฑ๋Šฅ์ €ํ•˜๋ฒ•(Graceful degradation)

์‚ฌ์šฉ์ž๊ฐ€ ํ•ญ์ƒ ์ตœ์‹  ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์—์„œ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค. ํŠนํžˆ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ๋Š” ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์™€ ๊ตฌ์‹ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋ชจ๋‘ ์‹ ๊ฒฝ์จ์•ผ ํ•œ๋‹ค. ์ ์ง„์  ํ–ฅ์ƒ๋ฒ•๊ณผ ์šฐ์•„ํ•œ ์„ฑ๋Šฅ์ €ํ•˜๋ฒ•์€ ์ตœ์‹ ๊ณผ ๊ตฌ์‹์— ๋Œ€์‘ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์„ ๋งํ•œ๋‹ค. (์ฐธ๊ณ )

์ ์ง„์  ํ–ฅ์ƒ๋ฒ•์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ตฌ์‹ ๊ธฐ์ˆ  ํ™˜๊ฒฝ์—์„œ ๋™์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ณ , ์ตœ์‹  ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์—์„œ๋Š” ๋” ๋‚˜์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ์‹  ๊ธฐ์ˆ ์„ ์ œ๊ณตํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์ฆ‰, ๊ตฌ์‹ ํ™˜๊ฒฝ์—์„œ๋„ ์ถฉ๋ถ„ํžˆ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ์ตœ์‹  ํ™˜๊ฒฝ์ด๋ผ๋ฉด ๋” ๋‚˜์€ ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค. ๊ตฌ์‹ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ 100๋งŒํผ์˜ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ณ , ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” 130์ •๋„์˜ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋„๋ก ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ ๋‹ค๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.

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

FOUC(Flash Of Unstyled Content)

FOUC๋Š” ์™ธ๋ถ€์˜ CSS ์ฝ”๋“œ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์ „ ์Šคํƒ€์ผ์ด ์ ์šฉ๋˜์ง€ ์•Š์€ ํŽ˜์ด์ง€๊ฐ€ ์ž ์‹œ ๋‚˜ํƒ€๋‚˜๋Š” ํ˜„์ƒ์ด๋‹ค. ํŠนํžˆ IE์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•˜๋Š” ํ˜„์ƒ์œผ๋กœ, ์‚ฌ์˜น์ž ๊ฒฝํ—˜์„ ์ €ํ•˜ํ•˜๋Š” ์š”์ธ์ด ๋œ๋‹ค. FOUC๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ด์œ ๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋งˆํฌ์—…์— ์ฐธ์กฐ๋œ ํŒŒ์ผ๋“ค์„ ๋ชจ์•„ DOM์„ ์ƒ์„ฑํ•  ๋•Œ ๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ๋ถ„์„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„(HTML)์„ ๋จผ์ € ํ™”๋ฉด์— ํ‘œ์‹œํ•œ ๋’ค, ํ™”๋ฉด์— ์ถœ๋ ฅ๋œ ๋งˆํฌ์—… ์ˆœ์„œ์— ๋”ฐ๋ผ ์Šคํƒ€์ผ(CSS)์„ ์ ์šฉํ•˜๊ณ  ์Šคํฌ๋ฆฝํŠธ(Javascript)๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

FOUC๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” head ํƒœ๊ทธ ์•ˆ์— CSS๋ฅผ ๋งํฌํ•˜๊ณ , @import์˜ ์‚ฌ์šฉ์„ ์ž์ œํ•ด์•ผ ํ•œ๋‹ค. ๋˜ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ head ํƒœ๊ทธ ์•ˆ์—์„œ ๋กœ๋“œํ•˜๋Š” ๊ฒƒ๋„ ๋ฐฉ๋ฒ•๋  ์ˆ˜ ์žˆ๋‹ค. (ํ•˜์ง€๋งŒ ๋ณ„๋กœ ์ถ”์ฒœํ•˜์ง€ ์•Š๋Š”๋‹ค.) ์–ด๋–ค ๋ฐฉ๋ฒ•์œผ๋กœ๋„ ํ•ด๊ฒฐ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด FOUC๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ตฌ์—ญ์„ ์ˆจ๊ฒผ๋‹ค๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ค€๋น„๋์„ ๋•Œ ๋‹ค์‹œ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. (์ฐธ๊ณ )

ARIA(Accessible Rich Internet Applications)์™€ ์Šคํฌ๋ฆฐ๋ฆฌ๋”

ARIA๋Š” ์ ‘๊ทผ๊ฐ€๋Šฅํ•œ ์ธํ„ฐ๋„ท ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์˜๋ฏธํ•œ๋‹ค. ์ด๋Š” ์›น ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ ์žฅ์• ์ธ์„ ์œ„ํ•œ ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•œ๋‹ค. ARIA๋ฅผ ์‚ฌ์šฉํ•ด ์›น์‚ฌ์ดํŠธ์—ฌ๋Ÿฌ ๊ณณ์˜ ์ ‘๊ทผ์„ฑ์„ ํ–ฅ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. ARIA๋Š” <html> ํƒœ๊ทธ์— role ์†์„ฑ์„ ์ง€์ •ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์™€ ์Šคํฌ๋ฆฐ๋ฆฌ๋”๊ฐ€ ARIA๋ฅผ ์ง€์›ํ•˜๊ณ  ์žˆ๋‹ค. ์Šคํฌ๋ฆฐ๋ฆฌ๋”๋Š” ์›น์‚ฌ์ดํŠธ์˜ ๊ตฌ์„ฑ ์š”์†Œ๋“ค์„ ์ฝ์–ด์ฃผ๋Š” ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ, ์‹œ๊ฐ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ์šฉ์ž๊ฐ€ ์ปดํ“จํ„ฐ ํ™”๋ฉด์— ๋ฌด์—‡์ด ์žˆ๋Š”์ง€ ์ธ์ง€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋•๋Š”๋‹ค. (์ฐธ๊ณ 1) (์ฐธ๊ณ 2)

CSS ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ Javascript ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ์ฐจ์ด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ฉ”์ธ ์“ฐ๋ ˆ๋“œ๊ฐ€ ๋ฌด๊ฑฐ์šด ์ž‘์—…์„ ํ•˜๊ณ  ์žˆ์„ ๋•Œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ฒ˜๋ฆฌ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋ฏธ๋ค„๋‘๋Š” ๋ฐ˜๋ฉด CSS๋Š” ๋…๋ฆฝ์ ์ธ ์“ฐ๋ ˆ๋“œ๊ฐ€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ฒ˜๋ฆฌํ•ด์ค€๋‹ค. ๋•Œ๋ฌธ์— CSS ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ์ตœ์ ํ™”๊ฐ€ ์‰ฝ๋‹ค. ํ•˜์ง€๋งŒ ํ•ญ์ƒ CSS ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์šฐ์ˆ˜ํ•œ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. UI ์š”์†Œ๊ฐ€ ์ž‘์€ ๊ฒฝ์šฐ CSS๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์„ธ๋ฐ€ํ•˜๊ฒŒ ์ œ์–ดํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. (์ฐธ๊ณ 1) (์ฐธ๊ณ 2)

๋™์ผ์ถœ์ฒ˜์ •์ฑ…(Same-origin policy)๊ณผ CORS(Cross-origin resource sharing)

๋™์ผ์ถœ์ฒ˜์ •์ฑ…์€ ํ•œ ์ถœ์ฒ˜์˜ ๋ฌธ์„œ๊ฐ€ ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ๋ฌธ์„œ์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜์ง€ ๋ชปํ•˜๋„๋กํ•˜๋Š” ์ •์ฑ…์ด๋‹ค. ๋‘ ๋ฌธ์„œ์˜ ํ”„๋กœํ† ์ฝœ, ํฌํŠธ, ํ˜ธ์ŠคํŠธ๊ฐ€ ๊ฐ™์œผ๋ฉด ๋™์ผ์ถœ์ฒ˜๋ผ๊ณ  ํ•œ๋‹ค. CORS๋Š” ์–ด๋–ค ์›นํŽ˜์ด์ง€์— ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ•ด๋‹น ๋„๋ฉ”์ธ์ด ์•„๋‹Œ ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์— XMLHttpRequests ์š”์ฒญ์„ ํ—ˆ์šฉํ•˜๋Š” ๊ธฐ๋ฒ•์„ ๋งํ•œ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•  ๋•Œ๋งˆ๋‹ค ์„œ๋กœ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ HTTP ํ—ค๋”๋ฅผ ์ด์šฉํ•ด ์ „๋‹ฌํ•œ๋‹ค. CORS๋Š” HTTP ํ—ค๋”์— ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ•ด ๋ธŒ๋ผ์šฐ์ €์™€ ์„œ๋ฒ„๊ฐ€ ์„œ๋กœ ํ†ต์‹ ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ํ•œ๋‹ค. CORS๋ฅผ ํ†ตํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ, Cross-domain ์š”์ฒญ์€ ๋™์ผ์ถœ์ฒ˜์ •์ฑ…์— ์˜ํ•ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ธˆ์ง€ํ•œ๋‹ค. CORS๋Š” ๋‹ค๋ฅธ ์ถœ์ฒ˜์—์„œ ์˜จ ์š”์ฒญ์„ ํ—ˆ์šฉํ•  ์ง€ ๊ฒฐ์ •ํ•˜๊ธฐ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €์™€ ์„œ๋ฒ„๊ฐ€ ์ƒํ˜ธ๊ต๋ฅ˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•œ ๊ฒƒ์ด๋‹ค. CORS๋Š” W3C ๋ช…์„ธ์— ํฌํ•จ๋˜์–ด ์žˆ์ง€๋งŒ IE์˜ ๊ฒฝ์šฐ์—๋Š” ๋น„ํ‘œ์ค€ XDomainRequest ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ CORS ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•œ๋‹ค. (์ฐธ๊ณ 1) (์ฐธ๊ณ 2)

์ฝ”๋“œ ์˜์กด์„ฑ๊ณผ DRY์›์น™

์–ด๋–ค ์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค๋ฅธ ์ถ”๊ฐ€์ ์ธ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ•„์š”๋กœ ํ•˜๊ธฐ๋„ ํ•œ๋‹ค. ์ด๋•Œ ๋‹ค๋ฅธ ์Šคํฌ๋ฆฝํŠธ์— ์˜์กดํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ํ•ด๋‹น ์Šคํฌ๋ฆฝํŠธ์— ์˜์กด์„ฑ์ด ์žˆ๋‹ค๊ณ  ํ‘œํ˜„ํ•œ๋‹ค. jQuery๋ฅผ ํ™œ์šฉํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๋Š” ์˜์กด์„ฑ์ด ์žˆ๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฐ ๊ฒฝ์šฐ ์ฃผ์„์„ ํ†ตํ•ด ์˜์กด์„ฑ์„ ๋ช…์‹œํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

DRY์›์น™์€ Donโ€™t Repeat Yourself์˜ ์ค„์ž„๋ง๋กœ, ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ์›์น™์„ ๋งํ•œ๋‹ค. ํ•œ๊ตญ์–ด๋กœ๋Š” ์ค‘๋ณต๋ฐฐ์ œ๋ผ๊ณ  ํ•œ๋‹ค. ๊ฐ™์€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋‘ ๋ฒˆ ์ž‘์„ฑํ–ˆ๋‹ค๋Š” ์ด๋ฅผ ์ฝ”๋“œ ์ค‘๋ณต์ด๋ผ๊ณ  ํ•˜๋Š”๋ฐ, DRY์›์น™์€ ์ด๋Ÿฌํ•œ ์ฝ”๋“œ ์ค‘๋ณต์„ ์ง€์–‘ํ•˜์ž๋Š” ์›์น™์ด๋‹ค. ์ฝ”๋“œ ์ค‘๋ณต์˜ ๋ฐ˜๋Œ€ ๊ฐœ๋…์œผ๋กœ๋Š” ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ(Code reuse)์ด ์žˆ๋‹ค. ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์€ ๊ฐ™์€ ์ฝ”๋“œ๊ฐ€ ์Šคํฌ๋ฆฝํŠธ์˜ ๋‹ค๋ฅธ ๊ณณ์—์„œ ํ•œ ๋ฒˆ ์ด์ƒ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์€ ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์˜ ์ข‹์€ ์˜ˆ๋กœ, ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํ•จ์ˆ˜๋ฅผ ํ—ฌํผ ํ•จ์ˆ˜(Helper function)๋ผ๊ณ  ํ•œ๋‹ค. ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ์ž๋“ค์€ ์ž‘์€ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋Š”๋ฐ, ์ด๋•Œ๋ฌธ์— ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์€ ์ฝ”๋“œ ์‚ฌ์ด์— ๋” ๋งŽ์€ ์˜์กด์„ฑ์„ ๋งŒ๋“ ๋‹ค.

HTML

DOCTYPE

DOCTYPE์€ ๋ฌธ์„œํ˜•์„ ๋งํ•˜๋ฉฐ, ํ•ด๋‹น ๋ฌธ์„œ๊ฐ€ ์–ด๋–ค ๋ฒ„์ „์˜ ์–ด๋–ค ๋งˆํฌ์—… ์–ธ์–ด๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋Š”์ง€๋ฅผ ์˜๋ฏธํ•œ๋‹ค. DOCTYPE์„ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์„ DTD(Dodumenttation Type Declaration)๋ผ๊ณ  ํ•œ๋‹ค. DTD๋Š” ๊ฐ ๋งˆํฌ์—…์˜ ๊ฐ ๋ฒ„์ „์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ํƒœ๊ทธ๋‚˜ ์†์„ฑ ๋“ฑ์„ ์ •์˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์„œ์˜ ์ตœ์ƒ๋‹จ์— ์œ„์น˜ํ•ด์•ผ ํ•œ๋‹ค. HTML5 ์ด์ „ ๋ฒ„์ „์€ SGML(Standard Generalized Markup Language)์— ๊ธฐ๋ฐ˜ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— DTD ์ฐธ์กฐ๊ฐ€ ํ•„์ˆ˜์ ์ด์—ˆ๋‹ค. HTML5๋Š” DTD ์ฐธ์กฐ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์œผ๋ฉฐ, ํ•˜์œ„ ํ˜ธํ™˜์„ ์œ„ํ•ด <!DOCTYPE html>๋งŒ์œผ๋กœ ์„ ์–ธํ•œ๋‹ค. (์ฐธ๊ณ )

ํ‘œ์ค€๋ชจ๋“œ(Standard mode)์™€ ํ˜ธํ™˜๋ชจ๋“œ(Quirks mode)

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

XML๊ณผ XHTML

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

XHTML์ด ๋” ํ‘œ์ค€์ธ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ์‚ฌ์‹ค ๊ทธ๋ ‡๊ฒŒ ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š” ์‚ฌ๋žŒ๋“ค๋„ ์žˆ๋‹ค. ์ผ๋‹จ HTML์˜ ํ˜ธํ™˜์„ฑ์ด ๋” ๋†’๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. XHTML์€ 1.1๋ฒ„์ „๋ถ€ํ„ฐ ๋น„ํ‘œ์ค€์ด๋‚˜ ๋น„๊ถŒ์žฅ ํƒœ๊ทธ๋ฅผ ํ˜ธํ™˜ํ•˜์ง€ ๋ชปํ•˜๊ฒŒ ๋˜๋ฉด์„œ ์ง€๋‚˜์น˜๊ฒŒ ์—„๊ฒฉํ•˜๋‹ค๋Š”๋Š” ๋น„ํŒ์„ ๋ฐ›์•˜๋‹ค. IE๊ฐ€ XHTML์„ ํ•ด์„ํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒƒ ์—ญ์‹œ XHTML์˜ ํ˜ธํ™˜์„ฑ์„ ๋–จ์–ด๋œจ๋ฆฌ๋Š” ์š”์ธ์ด ๋๋‹ค. ๋˜ํ•œ XHTML๊ณผ HTML์˜ ์š”์†Œ์™€ ์†์„ฑ์—๋Š” ์ฐจ์ด๊ฐ€ ๊ฑฐ์˜ ์—†๋‹ค. ๋‹จ์ง€ HTML์—์„œ๋Š” <br>๋กœ ์จ๋„ ๋˜์ง€๋งŒ XHTML์—์„œ๋Š” ๋ฐ˜๋“œ์‹œ <br/>๋กœ ์จ์•ผํ•œ๋‹ค๋Š” ์ •๋„์˜ ๋ฌธ๋ฒ•์ด ๋‹ค๋ฅผ ๋ฟ์ด๋‹ค. ์ด๋Ÿฐ ์ ์—์„œ ๊ตณ์ด XHTML์„ ์จ์•ผํ•  ๊ธฐ์ˆ ์  ์ด์œ ๋Š” ์—†๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ํ•œํŽธ HTML5๊ฐ€ ๋ฐœํ‘œ๋˜๋ฉด์„œ XHTML์€ ๊ฑฐ์˜ ์‚ฌ์šฉ๋˜์ง€ ์•Š๊ณ  ์žˆ๋‹ค. (์ฐธ๊ณ )

data-* ์†์„ฑ

HTML5์—์„œ ์ƒˆ๋กœ ์ถ”๊ฐ€๋œ data- ์†์„ฑ์€ ์ปค์Šคํ…€ ๋ฐ์ดํ„ฐ ์†์„ฑ์œผ๋กœ, ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž„์˜๋กœ ์ด๋ฆ„์„ ๋ถ™์ผ ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์ด๋‹ค. data- ์†์„ฑ์€ <html> ํƒœ๊ทธ ์ƒ์—์„œ ๋ณ„๋‹ค๋ฅธ ์ž‘์šฉ์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ DOM์˜ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•˜๊ฑฐ๋‚˜ ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ํ™œ์šฉํ•ด์•ผ ํ•  ๋•Œ ์‚ฌ์šฉ๋œ๋‹ค. (์ฐธ๊ณ )

Cookie, sessionStorage, localStorage

์ฟ ํ‚ค(Cookie), ์„ธ์…˜ ์ €์žฅ์†Œ(sessionStorage), ๋กœ์ปฌ ์ €์žฅ์†Œ(localStorage)๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•œ ๊ณต๊ฐ„๋“ค์ด๋‹ค. HTML5 ์ด์ „์—๋Š” ์ฟ ํ‚ค๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ฟ ํ‚ค๋Š” ๋งŽ์€ ์–‘์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์—†๊ณ , ๋™์ผํ•œ ๋„๋ฉ”์ธ์— ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•  ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„๋กœ ํ•จ๊ป˜ ์ „์†ก๋˜๋ฉฐ, ๋ณ€์กฐ๊ฐ€ ์‰ฌ์›Œ ๋ณด์•ˆ์ด ์ทจ์•ฝํ•ด์ง„๋‹ค. ๊ทธ๋ž˜์„œ HTML5๋ถ€ํ„ฐ๋Š” ์ €์žฅ์†Œ ๊ฐ์ฒด(Storage object)๋ฅผ ์ •์˜ํ•˜๊ณ  ์žˆ๋‹ค. ์ €์žฅ์†Œ ๊ฐ์ฒด๋Š” ์„ธ์…˜ ์ €์žฅ์†Œ์™€ ๋กœ์ปฌ ์ €์žฅ์†Œ ๋‘ ๊ฐ€์ง€๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ๋กœ์ปฌ ์ €์žฅ์†Œ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ž์žฅํ•˜๋ฉด ์ฐฝ์ด๋‚˜ ํƒญ์„ ๋‹ซ์•„์„œ ์„ธ์…˜์ด ์ข…๋ฃŒ๋ผ๋„ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณด์กด๋˜๊ณ , ์—ด๋ ค ์žˆ๋Š” ๋ชจ๋“  ์ฐฝ์ด๋‚˜ ํƒญ์ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•˜๊ฒŒ ๋œ๋‹ค. ์„ธ์…˜ ์ €์žฅ์†Œ๋Š” ๋ฐ˜๋Œ€๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ €์žฅ์†Œ์— 5mb ์ •๋„์˜ ๊ณต๊ฐ„์„ ํ• ๋‹นํ•˜๋ฉฐ, ๋ฐ์ดํ„ฐ๋Š” ํ‚ค-๊ฐ’ ์Œ(KVP; Key-Value Pair)์„ ์ด์šฉํ•˜๋Š” ์ €์žฅ์†Œ ๊ฐ์ฒด์˜ ์†์„ฑ์œผ๋กœ ์ €์žฅ๋œ๋‹ค. ๋˜ํ•œ ๋ธŒ๋ผ์šฐ์ €๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ณดํ˜ธํ•˜๊ธฐ ์œ„ํ•ด ๋™์ผ์ถœ์ฒ˜์ •์ฑ…์— ์˜๊ฑฐ, ์„œ๋กœ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋Š” ๊ฐ™์€ ๋„๋ฉ”์ธ์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ์—๋งŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ์ œํ•œํ•˜๊ณ  ์žˆ๋‹ค. (์ฐธ๊ณ 1) (์ฐธ๊ณ 2) (์ฐธ๊ณ 3)

script ํƒœ๊ทธ์˜ async์™€ defer

<script> ํƒœ๊ทธ์— async ์†์„ฑ๊ณผ defer ์†์„ฑ์ด ์ถ”๊ฐ€๋œ ๊ฒƒ์€ HTML5๋ถ€ํ„ฐ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์›น ๋ฌธ์„œ์—์„œ ์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” <script> ํƒœ๊ทธ๋ฅผ ๋งŒ๋‚˜๋ฉด ํ•ด๋‹น ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‚ด๋ ค๋ฐ›์•„ ํ•ด์„ํ•˜๊ณ  ์‹คํ–‰ํ•  ๋•Œ๊นŒ์ง€ HTML ์ฝ”๋“œ ํŒŒ์‹ฑ ์ž‘์—…์„ ๋’ค๋กœ ๋ฏธ๋ฃฌ๋‹ค. ๊ทธ๋ž˜์„œ ๋ฌด๊ฑฐ์šด ์Šคํฌ๋ฆฝํŠธ ๋ฌธ์„œ๋ฅผ ํ•ด์„ํ•  ๋•Œ๋Š” ํŽ˜์ด์ง€ ์ „์ฒด๊ฐ€ ๋Š๋ ค์ง€๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ <script> ํƒœ๊ทธ์— async๋‚˜ defer ์†์„ฑ์„ ์ง€์ •ํ•˜๋ฉด ๋งˆํฌ์—… ์ฝ”๋“œ ์ž‘์—…์„ ์ค‘๋‹จํ•˜์ง€ ์•Š๊ณ  ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋™์‹œ์— ๋‚ด๋ ค๋ฐ›๊ฒŒ ๋œ๋‹ค. defer๋Š” ๋งˆํฌ์—… ํŒŒ์‹ฑ์„ ๋งˆ์นœ ๋‹ค์Œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ฉฐ, async๋Š” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‚ด๋ ค๋ฐ›๋Š” ์ฆ‰์‹œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•œ๋‹ค. (์ฐธ๊ณ )

Progressive rendering

Progressive rendering์€ ์ฝ˜ํ…์ธ ๋ฅผ ๋น ๋ฅด๊ฒŒ ํ™”๋ฉด์— ๋ Œ๋”๋งํ•˜๋Š” ๊ธฐ๋ฒ•์ด๋‹ค. ๋ธŒ๋กœ๋“œ๋ฐด๋“œ ์ธํ„ฐ๋„ท์ด ๋“ฑ์žฅํ•˜๊ธฐ ์ „์— ๋งค์šฐ ์ค‘์š”ํ•œ ๊ธฐ์ˆ ์ด์—ˆ๊ณ , ๋ชจ๋ฐ”์ผ ํ”Œ๋žซํผ์„ ๊ณ ๋ คํ•œ๋‹ค๋ฉด ์—ฌ์ „ํžˆ ๋ฌด์‹œํ•  ์ˆ˜ ์—†๋Š” ๋ถ€๋ถ„์ด๋‹ค. ๊ฐ€์‹œ์˜์—ญ์˜ ์ด๋ฏธ์ง€๋งŒ ๋กœ๋”ฉํ•ด์ฃผ๋Š” jQuery ํ”Œ๋Ÿฌ๊ทธ์ธ Lazy loading์ด ์ข‹์€ ์˜ˆ๋‹ค. (์ฐธ๊ณ )

CSS

Reset CSS

๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ†ต์ผ๋œ ํ™”๋ฉด์„ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก CSS์˜ ๊ธฐ๋ณธ๊ฐ’์„ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. Eric Meyerโ€™s Reset๊ณผ Normalize.css๊ฐ€ ์ฃผ๋กœ ์“ฐ์ธ๋‹ค.

BFC(Block Formatting Context)์™€ IFC(Inline Formatting Context)

๋ชจ๋“  HTML ์š”์†Œ๋Š” ์‚ฌ๊ฐํ˜• ๋ฐ•์Šค ํ˜•ํƒœ๋ฅผ ์ทจํ•˜๊ณ  ์žˆ๋‹ค. ๋ฐ•์Šค๋Š” Box-model์ด๋ผ๋Š” ๋ชจ๋ธ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. CSS์š”์†Œ์—๋Š” display๊ฐ€ ์กด์žฌํ•˜๋Š”๋ฐ, ์ด๋Š” ๋ธ”๋ก(Block)๊ณผ ์ธ๋ผ์ธ(Inline) ๋‘ ๊ฐ€์ง€ ๊ฐ’์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค. block์€ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ(Block-level elements)๋ฅผ ์˜๋ฏธํ•˜๋ฉฐ, ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” BFC์— ์†ํ•˜๋Š” ๋ฐ•์Šค์ด๋‹ค. ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ ๋ฐ•์Šค๋Š” ์ˆ˜์ง์œผ๋กœ ๊ณ„์† ์Œ“์ธ๋‹ค. inline์€ ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ(Inline-level elements)๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ๋ฐ•์Šค๋ฅผ ์ƒ์„ฑํ•˜๋ฉฐ, ์ด๋Š” IFC์— ์†ํ•œ๋‹ค. ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ ๋ฐ•์Šค๋Š” ์ˆ˜ํ‰์œผ๋กœ ๊ณ„์† ์Œ“์ธ๋‹ค. ๋˜ํ•œ ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ๋ฐ•์Šค์— border๋‚˜ padding์ด ๋ˆˆ์— ๋ณด์ด๋”๋ผ๋„ ์‚ฌ์‹ค์€ line-height์— ์˜ํ•ด ๋†’์ด๊ฐ€ ์กฐ์ ˆ๋œ๋‹ค. inline-block์€ ํŠน์ดํ•œ๋ฐ, ์ด ์š”์†Œ๋Š” ์ธ๋ผ์ธ ์š”์†Œ์ฒ˜๋Ÿผ ์ˆ˜ํ‰์œผ๋กœ ์Œ“์ด์ง€๋งŒ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์˜ ๋ฐ•์Šค์ฒ˜๋Ÿผ ๋†’์ด๋ฅผ ๊ณ„์‚ฐํ•œ๋‹ค. ์ฆ‰ line-height์— ์˜์กดํ•˜์ง€ ์•Š๋Š”๋‹ค. (์ฐธ๊ณ )

ํด๋ฆฌ์–ด๋ง(Clearing) ๊ธฐ์ˆ 

ํด๋ฆฌ์–ด๋ง์€ float ์†์„ฑ์ด ์ฃผ๋ณ€ ์š”์†Œ์˜ ๋ฐฐ์น˜์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋„๋กํ•˜๋Š” ๊ฒƒ์ด๋‹ค. float ์†์„ฑ์„ ๊ฐ€์ง„ ์š”์†Œ๋Š” ์ž์‹ ์˜ ์œ„์น˜๋ฅผ ์ฃผ๋ณ€ ์ฝ˜ํ…์ธ ๋กœ๋ถ€ํ„ฐ ์ƒ๋Œ€์ ์œผ๋กœ ๋ฐฐ์น˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ์ฝ˜ํ…์ธ ๊ฐ€ ๊ทธ ์ฃผ์œ„๋กœ ํ๋ฅด๊ฒŒ ๋œ๋‹ค. ํด๋ฆฌ์–ด๋ง๋ฅผ ํ†ตํ•ด ์ด๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์—ฌ๊ธฐ์—๋Š” 4๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

์ฒซ ๋ฒˆ์งธ๋Š” float์— float์œผ๋กœ ๋Œ€์‘ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์ž์‹ ์š”์†Œ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ถ€๋ชจ ์š”์†Œ์—๊ฒŒ๋„ float ์†์„ฑ์„ ์ง€์ •ํ•˜๋ฉด ๋ถ€๋ชจ ์š”์†Œ๊ฐ€ ์ž์‹ ์š”์†Œ์˜ ๋†’์ด๋ฅผ ๋ฐ˜์˜ํ•œ๋‹ค. ๋‹จ, ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ถ€๋ชจ ์š”์†Œ์˜ ๋„ˆ๋น„๊ฐ€ ์ž์‹ ์š”์†Œ๋ฅผ ๋‹ด์„ ์ •๋„๋กœ ์ค„์–ด๋“ ๋‹ค.

๋‘ ๋ฒˆ์งธ๋Š” float์— overflow ์†์„ฑ์œผ๋กœ ๋Œ€์‘ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์ž์‹ ์š”์†Œ์˜ ๋†’์ด๋ฅผ ๋ถ€๋ชจ์—๊ฒŒ ๋ฐ˜์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ, ๋ถ€๋ชจ ์š”์†Œ์˜ overflow ์†์„ฑ์— auto ๋˜๋Š” hidden ๊ฐ’์„ ๋ถ€์—ฌํ•œ๋‹ค. ํ•˜์ง€๋งŒ auto ๊ฐ’์˜ ๊ฒฝ์šฐ ์ž์‹ ์š”์†Œ๊ฐ€ ๋ถ€๋ชจ ์š”์†Œ๋ณด๋‹ค ํด ๋•Œ ์Šคํฌ๋กค๋ฐ”๊ฐ€ ์ƒ๊ธฐ๋ฉฐ, hidden ๊ฐ’์˜ ๊ฒฝ์šฐ ๋„˜์น˜๋Š” ๋ถ€๋ถ„์ด ์ž˜๋ ค๋ฒ„๋ฆฐ๋‹ค.

์„ธ ๋ฒˆ์งธ๋กœ float์„ ๋นˆ ์—˜๋ฆฌ๋จผํŠธ๋กœ ํด๋ฆฌ์–ด๋งํ•  ์ˆ˜๋„ ์žˆ๋‹ค. float์ด ์ง€์ •๋œ ์š”์†Œ ๋’ค์— ๋นˆ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ๋นˆ ์š”์†Œ์˜ clear ์†์„ฑ์— both ๊ฐ’์„ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ์ธ๋ฐ, ์˜๋ฏธ์—†๋Š” ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค.

๋งˆ์ง€๋ง‰์œผ๋กœ float์„ ๊ฐ€์ƒ ์„ ํƒ์ž :after๋กœ ํด๋ฆฌ์–ด๋งํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. ๊ฐ€์ƒ ์„ ํƒ์ž๋Š” ๊ฐ€์ƒ ํด๋ž˜์Šค(pseudo-class)์™€ ๊ฐ€์ƒ ์š”์†Œ(pseudo-element)๋กœ ๋‚˜๋‰œ๋‹ค. ๊ฐ€์ƒ ํด๋ž˜์Šค๋Š” ํŠน์ • ์š”์†Œ์— ์•„๋ฌด๋Ÿฐ class๋ฅผ ๋ถ€์—ฌํ•˜์ง€ ์•Š์•˜์ง€๋งŒ ๋งˆ์น˜ class๋ฅผ ๋ณ€๊ฒฝํ•œ ๊ฒƒ๊ณผ ๊ฐ™์€ ์—ญ๋™์ ์ธ ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์ด๋‹ค. :hover, :active, :focus ๋“ฑ์ด ์—ฌ๊ธฐ์— ์†ํ•œ๋‹ค. ๊ฐ€์ƒ ์š”์†Œ๋Š” ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์š”์†Œ๋ฅผ ๊ฐ€์ƒ์œผ๋กœ ์ƒ์„ฑํ•˜๋Š” ์„ ํƒ์ž๋‹ค. :first-line, :before, :after๊ฐ€ ์—ฌ๊ธฐ์— ์†ํ•œ๋‹ค. ๊ฐ€์ƒ ์š”์†Œ๋Š” HTML ๋ฌธ์„œ์— ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ์ถœ๋ ฅํ•˜๊ธฐ๋„ ํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ๊ฐ€์ƒ ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•œ ๋‹ค์Œ display: block; clear: both; ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋ฉด ๊น”๋”ํ•˜๊ฒŒ ํด๋ฆฌ์–ด๋ง์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ฐ€์žฅ ๊ถŒ์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

Image Replacement

์š”์†Œ๋ฅผ ์ด๋ฏธ์ง€๋กœ ๊ต์ฒดํ•˜๋Š” ๊ธฐ๋ฒ•์ด๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•˜๋ฉด ๋œ๋‹ค:

.elements {
  background-image: url("image.png");
}

๊ทธ๋ฆฌ๊ณ  A History of CSS Image Replacement์—์„œ ๋” ๋งŽ์€ ์˜ˆ์‹œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

IE box model๊ณผ W3C box model์˜ ์ฐจ์ด

๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ผ ๋ฐ•์Šค ๋ชจ๋ธ์ด ๋‹ฌ๋ผ ์š”์†Œ์— ์ง€์ •๋œ ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ ๊ฐ™์•„๋„ ์„œ๋กœ ๋‹ค๋ฅด๊ฒŒ ๋ Œ๋”๋ง๋œ๋‹ค. ๋ฐ•์Šค ๋ชจ๋ธ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ margin, border, padding, content๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹ค.

๋‘ ๋ฐ•์Šค ๋ชจ๋ธ.

W3C์˜ ํ‘œ์ค€ ๋ฐ•์Šค ๋ชจ๋ธ์€ ์ฝ˜ํ…์ธ ์˜ ๋„ˆ๋น„, ๋†’์ด๋งŒ์„ width์™€ height๋กœ ๊ณ„์‚ฐํ•˜๋Š” ๋ฐ˜๋ฉด, IE์˜ ๋ฐ•์Šค ๋ชจ๋ธ์€ ์ฝ˜ํ…์ธ ์™€ padding, border๋ฅผ ํฌํ•จํ•œ ๋„ˆ๋น„์™€ ๋†’์ด๋ฅผ width, height๋กœ ๊ณ„์‚ฐํ•œ๋‹ค. ์ด๋ฅผ ์œ„ํ•œ ํ•ด๊ฒฐ์ฑ…์€ (1)DTD๋ฅผ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ฟฝ์Šค ๋ชจ๋“œ๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š๋„๋ก ํ•˜๊ฑฐ๋‚˜ (2)wrapper ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ด wrapper ์š”์†Œ์— width, height ๊ฐ’์„ ํ• ๋‹นํ•˜๊ณ  ๋‚ด๋ถ€ ์—˜๋ฆฌ๋จผํŠธ์— padding, border ๊ฐ’์„ ํ• ๋‹นํ•˜๊ฑฐ๋‚˜ (3)Conditional comment๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ (3)css hack์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. (์ฐธ๊ณ )

๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ (Grid system)

๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์ž์ฃผ ์“ฐ์ด๋Š” ๊ธฐ์ˆ ์ด๋‹ค. ํŽ˜์ด์ง€ ์œ„์— ๊ฒฉ์ž๋ฅผ ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์œ„์— ์š”์†Œ๋ฅผ ๊ทธ ์œ„์— ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ, ๊ธฐ์ˆ ์ ์ธ ์ด์œ ๋งŒ์ด ์•„๋‹ˆ๋ผ ๋””์ž์ธ์ ์ธ ์ด์œ ๋กœ๋„ ์‚ฌ์šฉํ•œ๋‹ค. ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์€ CSS๋ฅผ ์ด์šฉํ•ด ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. ์‰ฝ๊ฒŒ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

CSS ์ „์ฒ˜๋ฆฌ๊ธฐ

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

@bgColor: #DFDFDF;
body {
  background-color: @bgColor;
}

์œ„๋Š” Less์˜ ์˜ˆ์‹œ๋‹ค. ์ปดํŒŒ์ผ์„ ํ•˜๋ฉด body์˜ background-color ๊ฐ’์ด #DFDFDF๋กœ ์น˜ํ™˜๋œ CSS ์ฝ”๋“œ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

๋ฐ˜์‘ํ˜• ๋””์ž์ธ(Responsive design)๊ณผ ์ ์‘ํ˜• ๋””์ž์ธ(Adaptive design)

๋ฐ˜์‘ํ˜• ๋””์ž์ธ์€ ๋””์Šคํ”Œ๋ ˆ์ด์˜ ๋„ˆ๋น„์— ๋”ฐ๋ผ ๋ ˆ์ด์•„์›ƒ์„ ๋ณ€ํ˜•์‹œํ‚ค๊ณ , ์ ์‘ํ˜• ๋””์ž์ธ์€ ๊ณ ์ •์  ๋ ˆ์ด์•„์›ƒ์„ ๊ฐ€์ง„๋‹ค. ๋ฐ˜์‘ํ˜• ์›น์ด ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ์Šคํƒ€์ผ ๋ถ„๊ธฐ๋ฅผ ๋‚˜๋ˆ„๋Š” ๋ฐฉ๋ฒ•์ด๋ผ๋ฉด ์ ์‘ํ˜• ์›น์€ ๋””๋ฐ”์ด์Šค๋ฅผ ์ฒดํฌํ•ด ๊ทธ ๋””๋ฐ”์ด์Šค์— ์ตœ์ ํ™”๋œ ๋งˆํฌ์—…์„ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. (์ฐธ๊ณ )

Javascript

์ถ”์ƒ์  ๊ฐ™์Œ ๋น„๊ต(Abstract equality comparison)์™€ ์—„๊ฒฉํ•œ ๊ฐ™์Œ ๋น„๊ต(Strict equality comparison)

์ถ”์ƒ์  ๊ฐ™์Œ ๋น„๊ต(==)๋Š” ๋‘ ๋ณ€์ˆ˜๋ฅผ ๊ฐ™์€ ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ๋ณ€ํ™˜ํ•œ ๋‹ค์Œ ๊ฐ’์„ ๋น„๊ตํ•˜๋Š” ๋ฐ˜๋ฉด, ์—„๊ฒฉํ•œ ๊ฐ™์Œ ๋น„๊ต(===)๋Š” ๋‘ ๋ณ€์ˆ˜์˜ ๊ฐ’๊ณผ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ํ•จ๊ป˜ ๋น„๊ตํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ’๊ณผ ํƒ€์ž…์ด ์™„์ „ํžˆ ์ผ์น˜ํ•ด์•ผ true๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์—„๊ฒฉํ•œ ๊ฐ™์Œ ๋น„๊ต๋ฅผ ์‚ฌ์šฉํ•œ ๋น„๊ต ๊ฒฐ๊ณผ๋Š” ์˜ˆ์ธก์ด ์‰ฝ๊ณ  ํƒ€์ž… ๊ฐ•์ œ๊ฐ€ ์ผ์–ด๋‚˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ถ”์ƒ์  ๊ฐ™์Œ ๋น„๊ต๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋‚ซ๋‹ค. (์ฐธ๊ณ )

๊ณ ๊ธ‰ ์˜ˆ์™ธ์ฒ˜๋ฆฌ(Advanced exception handling)

try...catch์™€ throw๋กœ ๊ณ ๊ธ‰ ์˜ˆ์™ธ์ฒ˜๋ฆฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฐธ๊ณ ๋กœ ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ ์ค‘์— ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜๋Š” ์˜ˆ์™ธ(Exception)์ด๋ผ๊ณ  ํ•˜๋ฉฐ, ์ฝ”๋“œ์˜ ๋ฌธ๋ฒ•์  ์˜ค๋ฅ˜๋Š” ์—๋Ÿฌ(Error)๋ผ๊ณ  ํ•œ๋‹ค. try...catch๋Š” ๊ตฌ๋™ ์ค‘ ์ฝ”๋“œ์ƒ์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ์˜ค๋ฅ˜๋“ค์„ ์žก์•„์ค€๋‹ค.

try {
  // try ๋ธ”๋ก์€ ์˜ˆ์™ธ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜๋„ ์žˆ๋Š” ๋ถ€๋ถ„
} catch(e) {
  // catch ๋ธ”๋ก์€ try ๋ธ”๋ก์—์„œ ์˜ˆ์™ธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ๋ถ€๋ถ„
  // ๊ฐ์ฒด e๋Š” name๊ณผ message ์†์„ฑ์„ ๊ฐ€์ง
} finally {
  // ์„ ํƒ์ ์œผ๋กœ finally ๋ธ”๋ก์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Œ
  // ์˜ˆ์™ธ ๋ฐœ์ƒ ์—ฌ๋ถ€๋ฅผ ๋– ๋‚˜ ๋ฌด์กฐ๊ฑด ์‹คํ–‰๋˜์–ด์•ผ ํ•  ๋ถ€๋ถ„
}

throw๋ฌธ์€ ๊ฐ•์ œ๋กœ ์˜ˆ์™ธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ฌ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. throw์˜ ๋ฌธ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค:

throw expression;

ํ‘œํ˜„์‹์˜ ๊ฐ’์€ ์ˆซ์ž, ๋ฌธ์ž ๋“ฑ ์–ด๋–ค ๊ฒƒ์ด๋“  ์ƒ๊ด€์—†๋‹ค. throw๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด catch ๋ธ”๋ก์œผ๋กœ ์ด๋™ํ•œ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค:

try {
  if(a > 100) {
    throw "Value too high";
  }
} catch(e) {
  alert(e);
}

(์ฐธ๊ณ 1) (์ฐธ๊ณ 2)

Event delegation

์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ๊ฒƒ์€ DOM ์ž…์žฅ์—์„œ๋Š” ๋ถ€๋‹ด์Šค๋Ÿฌ์šด ์ผ์ด๋ฉฐ, ๋ฆฌ์†Œ์Šค๋ฅผ ์ƒ๋‹นํžˆ ์žก์•„๋จน๋Š” ์ž‘์—…์ด๋‹ค. ๊ทธ๋ž˜์„œ ์š”์†Œ ํ•˜๋‚˜ํ•˜๋‚˜์— ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ๋Œ€์‹  ์œ„์ž„์„ ํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋žŒ์งํ•˜๋‹ค. ์ž์‹ ์š”์†Œ๋“ค์„ ๊ฐ์‹ผ ๋ถ€๋ชจ ์š”์†Œ์— ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•ด ์ด๋ฒคํŠธ๋ฅผ ์œ„์ž„ํ•˜๋ฉด ๊ฐ๊ฐ์˜ ์ž์‹ ์š”์†Œ๋“ค์— ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ๋‹ค. ์ด๋ฒคํŠธ๋ฅผ ์œ„์ž„ํ•˜๋ฉด ๋ฆฌ์†Œ์Šค๋ฅผ ์ ˆ์•ฝํ•  ์ˆ˜ ์žˆ์„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ DOM ํŠธ๋ฆฌ์— ์ƒˆ๋กœ์šด ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์„ ๋•Œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•  ํ•„์š”๊ฐ€ ์—†์–ด์ง€๊ณ , ์ฝ”๋“œ์˜ ์–‘์„ ์ค„์ผ ์ˆ˜๋„ ์žˆ๋‹ค. ๋‹ค์Œ์€ ul ์š”์†Œ์˜ ์ž์‹ ์š”์†Œ์ธ li ์š”์†Œ๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น li ์š”์†Œ๊ฐ€ ์‚ฌ๋ผ์ง€๋Š” ์ฝ”๋“œ์ด๋‹ค.

<ul id="todoList">
  <li>TODO: A</li>
  <li>TODO: B</li>
  <li>TODO: C</li>
</ul>

์•„์ฃผ ํ‰๋ฒ”ํ•œ ๋ฆฌ์ŠคํŠธ์ด๋‹ค.

function getTarget(e) {
  if(!e) { // event ๊ฐ์ฒด๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด
    e = window.event; // IE์˜ event ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉ
  }

  return e.target || e.srcElement; // ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ด
}

function itemDone(e) {
  var elTarget, elParent;

  elTarget = getTarget(e); // ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ์š”์†Œ ๊ฐ€์ ธ์˜ด (li)
  elParent = target.parentNode; // ํ•ด๋‹น ์š”์†Œ์˜ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ด (ul)
  elParent.removeChild(elTarget); // ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•จ (li)
}

(function(){
  var el = document.getElementById('todoList');

  if(el.addEventListener) { // ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๊ฐ€ ์ง€์›๋˜๋ฉด
    el.addEventListener('click', function(e) { // ํด๋ฆญ ์ด๋ฒคํŠธ์— ๋ฆฌ์Šค๋„ˆ๋ฅผ ์ง€์ •
      itemDone(e);
    }, false); // ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง์„ ์‚ฌ์šฉ
  } else { // ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๊ฐ€ ์ง€์›๋˜์ง€ ์•Š์œผ๋ฉด
    el.attachEvent('onclick', function(e) { // IE์˜ onclick ์ด๋ฒคํŠธ๋ฅผ ์‚ฌ์šฉ
      itemDone(e);
    }
  });
})();

IE๊นŒ์ง€ ๊ณ ๋ คํ•œ ์ฝ”๋“œ๋‹ค. ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋กœ ์š”์†Œ 3๊ฐœ๋ฅผ ์ œ์–ดํ•˜๊ณ  ์žˆ๋‹ค๋‹ค. jQuery๋Š” ๋ณด๋‹ค ํŽธํ•˜๊ฒŒ ์ด๋ฒคํŠธ๋ฅผ ๋ฐ”์ธ๋”ฉํ•  ์ˆ˜ ์žˆ๋„๋ก .delegate() ๋ฉ”์†Œ๋“œ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋‹ค.

Prototype ๊ธฐ๋ฐ˜ ์ƒ์†

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํด๋ž˜์Šค๋ผ๋Š” ๊ฐœ๋…์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋กœํ† ํƒ€์ž…(Prototype)์ด ํด๋ž˜์Šค๋ฅผ ๋Œ€์‹ ํ•ด ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ํ•ต์‹ฌ์„ ๋งก๋Š”๋‹ค. ๋‹ค๋งŒ ES6๋ถ€ํ„ฐ ํด๋ž˜์Šค ๋ฌธ๋ฒ•์ด ์ถ”๊ฐ€๋๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋กœํ† ํƒ€์ž…์— ์ง์ ‘ ์ ‘๊ทผํ•  ํ•„์š”๊ฐ€ ์—†์–ด์กŒ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ OOP๋Š” ์ง„์ •ํ•œ OOP๊ฐ€ ์•„๋‹Œ๊ฐ€?๋ฅผ ์ฐธ๊ณ ํ•ด๋ณด์ž. ๊ทธ๋ž˜๋„ ํ”„ํ† ๋กœํƒ€์ž…์€ ์—ฌ์ „ํžˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋ฐ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ์•Œ์•„๋‘๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์ด ํ”„๋กœํ† ํƒ€์ž…์„ ํ†ตํ•ด ๋‹ค๋ฅธ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด์—์„œ ์“ฐ์ด๋Š” ํด๋ž˜์Šค๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

function Player() {
  this.hp = 100;
  this.mp = 50;
}

var kim = new Player();
var park = new Player();

console.log(kim.hp); // 100
console.log(kim.mp); // 50

console.log(park.hp); // 100
console.log(park.mp); // 50

kim๊ณผ park์€ hp์™€ mp๋ฅผ ๊ฐ๊ฐ 100, 50์”ฉ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋งŒ์•ฝ ๊ฐ์ฒด๋ฅผ 100๊ฐœ ๋งŒ๋“ค๋ฉด 200๊ฐœ์˜ ๋ณ€์ˆ˜๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ์— ํ• ๋‹น๋œ๋‹ค. ํ”„๋กœํ† ํƒ€์ž…์„ ํ™œ์šฉํ•˜๋ฉด ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์•„๋‚„ ์ˆ˜ ์žˆ๋‹ค.

function Player() {}
Player.prototype.hp = 100;
Player.prototype.mp = 50;

var kim = new Player();
var park = new Player();

kim๊ณผ park์€ ํ”„๋กœํ† ํƒ€์ž…์— ์—ฐ๊ฒฐ๋œ Player ๊ฐ์ฒด์˜ ๊ฐ’์„ ๊ฐ€์ ธ๋‹ค ์“ธ ์ˆ˜ ์žˆ๋‹ค. hp์™€ mp๋ฅผ kim๊ณผ park์ด ๊ณต์œ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์ด๋Ÿฌํ•œ ๋งค์ปค๋‹ˆ์ฆ˜์œผ๋กœ ํ”„๋กœํ† ํƒ€์ž…์„ ์ด์šฉํ•ด ์ƒ์†์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. (์ฐธ๊ณ 1) (์ฐธ๊ณ 2)

null, undefined, undeclared์˜ ์ฐจ์ด

์ด๊ฑด ์ข…์ข… ํ—ท๊ฐˆ๋ฆฌ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. null์€ ์–ด๋– ํ•œ ๊ฐ’๋„ ๊ฐ€๋ฆฌํ‚ค์ง€ ์•Š๋Š”๋‹ค๋Š” ์˜๋ฏธ์˜ ์›์‹œ๊ฐ’์ด๋‹ค. ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  null์„ ํ• ๋‹นํ•œ ๊ฒฝ์šฐ ํ•ด๋‹น ๋ณ€์ˆ˜๊ฐ€ ์–ด๋– ํ•œ ๊ฐ’๋„ ๊ฐ€์ง€์ง€ ์•Š์•˜๋‹ค๋Š” ์˜๋ฏธ๊ฐ€ ๋œ๋‹ค. undefined๋Š” ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋์ง€๋งŒ ๊ฐ’์ด ํ• ๋‹น๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜๋Š” ๊ฐ’์ด๋‹ค. ์ฆ‰, null์€ ๊ฐœ๋ฐœ์ž๋กœ๋ถ€ํ„ฐ ํ• ๋‹น๋˜๋Š” ๊ฐ’์ด๊ณ , undefined๋Š” ์•„์˜ˆ ํ• ๋‹น์„ ํ•˜์ง€ ์•Š์€ ์ƒํƒœ๋‹ค. undeclared๋Š” ๋ณ€์ˆ˜ ์ž์ฒด๊ฐ€ ์„ ์–ธ๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ์˜๋ฏธ๋‹ค. ์ฝ˜์†”์—์„œ๋Š” undefined์™€ ๋˜‘๊ฐ™์ด ํ‘œ๊ธฐ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€์ˆ˜๊ฐ€ ์ดˆ๊ธฐํ™”๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ๊ฒƒ์ธ์ง€, ์•„์˜ˆ ์„ ์–ธ๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ๊ฒƒ์ธ์ง€ ํ™•์ธํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

ํด๋กœ์ €(Closure)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ํ•จ์ˆ˜ ์•ˆ์— ๋˜ ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ํ•จ์ˆ˜ ์•ˆ์˜ ํ•จ์ˆ˜์ธ ๋‚ด๋ถ€ํ•จ์ˆ˜(inner function)๋Š” ์™ธ๋ถ€ํ•จ์ˆ˜(outer function)์˜ ์ง€์—ญ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. ์™ธ๋ถ€ํ•จ์ˆ˜์˜ ์‹คํ–‰์ด ๋๋‚˜์„œ ์™ธ๋ถ€ํ•จ์ˆ˜๊ฐ€ ์†Œ๋ฉธ๋œ ์ดํ›„์—๋„ ๋‚ด๋ถ€ํ•จ์ˆ˜๋Š” ์™ธ๋ถ€ํ•จ์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ํด๋กœ์ €๋ผ๊ณ  ํ•œ๋‹ค. MDN์— ํด๋กœ์ €๋ฅผ ํ™œ์šฉํ•œ ์žฌ๋ฐŒ๋Š” ์˜ˆ์ œ๊ฐ€ ์žˆ๋‹ค:

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

์—ฌ๊ธฐ์„œ makeAdder(x)๋Š” x๋ฅผ ์ธ์ž๋กœ ๋ฐ›์•„์„œ ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐ˜ํ™˜๋˜๋Š” ๋‚ด๋ถ€ ํ•จ์ˆ˜๋Š” y๋ฅผ ์ธ์ž๋กœ ๋ฐ›์•„ x + y๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. (์ฐธ๊ณ 1) (์ฐธ๊ณ 2)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ ํŒจํ„ด(Module pattern)

๋ชจ๋“ˆ ํŒจํ„ด(Module pattern)์€ ์ฝ”๋“œ ์„ค๊ณ„ ๋ฐฉ๋ฒ•์„ ๋งํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ๊ฐ์ฒด๋ฅผ public๊ณผ private์œผ๋กœ ๋‚˜๋ˆ„๋Š” ์บก์Šํ™”๊ฐ€ ํ•ต์‹ฌ์ด๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” public์ด๋‚˜ private์™€ ๊ฐ™์€ ์ ‘๊ทผ ์ œํ•œ์ž๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š์ง€๋งŒ, ํด๋กœ์ €๋ฅผ ์ด์šฉํ•ด ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. private method๋Š” ์ฝ”๋“œ ์ ‘๊ทผ์„ ์ œํ•œํ•  ์ˆ˜ ์žˆ์„๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ถ”๊ฐ€์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋‹ค๋ฅธ ์Šคํฌ๋ฆฝํŠธ์™€ ์ด๋ฆ„์ด ์ถฉ๋Œํ•˜๋Š” ๊ฒƒ์„ ๋ง‰์„ ์ˆ˜ ์žˆ๋‹ค. ๋งค์šฐ ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ•์€ ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ์ต๋ช…ํ•จ์ˆ˜ ์•ˆ์— ์ง‘์–ด๋„ฃ์–ด private ์Šค์ฝ”ํ”„๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ฝ”๋“œ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ๋ถˆํŽธํ•ด์ง€๊ธฐ ๋•Œ๋ฌธ์— ๋ณ„๋„์˜ ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ์ ์šฉํ•ด์•ผ ํ•œ๋‹ค. (์ฐธ๊ณ 1)

๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ์ฒด(Native object), ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด(Host object), Built-in ๊ฐ์ฒด

๊ฐ์ฒด๋Š” ํฌ๊ฒŒ 3๊ฐ€์ง€๋กœ ๊ตฌ๋ถ„๋œ๋‹ค. ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ์ฒด๋Š” ECMAScript ๋ช…์„ธ์— ์ •์˜๋œ ๊ฐ์ฒด๋กœ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“  ์—”์ง„์— ๊ตฌํ˜„๋œ ํ‘œ์ค€๊ฐ์ฒด์ด๋‹ค. BOM(Browser Object Model)๊ณผ DOM ๋“ฑ์€ ๋ชจ๋‘ ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ์ฒด๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ๊ตฌ๋™ํ•˜๋Š” ์ธก์—์„œ ๋นŒ๋“œ๋˜๋Š” ๊ฐ์ฒด์ด๋‹ค. ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์ •์˜ํ•œ ๊ฐ์ฒด์ด๋‹ค. ๋งˆ์ง€๋ง‰์œผ๋กœ Built-in ๊ฐ์ฒด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ธฐ๋ณธ ๊ฐ์ฒด๋“ค์„ ํฌํ•จํ•œ๋‹ค. Number, String, Array, Date ๋“ฑ์˜ ๋‚ด์žฅ๊ฐ์ฒด๋“ค์ด ์žˆ๋‹ค. (์ฐธ๊ณ )

๊ธฐ๋Šฅ ๊ฒ€์ถœ(Feature detection)๊ณผ ๊ธฐ๋Šฅ ์ถ”๋ก (Feature inference)

๊ธฐ๋Šฅ ๊ฒ€์ถœ์ด๋ž€ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ˜ธ์ถœํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ง€์›ํ•˜๋Š”์ง€ ์ฒดํฌํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. ๋‹ค์Œ์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ GPS๋ฅผ ์ง€์›ํ•˜๋Š”์ง€ ํ™•์ธํ•˜๋Š” ์ฝ”๋“œ๋‹ค.

if(navigator.geolocation) {...}

๊ธฐ๋Šฅ ์ถ”๋ก ๋„ ๊ธฐ๋Šฅ ๊ฒ€์ถœ์ฒ˜๋Ÿผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํŠน์ • ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๋Š”์ง€ ์ฒดํฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ 'A๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๋ฉด B๊ธฐ๋Šฅ๋„ ์ง€์›ํ•  ๊ฒƒ์ด๋‹ค.'๋ผ๋Š” ์ถ”๋ก ์ด ๋ฐ”ํƒ•์ด ๋œ๋‹ค. ๋ณ„๋กœ ์ข‹์ง€ ์•Š์€ ๋ฐฉ๋ฒ•์ด๋‹ค. (์ฐธ๊ณ )

ํ˜ธ์ด์ŠคํŒ…(Hoisting)

ํ˜ธ์ด์ŠคํŒ…์€ ์ธํ„ฐํ”„๋ฆฌํ„ฐ๊ฐ€ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ•ด์„ํ•  ๋•Œ, ๋ณ€์ˆ˜์˜ ์ •์˜๊ฐ€ ์Šค์ฝ”ํ”„์— ๋”ฐ๋ผ ์„ ์–ธ๊ณผ ํ• ๋‹น์œผ๋กœ ๋ถ„๋ฆฌ๋˜์–ด ์„ ์–ธ์„ ํ•ญ์ƒ ์ปจํ…์ŠคํŠธ์˜ ์ตœ์ƒ์œ„๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. ์ฆ‰, ๋ณ€์ˆ˜๋ฅผ ์–ด๋””์—์„œ ์„ ์–ธํ•˜๋“  ์ธํ„ฐํ”„๋ฆฌํ„ฐ๋Š” ์ตœ์ƒ๋‹จ์—์„œ ์„ ์–ธํ•œ ๊ฒƒ์œผ๋กœ ํ•ด์„ํ•œ๋‹ค. ์ด๋Š” ๋ณ€์ˆ˜ ๋ฟ ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜์—๋„ ์ ์šฉ๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์ƒ๋‹จ์—์„œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ , ํ•˜๋‹จ์—์„œ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•ด๋„ ๊ธฐ๋Šฅ์ ์ธ ๋ฌธ์ œ๋Š” ์—†๋‹ค. (์ฐธ๊ณ )

์ด๋ฒคํŠธ ํ๋ฆ„(Event flow)

HTML ์š”์†Œ๊ฐ€ ๋‹ค๋ฅธ ์š”์†Œ์˜ ๋‚ด๋ถ€์— ์ค‘์ฒฉ๋˜์–ด ์žˆ์„ ๋•Œ ์ž์‹ ์š”์†Œ๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ํด๋ฆญํ•œ ์…ˆ์ด ๋œ๋‹ค. ์ด์ฒ˜๋Ÿผ ์ด๋ฒคํŠธ๋Š” ํ๋ฆ„์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ์ด๊ฒƒ์„ ์ด๋ฒคํŠธ ํ๋ฆ„์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค. ์ด๋ฒคํŠธ ํ๋ฆ„์—๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ๋‹ค. ๋จผ์ € ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง(Event bubbling)์€ ์ด๋ฒคํŠธ๊ฐ€ ์ง์ ‘์ ์œผ๋กœ ๋ฐœ์ƒํ•œ ๋…ธ๋“œ๋กœ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด ๋ฐ”๊นฅ ๋…ธ๋“œ๋กœ ์ด๋ฒคํŠธ๊ฐ€ ํผ์ ธ ๋‚˜๊ฐ€๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด ๋ฐฉ์‹์„ ์ง€์›ํ•œ๋‹ค. ๋ฐ˜๋Œ€๋กœ ์ด๋ฒคํŠธ ์บก์ณ๋ง(Event capturing)์€ ๋ฐ”๊นฅ ๋…ธ๋“œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ ์•ˆ์ชฝ์œผ๋กœ ํผ์ง€๋Š” ๋ฐฉ์‹์ด๋‹ค. IE8 ํ˜น์€ ๊ทธ ์ด์ „ ๋ฒ„์ „์—์„œ๋Š” ์ง€์›๋˜์ง€ ์•Š๋Š”๋‹ค.

document load event์™€ DOMContentLoaded event

DOM์„ ์ œ์–ดํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๋Š” ๋งˆํฌ์—…์˜ ๋ชจ๋“  ์š”์†Œ์— ๋Œ€ํ•œ ์ฒ˜๋ฆฌ๊ฐ€ ๋๋‚œ ๋’ค์— ๋กœ๋“œ๋˜์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ๋ณดํ†ต <body> ํƒœ๊ทธ ์ตœํ•˜๋‹จ์—์„œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋„๋กํ•œ๋‹ค. ๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์€ ์ด๋ฒคํŠธ๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค. document load event๋Š” ํŽ˜์ด์ง€์˜ ๋ชจ๋“  ๋ฆฌ์†Œ์Šค๊ฐ€ ๋กœ๋“œ๋œ ์ดํ›„์— ์‹คํ–‰๋œ๋‹ค. ๋•Œ๋ฌธ์— ๊ตฌ๋™์ด ์ง€์—ฐ๋˜์–ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ €ํ•˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฐ˜๋ฉด DOMContentLoaded event๋Š” ์Šคํฌ๋ฆฝํŠธ ๋กœ๋“œ๋ฅผ ๋งˆ์น˜๊ณ  ์‹คํ–‰์ด ๊ฐ€๋Šฅํ•œ ์‹œ์ ์— ๋ฐ”๋กœ ์‹คํ–‰๋œ๋‹ค. (์ฐธ๊ณ )

์กฐ๊ฑด๋ถ€ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž(Conditional ternary operator)

๋ณดํ†ต ๊ทธ๋ƒฅ '์‚ผํ•ญ ์—ฐ์‚ฐ์žโ€™์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค. if๋ฌธ์„ ์ถ•์•ฝํ•ด์„œ ์“ธ ์ˆ˜ ์žˆ๋Š” ์œ ์šฉํ•œ ์—ฐ์‚ฐ์ž์ด์ง€๋งŒ, ๊ณผํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋–จ์–ด๋œจ๋ฆด ์ˆ˜ ์žˆ๋‹ค.

var a = 1, b = 2;

console.log(a < b ? "True" : "False"); // "True"
console.log(a > b ? "True" : "False"); // "False"

a < b ? (
  console.log("True");
  alert("True");
) : (
  console.log("False");
  alert("False");
); // "True"

์กฐ๊ฑด์ด true๋ฉด ์ „์ž์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ณ , false๋ฉด ํ›„์ž์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

use strict

ES6์—์„œ ์ƒˆ๋กœ ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ์œผ๋กœ, ์Šคํฌ๋ฆฝํŠธ์— "use strict;" ๊ตฌ๋ฌธ์„ ์ถ”๊ฐ€ํ•˜๋ฉด strict mode์—์„œ ์‹คํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค. strict mode๋Š” ์ฝ”๋”ฉ ์‹ค์ˆ˜๋ฅผ ์ฐพ์•„ ์˜ˆ์™ธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ณ , ์ „์—ญ ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ์œ„ํ—˜ํ•œ ์•ก์…˜์„ ๋ง‰๋Š”๋‹ค. ์Šคํฌ๋ฆฝํŠธ ์ „์ฒด์— ์ ์šฉํ•  ์ˆ˜๋„ ์žˆ๊ณ  ํŠน์ • ํ•จ์ˆ˜์—๋งŒ ์ ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค. (์ฐธ๊ณ )

Call stack๊ณผ Task queue

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์š”์ฒญ์ด ๋“ค์–ด์˜ฌ ๋•Œ๋งˆ๋‹ค ์š”์ฒญ์„ ์ˆœ์ฐจ์ ์œผ๋กœ call stack์— ๋‹ด์•„ ํ•˜๋‚˜์”ฉ ์ฒ˜๋ฆฌํ•œ๋‹ค. call stack์€ ํ•˜๋‚˜๋งŒ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์š”์ฒญ๋„ ํ•˜๋‚˜์”ฉ๋งŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ๋ฐ–์— ์—†๋‹ค. task queue๋Š” ์ฒ˜๋ฆฌํ•ด์•ผ ํ•˜๋Š” task๋ฅผ ์ž„์‹œ๋กœ ์ €์žฅํ•ด๋‘๋Š” ํ๋‹ค. call stack์ด ๋น„์›Œ์ง€๋ฉด task queue์— ์žˆ๋˜ task๋“ค์ด ์ˆœ์„œ๋Œ€๋กœ call stack์— push๋œ๋‹ค. ๊ฐ€๋ น setTimeout() ํ•จ์ˆ˜๋กœ 10์ดˆ์˜ ๋”œ๋ ˆ์ด๋ฅผ ๋‘”๋‹ค๋ฉด, ๊ทธ๋™์•ˆ setTimeout()์ด ์ฒ˜๋ฆฌํ•  task๋Š” task queue์— ์Œ“์ด๊ณ  ๋‹ค๋ฅธ ๋ถ€๋ถ„์˜ ์Šคํฌ๋ฆฝํŠธ๋“ค์ด ์‹คํ–‰๋œ๋‹ค. ๋”ฐ๋ผ์„œ ๋”œ๋ ˆ์ด๋ฅผ 0์œผ๋กœ ์ค˜๋„ setTimeout()์˜ task๋Š” ๋‹ค๋ฅธ ๊ฒƒ๋“ค๋ณด๋‹ค ๋‚˜์ค‘์— ์ฒ˜๋ฆฌ๋œ๋‹ค. (์ฐธ๊ณ )

๏ผœ

ES6์™€ ํ•จ๊ป˜ JavaScript๋กœ OOPํ•˜๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ OOP๋Š” ์ง„์ •ํ•œ OOP๊ฐ€ ์•„๋‹Œ๊ฐ€?

๐Ÿ“š