Atelier BiCute

Vuex나 Pinia 같은 상태 관리 라이브러리를 사용하면서 store의 데이터를 사용하고 있는 페이지에서 새로고침을 하게 되면, 데이터가 사라지게 되는데, 이러한 문제점을 쉽게 해결하여 상태를 유지할 수 있게 해주는 플러그인의 사용법을 간단히 적어봅니다. vuex를 사용하고 있다면 vuex-persistedstate를, Pinia를 사용하고 있다면 pinia-plugin-persistedstate을 예로 작성하였으니 필요한 부분을 참고하시면 됩니다. Vuex를 사용하고 있다면... 이곳을 vuex-persistedstate의 사용법을 설명하기 전에... vuex-persistedstate는 제작자가 더 이상 일상 업무 중에 vue를 사용하지 않게 되어, 공식적으로 더 이상 업데이트를 하지 않을 것이라고..

Pinia? Pinia는 Vuex와 같은 상태 관리 라이브러리입니다. 얼마전 vuex 기본 사용법에 대한 글을 작성하였는데, 현재 Vue3를 지원하고 있는 Vuex는 버전 4입니다. 또한 Vue의 개발자인 Even You가 자신의 트위터에서 Pinia는 사실상 Vuex 5입니다! 라고 말하기도 했을 정도로 Pinia는 충분히 좋아졌고 안정적입니다. 달라진점은? (1) module을 store로 재구성 프로젝트가 커질수록 Vuex는 store를 모듈화 해서 여러개로 나누게 되는데, 이게 계속 중첩이 되고 타입스크립트나 다른 플러그인을 함께 사용하게 될수록 매우 귀찮아지는데, Pinia는 defineStore라는 함수를 이용하여 각각의 파일마다 별도의 store를 정의하여 module의 기능을 대신하고 있어..

1. Composition API를 사용하는 이유 프로젝트가 커지다 보면 어떠한 것을 수정하기 위해서 해당 항목을 찾을 때, 수십 가지의 Data 중에서 하나를 찾고, 이 Data가 어떤 methods에 영향을 받는지 또 수십 개의 methods 중에서 하나를 찾고, Computed에 포함이 되어 있지는 않는지 등 Ctrl + F 기능을 통해 여기저기 하나씩 검색하며 찾아야 하는 불편함이 생기게 되는데, 이럴 때 사용하기 좋은 것이 Composition API입니다. (기존의 사용 방법은 Options API라고 부릅니다) ※ 그냥 하나의 문법(사용방법)이라 보면 됩니다 2. Options API와 Composition API의 비교 아래는 동일한 내용을 기존 방식(Options API)으로 작성했을때와..

1. vuex를 사용하는 이유 프로젝트가 커질수록 다양한 컴포넌트에서 서로 연관있는 데이터를 주고받게 되는데, vue는 부모에게서 자식에게로 props로만 데이터를 전송하게 된다. 이러한 방식은 컴포넌트끼리의 관계가 복잡해질수록 데이터를 공유하기 매우 힘들어진다. vuex는 중앙 집중식 저장소 역할을 하며, 여러 컴포넌트에서 쓸 데이터를 보관하고, 언제든 데이터를 바로 가져다 쓸 수 있게 도와준다. 마냥 좋아보이는데 그럼 왜 처음부터 vuex를 쓰지 props를 쓰는것인가? vuex를 사용하게되면 데이터에 대한 접근은 쉬워지지만 우선 코드가 길고 복잡해진다. 그렇기에 개인 프로젝트정도의 작업이나 특정 컴포넌트에서만 사용되는 정도는 vuex없이 사용하는편이 더 간편해진다. 하지만 실제로 작업을 하게되면 v..

1. Lifecycle 리액트 관련 글에선 생명주기 함수라고 많이 하던데 Vue에서는 생명주기라고 부르는 경우를 잘 못본거 같다. 어쨌건 이 라이프 사이클이 뭐냐면 인스턴스가 생성되고 소멸되기까지의 과정이 어쩌구 저쩌구 하는데, 그냥 컴포넌트가 화면에 나타나고 사라질때까지의 과정을 여러 단계로 세분화 해놓은거라고 생각하면 됩니다. 아래는 vue 공식 문서에서 볼수 있는 라이프사이클 다이어그램입니다. 2. 무엇때문에 알아야 하는가? 컴포넌트가 화면에 나타날때는 내부적으로 코드를 읽어 내용물을 생성한 후(create) 화면에 출력(mount)해 줍니다. 또한 데이터 값이 변한다던가(update) 다른페이지로 이동하게되어 컴포넌트가 삭제(unmount)될 수도 있습니다. 이러한 각각의 타이밍에 라이프 사이클 ..

언제나 그렇듯 개발자들 문서를 읽어보면 무진장 불친절하다. 뭔가 찾아보면 이것은 반응형(reactive) 종속성에 기반하여 캐시 된다던가, 종속성 관계를 선언적으로 만들었다 같은 그래서 종속성이 뭔데? 그래서 선언적으로 만들었다는 게 뭔데? 같은 처음 접하는 사람들을 전혀 배려하지 않는 글들이 싫어서 정리해보는 글. 1. data 값 담아놓는곳. 아래 예는 count라는 이름으로 4라는 값이 들어있음. data(){ return{ count: 4, } } 2. method 함수 담아놓는 곳. 함수 이름을 호출하면 내부에 적힌 명령어들이 실행됨. 아래 예는 plus()를 실행하면 count의 숫자가 1씩 증가. data(){ return{ count: 4, } }, methods: { plus() { th..

1. slot이 필요한 경우 아래의 샘플은 App.js 내부에 Box 컴포넌트가 하나 삽입되어 있는 형태입니다. 만일 Box 컴포넌트는 여기저기서 앞으로도 계속 써야 하는데, 지금 내가 필요한 건 Contents 1번 밑에 안내글 한 줄만 더 추가하고 싶은 경우. 다시 말하자면 데이터를 추가하고 싶은데 이전 모습 그대로의 컴포넌트를 계속 사용하고 싶다면, 원하는 위치에 구멍 을 뚫어 필요한 데이터를 전달할 수 있습니다 이 형태를 기본으로 slot을 사용해 보겠습니다. (app.js) === APP.JS START === === APP.JS END === (box.vue) Box Component Contents 1 Contents 2 Contents 3 2. slot의 기본적인 사용 방법 (1) 자식 컴..

이번엔 이전에 만든 모달창 형식을 실제 블로그처럼 하나하나의 주소를 가진 게시물로 만들어 볼 것입니다. 라우터 사용방법 복습 겸 추가 기능 익히기라고 보면 되겠습니다. 모달창은 잠시 주석으로 제거해놓고 라우터 방식으로 변경합니다. 1. 세팅하기 라우터를 사용할수 있도록 세팅을 할 것인데, 라우터를 전혀 모른다면 이전 게시물을 우선 참고해 보는것이 좋습니다. Vue 페이지 전환하기 (라우터 설치부터 사용까지) > 세팅 순서 : router설치 > main.js에 등록 > router경로 설정 (main.js) import router from './router' createApp(App).use(router).mount('#app') (/router/index.js) import { createRouter..

이번엔 모달창의 [닫기]버튼을 작동하게 만들것입니다. 모달창(자식 컴포넌트)에서아래와 같이 입력하면 동작을 하지 않습니다. 닫기 애초에 ModalPopup은 부모 컴포넌트에 있고, props로 내려받은 값이라도 자식이 부모의 것을 함부로 바꾸는것은 허용되지 않습니다. 자식 컴포넌트에서 부모 컴포넌트의 데이터를 수정하기 위해선 자식은 부모에게 "***를 어떻게 해주세요" 라고 부탁들 해야합니다. (현실이 반영되어있네요....) 1. 커스텀 이벤트 Vue에서는 부모 컴포넌트의 데이터를 수정하고 싶을때 ~~ 주세요 라고 요청하는것을 커스텀 이벤트라고 부릅니다. 커스텀 이벤트는 다음과 같은 순서로 작성합니다. (1) 자식 컴포넌트는 $emit('작명', 부모에게전달해줄값) 형태로 부모에게 요청합니다. (2) 부..

이제 게시물의 제목을 클릭하면 해당 게시물의 내용을 볼 수 있는 모달창을 띄워보겠습니다. 우선 각자 취향에 맞게 모달창하나 만들고 시작합시다. 지금까지의 내용을 이용하면 이제 쉽게 만들 수 있습니다. 1. 모달창 만드는 방법 (1) 처음부터 뭔가 눌렀을때, 어떻게 해야 모달창이 나타나는것인지 어렵게 생각하지말고 최종적으로 나와있을때의 모습을 기준으로 구현하세요. (2) 그리고 그 창을 끄고 켤수 있는 버튼 (v-if)만 만들어주면 모달창 완성입니다. (이런 방식은 모달창 뿐만 아니라 애니메이션 효과도 동일합니다) 저는 아래와 같이 대충 만들어 봤습니다 (스타일은 코드가 너무 길어지니 생략) // ModalPopup.vue 제목 작성일 내용 닫기 아래는 현재 app.vue의 전체적인 내용입니다. // ap..