신비한 개발사전

Vuetify는 Vue.js 전용 UI 프레임워크다. 웹페이지를 만들 때 필요한 웬만한 컴포넌트들이 이미 Vuetify에 준비돼 있어서 손쉽게 가져다 쓸 수 있다. Vue.js에 설치Vue.js 프로젝트에서는 'vuetify' 패키지를 설치하고 createVuetify() 함수로 vuetify 객체를 생성한다. 패키지 설치:pnpm i vuetify main.ts 파일에 객체 추가:import { createApp } from "vue";import App from "./App.vue";// Vuetify 관련 importimport "vuetify/styles";import { createVuetify } from "vuetify";import * as components from "vuetify/co..

Nuxt는 Vue 프레임워크에서 SSR 컴포넌트를 쓸 수 있게 해주는 풀스택 프레임워크다. Vue의 Next.js인 셈이다. 디렉토리 구조(root)/ components └ 컴포넌트.vue layouts └ default.vue pages └ index.vue └ page1.vue └ page2.vue app.vue Nuxt는 root 디렉토리에 있는 app.vue나 pages 폴더의 index.vue 파일을 기준으로 기본 주소인 "/"의 메인 페이지를 생성한다. app.vue 파일과 pages 폴더를 함께 쓰려면 app.vue 안에 컴포넌트를 추가하고 /pages/index.vue 파일을 메인으로 써야 하지만, app.vue 파일을 삭제하고 /pages/index...

리액트 생태계에 react-calendar가 있듯, Vue 생태계에는 v-calendar 라이브러리가 있다. 현재 깃헙에 수많은 이슈들이 오픈되어 있지만, 간단한 캘린더를 구현할 땐 특별히 큰 문제는 없어서 나도 계속 사용할 것 같다. 다만 v-calendar의 주간 view 컴포넌트에 버그가 있어서 해결하기 위해 이런저런 시도를 해봤고, 그 끝에 나름대로의 대안책을 찾았다. v-calendar는 view prop을 통해 주 단위로 보여주는 캘린더를 구현할 수 있다. 추가로 attributes prop을 전달하면 캘린더 날짜에 이벤트가 있음을 나타내주는 표시와 팝업도 넣을 수 있다. 그런데 주간 view와 과거 날짜의 이벤트가 포함되어 있는 attributes를 함께 설정하면 제일 오래된 이벤트가 발생한..

Vue 3 버전 기준, Vue의 컴포넌트는 SFC(Single File Components)라고 부르는 하나의 *.vue 파일에 만들어 활용할 수 있다. SFC 파일에는 자바스크립트의 동적 기능, 페이지에 렌더링할 HTML DOM 태그, 그리고 CSS 스타일링까지 한꺼번에 작성해서 하나의 독자적인 컴포넌트로 사용할 수 있는데, 우연히 이런 SFC 컴포넌트 내에서 CSS 스타일을 적용할 때 유의해야 하는 점을 알게 됐다. SFC 컴포넌트에서 태그를 사용할 때, 특정 클래스명에 스타일을 부여하면 해당 클래스명을 사용하는 외부 모든 컴포넌트들에도 스타일이 적용된다. 각 .vue 파일에 선언할 수 있어서 해당 파일이 렌더링하는 요소들에게만 적용되는 고유한 스타일이라고 생각했는데, 사실은 아니었던 것이다. 태..

이벤트 emitVue에서는 자식 컴포넌트가 부모 컴포넌트에게 어떤 이벤트에 대한 시그널을 보내는 emit 기능을 활용할 수 있다. 자식 컴포넌트에 defineEmits()로 이벤트의 명칭을 선언하면, 부모 컴포넌트는 자식 컴포넌트를 렌더링할 때 v-on 디렉티브를 통해 해당 이벤트에 listen할 수 있다. v-on 디렉티브에 이벤트가 감지됐을 때 실행할 콜백을 전달하고, 그 콜백은 자동으로 자식 컴포넌트가 이벤트를 emit하면서 보낸 데이터를 인자로 받는다. console.log(msg)" /> 이벤트 emit은 Click me 컴포넌트 prop자식 컴포넌트가 prop을 받을 땐 defineProps()에 명시한다. 타입스크립트의 경우 defineProps() 안에다가 명시하는 대신 제네릭을 사..

조건부 렌더링v-if는 조건에 따라 컴포넌트를 렌더링하거나 안 보이게 하는 디렉티브다. Vue 튜토리얼의 샌드박스에서 써보니 v-if만 있어도 무방하지만 v-else는 반드시 v-if와 동반돼야 하고, 둘을 같이 쓸 땐 형제 컴포넌트로 가까이 둬야 한다. v-else-if 디렉티브도 있으며, 일반적인 if/else-if처럼 사용하면 된다. Vue is awesome! Oh no 😢 목록 렌더링리액트에서 array.map() 메소드로 컴포넌트를 렌더링할 때와 같은 디렉티브다. 리액트에서와 마찬가지로 배열을 렌더링할 땐 key prop을 추가해줘야 한다. {{ todo.text }}  computed() 상태Vue에서는 상태값의 변화에 맞춰 갱신되는 "파생된 상태값"을 생성하는 기능이 빌트인..

Vue는 선언적 렌더링(declarative rendering)에 중점을 두고 있는 프론트엔드 프레임워크다. Vue 앱을 굴러가게 만드는 기본적인 building block에 대해 알아보자. SFC 파일Vue는 리액트와는 전혀 다른 고유 문법을 사용한다. Vue 컴포넌트는 Single-File Component(SFC)라고 하는 하나의 단독적인 파일로 이루어진다. 확장자 .vue를 붙여 저장하는 SFC 파일에는 자바스크립트, HTML 태그, CSS 스타일이 다같이 들어가 아래와 같은 구조를 이룬다. {{ username }} 상태 저장Vue 컴포넌트의 상태는 reactive()나 ref()로 저장할 수 있다. reactive()는 객체만 저장할 수 있는 반면, ref()는 제한 없이 모든 데이터 타..