후니후니

프로젝트 환경이 모노레포로 구성되어 있다면 root에 위치한 eslint + prettier 설정 파일로 모든 프로젝트에 포맷팅을 맞춰줄 수 있다. eslint, prettier는 모노레포라고 해서 별 다를 게 없고 설정해주면 되는데, React와 달리 Vue 같은 경우 settings.json에서 속성을 추가 하지 않으면 prettier 적용이 되지 않는 문제가 있어 조금 삽질을 많이 했었다. { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, } jsx, tsx는 위 값이 없어도 포매팅이 잘 적용되던데...

Pinia Actions 이번 포스팅에서는 Pinia의 Actions에 대해서 다룰 예정이다. 공식문서에 나와 있는 예제는 아래와 같다. 예제 코드를 먼저 보자. export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { // since we rely on `this`, we cannot use an arrow function increment() { this.count++ }, randomizeCounter() { this.count = Math.round(100 * Math.random()) }, }, }) defineStore 함수 내부에 actions를 통해서 함수를 등록할 수 있다...

Getters 이번 포스팅에서는 Pinia의 Getters에 대해 알아보고자 한다. Pinia 자체가 Vuex & Composition API와 문법이 매우 비슷해서 문법 자체는 크게 어렵지 않은 것 같다. export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name:'ethan' }), getters: { doubleCount: state => state.count * 2 }, }) export const useCounterStore = defineStore('counter', () => { const count = ref(2); const name = ref('ethan'); const doubleCount..

Pinia의 State 사용 방법 Vuex를 사용할 때는 state의 상태 값을 mutation을 통해 변경해줘야 했으며, 직접적으로 state의 값을 변경하는 경우 오류를 발생시킨다. Vuex와 다르게 Pinia는 mutation이 없는데, state를 어떻게 변경하는지 알아보자. export const useCounterStore = defineStore('counter', () => { const count = ref(2); const name = ref('ethan'); const doubleCount = computed(() => count.value * 2); function increment () { // Change state value count.value++ }; return { cou..

Pinia란? Vue 버전 2를 사용할 때는 주로 상태 관리를 Vuex로 처리했는데, Vue3 or Composition API이 출시되면서 Pinia라는 상태 관리 모듈이 추가되었다. Vuex의 단점으로는 TS와 같이 설계하기가 어려움이 있었는데 (문법이나 Type 등에서), 이 점이 많이 개선되었다고 한다. 그 외에도 장점이 꽤 많은 것 같은데, 공식 문서를 기반으로 Pinia의 장점은 무엇이 있는지 알아보자. 공식 문서 소개 페이지에 있는 내용이다. 직관적이고, 안전하고, Devtools 지원에, 확장, 모듈식, 가벼움 등등의 장점이 적혀있다. 이 내용만 보고서는 Vuex와 비교 했을 때 정확히 어떤 차이가 있고 어느 정도 더 좋은지 알기 어려운듯 싶다. 직접 사용해보면서 겪어보자! // npm i..