Study/Vue23 VueJS 3 ) Chart.js + Ag-Grid-Vue3 연결(?)하기 chart.js + ag-grid-vue3 문제사항 위와 같이 같은 데이터를 나타내는 차트와 그리드가 있습니다. 우측의 그리드에서 데이터가 변경되었을 때 차트 또한 업데이트되도록 구현하고 싶었습니다. 사용한 json 데이터는 다음과 같습니다. [ { "name": "mark", "score": 100 }, { "name": "Nick", "score": 80 }, { "name": "Jack", "score": 60 }, { "name": "Mary", "score": 55 }, { "name": "John", "score": 90 } ] 해결 과정 순서 Props 로 동일한 data 공유하기 Grid 에서 변경된 데이터를 emit 을 이용해 App.vue 의 기존 데이터에 덮어쓰기 :key 속성 이용하.. 2022. 3. 24. VueJS 3 ) <script setup> 과 setup() 의 차이 script setup 과 setup() 이용의 차이 Composition API 를 기반으로 Vue 3 프로젝트를 진행하는 방법에는 아래의 두 가지 방식이 있었습니다. script setup setup() Vue 3 공식 가이드를 보면 export default 구문이 필요가 없어졌습니다. 또한 setup() 함수를 정의하는 부분도 필요가 없어졌습니다. 그러므로 return 문 또한 필요가 없습니다. import 한 컴포넌트를 정의하지 않고 바로 템플릿 태그에서 사용이 가능합니다. props 사용 상위 컴포넌트로부터 받은 props 를 사용하기 위해 defineProps 를 사용해야합니다. 방식 export default { props: { userInfo: { type: Object, }, }, };.. 2022. 3. 21. VueJS 3 ) Composition API 를 기반으로 한 NewsWebApp VueJS 3 ) HackerRank NewsWebApp 제작을 통한 Composition API 학습 전체코드는 아래 링크를 통해 Github 에서 확인하실 수 있습니다. Github 바로가기 실행화면 Vue 2 로 제작한 NewsWebApp 과 동일합니다. 학습 내용 Router - transition Vue 3 에서도 라우터 트랜지션을 활용할 수 있습니다. Vue 2 Vue2 에서는 위와 같이 transition 태그 안에 router-view 태그가 들어있는 형식이었습니다. 하지만 Vue3 부터는 v-slot 과 함께 아래와 같은 형식으로 쓰입니다. Vue 3 Router 속성 이용하기 User 페이지 구현을 위해 Route 의 params 속성을 이용해야 했습니다. Vue2 에서는 this.$r.. 2022. 3. 21. VueJS 3 ) setup() 함수의 2 가지 인자 props, context setup() 함수의 인자 setup 함수는 props, context 두 가지 인자를 가집니다. props setup 내부의 props 는 반응성이 있고, 새로운 props 가 전달되면 업데이트 됩니다. props 는 다음과 같이 사용할 수 있습니다. export default { props: { name: String, age : Number, }, setup(props){ console.log(props.name); } }props 는 반응성을 가지고 있지만 ES6의 구조분해할당을 사용하면 props 의 반응성이 사라지기 때문에 setup 함수의 toRefs 를 사용해 반응성을 유지해야합니다. import { toRefs } from 'vue' export default{ setup(.. 2022. 3. 20. VueJS 3 ) TodoApp 을 통한 OptionsAPI 와 Composition API 비교 Vue3 ) TodoApp 을 통한 OptionsAPI 와 Composition API 비교 같은 동작을 하는 TodoApp 을 각각 OptionsAPI 와 Composition API 를 이용해 제작했습니다. 전체 코드는 아래 링크를 통해 Github 에서 확인하실 수 있습니다. README 파일을 참고해 브랜치별로 원하는 코드를 볼 수 있습니다. Github 로 이동 실행화면 코드 비교 setup 사용 Options APi > Composition API > Options API 와 다르게 Composition API 에서는 setup() 함수 내부에 data 속성과 method, lifeCycle hook, watch 를 입력합니다. 그 다음 setup() 함수내에서 생성한 함수들을 return 해.. 2022. 3. 20. Vuejs ) TodoApp (Vue2에서 Vue3으로) TypeScript 를 적용해 Vue2, Vue3 만든 TodoApp 비교 Inflearn 강좌 "Vue.js+TypeScript 완벽가이드" (장기효) 를 참고하며 제작한 Vue2 버전의 TodoApp 을 Vue3 Options API 기반으로 다시 제작해보았습니다. 아래 링크를 통해 Github 로 접속한 뒤 README 파일의 브랜치 설명을 참고하셔서 Vue3 버전의 전체 코드를 확인하실 수 있습니다. Github 에서 확인하기 실행화면 코드 비교 TypeScript 사용 두 개의 프로젝트 모두 vue-cli 로 프로젝트를 생성하는 시점에 TypeScript를 적용해 생성했습니다. Vue 2 버전에서는 의 형태로 script 코드를 작성해야합니다. defineComponent 는 전달된 객체를 반환.. 2022. 3. 20. Chart.js ) Vue2 + Chart.js 해당 글은 vue2.^, chart.js 2.^ 버전을 바탕으로 합니다. Vue2 + Chart.js 실행화면 Chart.js 설치 npm install chart.js 를 통해 간단하게 설치할 수 있습니다. chart.js NPM 폴더 구조 plugins/ChartPlugin.js import Chart from 'chart.js' export default { install(Vue) { Vue.prototype.$_Chart = Chart; // xx.vue // this.$_Chart => 차트 접근 } } 여러 컴포넌트에서 chart library 를 import 해야 할 경우, 위처럼 임의의 js 파일에서 chart.js 를 import 한 뒤 사용할 컴포넌트에서 this.$_Ch.. 2022. 3. 1. Vue 2 ) Vue 에서 fontAwesome Icon 사용하기 Vue 2 + fontawosome cdn 방식을 통해 fontawesome 아이콘을 바로 사용할 수 있지만, 저는 사용할 아이콘이 많지 않았기에 몇 개의 특정 아이콘만 import 해 사용하는 것을 선택했습니다. npm install npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/vue-fontawesome@latest fontawesome 의 아이콘을 사용하기 위해 먼저 설치합니다. fontAweosome Icon 가져오기 main.js import "../fontAwesomeIcon.js" // ... 생략 fontAwesome.js.. 2022. 1. 18. Vue 2 ) 컴포넌트에 탭기능 적용하기 why? sns 프로필페이지의 하단 화면단을 탭 형식으로 구현하면서 템플릿부분과 백엔드에서 정보를 받아오는 소스코드들이 너무 많아서 컴포넌트를 분리하고 싶었습니다. 단순히 v-if 나 v-show를 쓰면 될 줄 알았는데 게속 안되서 찾아보니 컴포넌트에 탭을 적용하는 방법이 따로 있었네요.. 구조 followPage.vue 라는 상위 컴포넌트에서 followerList.vue , followList.vue 하위 컴포넌트들을 탭 버튼을 통해 렌더링 해줍니다. Code template code follower follow script code export default { components: { followList, followerList }, data() { return { comp: 'follow.. 2022. 1. 18. 이전 1 2 3 다음 반응형
