vue37 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 ) 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 ) 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. Vue 3 ) Vite 2로 생성한 프로젝트에 TailwindCSS 적용하기 Vite로 생성한 Vue3 프로젝트에 TailwindCSS 적용하기 1. 프로젝트를 생성 npm init @vitejs/app vue3-blog cd vue3-blog 저는 vite 2 버전으로 프로젝트를 생성했습니다. 2. TailwindCSS 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npm 을 통해 tailwindCSS 와 해당 종속성을 설치한 다음 init 명령을 실행해 tailwind.config.js 와 postcss.config.js 파일을 생성합니다. 3. 경로 설정 // tailwind.config.js module.exports = { content: ["./index.html", "./src/*.. 2022. 1. 11. Vue) Vite?, 왜 사용할까? Vite란? Vue3버전으로 개발을 함에 있어 별다른 번들 생성 없이 ES 모듈을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴입니다. 왜 Vite 를 사용하나요? Vite 의 등장배경 👓 현재 Webpack, Rollup, Parcel 과 같은 도구들 덕분에 프론트엔드 개발자들의 개발 경험이 크게 향상 되었습니다. 그러나 점점 높은 수준의 앱을 개발하기 시작하면서 처리하는 JavaScript의 양도 기하급수적으로 증가했습니다. 대규모 프로젝트에서 수 천 개의 모듈을 담게 되면서 JavaScript 기반 도구에 대한 성능 병목 현상이 일어나기 시작했습니다. 개발 서버를 시작하는데 많은 시간이 소요되며, HMR을 사용하더라도 수정이 반영되는데에 몇 초의 시간이 걸릴 수 있습니다. 이러한 사항들은 .. 2022. 1. 7. Vue3를 준비하는 자세 (1) Vue2에서 Vue3 버전으로 넘어가면서 변경된 사항 중 하나인 템플릿 디렉티브의 변화에 관한 정리글입니다. Vue3에서의 변경사항 (1) v-model 사용법의 변화 변경사항 커스텀 컴포넌트를 사용할 때, v-model prop와 event의 기본 명칭이 변경되었습니다. prop : value -> modelValue event : input -> update:modelValue v-bind 의 .sync 수식어와 컴포넌트의 model 옵션이 제거되고 v-model 인자로 대체 되었습니다. 새로운 기능 동일 컴포넌트에서 다중의 v-model 바인딩이 가능하게 되었습니다. 사용자 지정 v-model 수식어를 생성하는 기능이 추가되었습니다. (2) v-for 문법의 변화 1. 조건부 분기에서의 key Vu.. 2022. 1. 2. 이전 1 다음 반응형
