Half Road

vue-slider-component 컴포넌트를 쓰는데 갑자기 제목과 같은 에러가 발생했다. pacakge.json 에도 변화가 없고 업데이트나 설치를 한 것도 없는데 해당 에러가 갑자기 발생해서 당황스러웠다... 이전 branch로 돌려서 테스트 해보았으나 역시나 실패.. 몇시간 해메다가 해결책을 찾은건 vue, vite 버젼 업그레이드가 해결책이 였다. "dependencies": { "vue": "^3.4.21", // prev: ^3.2.38 ... }, "devDependencies": { ... "@vitejs/plugin-vue": "^5.0.4",// prev: ^3.0.3 "@vitejs/plugin-vue-jsx": "^3.1.0", // prev: ^2.0.1 "vite": "^5.1..

공통점 Reactive Data 변경 시점에 처리를 담당 차이점 Program State 변경 Logic 존재 여부 존재 : Watch 사용 미 존재 : Computed 사용 Computed는 Program state를 바꾸지 않는 Pure Function이다. 예시 computed data() { return { name: "half" } } computed:{ welcome() { return "hi" + this.name } } watch data() { return { isLoading: false, data1: 1, data2: 2, } } methods: { // someProcess1, someProcess2 : change Program State someProcess1() { ... th..

Component 내에 전반적으로 사용될 상수를 어떻게 선언해서 사용해야 할까? 해당 상수를 Component 상수라고 칭하겠다. 현재 프로젝트에서는 다음의 방법을 쓰고 있다. data() { // 상수 this.name = "Half" return {} } data 속성에 return value로 넣지 않고 vue instnace에 바로 할당하는 방법이다. 이렇게 하면 vue data 선언 영역에서 어떤 데이터가 상수로 사용하는지 알 수 있다. 하지만 여기에는 2가지 문제점이 있다. 문제점 해당 데이터가 상수인지는 data 선언 영역에서만 확인이 가능 상수를 보장할 수 없음 methods: { someFn() { const result = `hi ${this.name}` ... } } 해당 코드에서 t..

vue2에서 model속성에 prop, event 정의해서 구현했던 Component 2-way-binding 방식이 vue3에서 Component v-model로 편리하게 구현 가능하게 되었습니다. Child 컴포넌트와 Parent 컴포넌트 정의를 각각 보겠습니다. Options API로 설명하겠습니다. Child 컴포넌트 정의된 prop과 emit을 구현하면 되는데 바로 'modelValue' prop & 'update:modelValue' emit 입니다. Child : :value, @input을 정의하여 지정한 prop과 emit을 연결시킵니다. data의 in - out을 결정했습니다. 여기서는 부모 컴포넌트가 input 값을 받아야하기 때문에 emit함수 2번째 인자에 input 값을 넘겨주..

먼저 Project에서 ESLint, Prettier 사용과 VSCode에 적용은 별개라는것을 확인하겠습니다. CLI를 통한 실행 ESLint, Prettier를 CLI로 실행하여 파일들을 검사할 수 있습니다. 해당 도구들을 설치하면 명령어를 실행하여 파일들을 검사하는 것이지 Editor에서 해당 설정이 동작하는것은 아니라는점 숙지해주세요. ESLint, Prettier 적용 npm init vue@latest # Vue CLI를 통한 프로젝트 생성 vue CLI를 통해 ESLint와 Prettier를 설치하신분은 .eslintrc.cjs 파일을 보실수 있습니다. 없다면 ESLint와 Prettier를 각각 깔아주시고 환경설정 파일을 생성해주셔야합니다. 환경설정 파일은 다양한 포멧이 있으니 제일 하단에 ..

최근 Vue 설치하신분들은 Vite(비트)를 Build Tool로 지정하여 사용하실 텐데요. Vite에서 @ Alias(별칭)에 대한 소개가 별로 없어서 정리해보겠습니다. Vite 설정파일 Vite 설정파일은 Project 폴더 바로 아래 위치합니다. 해당 파일 안에서 alias를 지정할 수 있는데요. 기본적으로 ./src -> @ 로 지정되어있습니다. 위 이미지처럼 alias 를 지정하였기 때문에 @를 사용해서 경로 지정이 가능합니다. ./src/components -> @/components 이런식으로 작성하면 상대 경로를 고민할 필요없이 간단하게 작성이 가능합니다. VSCode Editor에 별칭 등록 Vite는 Build Tool이기 떄문에 Compile시에 Alias를 정해진 Url로 바꿔줄수 ..

Login 페이지에서 메인 페이지로 전환 하는 방법을 찿던중 emit기능을 알게 되었습니다. 상위 컴포넌트와 통신하는 방법으로 사용하는 기능으로 emit을 쓰더라구요. 간단한 예제로 알아봅시다. 이 무엇인지 몰라 찿아보니 아래와 같았습니다. Composition API 사용을 위한 Syntatic Sugar (기존 문법이 간단한 문법으로 표현될때 쓰는 용어, ex. Jquery, Async, Await) This is Before Go After This is After 순서 1. EmitExam에서 chagne Event를 Before.vue 컴포넌트에 정의 2. Before.vue에서 change Evnet 실행(emit) 3. EmitExam에 isBefore이 false로 바뀌면서 After.vu..

VUE CLI 설치시 기본 CSS Vue CLI로 프로젝트 생성시에 기본적으로 만들어지는 file인 base.css, main.css가 만들어질거에요. base.css는 app 기본 css를 담당하는 파일입니다. base.css > main.css 로 구성되어 있습니다. theme를 바꿀떄는 base.css 파일을 열어서 바꿉니다. @media (prefers-color-scheme: dark) {...}// 어둡게 // or @media (prefers-color-scheme: light) {...}// 밝게