์›น ์ปดํฌ๋„ŒํŠธ(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)์œผ๋กœ์„œ์˜ ๊ฐ€๋Šฅ์„ฑ์„ ์ œ์•ˆํ•œ๋‹ค.

์›น ์ปดํฌ๋„ŒํŠธ(2)โ€Šโ€”โ€Š์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ(Custom Element)

์›น ์ปดํฌ๋„ŒํŠธ(2)โ€Šโ€”โ€Š์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ(Custom Element)

์šฐ๋ฆฌ๋Š” DOM์„ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค. ๋งˆ์น˜ DOM์œผ๋กœ ์ด๋ฃจ์–ด์ง„ ๋งˆ๋ฆฌ์˜ค๋„คํŠธ ์ธํ˜•์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์กฐ์ž‘ํ•˜๋“ฏ ๋ง์ด๋‹ค. ์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค. ์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ๋Š” ์—˜๋ฆฌ๋จผํŠธ์— ์˜๋ฏธ์žˆ๋Š” ์ด๋ฆ„์„ ๋ถ€์—ฌํ•˜๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์—˜๋ฆฌ๋จผํŠธ์˜ ์ž์—ฐ์Šค๋Ÿฌ์šด ํ†ตํ•ฉ ๋ฐฉ๋ฒ•์ด๋‹ค.

์›น ์ปดํฌ๋„ŒํŠธ(1)โ€Šโ€”โ€ŠKeep calm and #UseThePlatform

์›น ์ปดํฌ๋„ŒํŠธ(1)โ€Šโ€”โ€ŠKeep calm and #UseThePlatform

์•ต๊ทค๋Ÿฌ, ๋ฆฌ์—‘ํŠธ, ๋ทฐ, ์— ๋ฒ„... ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์ด ์Ÿ์•„์ง€๊ณ  ์žˆ๋‹ค. ์ด ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์€ ํšจ์šฉ์„ ์ฃผ๊ธฐ๋„ ํ•˜์ง€๋งŒ, ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ ๋ฌด๊ฒ๊ฒŒ ๋งŒ๋“ค๊ธฐ๋„ ํ•œ๋‹ค. ๊ตฌ๊ธ€์€ #UseThePlatform์ด๋ผ๋Š” ๊ตฌํ˜ธ๋กœ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ์“ฐ์ง€ ๋ง๊ณ , ๋ธŒ๋ผ์šฐ์ € ์ž์ฒด๋ฅผ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ์„œ ์“ฐ์ž๋Š” ์ œ์•ˆ์„ ํ•œ๋‹ค. ์›น ์ปดํฌ๋„ŒํŠธ์™€ ํ•จ๊ป˜!