애 둘 냥 둘

아, 왜 이 조합으로 시작했는지 모르겠다. 그냥 Vue3 로 할걸. 아무튼 Vue2 에서 Composition API 를 이용하여 신규 프로젝트 작업 중. script setup 으로 코드를 작성 중인데 router 를 이용하는데 문제가 생겼다. (사실 사방팔방에서 문제다. vuex 도 그렇고 각종 플러그인들도 그렇고) 라우터가 변경될 때마다 실행되는 코드를 넣어야 하는데 script setup 을 사용하다 보니 this.$route 를 가져오지 못한다. 이런 상황. 아무리 인터넷을 찾아봐도 모르겠다. 아무래도 Vue2 + Composition API (with script setup) 조합을 사용하는 괴랄한 사람이 별로 없어서겠지. 결국 코드를 하나씩 찍어보면서, 찾아냈다. HTML 삽입 미리보기할 수..

Vue 3 출시 후 꽤 많은 시간이 흘러 stable 해졌다고 판단하여 일부 프로젝트에서 Vue 3 를 사용하기 위한 사전 준비를 하고 있다. 아니다, stable 은 개뿔. 개판이다. Vue 3 에서도 Vue 2 부터 쓰던 문법을 계속 쓸 수 있으므로 전환에는 크게 문제가 없는데 이왕 쓸 거라면 Vue 3 에서 권장하는 방식으로 해야 하지 않겠는가. 2022.06.22 - [개발/Front-End] - Vue CLI 를 통한 Vue 프로젝트 생성 Vue CLI 를 통한 Vue 프로젝트 생성 상당히 오랫동안 Webpack 을 통해 만들어진 프로젝트를 깎고 깎아 사용하다가 신규 프로젝트를 생성할 일이 생겨 Vue CLI 를 통해 만들어보기로 한다. 일단 Vue CLI 를 실치해야 한다. NPM 과 Yarn..

webpack 에서 브라우저 캐싱을 회피하기 위한 전략으로 hash 값을 많이 사용한다. 일반적으로 [name].[contenthash][ext] 같이 파일명에 hash 값을 많이 사용하는데, 파일명에 hash 값이 들어있을 경우 파일 내용이 변경되거나 빌드 때 chunk id 가 변경되어 파일명이 계속 바뀌는 문제가 있다. 이 경우 이미 업로드 된 파일을 지우고 다시 올려야 하는 번거로움이 생긴다. 나의 경우 파일명 난독화가 필요하기도 하여 hash 값을 이용하긴 해야 한다. 따라서 파일명으로 난독화 처리를 하였다. const path = require("path"); const crypto = require("crypto"); const IS_LIVE = process.env.NODE_ENV === ..

상당히 오랫동안 Webpack 을 통해 만들어진 프로젝트를 깎고 깎아 사용하다가 신규 프로젝트를 생성할 일이 생겨 Vue CLI 를 통해 만들어보기로 한다. 일단 Vue CLI 를 실치해야 한다. NPM 과 Yarn 을 프로젝트마다 혼용해서 사용하고 있지만 여기는 Yarn 을 사용. > yarn -g add @vue/cli 설치가 잘 끝났는지 확인하기 위해 버전 확인을 한다. > vue --version 'vue' 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. yarn 에 전역으로 설치할 일이 없다 보니 환경 변수가 안 들아가 있나 보다. > yarn global bin C:\Users\...\AppData\Local\Yarn\bin 저 경로를 윈도우 환경 변수에..