Popmotion JS
๋ฎ์ ์์ค์ ๊ตฌ์ฑ ๊ฐ๋ฅํ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ํคํ๋ ์, ์คํ๋ง ๋ฐ ๊ด์ฑ ์ ๋๋ฉ์ด์ ์ ์์ฑํ๊ธฐ ์ํ JavaScript ์ ๋๋ฉ์ด์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
๊ฐ์
Popmotion JS์ด๋?
Popmotion JS๋ ์ ๋๋ฉ์ดํฐ๋ฅผ ์ํ JavaScript ๋๊ตฌ ์์๋ก, ์ซ์, ์์ ๋ฐ ๋ณต์กํ ๋ฌธ์์ด์ ๋ํ ํคํ๋ ์, ์คํ๋ง ๋ฐ ๊ด์ฑ ์ ๋๋ฉ์ด์ ์ ํฌํจํ ๊ฐ๋ ฅํ ์ ๋๋ฉ์ด์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ Framer Motion์ ๊ธฐ๋ฐ์ผ๋ก ์ฌ์ฉ๋๋ ๋์ ํ ์คํธ ์ ์ฉ ๋ฒ์๋ฅผ ๊ฐ์ถ TypeScript๋ก ์์ฑ๋ ํ์ ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
Popmotion JS์ ๋ฌด์์ ์ฌ์ฉ๋๋์?
ํ๊ทธ

์ฃผ์ ๊ธฐ๋ฅ
- ํคํ๋ ์, ์คํ๋ง ๋ฐ ๊ด์ฑ ์ ๋๋ฉ์ด์ ์ง์
- ๋ฎ์ ์์ค์ ๊ตฌ์ฑ ๊ฐ๋ฅํ ํจ์
- 95% ์ด์์ ํ ์คํธ ์ ์ฉ ๋ฒ์๋ฅผ ๊ฐ์ถ TypeScript๋ก ์์ฑ๋จ
- ์์ ํฌ๊ธฐ(์ ๋๋ฉ์ด์ ๊ธฐ๋ฅ <5kb)
- ๊ฐ๋ณ ์ ํธ๋ฆฌํฐ ์์
Popmotion JS ์ฌ์ฉ ๋ฐฉ๋ฒ์?
npm์ ํตํด ์ค์นํ๊ณ , ์ ๋๋ฉ์ด์ ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ๊ฐ์ ธ์ค๊ณ , ์์, ๋, ์ง์ ์๊ฐ, ์๋ช ์ฃผ๊ธฐ ์ด๋ฒคํธ์ ๊ฐ์ ์ต์ ์ ๊ตฌ์ฑํ์ฌ ๋ชจ๋ JS ํ๊ฒฝ์์ ์ ๋๋ฉ์ด์ ์ ๋ง๋ญ๋๋ค.
๋์ ๋๊ตฌ
์ฅ์ & ๋จ์
์ฅ์
- ๊ฐ๋ ฅํ๊ณ ์ ์ฐํ ์ ๋๋ฉ์ด์ ์ต์
- ๋์ ๋ง์ถคํ ๊ฐ๋ฅ์ฑ๊ณผ ํด๋์ฑ
- ์์ ์ ์ด๊ณ ์ถฉ๋ถํ ํ ์คํธ๋ฅผ ๊ฑฐ์นจ
- ์์ ๋ฒ๋ค ํฌ๊ธฐ
๋จ์
- JavaScript ์ง์์ด ํ์ํฉ๋๋ค
- ์ด๋ณด์์๊ฒ๋ ๋ณต์กํ ์ ์์
์ฌ์ฉ ์ฌ๋ก
- UI ์์์ ๋ํ ์น ์ ๋๋ฉ์ด์
- ๋ํํ ๋ฐ์ดํฐ ์๊ฐํ
- ๊ฒ์ ๊ฐ๋ฐ ์ ๋๋ฉ์ด์
- ํ๋กํ ํ์ดํ ๋ฐ ๋์์ธ ๋๊ตฌ
Popmotion JS ๊ฐ๊ฒฉ
์ฌ์ฉ์ ๋ฆฌ๋ทฐ
์์ง ๋ฆฌ๋ทฐ๊ฐ ์์ต๋๋ค
์ด ๋๊ตฌ์ ์ฒซ ๋ฒ์งธ ๋ฆฌ๋ทฐ์ด๊ฐ ๋์ธ์!