๋Ÿฌ์ŠคํŠธ (๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ์–ธ์–ด)์—์„œ ์›น์–ด์…ˆ๋ธ”๋ฆฌ๋ฅผ ๋” ์ข‹๊ฒŒ๋งŒ๋“ค๊ธฐ

๋Ÿฌ์ŠคํŠธ (๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ์–ธ์–ด)์—์„œ ์›น์–ด์…ˆ๋ธ”๋ฆฌ๋ฅผ ๋” ์ข‹๊ฒŒ๋งŒ๋“ค๊ธฐ

2018๋…„ ์›น ์–ธ์–ด๋ฅผ ๋ชฉํ‘œ๋กœํ•˜๋Š” ๋Ÿฌ์ŠคํŠธ ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” ์ด๋ฅผ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ๋…ธ๋ ฅ์„ ํ•˜๊ณ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ์‹คํ˜„์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋Ÿฌ์ŠคํŠธ๋กœ ์ž‘์„ฑํ•œ ์›น ์–ด์…ˆ๋ธ”๋ฆฌ ๋„๊ตฌ๋“ค์„ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๊ณ , npm ๋ชจ๋“ˆ๋กœ ํŒจํ‚ค์ง• ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ES ๋ชจ๋“ˆ๊ณผ์˜ ํ˜ธํ™˜๊นŒ์ง€. wasm-bindgen, wasm-pack ์ด ์–ด๋–ค ์›๋ฆฌ๋กœ ๋ฌด์Šจ ์ผ์„ ํ•ด์ฃผ๊ณ  ์žˆ๋Š”์ง€ ์•Œ์•„๋ณธ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋Ÿฌํ•œ ๋…ธ๋ ฅ๋“ค์€ ๋Ÿฌ์ŠคํŠธ ์ด์™ธ์˜ ์–ธ์–ด๊นŒ์ง€ ์ง€์›ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ€๋Šฅ์„ฑ์„ ๋„“ํ˜€์ฃผ๊ณ  ์žˆ๋‹ค.

ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น์•ฑ ์„ฑ๋Šฅ์— ๋Œ€ํ•œ ๋ฆฌ์—‘ํŠธ, ํ”„๋ฆฌ์—‘ํŠธ ์ผ€์ด์Šค ์Šคํ„ฐ๋”” : Treebo

ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น์•ฑ ์„ฑ๋Šฅ์— ๋Œ€ํ•œ ๋ฆฌ์—‘ํŠธ, ํ”„๋ฆฌ์—‘ํŠธ ์ผ€์ด์Šค ์Šคํ„ฐ๋”” : Treebo

ํ”„๋ก ํŠธ์—”๋“œ ๋ฆฌ์—‘ํŠธ ์„ฑ๋Šฅ ์ผ€์ด์Šค ์Šคํ„ฐ๋””. Treebo๋Š” ์žฅ๊ณ ๋กœ ๋งŒ๋“ค์–ด์ ธ ์žˆ๋˜ ๊ธฐ์กด ๋ชจ๋ฐ”์ผ ์‚ฌ์ดํŠธ์˜ ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๋ฉฐ ์–ป์€ ๊ฒฝํ—˜์„ ์ผ€์ด์Šค ์Šคํ„ฐ๋””๋กœ ๊ณต์œ ํ•œ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ์˜ ์„ฑ๋Šฅ ๊ฐ์‚ฌ ํฌ์ธํŠธ๋กœ First Meaningful Paint, First Interactive, Consistenly Interactive ๋“ฑ์„ ๊ธฐ์ค€์œผ๋กœ, ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง, ์ฝ”๋“œ ๋ถ„ํ• , HTML ์ŠคํŠธ๋ฆฌ๋ฐ, ์Šคํƒ€์ผ ์ธ๋ผ์ด๋‹ ๋“ฑ์˜ ์ ์šฉ์ด ์–ด๋–ป๊ฒŒ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š”์ง€ ์•Œ์•„๋ณธ๋‹ค.

์›น ์ปดํฌ๋„ŒํŠธ(5)โ€Šโ€”โ€Šlit-html๋กœ ๋ฆฌ์—‘ํŠธ์ฒ˜๋Ÿผ ์ฝ”๋”ฉํ•˜๊ธฐ

์›น ์ปดํฌ๋„ŒํŠธ(5)โ€Šโ€”โ€Šlit-html๋กœ ๋ฆฌ์—‘ํŠธ์ฒ˜๋Ÿผ ์ฝ”๋”ฉํ•˜๊ธฐ

์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ์™€ ์‰๋„์šฐ ๋” ๊ทธ๋ฆฌ๊ณ  lit-html์„ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์ปดํฌ๋„ŒํŠธ TODO์•ฑ์„ ๋งŒ๋“ค์–ด ๋ณธ๋‹ค. ์ด ๋ฐฉ์‹์œผ๋กœ ์—ฌ๋Ÿฌ๋ถ„์€ ์ต์ˆ™ํ•œ ๋ฆฌ์—‘ํŠธ์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์›น ์ปดํฌ๋„ŒํŠธ ์•ฑ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. lit-html์€ ๋‹จ์ง€ 25kb๋ฅผ ์ฐจ์ง€ํ•  ๋ฟ์ด๋ฉฐ, ๋ชจ๋“  ์ฝ”๋“œ๋Š” #useThePlatform์˜ ๋ชจํ† ๋ฅผ ๋”ฐ๋ผ ๋ธŒ๋ผ์šฐ์ € ํ‘œ์ค€์„ ๋”ฐ๋ฅธ๋‹ค.

์›น ์ปดํฌ๋„ŒํŠธ(4)โ€Šโ€”โ€Šํ…œํ”Œ๋ฆฟ ์—˜๋ฆฌ๋จผํŠธ(Template Element)์™€ HTML Imports

์›น ์ปดํฌ๋„ŒํŠธ(4)โ€Šโ€”โ€Šํ…œํ”Œ๋ฆฟ ์—˜๋ฆฌ๋จผํŠธ(Template Element)์™€ HTML Imports

์›น ์ปดํฌ๋„ŒํŠธ์˜ ํ‘œ์ค€์œผ๋กœ์„œ ํ…œํ”Œ๋ฆฟ ์—˜๋ฆฌ๋จผํŠธ(Template Element)์™€ HTML Import๊ฐ€ ํ•„์š”ํ•œ ์ด์œ , ๊ทธ๋ฆฌ๊ณ  ์ด ๋‘ ํ‘œ์ค€์ด ์–ด๋ ค์›€์„ ๊ฒช๊ณ  ์žˆ๋Š” ์‚ฌ์—ฐ. ์ด์— ์ƒˆ๋กœ์ด ๋Œ€๋‘๋˜๊ณ  ์žˆ๋Š” ES6 ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์ด์šฉํ•œ ์†”๋ฃจ์…˜์„ ์†Œ๊ฐœํ•œ๋‹ค. ์ด ์ด์•ผ๊ธฐ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML ํ…œํ”Œ๋ฆฟ์˜ ๋ณ€ํ™”๋กœ ์ด์•ผ๊ธฐํ•œ๋‹ค.

์›น ์ปดํฌ๋„ŒํŠธ(3)โ€Šโ€”โ€Š์‰๋„์šฐ ๋”(#Shadow DOM)

์›น ์ปดํฌ๋„ŒํŠธ(3)โ€Šโ€”โ€Š์‰๋„์šฐ ๋”(#Shadow DOM)

์›น ์ปดํฌ๋„ŒํŠธ ํ‘œ์ค€ ์ค‘ ํ•˜๋‚˜์ธ ์‰๋„์šฐ ๋”์— ๋Œ€ํ•œ ํŠœํ† ๋ฆฌ์–ผ. ์‰๋„์šฐ ๋”์— ๋Œ€ํ•œ ์‚ฌ์šฉ๋ฒ•๊ณผ, ์™œ ์ด๊ฒƒ์ด ์œ ์šฉํ•œ์ง€ ์•Œ์•„๋ณธ๋‹ค. ๋” ๋‚˜์•„๊ฐ€ ์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ์™€ ํ•จ๊ป˜ DOM์„ OOP(Object-Oriented Programming)์œผ๋กœ์„œ์˜ ๊ฐ€๋Šฅ์„ฑ์„ ์ œ์•ˆํ•œ๋‹ค.