[๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ปTA9 ์ธํ„ด 37์ผ์ฐจ]vue- ๋ผ์ดํ”„์‚ฌ์ดํด, style์†์„ฑ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ, FileReader, URL.createObjectURL()

Goofiยท2023๋…„ 8์›” 23์ผ
0

๋ผ์ดํ”„์‚ฌ์ดํด


์ปดํฌ๋„ŒํŠธ๋Š” ์œ„์— step์œผ๋กœ ์ƒ์„ฑ๋˜๊ณ  ์‚ฌ๋ผ์ง€๊ณ  ์—…๋ฐ์ดํŠธ ๋œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

  1. ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ค„ ๋•Œ create -> mount ๋‹จ๊ณ„๋กœ ์ƒ์„ฑ๋œ๋‹ค.
    • create : ๋ฐ์ดํ„ฐ์ƒ์„ฑ
    • mount : index.html ํŒŒ์ผ์— ์žฅ์ฐฉ
  2. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌ๋ Œ๋”๋ง๋  ๋•Œ update๋‹จ๊ณ„
  3. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ญ์ œ๋  ๋•Œ unmount ๋‹จ๊ณ„

์œ„ ๋‹จ๊ณ„๋“ค์— ์ค‘๊ฐ„์ค‘๊ฐ„์— ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด lifecycle hook์„ ๊ณจ๋ผ์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()

์‚ฌ์šฉ๋ฒ•

script์•ˆ์—๋‹ค ์‚ฌ์šฉํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

data(){
	return{
    
    }
},
mounted(){
	์ž‘์„ฑ์ฝ”๋“œ
}

mount๊ฐ€ ๋˜๊ณ  ๋‚˜์„œ ์ž‘์„ฑ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•ด์ค€๋‹ค.

style์†์„ฑ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ

style=""์— object ๋ฐ์ดํ„ฐ ํ˜•ํƒœ์˜ ์—ฌ๋Ÿฌ๊ฐ€์ง€ CSS ์†์„ฑ์„ ์ง‘์–ด๋„ฃ์„ ์ˆ˜ ์žˆ๋‹ค.

<div :style="{fontSize}"

CSS์†์„ฑ ๋ช…์€ '-' ๋Œ€์‹œ๊ธฐํ˜ธ๋ฅผ ์“ธ ์ˆ˜ ์—†๋‹ค.
CamelCase๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.

๋ฐ์ดํ„ฐ์ƒํƒœ์— ๋”ฐ๋ผ์„œ ์Šคํƒ€์ผ ๋ณ€ํ™”๊ฐ€ ํ•„์š”ํ• ๋•Œ

<div class="post-body" :style=`{ backgroundImage : '${url(์ด๋ฏธ์ง€๊ฒฝ๋กœ)}' }`</div>

FileReader

์ด๋ฏธ์ง€๋ฅผ ๊ธ€์ž๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

URL.createObjectURL()

์ด๋ฏธ์ง€ URL์„ ์ผ์‹œ์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ค€๋‹ค.(์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๋ฉด ์‚ฌ๋ผ์ง„๋‹ค.)
์ฆ‰, ๊ฐ€์ƒ์œผ๋กœ ํ˜ธ์ŠคํŒ… ํ•ด์ค€๋‹ค๊ณ  ๋ณด๋ฉด๋œ๋‹ค.

profile
์˜ค๋Š˜๋ณด๋‹จ ๋‚ด์ผ์ด ๊ฐ•ํ•œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค!!๐Ÿง‘๐Ÿปโ€๐Ÿ’ป

0๊ฐœ์˜ ๋Œ“๊ธ€

Powered by GraphCDN, the GraphQL CDN