grace's dev_note

State state는 대부분의 경우 Store의 중심 부분입니다. 그리고 개발자들은 대부분 앱을 나타내는 state를 정의하는 것으로 시작합니다. Pinia에서 state는 초기 값을 리턴하는 함수로 정의됩니다. 그리고 이러한 state는 서버, 클라이언트 모두에서 작동할 수 있습니다. import { defineStore } from 'pinia' const useStore = defineStore('storeId', { // 전체 타입 추론에 권장되는 화살표 함수 state: () => { return { // 이 모든 속성은 자동으로 유형이 유추됩니다. counter: 0, name: 'Eduardo', isAdmin: true, } }, }) state 접근하기 기본적으로 store 인스턴스를 ..

Store 정의 Store는 defineStore()를 사용하여 정의합니다. 그리고 매개변수로 유니크한 이름을 전달해야 합니다. import { defineStore } from 'pinia' // useStore는 useUser, useCart와 같을 수 있습니다. // 첫 번째 인수는 애플리케이션 전체에서 스토어의 고유 ID입니다. export const useStore = defineStore('main', { // 다른 옵션... }) id라고도 하는 이 이름은 꼭 필요하며 Pinia에서 Store를 devtools에 연결하는 데 사용합니다. 그리고 반환된 함수의 이름은 use...로 지정하는 것은 사용법을 관용적으로 만들기 위한 composable API 전반에 걸친 규칙입니다. Store 사용..

지현님이 작성해주신 pinia https://metadataplanning.atlassian.net/wiki/spaces/data/pages/93028353 간단한 애플리케이션에서는 우리가 수동으로 만든 상태 관리 시스템으로 충분 하지만 대규모 애플리케이션에서는 고려해야 할 사항이 더 많습니다. 팀과 협업을 위한 강력한 규칙 Timeline, in-component, inspection, time-travel debugging을 포함하는 Vue Devtools와 통합 HMR(Hot Module Replacement) 서버사이드 렌더링 지원 Pinia는 위의 모든 것을 구현하는 상태 관리 라이브러리입니다. Vue 핵심 팀에서 유지 관리하며 Vue2, Vue3에서 모두 동작합니다. 기존 사용자들은 Vue의 ..

Composable 이란? Vue 애플리케이션에서 “Composable”은 Vue Composition API를 활용하여 상태 저장 비즈니스 로직을 캡슐화 하고 재사용하는 기능을 말합니다. 프론트엔드 애플리케이션을 구축할 때 일반적인 로직을 재사용해야 하는 경우가 종종 있습니다. 예를 들어 여러 곳에서 날짜 형식을 지정해야 한다면 우리는 이러한 로직을 재사용 하기 위해서 함수(모듈)로 추출합니다. 이러한 함수는 상태 비저장 로직을 캡슐화 한 것입니다. 간단한 Input/Output만 있는 구조 입니다. 이러한 상태 비저장 로직를 재사용하기 위한 많은 라이브러리가 있으며, 예를 들어 lodash, dayjs와 같은 것들이 있습니다. 하지만 상태 저장 로직은 사용하면서 변경되는 상태 관리가 포함됩니다. 간단..

뷰 라우터 (Vue Router) 뷰 라우터는 Vue.js를 이용하여 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 Vue.js의 공식 라우터 입니다. Getting Started | Vue Router 라우터란? (Router) 라우터라고 하면 일반적으로 네트워크간에 데이터를 전송하는 장치를 말합니다. 뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리라고 보시면 될 것 같습니다. 예를 들어 “/home 경로로 요청이 들어왔을때 Home.vue 컴포넌트를 화면에 렌더링 해라!” 라는 역할을 수행하는 라이브러리라고 보시면 될 것 같습니다. 그리고 이때 /home → Home.vue 이러한 매핑정보를 라우트(Route)라고도 합니다. 라우트란? (Rout..

동적 컴포넌트 (Dynamic Component) 컴포넌트를 동적으로 변경하고 싶을 때 v-bind:is 속성을 사용해서 변경할 수 있습니다. 동적 컴포넌트는 탭 인터페이스와 같이 컴포넌트간에 동적으로 전환해야 할 때 유용합니다. 위 예시에서 :is 속성에 전달된 값은 다음 중 하나를 포함할 수 있습니다. 등록된 컴포넌트의 문자열 이름 string 실제 가져온 컴포넌트 객체 object 를 사용하여 여러 컴포넌트간 전환하면 컴포넌트의 마운트가 매번 해제됩니다. 이때 내장 컴포넌트를 사용하여 “비활성 컴포넌트"들의 “활성” 상태를 유지할 수 있도록 강제할 수 있습니다. 다음은 vue3에서 script setup을 사용한 동적 컴포넌트 사용 예제입니다. {{ menu.name }} // 컴포넌트 '이름'이 ..

Watch 우리는 종종 반응형 상태가 변경 되었을때에 감지하여 다른 작업(api call 등)을 수행해야 하는 경우가 있습니다. 예를 들어 어떠한 상태가 변경 되었을때 DOM을 변경하거나 비동기 작업을해서 다른 상태를 변경하는 것입니다. Composition API의 watch 함수를 사용 하여 반응형 상태가 변경될 때마다 특정 작업을 수행할 수 있습니다. const message = ref('Hello World'); // message 데이터 변경에 watch(message, (newValue, oldValue) => { console.log('newValue: ', newValue); console.log('oldValue: ', oldValue); // 어떠한 작업을 수행하는 "감시자" 역할을 합..

v-model 프론트엔드에서 입력 양식을 처리할 때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가 많습니다. value를 바인딩하고 @input이벤트로 text를 변경하는 것은 번거로울 수 있습니다. 그래서 Vue에서는 이러한 작업은 단순화 하도록 양방향을 바인딩할 수 있는 v-model디렉티브를 제공합니다. textarea :value, @input v-model checkbox, radio, select v-model은 내부적으로 HTML 요소가 어떤 요소냐에 따라 서로 다른 속성(:value)과 이벤트(@input)를 사용합니다. input type=”text”와 textarea는 value 속성과 input 이벤트를 사용합니다. checkbox와 radio버튼은 checked 속..

이벤트 처리는 v-on디렉티브로 사용할 수 있습니다. 그리고 v-on이벤트는 자주 사용하기 때문에 @단축 표현으로 많이 사용됩니다. const counter = ref(0); counter {{ counter }} 메소드 이벤트 핸들러 v-on 디렉티브에서 메소드를 호출할 수 있습니다. 그리고 이때 매개변수로 event 객체를 받습니다. const printEventInfo = (event) => { console.log(event.target); console.log(event.target.tagName); }; printEventInfo 이벤트 객체 접근 인라인 핸들링에서 event 객체에 접근할 수 있습니다. 접근하는 방법는 $event 키워드를 사용합니다. const printEventInfo2 ..

디렉티브 (directives) 디렉티브(directives)는 v-접두사가 있는 특수 속성입니다. 그리고 디렉티브(directives)는 그대로 직역하면 지시를 뜻 합니다. 즉, 디렉티브(directives)는 기능상에서 중요한 역할인 컴포넌트(또는 DOM 요소)에게 “~~하게 작동하라” 하고 지시를 해주는 지시문을 말합니다. Vue는 여러내장 디렉티브를 제공합니다. v-text v-html v-show v-if v-else v-else-if v-for v-on (단축표기 @) v-bind (단축표기 :) v-model v-slot (단축표기 #) v-pre v-once v-cloak v-memo (v3.2+) Built-in Directives | Vue.js https://v3.ko.vuejs.or..