grace's dev_note

requestAnimationFrame() 는 브라우저에서 작동하는 애니메이션을 알려주고 다음 리페인트 진행 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메서드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. 리페인트 ? 리페인트란 리플로우 과정이 끝나고 재생성된 레이아웃 트리(렌더 트리)를 다시 레이어에 그리는 작업을 말합니다. 여기서 리플로우는 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드의 수치를 다시 계산하여 레이아웃 트리(렌더 트리)를 재생성하는 작업을 의미합니다. css에서 width, height 같은 레이아웃에 영향을 주는 속성을 말합니다. 리페인트를 발생하게 하는 속성은 css에서 시각적으로 보여지는 모든 속성이며 이 외에도 레이아웃에 영향을 주는 것은 아니..

https://tanstack.com/query/v4/docs/vue/examples/vue/persister Vue Query Persister는 나중에 사용할 수 있도록 쿼리 클라이언트를 저장하는 persister와 상호작용하기 위한 유틸리티 집합입니다. 다양한 persister를 사용하여 클라이언트 및 캐시를 다양한 스토리지에 저장할 수 있습니다. 여기서 우리는 indexedDB에 저장했습니다. indexedDB는 same-origin policy를 따르기 때문에 다른 도메인에서 프로젝트 도메인으로 접근할 수 없습니다. 여기에 HTTP 프로토콜을 적용한 도메인과 로컬호스트에서만 접속이 가능하도록 하여 다른 도메인으로 접속 시 access denied하여 보안을 강화하였습니다. 다음은 persistQ..

첫 페이지에서 간단하게 mutation을 사용하는 방법에 대해서 설명했었습니다. https://metadataplanning.atlassian.net/wiki/spaces/data/pages/105447542 먼저 첫 페이지에서 설명한 것 처럼 axios apis(axios를 통해 백엔드에 put, post, patch, delete 요청을 보내는 함수)가 작성되었다는 전제로 설명드립니다. 데이터 내보내기 import { useMuataion } from '@tanstack/vue-query' const { mutate } = useMutation(createTodo); 기본적으로 데이터를 내보내기 위해서는 위와 같이 작성합니다. 이후 작성된 값을 통해 Todo를 만들려면 onClickCreate 함수가..

useQuery Docshttps://tanstack.com/query/v4/docs/vue/reference/useQuery 데이터 조회 상태 Promise 기반 메서드와 함께 쿼리를 사용하여 서버에서 데이터를 가져올 수 있습니다. 메서드가 서버의 데이터를 수정하는 경우 mutation을 사용하는 것이 좋습니다. import { useQuery } from '@tanstack/vue-query' // fetchTodoList가 todoList를 조회하는 api 입니다. const { data, isLoading, isError, isSuccess, error } = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList }) 쿼리 함수는 Promise를 반환하..

일반적으로 프로젝트를 진행하면서 관리해야하는 상태(state)는 총 세 가지가 있습니다. Local State: 컴포넌트 안에서만 사용되는 상태 Global State: 전역 스토어에 정의되어 프로젝트 어디에서나 접근할 수 있는 상태 Server State: 서버로부터 받아오는 상태 기존 Vuex에서는 전역 상태와 서버 상태를 전부 포함해서 관리하는 방식으로 프로그래밍을 했습니다. 하지만, 전역 상태 관리 라이브러리에서 비동기 로직을 제거하고 서버 상태 관리 라이브러리에서 이를 관리하여 각각을 분리하면 프로젝트 로직을 이해하기도 좋고 스토어를 간단하게 관리할 수 있습니다. 설치 npm i @tanstack/vue-query 사용 // main.ts import { VueQueryPlugin } from ..

props는 read-only reactive object입니다. 즉, 조회만 가능한 반응형 객체이며, computed 같은 반응성 체크는 가능하지만 props를 직접 수정하는 것은 불가능합니다. v-model을 props로 사용해주기 위해서 vue3는 내부적으로 v-model의 양방향 바인딩을 단방향 바인딩으로 캐스팅해줍니다. 혹은 아래와 같이 computed를 사용해 직접 반응형 객체를 만들어 v-model을 바인딩 할 수도 있습니다. 참고: https://vuejs.org/guide/components/v-model.html

패키지를 받아서 사용해야 하는 이유는 무엇인가요? 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 인스턴스를 ..