티스토리

Ik's memo

검색하기

블로그 홈

Ik's memo

jongik.tistory.com/m

IT, 일상 여러가지 주제에 대해 글쓰고있어요

구독자: 2

방명록 방문하기

주요 글 목록

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 속성 이용하.. 공감수 1 댓글수 0 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, }, }, };.. 공감수 8 댓글수 0 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.. 공감수 0 댓글수 0 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(.. 공감수 0 댓글수 0 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 해.. 공감수 3 댓글수 1 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 는 전달된 객체를 반환.. 공감수 1 댓글수 0 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.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 2022. 1. 18.
Vue 2 ) 무한스크롤 페이징 구현하기 vue-infinite-loading 웹sns서비스를 구현하면서 타임라인과 팔로워,팔로잉 목록을 표시할 때 무한스크롤페이징을 구현하려 했습니다. 아래는 팔로잉 리스트를 불러오는 코드 소스코드 template code 더 이상 목록이 없습니다. script code data:{ page:0 // 페이지 초기값 지정 } methods:{ infiniteHandler($state) { axios({ method: 'get', url: `${SERVER_URL}/profile/${userpk}/memfollowings`+"?page=" + (this.page), headers: this.getToken, }).then(res => { setTimeout(() => { // 로딩스피너를 위해 1초의 지연시간을 설정했다. if(res.data.leng.. 공감수 1 댓글수 0 2022. 1. 18.
Vue 3 ) 반응형 api 를 이용해보자 반응형 기초 아래 글을 읽고 오시면 이해가 더욱 편합니다. 반응성과 관련된 APIs ref, refs 란?? 반응형 상태 선언하기 JavaScript 객체에서 반응형 상태를 생성하기 위해, reactive method 를 사용할 수 있습니다. import { reactive } from 'vue' // 반응형 상태 const state = reactive({ count: 0 })reactive 는 Vue 2 버전에서의 Vue.observable() API 와 동일한 것으로, RxJS 의 observables 과 혼동을 피하기 위해 이름을 바꿨습니다. 여기서 반환된 상태는 반응형 객체입니다. 반응형 변환은 "deep" - 전달된 객체의 모든 중첩된 속성 (property) 에 영향을 미친다는.. 공감수 0 댓글수 0 2022. 1. 14.
Vue 3 ) TodoApp 제작 Vue 3 버전을 학습하기 위해서 가장 간단하면서도, 몇 번 만들어 보았던 TodoApp 을 다시 한 번 만들어 보기로 했습니다. 목차 1 - 결과물 미리보기 2 - 학습 내용 2-1. 프로젝트 생성 및 확인 2-2. 필터와 localStorage 저장기능 구현 2-3. 컴포넌트 구현 글을 마치며 TodoApp 결과물 구현 기술 Vue 3 Vite 2 [Vue) Vite?, 왜 사용할까? Vite란? Vue3버전으로 개발을 함에 있어 별다른 번들 생성 없이 ES 모듈을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴입니다. 왜 Vite 를 사용하나요? Vite 의 등장배경 👓 현재 Webpack, Rollup jongik.tistory.com](https://jongik.tistory.com/11.. 공감수 0 댓글수 0 2022. 1. 12.
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/*.. 공감수 1 댓글수 0 2022. 1. 11.
Vue ) <script setup> 은 또 뭐 Vue3 공식문서를 참고했습니다. 제 영어 실력 부족으로 인해 번역이 매끄럽지 않은 부분이 있을 수 있습니다.. 내부 코드는 구성 요소 setup() 기능의 내용으로 컴파일됩니다. 다시말해, {{ msg }} import 도 같은 방식으로 노출됩니다. methods 옵션을 통해 노출하지 않고도 템플릿 표현식에서 가져온 Helper 함수를 직접 사용할 수 있습니다. {{ capitalize('hi') }} 반응성 (Reactivity) 반응성 API 를 사용하여 반응성 상태를 명시적으로 생성해야 합니다. setup() 함수에서 반환된 값과 유사하게 ref 는 템플릿에서 참조될 때 자동으로 unwrapping 됩니다. {{ count }} 컴포넌트 사용 케밥케이스도 정상적으로 작동하지만 일관성.. 공감수 0 댓글수 0 2022. 1. 10.
Vue 3 ) Ref, Refs ?? Refs Vue 2 까지 쓰이던 this.$refs 를 Vue 3 의 Composition API 에서는 각각 함수로 제공됩니다. setup() 함수 내에서 각 Refs 를 import 하여 사용할 수 있습니다. ref 전달받은 기본 자료형 변수를 반응형 객체로 변경합니다. 이 객체의 value 속성을 통해서 자유롭게 변경할 수 있습니다. 일반적으로 이렇게 나온 반응형 객체를 ref 라 칭합니다. unref ref 를 다시 일반 변수로 바꿉니다. 내부적으로 프록시 객체에서 분리하는 과정을 진행합니다. toRef reactive API 로 생성돈 객체의 속성을 ref 를 이용해 반응형 객체로 생성합니다. toRefs toRef 를 해당 객체의 모든 속성에 적용합니다. isRef ref 객체인지 확인합니다... 공감수 0 댓글수 0 2022. 1. 9.
Vue 3 ) Vue3 에서 제공하는 반응성과 관련된 APIs 반응성 관련 API Vue 3 는 프록시를 이용해 반응성을 관리합니다. 어떤 변수가 반응성을 가지게 하기 위해서는 프록시로의 변환이 필요하고, 반응성을 해제하기 위해서는 프록시에서 일반 변수로의 변환이 필요합니다. reactive 객체의 속성들이 반응성을 갖게 만들어줍니다. 일반적으로 기본 자료형 변수가 반응성을 갖도록 할 때 ref 함수를 이용하는데, 객체의 속성으로 변수들을 모아 reactive 를 사용하면 변수의 개수가 많을 때 매우 유리하게 사용할 수 있습니다. readonly 일반 객체나 프록시 객체를 읽기전용 프록시로 변경합니다. 기본적으로 객체 내 모든 속성을 읽기전용으로 변경합니다. isProxy 인자로 들어온 변수가 reactive 나 readonly 등으로 만들어진 프록시 객체인지 확인.. 공감수 0 댓글수 0 2022. 1. 9.
Vue 3 ) Provide ? Provide 란? 일반적으로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때는 props 를 이용합니다. 하지만 부모와 자식 관계가 깊어질수록 props 로 데이터를 전달하는 데는 한계가 있습니다. Vue2 까지는 이 문제를 해결하기 위해 Event Bus 를 생성하거나 Vuex 에 데이터를 담았었습니다. 하지만 Vue3 에서는 Event Bus 와 같이 비정형적 데이터 전송이 프로젝트의 관리를 어렵게 하기 때문에, $on, $off, $once 와 같은 이벤트 method 를 모두 삭제했습니다. Vue3 에서는 Provide/Inject 를 활용해 이러한 문제를 해결할 수 있습니다. 부모 컴포넌트에서 어떤 데이터를 provide 해주면 자식 컴포넌트에서 해당 데이터를 inject 해서 사용할 수.. 공감수 1 댓글수 0 2022. 1. 9.
Vue 3 ) Props Props props 는 컴포넌트에 데이터를 넘겨줄 수 있는 사용자 지정 속성입니다. 컴포넌트를 생성할 때 props 옵션을 이용해 어느 이름의 props 데이터를 받을지 결정하게 됩니다. 일반적으로 props 라는 옵션에 Props로 넘어오는 속성의 키 값들을 배열로 지정하면 사용에 큰 문제가 없습니다. props: ["name", "age"] 하지만 어떤 컴포넌트는 특정한 Props 를 필요로 할 수도 있고, 정해진 데이터 타입에 맞게 들어왔는지 확인이 필요할 수도 있습니다. 이럴 때는 props 옵션의 값을 배열 대신 객체로 변경하고 각 Props 데이터의 상세 내용을 지정해주면 됩니다. type 데이터 타입을 정의합니다. default 해당 Props 가 들어오지 않을 경우 사용할 기본값을 가지게.. 공감수 0 댓글수 0 2022. 1. 8.
Vue3 ) watch 와 watchEffect watch?? watch 는 개발자가 코드로 지정한 변수값의 변화를 감시하여 콜백함수로 하여금 부가적인 작업을 할 수 있도록 해줍니다. watch 는 지정된 특정한 변수의 감시와 더불어 값이 변경되기 이전 값을 참조할 수 있다는 장점이 있습니다. 컴포넌트가 생성되어 변수가 할당되기 전에 모든 변수는 null 값을 가지고 있습니다. 이 후 변수의 초기값이 들어가게 되는데, watch는 기본적으로 이러한 null값에서 초기값으로 넘어가는 과정을 데이터의 변경으로 판단하지 않습니다. 일반적으로 이 값을 바라볼 일은 없지만 같은 컴포넌트를 다시 불러올 때 props 의 처음 값이 매우 중요할 때가 있습니다. 이런 경우에는 immediate 옵션을 true로 설정해주면 처음 값도 볼 수 있습니다. 아래의 예시코드.. 공감수 2 댓글수 0 2022. 1. 8.
Vue 3 ) 뷰 라이프사이클의 변경?! Vue Component LifeCycle ( 생명주기 ) Vue 공식문서를 살펴보던 중 기존의 LifeCycle 과 다르게 destory 부분이 없어지고 새로운 LifeCycle 요소가 생긴 것을 확인할 수 있었습니다. 그래서 새롭게 바뀌어진 Vue LifeCycle 에 대해 정리하는 글을 쓰고자 했습니다. LifeCycle 이란? 컴포넌트를 생성하여 DOM 노드 트리에 마운트하고, 불필요한 엘리먼트를 제거하는 일련의 과정을 생명주기라고 합니다. Vue는 각 생명주기를 Hooking 할 수 있는 방법을 제공하는데 이를 LifeCycle Hook 이라고 합니다. Options API를 사용할 경우, 각 LifeCycle은 지정된 옵션 함수를 정의하여 Hooking 할 수 있습니다. LifeCycle은 어.. 공감수 1 댓글수 0 2022. 1. 8.
Vue ) 이벤트 수식어 v-on 디렉티브가 제공하는 이벤트 수식어 이벤트 수식어 설명 .stop 이벤트 전파를 방지합니다. stopPropagation() 과 동일 .prevent 브라우저의 기본 동작을 금지합니다. preventDDefault() 와 동일 .capture 이벤트리스너의 capture 옵션을 활성화시킵니다. .self 이벤트가 자식 엘리먼트가 아닌 현재 엘리먼트에서 발생했을 때만 핸들러를 호출합니다. .once 최대 한번의 클릭만 허용합니다..once.prevent 와 같이 사용하면 처음 클릭 시 태그의 본연 기능을 방지하고 원하는 기능을 실행시킬 수 있습니다. .passive 이벤트리스너의 passive 옵션을 활성화시킵니다. .exact 정확히 해당 키만 눌렀을 때 핸들러를 호출합니다. "@click.ctr.. 공감수 0 댓글수 0 2022. 1. 8.
Vue) Vite?, 왜 사용할까? Vite란? Vue3버전으로 개발을 함에 있어 별다른 번들 생성 없이 ES 모듈을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴입니다. 왜 Vite 를 사용하나요? Vite 의 등장배경 👓 현재 Webpack, Rollup, Parcel 과 같은 도구들 덕분에 프론트엔드 개발자들의 개발 경험이 크게 향상 되었습니다. 그러나 점점 높은 수준의 앱을 개발하기 시작하면서 처리하는 JavaScript의 양도 기하급수적으로 증가했습니다. 대규모 프로젝트에서 수 천 개의 모듈을 담게 되면서 JavaScript 기반 도구에 대한 성능 병목 현상이 일어나기 시작했습니다. 개발 서버를 시작하는데 많은 시간이 소요되며, HMR을 사용하더라도 수정이 반영되는데에 몇 초의 시간이 걸릴 수 있습니다. 이러한 사항들은 .. 공감수 1 댓글수 0 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.. 공감수 1 댓글수 0 2022. 1. 2.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.