Composition api 1

[Vue, canvas] Vue.js์—์„œ Canvas ์‚ฌ์šฉํ•˜๊ธฐ

Canvas? ํ•„์ž๋Š” ์œ ํŠœ๋ธŒ์—์„œ Interactive Developer๋กœ ํ™œ๋™ํ•˜์‹œ๋Š” ๊น€์ข…๋ฏผ๋‹˜์˜ ์ž‘ํ’ˆ์„ ๋ณด๋ฉด์„œ ํ”„๋ก ํŠธ์˜ canvas ๊ธฐ๋Šฅ์˜ ์กด์žฌ๋ฅผ ์ฒ˜์Œ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ”„๋ก ํŠธ์˜ ๋งค๋ ฅ์„ ๋Š๊ปด ์ง€๊ธˆ๊นŒ์ง€ ํ”„๋ก ํŠธ๊ฐœ๋ฐœ์„ ์ญ‰ ํ•ด์˜ค๊ณ ์žˆ๋Š”๋ฐ, ์•„์ด๋Ÿฌ๋‹ˆํ•˜๊ฒŒ๋„ ์ •์ž‘ canvas๋Š” ์ž์ฃผ ๋‹ค๋ฃฐ ์ผ์ด ์—†์—ˆ๋‹ค. ํ”„๋ก ํŠธ๋ฅผ ์‹œ์ž‘ํ•œ์ง€ 1๋…„์ด ๋‹ค ๋˜์–ด๊ฐ€๋Š” ์ตœ๊ทผ์—์•ผ ๋‹ค์‹œ vanilla js๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ canvas๋ฅผ ๋งŒ์ ธ๋ณด๋Š” ์ค‘์ด๋‹ค. ํ•˜์ง€๋งŒ ์–ธ์ œ๊นŒ์ง€ vanilla์—์„œ๋งŒ ๋†€๊ฒƒ์ธ๊ฐ€. ํ˜„์žฌ ์ง„ํ–‰์ค‘์ธ [๊ฐœ์ธ ๋ธ”๋กœ๊ทธ ์ œ์ž‘] ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋Š” ๊น€์— canvas๋ฅผ vue์—์„œ ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ํ‹€์„ ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ๋‹ค. ์ž, ์ด์ œ ๋‚ด๊ฐ€ ๊ตฌํ˜„ํ•œ ์ฝ”๋“œ๋“ค์„ ์‚ดํŽด๋ณด์ž. Nuxt.js / Vue2 Composition-api๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. (๐Ÿšถ‍โ™€๏ธ ์•„์ง canvas์—..

Programming/Vue.js 2021.10.30