Vue

생산성을 높이기 위해 vue snippet을 만들어봅시다. 먼저, 아래처럼 vscode에서 command + shift + P 를 눌러 snippet을 검색해서 사용자 코드 조각 구성을 선택해 줍니다. vue snippet을 생성할 것이니 vue를 검색해 선택해줍니다. 그럼 vue.json 파일이 생성되고 여기에서 원하는 대로 설정해주면 됩니다. 저는 typescript와 scss를 사용할 예정이어서 아래처럼 설정해주었습니다. { "vue-init-ts": { "scope": "vue", "prefix": "vts", "body": [ "", "\t", "\t", "", "", "" "" ], "description": "Vue3 Composition API" }, "vue-init-setup-ts": ..

Vue3 CompositionApi에서 Svg를 사용하는 방법들에 대해 소개하고, 개인적으로 가장 효율적이라고 생각되는 Svg 컴포넌트화 방식에 대해 자세히 설명한다. Loading a standard HTML SVG vue의 template부분에 직접적으로 svg파일을 사용하는 방식으로 크게 아래 두가지가 있다. vue의 template안에 직접 태그 작성 태그의 src에 svg파일의 위치 연결 장점 크게 고민할 필요 없이 사용가능하며, svg 코드 값을 직접 수정, 변수를 전달 할 수도 있다. 단점 svg파일이 조금만 복잡해져도 가독성이 매우 저하된다. vue-svg-loader 사용 vue에서 직접적으로 svg를 load 할 수 있도록 도와주는 vue-svg-loader 라이브러리가 있다. 아래 코..

vue3로 프로젝트로 설정할 때 마다 해주는 prettier, eslint 설정을 정리해보고자 합니다. 이 설정을 통해 저장 할 때마다 내가 정한 포맷으로 바뀌는 lint on save, format on save가 되도록 하는 것이 목표입니다. vue3 프로젝트 생성 vue-cli를 이용하여 아래처럼 vue3 프로젝트를 생성 했습니다. (vue-cli 공식 사이트) 1. Preset 선택 - Manually select features vue-cli는 default로 preset을 제공하고 있지만 저는 직접 원하는 부분만 설치 할 수 있도록 manually select 를 클릭합니다. (v3-ts-sass는 제가 저장한 preset으로 무시하셔도 좋습니다.) 2. Feature 선택 아래와 같이 선택해..

프론트 작업을 하다보면 scipt 안에 있는 변수를 바로 css쪽에서 사용하고 싶을 때가 생긴다. Vue에서 v-bind를 이용한 너무 쉬운 방법을 보고, 공유하고자 정리해본다.(다들 이미 쓰고 있을 지도...) 이번 포스트에서는 JS쪽 변수를 바로 CSS로 넘겨 배경색을 변경하는 간단한 예제를 만들어 볼 예정이다. 완성본은 아래와 같을 것이다. 물론 너무 간단하지만 아주 편하게 구현 할 수 있다는 것에 그 의의가 있다. Vue Script 변수 CSS 파일에서 접근하기 우선 나는 Vue 3 + TS환경에서 진행 하였고, 아래처럼 ColorChange라는 컴포넌트를 간단하게 만들었다. //ColorChange.vue {{ color }} 너무 간단한 코드지만 짧게 설명하자면, 해당 컴포넌트는 버튼으로 클..

Vue3 프로젝트 진행중 위와 같은 에러 메시지를 만났다. 혹시나 미래의 내가 잊어버리지 않게 하기 위해 기록한다. Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node' 상황은 이랬다. props로 데이터를 던져주고, 그걸 자식 컴포넌트에서 v-for로 화면에 보여주고 있었다. 실제 에러 메시지는 아래와 같았다. 해결법은 사실 간단했다. div로 한번 더 감싸주기! 나는 v-for를 실행하는 div 태그가 가장 상위의 태그였고, 그것이 문제였다. 예를 들어, 아래의 코드를 보자. 기존에 내가 했던 방식이었다. {{list}} 위의 코드를 아래처럼 바꿔주자. {{list}}

매번 Vue Project 생성 할 때 마다 발생하는 multi-word 컴포넌트 네이밍 에러를 해결하는 방법을 정리해보자. 원인 원인은 당연하게도 Component 네이밍을 하나의 단어로 했기 때문이다. 해결책 해결책은 공식 홈페이지에 나와있다. 참고링크: https://eslint.vuejs.org/rules/multi-word-component-names.html vue/multi-word-component-names | eslint-plugin-vue eslint.vuejs.org 공식 홈페이지에서는 ignores에 배열로 내가 원하는 컴포넌트 네임을 하나씩 넣어주라고 한다. package.json 파일에 eslintConfig 부분을 수정해주면 되는데, 아래코드는 Streaming.vue라는 컴..