
Vue 3์ ๋ฑ์ฅ
- ๊ฐํ๋ Typescript ์ง์
- ๋์ฑ ์ธ๋ถํ๋ ํ์ ์ ์ธ
- ์ฝ๋ ์ฌ์ฌ์ฉ์ ์ํ Composition API (
setup
)
- Template ๋ด ์ต์์ Element ๊ฐ ๋ ๊ฐ ์ด์์ด ๋์ด๋ ๋จ
- ๋ฑ
Composition API
- ์๋๋ Vue 2์ ์ปค๋ฎค๋ํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ (@vue/composition-api)
- ๋์ผํ Composition ์ฝ๋๋ก Vue 2์ Vue 3 ๋ ๋ค ์ฌ์ฉ์ด ๊ฐ๋ฅ
์ค๋ฌด์๊ฐ ๋ฐ๋ผ๋ณธ Vue 3
- ๊ทธ๋ผ ๋ฐ๋ก ์ด๋ฅผ ์ ์ฉํด์ผ ํ ๊น? โ ๊ทธ๊ฒ์ ์๋
- Vuetify, Vue-datepicker, Vue-lazyload ๋ฑ
- ์์ง๊น์ง ์ ๋๋ก Vue 3๋ฅผ ์ง์ํ๋ ์ปค๋ฎค๋ํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฏธ๋น
- ๊ทธ๋ผ ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ชจ๋ ๊ฑท์ด๋ด๊ณ Vue 3๋ก ๋ค์ ์ง๋ฉด ์ด๋จ๊น
- ๊ทธ๋ฌ๋ Vue 3์์๋ IE๋ฅผ ์ง์ํ์ง ์๋๋ค โ ์ด ๊ฒฝ์ฐ์๋ Vue 2.7 (๊ฐ๋ฐ์ค) ์ด์ฉ
- Vue 2.7 ์์๋ ์ Vue 3์์ ๋ฑ์ฅํ ํน์ง๋ค์ Vue 2์์ ์ฌ์ฉํ ์ ์๋๋ก ์ง์
- ์ฆ, IE๊ฐ ํ์ํ ์ฌ์ดํธ๋ Vue 2๋ก
- ์๋น์ค ๊ฐ๋ฐ์ ์์ด 2021๋ ์๋ ์์ง Vue 2๊ฐ ์ฐ์ธ (VueSchool)
- ๋ฐ๋ผ์ ์ ๋ฌธ์๋ Vue 2๋ฅผ ๋จผ์ ๊ณต๋ถํ๋ ๊ฒ์ด ์ ์ ํ๋ค
์ค๋ฌด์์ ๊ณ ๋ฏผ
- ๊ทธ๋ผ ๊ทธ๋ฅ 2021๋ ์ ๊ฐ๋งํ ์์ด์ผ ํ๋?
- Vue 2์ Composition API์ TypeScript๋ฅผ ๋จผ์ ๋์ ํด๋ณด์
@vue/composition-api
- Vue 2์์ Components์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ ๋ก์ง์ ์์ฑํ ์ ์๋๋ก ๋์์ค
- ํจ์ ๊ธฐ๋ฐ์ API ์์ฑ ๊ฐ๋ฅ์ผ๋ก TS ์ถ๋ก ์ด์ ๊ทน๋ํ
- Data, Logic ๋ชฉ์ (๋๋ฉ์ธ)๋ณ๋ก ๊ด์ฌ์ฌ ๋ถ๋ฆฌ ๊ฐ๋ฅ
- React Hook ๋ฐฉ์์ ์ฑํ + ๋จ์ ๋ณด์
- ๋ถ๊ธฐ๋ฌธ, ๋ฐ๋ณต๋ฌธ, ์ค์ฒฉ ํจ์ ๋ด์์ ์ฌ์ฉ ๊ฐ๋ฅ
- ์ปดํฌ๋ํธ ์์ฑ ์ฃผ๊ธฐ์ ๋ฐ๋ผ ์ต์ด ํ ๋ฒ๋ง ์คํ
- React Hook์ State์ ๋ณํ์ ๋ฐ๋ผ ํ๋ฉด์ด ๋ค์ ๊ทธ๋ ค์ง ๋, Hook์ด ๋ค์ ์คํ๋๊ฑฐ๋ ํ๋ ๊ฒฝ์ฐ๊ฐ ์กด์ฌ
@vue/composition-api
์์
// Vue 2 <template> <div> <p>{{ message }}</p> <button @click="changeMessage">Change</button> </div> </template> <script> import { ref } from '@vue/composition-api'; export default { setup() { const message = ref('hi'); const changeMessage = () => message.value = 'hi Vue 2'; return { message, changeMessage }; }, }; </script>
// Vue 3 <template> <div> <p>{{ message }}</p> <button @click="changeMessage">Change</button> </div> </template> <script> import { ref, defineComponent } from 'vue'; export default defineComponent({ setup() { const message = ref('hi'); const changeMessage = () => message.value = 'hi Vue 2'; return { message, changeMessage }; }, }); </script>
ย
- ๋ค๋ง Composition API๋ก ๋ชจ๋ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ ๋น์ถ์ฒ
setup
์ ๋ชฉ์ ์ ๊ทธ์ '์ฌ์ฌ์ฉ์ฑ'- ๋ฐ๋ผ์ Composition API๋ก ์ธํด Vue ์ ์์ฐ์ฑ์ด ๋จ์ด์ง๋ค๊ณ ์๊ฐ๋๋ ๊ฒฝ์ฐ
- ํด๋น ๋ก์ง์์๋ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ด ์ข๋ค. (= ์๊ฐ ์์ด ์ฌ์ฉํ์ง ๋ง์)
- ex) Modal์ ์ด๊ณ ๋ซ๋ ๊ฒ๊ณผ ๊ฐ์ด ์ค๋ณต๋๋ ๋ก์ง์ด ์กด์ฌ โ Composition API๋ก ๋ถ๋ฆฌ ๊ฐ๋ฅ
@vue/composition-api
์ฃผ์ ์ฌํญ
- ๊ธฐ์กด Mixin ๋๋ HOC ์ฝ๋ ์ฌํ์ฉ ๋ฐฉ์์ ๊ฐ๊ธ์ ์ง์
- Vue JS ์ปค๋ฎค๋ํฐ ์์ฒด๊ฐ Composition API๋ก ๋ฐฉํฅ์ ์งํ์ค
- ์์ Mixin์ด๋ HOC๋ ๋ ์ด์ ์ ํจํ์ง ์์
- ํนํ Mixin๊ณผ Composition API๊ฐ ์๋ก ๋ค์์ธ ๊ฒฝ์ฐ, ๋๋ฒ๊น ์ด ์ด๋ ค์์ง ์ ์์
- ๊ธฐ์กด ์ฝ๋ โ Composition API ํํ๋ก ์ ์ ์ ๊ฐ์ ์ถ์ฒ
- TS์ ๊ฐ์ด ์ฌ์ฉํ์ ๋ ํจ๊ณผ ์์น
- Hook(Composition)์์ ์ ์ํ ํ์ผ์ ์ปดํฌ๋ํธ ์์์ ์ฌ์ ์ธ ํ์ ๋ ์ค์๋ฅผ ํผํ ์ ์์
reactive
API ๋ณด๋ค๋ref
API ์ฌ์ฉ์์งํฅreactive
๋ ๊ฐ์ฒด๋ฅผ Reactivity ํ๊ฒ ๋ง๋๋ API- ์ด๋ ๋๋ฒ๊น ์ ์ด๋ ต๊ฒ ๋ง๋ค ์ ์์
- Vue 3์์ ์ ๊ณต๋๋ API๊ฐ ๋ชจ๋ ์ง์๋์ง๋ ์์
- Vue 2์
@vue/composition-api
๋ 95%์ ๋ ์ง์๋๋ค ์๊ฐ
Vue 2์ TypeScript ์ง์
- Class ๋ฌธ๋ฒ๋ณด๋ค๋
Vue.extend()
๋ฅผ ์ด์ฉํ ๊ฐ์ฒด ๋ฌธ๋ฒ ์งํฅ
<script lang="ts"> import Vue from 'vue'; export default Vue.extend({ data: () => ({ message: '', }), methods: { changeMessage() { this.message = 10; // Type Error }, }, }); </script>
tsconfig.json
ํ์ผ์noImplicitThis: true
์ต์ ์ถ๊ฐ- SFC(Single File Component) ๋ด์์ ํ์ ์ถ๋ก ์ด ์ ํํ๊ฒ ์ด๋ฃจ์ด์ง
- Computed ์์ฑ์ ๋ฐํ ํ์ ์ ๋ฐ๋์ ์ ์
- ์ ์ํ์ง ์์ผ๋ฉด ์ปดํฌ๋ํธ ๋ด์์ ํ์ ์ถ๋ก ์ด ์ ๋๋ก ์ด๋ฃจ์ด์ง์ง ์์
- Store ๋ฑ ๊ธฐํ ํ์
์ ์๋
d.ts
ํ์ผ์ ์ ์ - ์ ์ธ ํ์ผ์ ํ๋ ์ ์ํด์ ๊ด๋ฆฌํ๋ ๊ฒ์ด ํ๋ก์ ํธ ๊ด๋ฆฌ์ ์์ด ์ข์
๊ธฐ์กด Vue ํ๋ก์ ํธ์ TS๋ฅผ ์ ์ฉํ๋ ค๋ฉด?
- CLI ๋ช ๋ น์ด๋ก TS ํ๋ฌ๊ทธ์ธ์ ์ถ๊ฐ or ํ์ ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ์ ํ๋ก์ ํธ ์์ฑ
- ๋ฐํ์๋ ํ์๋ฅผ ์ถ์ฒ
- ํธํ์ฑ ํ๋ณด๋ฅผ ์ํด ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฒ์ ๋ค์ ๋ง์ถฐ์ค์ผ ํ๋๋ฐ
- ์ด ๋, ์์ ์ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ ๊ฒ์ด ์ข ๋ ์์ํ๊ฒ ์งํ๋จ
tsconfig.json
ํ์ผ์allowJS
๋ฐnoImplicitThis
์ต์ ์ถ๊ฐallowJS
: ํ ๋ฒ์ ๋ชจ๋ ๋ฐ๊พธ๋ ๊ฒ์ด ์๋, ์ ์ง์ ์ผ๋ก ๋ฐ๊ฟ์ฃผ๊ธฐ ์ํจnoImplicitThis
: TS ์์ฐ์ฑ์ ๋์ด๊ธฐ ์ํจ
- ๊ธฐ๋ณธ์ ์ธ Type Errors๋ง ์์ ํ๊ณ ,
any
์ ๊ฐ์ ์ฝํ ํ์ ๋ถํฐ ์ ์ง์ ์ผ๋ก ์ ์ฉ - TS ๋ณํ ํ, JS ํ์ผ์์ ์กฐ๊ธ์ฉ ํ์ ์๋ฌ๊ฐ ๋ฐ์๋ ๊ฒ
- ์ด ๋ถ๋ถ๋ค์ ์์์ผ๋ก ์ ์ง์ ์ผ๋ก ํ์ ์ ์ ์ํด ๋๊ฐ
npm run build
๊ฐ๋ฅํ ์์ค์ ํ์ ์ ์ ๋ฐ ์์ - ์ฒ์๋ถํฐ ๊ตฌ์ฒด์ ์ธ ํ์
๋ณด๋ค๋
any
์ ๊ฐ์ ํ์ ๋ค๋ถํฐ ์ ์
strict
๋ ๋ฒจ์ ์ฌ๋ ค๊ฐ๋ฉฐ ํจ์ฉ์ฑ์ด ๋์ ๊ณณ์ ์ ์ง์ ์ผ๋ก ํ์ ์ ์ ์งํ
์ ๋ฆฌํ์๋ฉด
- Vue 2์์๋ Vue 3์ Composition API์ TypeScript ์ฌ์ฉ์ด ์ถฉ๋ถํ ๊ฐ๋ฅํ๋ค
- Vue 3๋ Core์ Community Ecosystem์ด ์ถฉ๋ถํ ์ฑ์ํด์ก์ ๋ ๋์ ํด๋ณด์
- ์๋ง IE ์ง์์ด ๋๋๋ 2022๋ 6์ ์ดํ
- ์ฌ์ฉ์ ์ธต๊ณผ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ ํํ ์ ์๋ ๊ฒฝ์ฐ Vue 3๋ฅผ ์ ์ ์ ์ผ๋ก ๋์ ํด๋ณผ ์ ์์
๊ทธ ์ธ ์ฌํญ
VueUse (GitHub)
- Vue 2์ Vue 3 ๋ชจ๋ ์ฌ์ฉ ๊ฐ๋ฅํ Composition API ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- 148๊ฐ Util API ์ง์
- Web API, Animation, Electron, Firebase, Router, ...
ํ
- VSC Vetur ํ๋ฌ๊ทธ์ธ์
"ts" + tab
๋จ์ถํค๋ฅผ ์ด์ฉํด.vue
ํ์ผ ์์ฑํ๋ฉด ํธํ๋ค
- Props ์์ฑ์ ๋จผ์ ์ ์ํ๊ณ ์ปดํฌ๋ํธ ํ๊ทธ์์ ์๋ ์์ฑ ์ง์๋ฐ๊ธฐ
ย