dev/javascript 2

web component API ์‚ฌ์šฉ๊ธฐ (1) _๊ทธ๊ฒŒ ๋ญ”๋ฐ?

์•„์ฃผ ๋ฐ”์œ ๋‚˜๋‚ ์„ ๋ณด๋‚ด๊ณ  ์žˆ๋‹ค. ์•„์ฃผ์•„์ฃผ ๋ฐ”์˜๊ณ  ๋นก์„ธ์ง€๋งŒ ๋˜ ๊ทธ๋งŒํผ ์—„์ฒญ๋‚œ ์„ฑ์ทจ๊ฐ๊ณผ ์žฌ๋ฏธ๋กœ ๊ฐ€๋“์ฐฌ ํ•˜๋ฃจ๋“ค์ด๋‹ค! ์šฐ์•„ํ•œํ…Œํฌ์บ ํ”„ 2์ฃผ์ฐจ ๋ฏธ์…˜์€ vanilla js ์œผ๋กœ 'ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ ๊ตฌํ˜„ํ•˜๊ธฐ' ์˜€๋‹ค. ( ์šฐ๋ฆฌ๊ฐ€ ๊ฐ€๋ณ๊ฒŒ ์ƒ๊ฐํ•˜๋Š” ๊ทธ ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ(?)๊ฐ€ ์•„๋‹Œ ํŠธ๋ ๋กœ, ์ง€๋ผ ๋“ฑ ํ˜‘์—… ๋„๊ตฌ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์นธ๋ฐ˜ ๋ณด๋“œ ํ˜•ํƒœ์˜ ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ ์˜€๋‹ค ใ…Žใ…Ž..๐Ÿ™„ ) ์šฐ๋ฆฌ ํŒ€์€ ํ”„๋กœ์ ํŠธ์— web component๋ฅผ ๋„์ž…ํ•˜์˜€๊ณ , ์ด ๊ฒฝํ—˜์€ ์šฐ๋ฆฌ์—๊ฒŒ ์ƒˆ๋กœ์šด ๋„์ „์ด์˜€๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ ๊ณผ์ •์—์„œ ๊ฒช์—ˆ๋˜ ๋ฌธ์ œ๋“ค๊ณผ ๋ฐฐ์šด์ ๋“ค์„ ๊ธฐ๋กํ•˜๊ณ ์ž ํ•œ๋‹ค. web component ๋ž€? ์›น ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์ฝ”๋“œ์˜ ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„์—์„œ ์บก์Аํ™”๋œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์‚ฌ์šฉ์ž ์ง€์ • ์š”์†Œ๋ฅผ ๋งŒ๋“ค๊ณ  ์›น ์•ฑ์—์„œ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋‹ค์–‘ํ•œ ๊ธฐ์ˆ  ๋ชจ์Œ - mdn mdn ..

dev/javascript 2022.07.17

[ JS ] ๊ฐ์ฒด ์กฐํšŒ ๋ฐฉ๋ฒ• Dot notation vs Square-Bracket notation

๊ฐ์ฒด์—์„  key๋ฅผ ์ด์šฉํ•ด ํ”„๋กœํผํ‹ฐ๋ฅผ ์‰ฝ๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ๋Š”๋ฐ, ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. Dot notation ( ์  ํ‘œ๊ธฐ๋ฒ• )๊ณผ Square-Bracket notation( ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ• ) ์  ํ‘œ๊ธฐ๋ฒ• const user = { name : '๋นŒ๋ผ๊ฐฑ', gender: '๐Ÿšบ', 'favorite food' : '๐Ÿ•' //๋ณต์ˆ˜์˜ ๋‹จ์–ด๋Š” ๋”ฐ์˜ดํ‘œ๋กœ ๋ฌถ์–ด์ค˜์•ผ ํ•จ } alert(user.name) // ๋นŒ๋ผ๊ฐฑ ์œ„์™€ ๊ฐ™์ด ์  ํ‘œ๊ธฐ๋ฒ•์„ ์ด์šฉํ•ด์„œ name์ด๋ผ๋Š” key๋กœ ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฝ์–ด์™”๋‹ค. ํ•˜์ง€๋งŒ 'favorite food'์™€ ๊ฐ™์ด ์—ฌ๋Ÿฌ ๋‹จ์–ด๋ฅผ ์กฐํ•ฉํ•ด ํ”„๋กœํผํ‹ฐ key๋ฅผ ๋งŒ๋“  ๊ฒฝ์šฐ ์  ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฝ์„ ์ˆ˜ ์—†๋‹ค. user.favorite food = '๐Ÿ—' //โŽ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ๋‹ค..

dev/javascript 2022.04.22