# Vue 3

bear-frog

Options api vs. Composition api vue 2의 options api vue 3의 composition api 그 차이는 무엇일까? 많은 좋은 글들이 있고 내 해석이 온전하지도 않겠지만 내가 이해하기로 Composition api의 가장 큰 특징은 응집력 이다 코드를 통해 생각해보자 아래와 같은 동일한 vue template이 존재한다고 생각해보자 > 아주 간단한, 버튼을 통해 value를 증감시키는 선언이다 1. 이를 options api로 구현한다면... > data 에서는 값들을 처리한다 > method 에서는 로직을 처리한다 이렇듯 내부 구조가 나뉘어져 있다 2. 이를 Composition api로 구현한다면 > 짠! > setup으로 값과 로직이 하나로 묶였다 3. 조금 더 멋져져보자 > 짜잔! > script setup을 통해 짧은 코드 완성이다

wooryung

- [Vue 3] Router 사용하기에 store를 추가하여 navigation guard를 구현하고자 한다. userStore에 user 정보가 있으면 로그인한 사용자로 판단하여 /로, user 정보가 없으면 로그인하지 않은 사용자이므로 /login으로 이동하도록 구현한다. 1. user-store.js 파일 생성 📎 src/stores/user-store.js username이 존재하면 로그인 된 상태, username이 존재하지 않으면 로그인이 되지 않은 상태로 판단한다. 2. navigation guard 설정 📎 src/router/index.js to.fullPath를 체크하는 이유는 무한 리디렉션을 방지하기 위함이다. to.fullPath를 체크하지

buddle6091

저번 글에서 다뤘던 Vue 3에서의 연장선입니다🥰 https://velog.io/@buddle6091/23.02.10-Vue-3..-%EC%9D%B4%EC%A0%84-%EB%B2%84%EC%A0%84%EA%B3%BC%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%EB%9D%BC%EC%A1%8C%EC%9D%84%EA%B9%8C Vue 3 + Typescript + Vite Vue 3에 관하여는 앞선 포스팅에서 다룬 부분이 있어 오늘은 해당 프레임워크를 설치했을 시의 환경이 어떻게 구성이 되어있는지 보려고 한다! Vue 3를 타입스크립트 기반으로 설치해 보기 npm init vue@latest 명령어로 통해 해당 Vue 프로젝트를 타입스크립트로 작업을 할 것인지 설정을 하게된다. 이러한 작업을 거치면 타입스크립트 기반의 Vue 3 프로젝트 초기 구성이 완료가 된다. ![](https://velog

wooryung

- 환경: Quasar CLI + Vite /와 /login 경로로 이동할 수 있도록 router를 설정하고자 한다. 1. 프로젝트 구조 2. routes.js 파일 수정 기존 코드 quasar dev를 실행했을 때 default 화면 MainLayout.vue에 IndexPage.vue가 component로 들어간 결과이다. 수정한 코드 경로가 /인 경우 RouteLayout.vue에서 HomePage.vue를 component로 사용하고, /login인

wooryung

1. Quasar 프로젝트 생성 VSCode 터미널에서 yarn/npm/pnpm을 이용하여 Quasar 프로젝트를 생성한다. (여기서는 npm을 이용) 터미널에 npm init quasar를 입력하면 프로젝트 생성이 시작된다. 프로젝트 생성 옵션 i18n: internationalization의 약자. 국제화 >- SW 국제화: SW가 특정 지역이나 언어에 종속되지 않고 다양한 지역, 언어에서 정상 동작하도록 국제적으로 통용되는 SW를 설계하고 개발하는 과정 cf) SW 현지화: 현지 IT 환경에 적합하도록 SW를 개발하는 과정 ![](https://velog.velcdn.com/images/wooryung/po

buddle6091

Vue 3 의 도입 기본적으로 Vue 프레임워크를 사용하고 있는 유저들은 Vue 2.x 단계를 사용하고 있었다. 그렇지만 22년 상반기부터 Vue는 공식적으로 버전 3을 내세우기 시작하였다. 여기서 Vue 2와 다른 점이 없다고 말하기도, 달라진 부분이 많아졌다 하기도 애매한 것이 이 Vue 3인 것 같다. 기존에 상용되었던 Vue 2와 한번 비교해볼까 한다! 본격적인 글에 앞서 Vue 2에 대한 소식 ( Official 입니당 ) Vue 3 공식문서에서 공부 과정에서 발견한 글이다. Vue 2 에 관한 지원은 23년이 마지막 이라고 한다. 혹시라도 많이 부족한 이 글을 접한 모든 분들은 Vue 개발 공부 방향성에 있어 참고하면 좋을 것 같다! Vue

y005

프론트엔드의 반응형 프로그래밍 끊임없이 변화하는 데이터 스트림을 다루는 비동기적 프로그래밍으로 이벤트를 발견하는 관찰자와 발생한 이벤트에 반응하는 핸들러의 구성을 다룬다. 실시간으로 사용자가 발생한 이벤트로 생긴 데이터의 변화를 새롭게 DOM으로 렌더링해야 되는 프론트엔드의 프로그래밍 또한 반응형 프로그래밍의 특징을 가지고 있다. 자바스크립트의 문제점 아래 코드는 A2가 A0과 A1의 값에 의존하고 있지만 A0의 변화를 A2는 반영하지 못해 반응형 프로그래밍의 특징을 구현할 수 없는 문제점을 보인다. 이를 개선하기 위해 아래 코드와 같이 update 함수를 구현하고 A2가 의존하는 A0과 A1의 데이터가 변화할 때 update 함수를 호출하는 방식을 통해 A2도 실시간으로 의존하는 데이터가 변화할 때마다 이를 반영할 수 있게 된다. Reactive Object vue는 자바스크립트 객체를 Proxy 객체로 감싼 후 getter와 setter를 인터셉트

wooryung

Vue.js MVC 패턴에서 View(사용자에게 보이는 화면)를 중심으로 만든 라이브러리 및 프레임워크 MVC 패턴 디자인 패턴 중 하나 Model은 데이터를 관리하고, View는 사용자에게 보이는 화면을 관리하며, Controller는 이 둘을 연결해준다. >Vite webpack을 대체할 수 있는 번들러 Vue 3에서 권장하는 번들러이며, Vue 창시자 Evan You가 만든 오픈소스 1. Node.js 설치 https://nodejs.org/ko/ npm을 사용하기 위해 Node.js를 설치한다. (Node.js를 설치하면 npm이 자동으로 설치된다.) >npm (node package manger) JavaScript 라이브러리를 설치하고 관리하는 패키지 매니저 패키지: 개발자들이 만든 일련의 유용한 도구 및 프레임워크 Node.js에서 사용할 수 있는 모듈들을 패키지화하여

buddle6091

vuex에서 타입스크립트 마이그레이션 중에 발견된 콘솔로그 관련 에러이다. 해당 에러에서는 기본적으로 console이 허용되지 않는다라고 한다. 해당 에러에 대해서는 ESlint 공식 문서에서 볼 수 있다. 임시적으로 허용 (주석) 주석으로 /* eslint-disable no-console */ 라는 코드를 설정해주면 사용이 가능 => 이 방식은 임시 이기에 직접 설정을 해주는 편이 좋다 정책적으로 허용 (설정값 변경) 다음은 설정파일 즉, package.json에서 이것을 제어하는 방법이 있는데 위와 같이 설정해 주면 된다! > Reference https://rudalson.tistory.com/entry/Vue%EC%97%90%EC%84%9C-error-Unexpected-console-statement-no-console

space086

Vite를 이용한 기본 프로젝트 생성 Vite Alias 초창기 Vite는 Alias를 지원하지 않았지만 2020년 5월부터 공식적으로 Alias를 지원하게 되었다. Alias를 이용하면 대규모 프로젝트를 진행할 때 각 파일의 경로를 모두 적어주지 않아도 된다. Alias를 구성하기 전, 경로를 생성할 때 도움을 주는 path 라이브러리를 설치하자. 위와 같이 Alias를 하면 컴포넌트를 불러올 때 /src/components/Component.vue 가 아닌, /@components/Component.vue라고 할 수 있다. 독립형 Vue-devtools 연동 터미널 창을 나눈 후, 새로운 터미널에 vue-devtools를 실행한다. index.html 의 `` 태그 마지막에 다음을 추가한다. 새로운 터미널 창에 npm run dev 치고 개발용 서버를 실행한다. ![](https://velog.velc