grace's dev_note

패키지를 받아서 사용해야 하는 이유는 무엇인가요? cdn은 우리가 사용하는 서버에서 패키지를 다운로드 받지 않고, 패키지가 등록된 서버에서 다운로드 받아 사용하므로 서버의 스트레스를 줄일 수 있습니다. 하지만, 우리는 vue 프레임워크를 사용하고 있고 vue에서는 이미 우리가 사용하기위해 받아준 패키지들을 빌드할 때 한 번에 번들링을 진행합니다. 때문에, 앱이 로드될 때 사용자가 스크립트에서 패키지를 로드받을 필요가 없습니다. 또한, 전체 라이브러리를 다운로드 하지 않고, 사용하는 라이브러리에서 일부만 사용자 지정 번들로 만들기 때문에 더 효율적이며, 필요하다면 라이브러리의 일부분을 커스텀(수정)해서 우리가 원하는대로 사용할 수 있습니다. npm i vue-daum-postcode // App.js im..

Actions Actions는 컴포넌트의 메서드(함수)와 동일합니다. 그리고 defineStore()의 actions 속성으로 정의할 수 있으며 비즈니스 로직을 정의하는 데 완벽합니다. export const useStore = defineStore('main', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++ }, randomizeCounter() { this.counter = Math.round(100 * Math.random()) }, }, }) getter와 마찬가지로 Actinos는 전체 타이핑(및 자동 완성 ✨) 지원을 통해 전체 store 인스턴스에 액세스할 수 있습니다. getters와 달리 Actions는..

Getter는 Store 상태에 대한 computed와 정확히 동일합니다. defineStore()의 getters 속성으로 정의할 수 있습니다. 그들은 화살표 함수의 사용을 장려하기 위해 첫 번째 매개변수로 state를 받습니다. export const useStore = defineStore('main', { state: () => ({ counter: 0, }), getters: { doubleCount: (state) => state.counter * 2, }, }) 대부분의 경우 getter는 state에만 의존하지만 다른 getter를 사용해야 할 수도 있습니다. 이 때문에 일반 함수를 정의할 때 이를 통해 전체 저장소 인스턴스에 액세스할 수 있지만 리턴 타입의 타입(TypeScript에서)을..

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); // 어떠한 작업을 수행하는 "감시자" 역할을 합..