๐จ๐ป web.dev/fe25 rAF ํ๋ ์ ๋น์จ ์กฐ์ ํ๊ธฐ ๐ requestAnimationFrame์ ์ด๋น ํ๋ ์ ์กฐ์ ํ๊ธฐ requestAnimationFrame(์ดํ rAF) ์ ์ด์ฉํด์ JavaScript ์ ๋๋ฉ์ด์ ์ ๊ตฌํํ๋๋ฐ, ์ฑ๋ฅ์์ ์ด์ ๋ก ์ด๋น ํ๋ ์(FPS) ์ ์กฐ์ ํด์ผ ํ๋ ์ํฉ์ด ์๊ฒผ์ต๋๋ค. ๋ค๋ฅธ ํ์ด๋จธ ํจ์๋ค(setInterval, setTimeout)์ ์ฌ์ฉํ์ง ์๊ณ rAF ์์ ์ด๋น ํ๋ ์์ ์กฐ์ ํ๋ ๋ฐฉ๋ฒ์ ๊ตฌํํด ๋ดค์ต๋๋ค. animation tick ๊ฐ๋จํ๊ฒ FPS ์ ๋ํด์ ์์๋ณด๊ณ ์ํ๋ FPS ๋ฅผ ์ํ tick ์ ๊ตฌํด๋ด ์๋ค. const tick = 1000 / fps 1์ด๋น 60 ํ๋ ์์ ์ํ๋ค๋ฉด 1000 / 60 = 16.6ms ๋ง๋ค ํ๋์ ํ๋ ์์ ๊ทธ๋ ค์ผ ํจ์ ์๋ฏธํฉ๋๋ค. ์ฌ๊ธฐ์ ๋ชฉํํ ํ๋ ์ ๋น์จ์ ์ํด์ ํ๋์ ํ๋ ์์ ๊ทธ.. 2024. 1. 30. point-in-polygon ์๊ณ ๋ฆฌ์ฆ์ผ๋ก ๊ตญ๋ด์ธ ํ๋จํ๊ธฐ ํธ๋ฆฌํ ์น ์ผ์ ํ์ ๊ฐ๋ฐํ๋ฉด์ ํน์ ์๊ฒฝ๋ ์ขํ ์ง์ ์ด ๊ตญ๋ด์ธ์ง ํด์ธ์ธ์ง ํ๋จํ๋ ๋ฐฉ๋ฒ์ด ํ์ํ์ต๋๋ค. ๊ตฌ๊ธ ์ง๋ API์์ ์ ๊ณตํ๋ reverse geocoding๊ฐ์ ๋ฐฉ๋ฒ์ ํตํด ํด๊ฒฐํ ์๋ ์์ง๋ง, ์ถ๊ฐ์ ์ธ API ์ฌ์ฉ์ ์ํด ๋น์ฉ์ ์ง๋ถํ๋ ๋์ ์ํ์ ์ผ๋ก ๊ฐ๋ณ๊ฒ ์ฒ๋ฆฌํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ฐพ์๋ดค์ต๋๋ค. ๐ Point-In-Polygon ์๊ณ ๋ฆฌ์ฆ ๋ค๊ฐํ์ ๊ต์ ์ ์ด์ฉํด์ ํ๋จํ๊ธฐ ์์ ๊ฐ์ ๋ค๊ฐํ์์ ๋ถ์ ์ ์ A ๋ผ๊ณ ํ๊ฒ ์ต๋๋ค. ์ด๋ ์ขํ A ๊ฐ ๋ค๊ฐํ ์์ ์กด์ฌํ๋์ง ํ๋จํ๊ธฐ ์ํด์๋ ํด๋น ์ง์ ์ ๊ธฐ์ค์ผ๋ก ์ํ์ ์ ๊ทธ์ด์ ๊ต์ฐจ๋๋ ๋ณ์ ๊ฐ์๋ฅผ ์ธ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. ๋ฐฉํฅ์ ์๊ด์๊ณ , ํ์ชฝ์ผ๋ก๋ง ๊ทธ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. ์ด๋ ๊ต์ฐจ๋๋ ์ง์ ์ node ๋ผ๊ณ ํํํ๊ฒ ์ต๋๋ค. ๋ง์ฝ node ์ ๊ฐ์๊ฐ ํ์๋ผ๋ฉด ๋ค๊ฐ.. 2024. 1. 30. Vanilla JS ๋ก FigJam ์น์ฑ ๋ง๋ค๊ธฐ ์ด๋ฒ ํฌ์คํธ์์๋ ์๋ ์ด์ 4๊ฐ์ ์ ๋ ํด๊ทผํ๊ณ ์งฌ ๋ด์ ๋ง๋ PWA ์น์ฑ ๊ฐ๋ฐ ๊ณผ์ ์ ๋ํด ์๊ฐํด๋ณผ๊น ํฉ๋๋ค. (๊ฐ์ธ notion์ ์ ๋ฆฌํด๋๊ณ ์ ๋ก๋๊ฐ ๋๋ฌด ๋ฆ์๋ค์ ๐) ํด๋น ๋ด์ฉ์ผ๋ก ๊ฒธ์ฌ๊ฒธ์ฌ ์ฌ๋ด ์ํด๋ฆฌ ๋ฐํ๋ ์งํํ์ต๋๋ค. ํ๋ก์ ํธ GitHub ์ ์ฅ์๋ ์ฌ๊ธฐ์ ํ์ธํ์ค ์ ์์ต๋๋ค. https://github.com/sohnjunior/editty GitHub - sohnjunior/editty: ๐ง๐จ๐ฆ Sketch with vanilla web app ๐ง๐จ๐ฆ Sketch with vanilla web app. Contribute to sohnjunior/editty development by creating an account on GitHub. github.com ๐ ๋ค์ด๊ฐ๋ฉฐ 2022๋ ๋.. 2024. 1. 23. Canvas ๋ํ ํ์ ์ ์๋ฆฌ์ ๊ตฌํ ๋ฐฉ๋ฒ ๐ ์ด๋ฏธ์ง ํ์ ๊ธฐ๋ฅ ์ถ๊ฐํ๊ธฐ ์ฌ์ด๋ ํ๋ก์ ํธ์์ ์บ๋ฒ์ค์ ๊ทธ๋ ค์ง ์ด๋ฏธ์ง ํ์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ ค๊ณ ํฉ๋๋ค. canvas ์์ ๊ฐ์ฒด์ ์ ๊ณตํด์ฃผ๋ rotate API ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐํธํ๊ฒ ๊ตฌํํ ์ ์๋๋ฐ์. ํ์ต๋ ํด๋ณผ ๊ฒธ ์ด๋ฏธ์ง ๋ฐ์ด๋๋ฆฌ ์์ญ์ ๋ํ ํ์ ์ฐ์ฐ์ ์ง์ ๊ตฌํํด๋ณด๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค. ์ง๊ธ๋ถํฐ ํ๋์ฉ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ๐ ๋ฐ์นด๋ฅดํธ ํ๋ฉด์ขํ์์ ํ์ ํ๊ธฐ ์ด๋ฏธ์ง ์ ์ด์์ญ์ ๋ํ ๊ฐ๋ตํ ์ค๋ช ์ฌ๊ธฐ์ ์ ์ด์์ญ ์ ์ด๋ฏธ์ง ํ ๋๋ฆฌ๋ฅผ ๋๋ฌ์ผ ์์ญ์ ์๋ฏธํฉ๋๋ค. ํฌ์ปค์ฑ๋๋ฉด ๋ํ๋๋ฉฐ ์ด๋ฏธ์ง๋ฅผ ์ญ์ , ํ์ , ๋ฆฌ์ฌ์ด์ฆ ํ ์ ์๋ ์ต์ปค๋ฅผ ํฌํจํ๊ณ ์์ต๋๋ค. ์ด ์ ์ด์์ญ์ ์บ๋ฒ์ค์ ํฐ์น ์ด๋ฒคํธ๋ฅผ ๋ฐ์ point ๊ฐ์ ๋ฐํ์ผ๋ก ์ ํ๋ ์ต์ปคํ์ ์ ๊ตฌ๋ถํ๊ณ ์์ต๋๋ค. ๋ชจ๋ ์บ๋ฒ์ค ๊ฐ์ฒด๋ค์ path ์ ๋ณด๋ฅผ ํฌํจํ๋ฉฐ, isPoi.. 2023. 8. 29. Storybook useArgs ํ์ฉํ๊ธฐ ๐ ์์ ์ดํด๋ณด๊ธฐ ์คํ ๋ฆฌ๋ถ์ ์ฌ์ฉํ๋ค๋ณด๋ฉด control prop์ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ๋๊ธฐํ์ํค๊ณ ์ถ์ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. ์์๋ฅผ ์ํด ์ง๋ ์ปดํฌ๋ํธ๊ฐ ์๊ณ , ๋ง์ปค ํด๋ฆญ ์ ํ์ฑํ๋๋ ๋ง์ปค ID ๊ฐ ๋ณ๊ฒฝ๋๋ค๊ณ ํ๊ฒ ์ต๋๋ค. ์ด ์ปดํฌ๋ํธ๋ ๋ค์๊ณผ ๊ฐ์ ์คํ ๋ฆฌ๋ฅผ ๊ฐ์ง ๊ฒ์ ๋๋ค. import { Map } from './map' const meta = { component: Map } export default meta const mock = [ { id: '1', poi: {/** some data */} }, { id: '2', poi: {/** some data */} }, { id: '3', poi: {/** some data */} }, // ... ] const options = mock.map((opti.. 2023. 8. 28. Web Component์ ํจ๊ป ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ ๐ Web Component ๋? web component๋ HTML/CSS/JS๋ฅผ ์ด์ฉํ์ฌ ์ฌ์ฌ์ฉ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์๋ ํ์ค ๋ฐฉ์์ ๋๋ค. ๋์จ ์ง๋ ๊ฝค ์ค๋๋ ๊ธฐ์ ์ด์ง๋ง, ์ง์ ์จ๋ณด์ง ์๋ ์ด์ ์ ํด๋ณผ ๊ธฐํ๊ฐ ๋ง์ง ์์์ ์ด๋ฒ ๊ธฐํ์ ์ฌ์ด๋ ํ๋ก์ ํธ์ ์ ์ฉํด ๋ณผ ๊ฒธ ๊ด๋ จ ์คํ์ ์ฐพ์๋ณด๊ณ ์ ๋ฆฌํด ๋ดค์ต๋๋ค. ๐ web component ํบ์๋ณด๊ธฐ ์น ์ปดํฌ๋ํธ๋ ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ๊ณผ ์บก์ํ๋ฅผ ์ํด์ Custom Element , Shadow DOM , HTML template ์ ์ฌ์ฉํฉ๋๋ค. 1๏ธโฃ custom element API ์น ํ์ค์ custom element ๋ผ๋ JavaScript API๋ฅผ ํตํด ์ง์ HTML ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ํ์ค์์๋ Autonomous custom ์ Cu.. 2023. 8. 25. ์ด์ 1 2 3 4 5 ๋ค์