vue3

문뜩 Vue-cli 사이트에 들어갔다가 Vue CLI가 Maintenance 모드에 들어갔으며, 앞으로의 프로젝트들은 Vite기반으로 생성 하는 것을 권장한다는 것을 보게 되었다. 이번 포스트에서는 왜 vue-cli에서 Vite로 넘어가게 되었는지, 그리고 실질적인 migration 방법에 대해 정리 해보고자 한다. Why Vite? 기존의 웹팩과 같은 번들링 툴은 프론트엔드에서 ES Module을 사용할 수 있게 해 생태계를 확장시키는데 엄청난 기여를 했다. 하지만, 프로젝트가 커짐에 따라 데브 서버를 키는 속도가 점점 느려지는 문제가 있었다 Vite는 이 문제를 네이티브 ESM을 사용해 필요한 모듈을 그때그때 불러오도록 해 개발 서버의 시작시간을 프로젝트의 크기와 상관없이 빠르게 유지시켜준다. 이러한..

개인 프로젝트를 하는 중 배경 이미지를 선택 할 수 있는 기능을 구현 했다. 문제는 이미지가 로드 되는 시간이 너무 오래 걸린다는 점이었다. 이 부분을 어떻게 개선 했는지 정리해보고자 한다. 먼저 최적화를 하기 이전에 상황을 보도록 하자. 그리고 개선 이후, 화면이다. 영상을 업로드하면서 조금 느려보이는 경향이 있긴하지만, 우선 로딩시간이 많이 개선되었고, 이미지가 로딩되기 이전에는 placeholder를 미리 두어 이미지가 나올 것이라는 것을 사용자가 알 수 있도록 만들었다. 이미지 용량 줄이기 나의 가장 큰 문제는 너무 큰 이미지 용량이었다. 배경 이미지 하나가 6MB, 큰 것은 10MB 짜리도 있었다. 나는 이미지 로딩 시간을 줄이기 위해 구글에서 출시한 파일 포맷인 webp 형식으로 이미지들을 모..

Vue3 CompositionApi 에서는 script setup 사용을 권장하고 있고, 더이상 defineProps를 import할 필요없게 되었다. 하지만 이상하게도 내가 import 없이 defineProps를 사용하려고 할 때, eslint에서는 계속 'defineProps' is not defined 라고 에러메시지를 출력한다. 어떻게 해결하는지 알아보자. 구글링을 해보니 이미 eslint에서 이슈가 되어 있던 문제였다. (참고링크) 뭐 App.vue에서 글로벌 import를 해라. 라는 말도 있었지만, 더 이상 import안해도 되는데 eslint를 위해 내가 따로 global import하기는 싫었다. eslint.vuejs에서 찾아보니, 아래처럼 설명되어 있었다. 결론은, 아래처럼 9.0...

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 선택 아래와 같이 선택해..

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