![]()
안녕하세요, 이번 포스트에서는 컴포지션 API(Compisition API)에서 템플릿을 참조하는 방법에 대해 소개하려고 합니다. 사용 방법이 크게 달라지진 않았지만, 값으로써 참조하는 방법이 조금 바뀌게 되었습니다. 먼저, 기존의 템플릿 요소 참조 방법을 간략히 살펴보겠습니다. [ 기존 방식 ] 기존에는 참조하고자 하는 템플릿 요소에 ref="바인딩명" 형식으로 작성한 후, 마운트 이후 this 컨텍스트의 $refs를 통해 간단히 참조할 수 있었습니다. 다만, 컴포지션 API의 경우 this 컨텍스트가 존재하지 않으므로 조금 다른 방법으로 사용해야합니다. [ Composition API 방식 ] 참조하고자 하는 템플릿 요소에 ref 속성을 추가하는 방법은 기존과 동일합니다. 그러면 값은 어떠한 방법으..
![]()
(본 포스팅은 Vue 3와 타입스크립트를 사용하는 환경 기준으로 설명합니다) 안녕하세요 이번 포스팅에서는 Vue 3 버전부터 공식적으로 추가될 Composition API와 Vuex를 사용하는 방법에 대해 알아보려고 합니다. 기존에 사용하던 Vuex 저장소 접근 방식은 아래와 같이 바인딩된 this 컨텍스트의 $store를 통해 주입된 Vuex 저장소에 접근할 수 있었습니다. // Vuex store import vuex from 'vuex'; export default new Vuex.Store({ state: { name: '근둥' }, }) // Component export default { name: 'App', created () { console.log(this.$store.state.nam..
![]()
안녕하세요! 이번 포스팅에서는 이후 Vue.js 3 버전에서 추가될 Composition API에 대해 알아보도록 하겠습니다. 지금의 Vue.js는 2.6.11 버전이며 3버전을 향해가고 있습니다. 컴포지션 API(Composition API)가 등장한다는 소식에 많은 관심을 받았었는데요, 어떤 내용인지 한 번 알아봅시다. 1. 개발환경 준비하기 [사전 요구 사항] - Node.js (with NPM) - Vue CLI 지금의 Vue.js는 2.x 버전에 머물러 있기 때문에 컴포지션 API를 사용할 수 없습니다. 하지만, 플러그인을 통해 Vue.js 3에 추가될 컴포지션 API를 사용할 수 있습니다. https://github.com/vuejs/composition-api vuejs/composition..
