์ผ๋ ํด ์นํ๋ก ํธํ์์๋ ์ด๋๋ฏผ ํ์ด์ง๋ฅผ react๊ธฐ๋ฐ์ next.js๋ก ๋ง์ด๊ทธ๋ ์ด์ ํ๊ธฐ๋ก ๊ฒฐ์ ํ์ด์. ์ ๊ตณ์ด ์์ ์ ์ผ๋ก ๊ฐ๋ฐ๋๊ณ ์๋ Vue.js๋ฅผ ํฌ๊ธฐํ๊ณ React ํ๋ ์์ํฌ๋ก ๋์ด๊ฐ๋ ๊ฑธ๊น์?
๐ฅ 3๋ ๊ฐ ๊ณ ์ํ Vue.js/Nuxt.js
- ์ผ๋ ํด์์๋ ์ง๋ 2019๋ 3์๋ถํฐ ํจ๊ปํ Vue.js๋ฅผ ํตํด ๋จ์ํ๊ฒ javascript์ฝ๋๋ฅผ ์กฐํฉํ๋ ๋ฐฉ์์ผ๋ก ๋ด๋ถ ์ด๋๋ฏผ ์น์ ์์ฝ๊ณ ๋น ๋ฅด๊ฒ ๋ค์ํ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ์ ์์์ด์.
- ํนํ 1์ธํ์ผ๋ก ์ฌ์ ํ์ฅ์ ๋ฐ๋ฅธ ๊ธฐ๋ฅ ์ถ๊ฐ๋ฅผ ์ํด์ ์ต์ํ์ ์ ์ง๋ณด์, ๊ด๋ฆฌ๊ฐ ๊ฐ๋ฅํ ์ํ๋ก, ๋น ๋ฅด๊ณ ํ๋ถํ ๊ธฐ๋ฅ ๊ฐ๋ฐ์ ์ํด ํ์ค์ ์ธ ํํ์ ํ ์ ๋ฐ์ ์์์ด์
- Vue.js๋ก ๊ตฌ์ฑ๋ ํ๋ก์ ํธ๋ ๋์ฑ ๋ ์ ์ฐํ๊ณ ๊ท์น์์ด ํ์ฅ์ ์ฉ์ดํ ๋ฐฉ์์ผ๋ก ๊ฐ๋ฐ์ ํ ์ ์์ด์. ๊ทธ๋์ ์ต์ํ์ ๋๋ ํ ๋ฆฌ ๊ท์น์ ๊ฐ์ง๊ณ , ํ์ด์ง ๋จ์๋ก ์์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์๋ Nuxt.js๋ฅผ 2019๋ 10์๊ฒฝ ๋์ ํ์ด์.
- Nuxt.js๋ ํ์ด์ง ๋จ์ ๊ฐ๋ฐ์ด ๊ฐ์ ๋์ด, ์์ญ๊ฐ์ ํ์ด์ง๋ฅผ ๊ฐ์ง ์ด๋๋ฏผ ํ์ด์ง ๊ฐ๋ฐ ์๋๋ฅผ ํ์ธต ๋ ๋์ฌ์ฃผ์๊ณ , ๋ผ์ฐํ ์ด๋ ์ํ๊ด๋ฆฌ ๋ฑ์ ์ถ๊ฐ ๋ฆฌ์์ค๋ฅผ ๋ง์ด ์ค์ผ ์ ์์ด ๊ธฐ๋ฅ ๊ฐ๋ฐ์ ์ฉ์ดํ์ด์.
- Nuxt.js๋ ์์ฒด ๊ฒ์ฆ๋ @nuxtjs ๋ ํฌ์งํ ๋ฆฌ ์๋ 3rd party ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ๋ถํ์ฌ ์๋์ ์ผ๋ก ์์ ํ๊ณ ์ฝ๊ฒ importํ์ฌ ์ฌ์ฉํ ์ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์ด์. ์๋ฅผ ๋ค์ด, localStorage๋ cookie, axios๋ฑ์ โ์ด์ฐจํผ ์์ ์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌโ๋ @nuxtjs์ prefix๋ฅผ ๋จ ์ฑ๋ก ์ ๊ณต๋๊ณ ์์ด์.
๐ป Vue.js/Nuxt.js์ ํ๊ณ
- Vue.js์ option API๋ html๊ณผ javascript๋ฅผ ๋ถ๋ฆฌํ์๊ณ , data, methods, watch, computed๋ฑ ํ ํ๋ฆฟ์ผ๋ก ์ ์๋ ๊ณณ์์ ๋ก์ง์ ๊ตฌํํด์. ๋ค๋ง ๊ทธ๋ ๊ฒ ๋ก์ง์ ๊ตฌํํจ์ ์์ด์ this๋ผ๋ ๋งฅ๋ฝ์ ๋ถ๋ถ๋ช ํจ, mixins๋ filter๋ก ์ ์ญ์์ ์ ์๋ this๊ฐ์ ์ ํ๋๋ Vue์ property ๋ฑ ๊ฐ๋ฐ ์์ ์ ๋งค๋ชจํธํจ์ด ์ปค์. ํนํ ์นํ๋ก ํธ ๊ฐ๋ฐ ํ์์ด ๋์ด๋๋ฉด์, ์ด๋๋ฏผ ํ๋ก์ ํธ ์์ฒด๊ฐ ๋์ฑ๋ ํ๋ ๋๋ฉด์ ์ด โ์ ๋งค๋ชจํธํจโ์ ๊ฐ์ ํ ํ์๊ฐ ์ปค์ง๊ณ ์์ด์.
- Vue.js/Nuxt.js๋ ์ด๋ฏธ ํ๋ ์์ํฌ์์ ์ต์ ํ๋ ํผํฌ๋จผ์ค๋ฅผ ๋ง์ด ์ ๊ฒฝ์ฐ๊ณ ์์ด์. ๋ฐ๋ฉด React/Next.js์์๋ ๊ฐ๋ฐ์๊ฐ ์ง์ ์๋์ ์ผ๋ก ๋ ๋๋ฅผ ์ปจํธ๋กคํ๊ฑฐ๋ ํจ์จ์ ์ผ๋ก ์งํํ๋๋ก ๋ ๋ง์ด ์ ๊ฒฝ์ ์ธ ์๊ฐ ์์ด์. ์ฆ, Vue๋ณด๋ค React๊ฐ ๋ฌธ์ ๋ฅผ ํ์ ํ๊ณ ์ง์ ๊ฐ์ ํ๋ ๋ฐ ํจ๊ณผ์ ์ด๋ผ๊ณ ํ๋จ๋์์ด์.
- Vue.js/Nuxt.js๋ ์ปค๋ฎค๋ํฐ ์์ฒด๊ฐ ์์ง ๋ถ์กฑํด์. React๊ธฐ๋ฐ ์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ํจ์ฌ ๋ ๋ง๊ณ , ์ต์ ํ๋ ์ด์์ ์์ด ๊ฒ์๊ณผ ๋์์ด ์ฉ์ดํด์. (๊ทธ๋ ์ง๋ง Next.js๋ ๋ ๋น์ฝํด์..)
๐ป Vue์ ํ๊ณ ๊ทน๋ณต ์๋
- Vue์์๋ ์์์ ์ค๋ช ํ ์ ๋งค๋ชจํธํจ๊ณผ ๋ก์ง์ ๋ถ๋ฆฌ(๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ)๋ฅผ ์ํด ๊ธฐ์กด option api๊ณผ ๋ค๋ฅธ composition api๋ฅผ ๋์ ํ์ฌ Vue 3.0์ผ๋ก ์ ์ํ์ด์. Nuxt.js์์๋ Vue 3.0 composition api๊ณผ ์ถ๊ฐ์ ์ธ ๊ฐ์ (๋น๋ ์์ง ๊ฐ์ ๋ฑ)์ด ์ด๋ฃจ์ด์ง Nuxt 3.0์ ๋ฐ์นญํ๊ณ ์ ๋ฒ ํ ๋ฒ์ ์ ๋ง๋ค๊ณ ์ถ์๋ฅผ ์ค๋นํ๊ณ ์์ด์.
- ์ผ๋ ํด ์ด๋๋ฏผ ํ๋ก์ ํธ์์๋ nuxt 2.0์ ๋ธ๋ฆฟ์ง ๊ฐ๋ ์ผ๋ก ์ ๊ณตํ๋ nuxtjs/composition ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด setup์์ ๋ก์ง๋จ์์ ๋ถ๋ฆฌ๋ฅผ ํ๋ฅญํ๊ฒ ์งํํด ์์ด์. ๋ค๋ง ์ด๋ฏธ vue 2.0/nuxt 2.0์ผ๋ก ๊ตฌํ๋ ๊ธฐ์กด์ ๋ชจ๋ ๋ก์ง์ ๋ฆฌํฉํ ๋งํ์ง๋ ์๊ณ ์๋กญ๊ฒ ์ถ๊ฐ ๊ตฌํํ๋ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉํ๊ณ ์์์ด์. ์๋ํ๋ฉด 1) ๊ธฐ์กด์ ๋ชจ๋ ๋ก์ง์ ๋ฆฌํฉํ ๋ง ํ๋ ๊ฒ์ ๋นํจ์จ์ด ๋งค์ฐ ์ปค์. 2) vue 3.0์ composition api๋ฅผ ๊ฐ๋ฅํ๊ฒ ํด์ฃผ๋ nuxtjs/composition ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด 3.0์ ๋ง๋ณด๊ณ ์์ง๋ง, ์์ ์ ์ด์ง ์์๊ณ , ์ต์ ํ๋์ง ์์ ์ํ๋ก ์์์ ์ผ๋ก vue 2.0/nuxt 2.0์์์ ๊ธฐ๋ฅํ๊ฒ ํด์ฃผ๋ ๊ฒ์ด์์ด์. ํนํ ์๋ฌํธ๋ํน์ด ์ ๋์ง ์๊ฑฐ๋ ๋ค์ ์์ ์ ์ด์ง ์๋ ๊ฒฝ์ฐ๋ฅผ ์ค์ ๊ฐ๋ฐํ๋ฉฐ ํ์ธํ ์ ์์์ด์.
- ๋ฐ๋ผ์ ์์ ์ ์ผ๋ก ํ๋ก๋์ ๋ฒ์ ์ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ Nuxt 3.0์ ๊ธฐ๋ค๋ฆฌ๊ณ ์์์ด์. 2021๋ 10์ Nuxt 3.0์ Beta๋ฒ์ ์ด ์์ ์ ์ผ๋ก ๋ฐํ ๋์๊ณ , ํ๋ก๋์ ๋ฒ์ ๋ง์ ๊ธฐ๋ค๋ฆฌ๊ณ ์์์ด์. ์คํ ์์ค๋ก ๊ฐ๋ฐ๋๋ Nuxt ์ธ ๋งํผ ๋ง์ ๊ฐ๋ฐ์ ๋ถ๋ค์ด issue์ discussion, pull request๋ฅผ ํตํด ์ฐธ์ฌํ๊ณ ์์ด์. ๊ทธ๋ ์ง๋ง ์ค์ ๋์ ํ์ฌ ์ฌ์ฉํ๊ณ ์ ํ๋ ์ํฉ์์ ์ค์ํ ๊ฒ์ Production๋ฒ์ ์ ์์ ์ฑ์ด์์. ๊ทธ๋์ ์ธ์ ์ ์ ์ถ์๊ฐ ๋ ๊น? ํธ๋ํนํ๊ณ ์์๋๋ฐ.. https://github.com/nuxt/framework/discussions/2198 2022๋ 1์๊น์ง RC(์ต์ข ์ํํ) ์ถ์๊ฐ ์๋ฃ๋๊ณ 2022๋ ์ฐ๋ง production ๋ฒ์ ์ด ์ถ์๋ ๊ฒ์ด๋ผ๊ณ ํด์โฆโฆ..
๐ฅ Nuxt 3.0์ ๋๋ฌด ๋ฉ๊ณ , ๊ธฐ์ ๋ถ์ฑ๋ ์์ฌ ๊ฐ๊ณ ์์ด์.
- Vue.js/Nuxt.js 2.0์์์ ๊ธฐ์ ๋ถ์ฑ(์ต์ ํ, ๊ธฐ๋ฅ ๊ฐ๋ฐ์ ๋ ์ฐ์ ์ผ๋ก ํ ์ฝ๋ ์ํ)๋ฅผ Nuxt 3.0์์ ํด๊ฒฐํ๊ณ ์ ๋ฏธ๋ฃจ์ด ๋๊ณ ์์์ง๋ง, 2022๋ ์ฐ๋ง์ ๋๋ฌด ๋ฆ๋ค๊ณ ํ๋จํ์ด์.
- 2.0์ 3.0์ ์น์ด์ ์ ์ฌ์ฉํ๊ณ ์์์ง๋ง, ๋ถ์์ ํด์. ๊ฒฐ๊ตญ ์ด๋ ํ ํํ๋ ๊ธฐ์ ๋ถ์ฑ ํด์๊ฐ ํ์ํด์. ๋ค๋ง Vue 2.0์์ฒด์ ํ๊ณ๋ ๋ช ํํ๊ณ , Nuxt 3.0์ ๋ถ์์ ํด์. ๊ฒฐ๊ตญ ์ ํ์ง๋ React๊ฐ ๋จ์์ด์.
๐ฅ React/Next.js๋ฅผ ๋์ ํ๊ธฐ๋ก ๊ฒฐ์ ํ์ด์.
- ๊ธฐ์ ์ ์ธ ์ธก๋ฉด๋ง ๊ณ ๋ คํ ๊ฒ์ด ์๋๋ผ ์๋น์ค, ์ด๋ฏธ ์์ ์ ์ผ๋ก ์๋ํ๋ ๊ธฐ๋ฅ์ ์ ์ง/๋ณด์๋ฑ์ ์ ๊ทน์ ์ผ๋ก ๊ณ ๋ คํ๋ค๋ ์ ์ ๋ง์๋๋ฆฌ๊ณ ์ถ์ด์! ํ์ฌ๊น์ง ์ ์๋ํ ์น์ด์ง๋ง, React๋ฅผ ๋์ ํ์ฌ ๊ฐ๋ฐ์ ์ผ๋ก๋ challengingํ๋ฉด์๋ ํ๋ก๋ํธ ๊ธฐํ/๋์์ธ ์ธก๋ฉด์์๋ ๋ ๋ง์ ๊ฐ๋ฅ์ฑ์ด ์๊ฒจ์.
- ๋ฐ๋ผ์ ์๋ ์ค๋ช ๋๋ฆฌ๊ฒ ์ง๋ง, ์ ์ง์ ์ผ๋ก ๊ธฐ์กด ์ด๋๋ฏผ ์ฌ์ดํธ ์ด์ฉ์ ์ ํ ๋ฌธ์ ๊ฐ ์๊ฒ ์์ ์ ์ผ๋ก ๋ณ๊ฒฝํ๊ณ ์ ํด์. ๋ณ๊ฒฝ ๊ฐ๋ฅํ ์์ ๋จ์์ ์๋ฏธ์๋ ๋ง์ด๊ทธ๋ ์ด์ ๋์์ ์ ์ ํ ํ, ์ด์ฉ์ ๋ฌธ์ ๊ฐ ์๊ฒ ๋ณ๊ฒฝํ๊ณ ์ด๋ฅผ ์ ์ง์ ์ผ๋ก ํ๋ํ์ฌ ์ต์ข ์ ์ผ๋ก๋ ๋ชจ๋ ํ๋ก์ ํธ๊ฐ React๋ก ๋์ฒด๋ ๊ฒ์ด๋ผ๊ณ ๊ธฐ๋ํด์.
- ๋ํ ์๋น์ค์น์ ์์ ์ ์ผ๋ก React/Next.js๋ก ์ ๊ณต๋๊ณ ์์ด์. ๊ฐ๊ฐ์ ์ฅ๋จ์ ์ ์ํด ์ฌ๋ฌ๊ฐ์ง ์คํ์ ํ์ฉํ๋ ๊ฒ๋ ์ข์ง๋ง, ๋จ์ผ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ฐ๋ฐ์ ์ ์ง/๋ณด์ ์ธก๋ฉด์์๋ ์์ ์ฑ์ ๊ฐ์ ธ์ฌ ์ ์์ ๊ฒ์ด๋ผ ์๊ฐํด์.
- ์ด์ ๋ถํฐ๊ฐ ์์์ด์์. ๊ตฌ์ฒด์ ์ธ ๊ณํ์ ๋ง๋ จ์ค์ด๊ณ , ๋ฌธ์ ์์ด, seamlessํ๊ฒ ๋ง์ด๊ทธ๋ ์ด์ ํ๋ ๊ฒ์ ์ต์ฐ์ ๋ชฉํ๋ก ์ผ๊ณ ์์ด์. ๋ํ ์ปดํฌ๋ํธ๋ UI/UX ๊ฐ์ ๋ฑ๋ ํจ๊ป ์งํํ๊ณ ์ํด์.
๐ฅ React๋ก ๋ฌด์์ด ๊ฐ๋ฅํ ๊น? ๊ฑฑ์ ๋ ๋ถ๋ช ์์ด์.
- vue์ โ์ฝ๋คโ๋ html, js์ ์กฐํฉ์ผ๋ก ์ด๋ฃจ์ด์ก๋ค๋ ์ ์ด์์. ๋ค๋ง ์ด๋ ํ๋ก์ ํธ๊ฐ ์ปค์ง ์๋ก ๊ด๋ฆฌ๊ฐ ๋ค์ ๋ถํธํด์ง๋ ์ ์ด ์์์ด์. React์์๋ ๋ ๋ ์์ ์ ํต์ ํ๊ฑฐ๋ ๋ก์ง์ ๊ตฌ์ฑํ๋ ๋ฐ ์ฉ์ดํ์ฌ ํผํฌ๋จผ์ค ๊ฐ์ ์ ํจ์ฌ ๋์์ด ๋ ๊ฒ์ผ๋ก ๊ธฐ๋ํฉ๋๋ค. ํนํ ์ด๋ฏธ React๋ฅผ ๋์ ํ ์๋น์ค์น ํ๋ก๋ํธ๋ฅผ ํตํด ์ด๋ฌํ ์ ์ ์ถฉ๋ถํ ํ์ธํ๊ณ ์๋ ์ํฉ์์, ์ค์ ๋ก ์ผ๋ ํด ์๋น์ค์์ ๋ ๋ณต์กํ ์ด๋๋ฏผ ์ฌ์ดํธ์ React๋ฅผ ๋์ ํ์ฌ ํ๋ก๋ํธ๋ฅผ ๊ฐ์ ํ๋ฉด ํผํฌ๋จผ์ค๋ ์ ์ ๊ฒฝํ์ ํจ์ฌ ๋ ๋์ผ ์ ์๊ณ , ๊ฒฐ๊ณผ์ ์ผ๋ก ์ฌ๋ฌ๋ถ๋ค์ ์ ๋ฌด ํจ์จ์ด ๋ํญ ํฅ์์ํฌ ์ ์๋ ๋ฐฉํฅ์ด ๋ ๊ฒ์ด๋ผ๊ณ ๊ธฐ๋ํ๊ณ ์์ต๋๋ค.
- React๋ฅผ ํตํด ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด ์ฐจ์ธ๋ Figma๋ก ํ๊ฐ๋๋ Framer๋ฅผ ๋์ ํ ์ ์์ด์. Figma๋ก ๋์์ธ์ ์งํํ์ฌ๋ ์ด๋ฅผ ๊ฐ๋ฐ ์ฝ๋๋ก ๊ฐ์ ธ์ค๋ ๋ฐ ์ถ๊ฐ์ ์ธ ๋ฆฌ์์ค๊ฐ ๋๋๋ฐ Framer๋ ์ด์กฐ์ฐจ๋ ์๋ํํด์ฃผ๋ ํด์ด์์.(Figma์ ๋ณ๋์ ํด์ด์ง๋ง, Figma์ ์์ํธํ) ํนํ React๊ธฐ๋ฐ ์น ํ๋ก์ ํธ๋ก ๊ตฌ์ฑ๋์ด ๋์์ธ โ ๊ฐ๋ฐ์ ๋ฐ์ํ๋ ๊ฒ์ ๊ธฐ๋ณธ์ด๊ณ , ์ง์ ์ฝ๋ฉ๋์ด ์๋ ์ปดํฌ๋ํธ๋ฅผ ์ง์ โ์ด์ฉโํ์ฌ ๋์์ธํ ์ ์์ด์. ์ด๋ ํนํ ์ด๋๋ฏผ ํ๋ก๋ํธ์ ๋งค์ฐ ์ ์ฉํ ๊ฒ์ผ๋ก ์์๋๋๋ฐ์, ํ์ฌ ์คํฌ๋ฆฐ์ท์ด๋ ์์์ ์ธ ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ์ฌ ์ปดํฌ๋ํธ๋ฅผ ๊ธฐํํ๋ ํ๊ฒฝ์์ ์ค์ ๋ก ์ด์ฉ๋๊ณ ์๋ ์ปดํฌ๋ํธ๋ฅผ ๋ ์ ๊ทน์ ์ผ๋ก, ๊ทธ๋ผ์๋ ํจ์ฌ ์์ฝ๊ฒ ์ด์ฉํจ์ผ๋ก์จ ์ด๋๋ฏผ ํ๋ก๋ํธ ๊ธฐํ/๊ฐ๋ฐ ํจ์จ์ด ๋งค์ฐ ํฅ์๋ ๊ฒ์ด๋ผ ๊ธฐ๋ํ๊ณ ์์ด์.
- React๋ Vue๋ณด๋ค (์ฐ๋ฆฌ๋๋ผ์์) ๊ฐ๋ฐ์ ํ ํ๋ณด๊ฐ ํจ์ฌ ์ฉ์ดํด์. ์ธ์ ๊ฐ ์ผ๋ ํด ์๋น์ค๊ฐ ํ์ฅ๋ ์๋ก, ๋ ์ด๋ ํ ์ํฉ์์๋ React ๊ธฐ๋ฐ ๊ฐ๋ฐ ์คํ์ ์ฅ์ ์ด ๋ ๊ฑฐ์์.
- ๋ค๋ง Vue์์ ๋์์ธ ๋ฆฌ์์ค๋ฅผ ์ฌ์ค์ 0์ผ๋ก ์ค์ฌ์ฃผ์๋ Vuetify ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋์ด์ ์ด์ฉ์ด ๋ถ๊ฐ๋ฅํ ๊ฑฐ์์. Vuetify๋ ๋จ์ํ UI๋์์ธ ์ด์ธ์๋ Vue์์ฒด์ ๊ฐ๋ ฅํ๊ฒ ๊ฒฐํฉํ์ฌ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ด๋ ๋ก์ง๊ณผ ๊ฒฐํฉ๋ ํํ์ ์ปดํฌ๋ํธ๊ฐ ํ๋ถํ์ด์. ์ด๋ฅผ React์์ ์ฒ์๋ถํฐ ๊ฐ๋ฐํ๋ ๊ฒ์ ๋ถ๋ช ๋ฆฌ์์ค๊ฐ ํ์ํด์. ํ์ง๋ง Vuetify๋ Material UI๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์ด์ง ํ๋ ์์ํฌ๊ณ , ๋ง์ฐฌ๊ฐ์ง๋ก React์์๋ Material UI๋ผ๋ UIํ๋ ์์ํฌ๋ ์กด์ฌํด์. ์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ก์ง์ ์ ์ํ๊ณ ์ปค์คํ ํ๋ ๊ณผ์ ์ด ํ์ํ๊ฒ ์ง๋ง Framer์ ๋์ ๊ณผ ํจ๊ป ํจ์ฌ ๋ ์๋ฏธ์๋ ๋ฐฉ์์ด ๋ ๊ฒ์ด๋ผ ๊ธฐ๋ํ๊ณ ์์ต๋๋ค.
๐ฅ ๊ทธ๋์ ์ง๊ธ๋ถํฐ ๊ธฐ์กด ์ด๋๋ฏผ ๊ฐ๋ฐ์ ์ค๋จํ๋ ๊ฑด๊ฐ์?
- ์๋์์. ๋ชจ๋ ์คํ๋ฆฐํธ๋ ํ์ฌ ์ด๋๋ฏผ์ ์ฌ์ฉํ๊ณ ์๋ ์ํฉ์์ ๊ธฐ๋ฅ ์ค๋จ์ด๋ ๋ถ๋ถ์ ๊ฐ๋ฐ ์ค๋จ ์กฐ์ฐจ ์์ด ๊ธฐ์กด๊ณผ ์๋ฒฝํ๊ฒ ๋์ผํ๊ฒ ๊ธฐ๋ฅ ์ถ๊ฐ/๊ฐ์ /๋ณ๊ฒฝ ๋ฑ์ ์งํํ ์ ์์ต๋๋ค.
- ์ด๋ฏธ ์ด๋๋ฏผ ํ๋ก์ ํธ์ ๊ทธ๋ฌํ ๊ธฐ๋ฅ ์ถ๊ฐ/๊ฐ์ /๋ณ๊ฒฝ ํ์คํฌ๋ ์ด๋ฏธ ๊ธฐ์กด ์ฝ๋๋ ์ ์ง/๋ณด์์ ๊ด์ ์์, ์๋ก์ด ์ฝ๋๋ vue 3.0์ api๋ฅผ ๋จผ์ ๋์ ํ์ฌ ์๋ก์ด ๊ธฐ์ ์ ๋์ ๊ด์ ์์ ๋์ํ๊ณ ์์์ด์. ์ด์ ๊ฐ์ ๊ธฐ์กฐ๋ ๋ฆฌํฉํ ๋ง์ด ๋ถ๊ฐํผํ ์ํฉ์์ ์ง์๋ ๊ฒ์ด์์.
๐ฅ ์ด๋ป๊ฒ ๋์ ํ ๊น์?
- ์ต์ข ๋ชฉํ๋ ๋ชจ๋ ์ด๋๋ฏผ ํ๋ก์ ํธ์ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ๋ฅผ react๋ก ๋์ฒดํ๋ ๊ฑฐ์์.
- ๋ค๋ง ์ด๊ฒ์ด ์คํ๊ฐ๋ฅํ๋๋ก ๋ค์๊ณผ ๊ฐ์ด ์ ์ง์ ์ผ๋ก ๋์ ํด๋ณด๋ ค๊ณ ํด์
- ๊ณ ๊ฐ๊ด๋ฆฌ ์ด๋๋ฏผ ์ฌ์ดํธ์๊ฒฐ์ ๋ด์ญ ํ์ด์ง๋ฅผ reactํ๋ ์์ํฌ๋ฅผ ์ด์ฉํ ๊ฒฐ์ ๋ด์ญ ํ์ด์ง๋ก ๋์ฒดํฉ๋๋ค.
- ์ด ๋, ์ปดํฌ๋ํธ๋ฅผ ์ ์ํ๊ฑฐ๋ Framer๋ฅผ ๋์ ํ๋ ๋ฑ react/next๋ฅผ ์ด์ฉํ ํฐ ํ๊ณผ ๊ฐ๋ฐ ํ๋กํ ์ฝ์ ์์ธํ ์ก์๋๊ฐ ์์ ์ด์์.
- ๋ํ ์ค์ ๋ก ๋ค๋ฅธ ๋๋ฉ์ธ์์ ๋ฐ์ดํฐ๋ฅผ ํ์ธํ๋๋ผ๋, ๋์์ ๊ธฐ์กด๊ณผ ๋์ผํ๋๋ก, ์๋ฅผ ๋ค๋ฉด ์ถ๊ฐ์ ์ผ๋ก ๋ก๊ทธ์ธ์ด ํ์ ์๊ฒ ํ๊ฑฐ๋ ๋ฉ๋ด nav bar๋ฅผ ํตํ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ก์ ์ด๋๋ ๋ ์ฌ์ดํธ๊ฐ ๋ฌธ์ ์์ด ํธํ๋ ์ ์๋๋ก ์์ ํ๊ณ ์ ํด์. seamless๊ฐ ๊ฐ์ฅ ํฐ ๋ชฉํ์์
- ๊ธฐ๋ฅ์ ์ธ ๋ณ๊ฒฝ์ด๋ ๊ธฐํ์์ ๋ณ๊ฒฝ์ ์ ํ ์์ ๊ฑฐ์์. - ๊ณ ๊ฐ๊ด๋ฆฌ ์ด๋๋ฏผ์ ๋ค๋ฅธ ํ์ด์ง๋ค์ reactํ๋ ์์ํฌ๋ก ๋์ฒดํ์ฌ ๊ณ ๊ฐ๊ด๋ฆฌ ์ด๋๋ฏผ ์์ฒด๋ฅผ ์๋ก์ด ํ๋ ์์ํฌ๋ก ์์ฑํ์ฌ ๋ถ๋ฆฌํฉ๋๋ค.
- ์ด์ ์ด๋๋ฏผ์์ ๊ณ ๊ฐ๊ด๋ฆฌ ์ด๋๋ฏผ๊ณผ ๊ณต์ ํ๊ณ ์๋ ํ์ด์ง๋ค์ react๋ก ๋์ฒดํฉ๋๋ค.
- ์ด์ ์ด๋๋ฏผ์ ๋จ์ ํ์ด์ง๋ ๋์ฒดํฉ๋๋ค.
- ์ด ๋ ํนํ h3์ด๋ ์ง๋ ๊ด๋ จ ๊ธฐ๋ฅ์ ๋งค์ฐ heavyํ๊ธฐ ๋๋ฌธ์ ์์ ์ฑ์ ์ต์ ์ผ๋ก ๊ธฐ์กด ๊ธฐ๋ฅ ์ด์ฉ์ ๋ฌธ์ ๊ฐ ์๋๋ก ๋ง์ง๋ง์ ๋์ฒด๋ฅผ ํ ๊ฒ ๊ฐ์์.
- ํฌ๊ฒ๋ ์ ์์๋๋ก ์งํํ๋ ๊ฒ์ ๋ชฉํ๋ก ์ผ๋จ 1๋ฒ์ 1์์ ์งํํด๋ณด๋ฉฐ ์ ์ฒด์ ์ธ ํ์๋ผ์ธ์ ๋ ๊ตฌ์ฒดํ๋๊ฐ๊ณ ์ ํด์.
- ๊ธฐ์กด ์คํ๋ฆฐํธ๋ ํ๋ก๋ํธ ๊ฐ๋ฐ์๋ ๋ฌธ์ ์์ด, ์ฅ๊ธฐ์ ์ธ ์ฅ๋จ์ ์ ๊ณ ๋ คํด์ ๋ด๋ฆฐ ๊ฒฐ์ ์ด์์! ์นํ๋ก ํธ์๋ํ์ ํ๋ก๋ํธ ์ ์ผ๋ก, ๊ธฐ์ ์ ์ผ๋ก๋ ํจ์ฌ ๋ ๋์ ๋ฐฉํฅ์ด๋ผ๊ณ ๋ฏฟ๊ณ ์๊ณ , react๋ก์ ๋ง์ด๊ทธ๋ ์ด์ ์ ๊ธฐ๋ํ๊ณ ์์ด์. ๋ง์ ์ฝ๋ฉํธ, ํผ๋๋ฐฑ๊ณผ ์์ ๋ถํ๋๋ ค์! ๐ฅ