Vue - vuex 사용하는 방법

1. vuex를 사용하는 이유 프로젝트가 커질수록 다양한 컴포넌트에서 서로 연관있는 데이터를 주고받게 되는데, vue는 부모에게서 자식에게로 props로만 데이터를 전송하게 된다. 이러한 방식은 컴포넌트끼리의 관계가 복잡해질수록 데이터를 공유하기 매우 힘들어진다. vuex는 중앙 집중식 저장소 역할을 하며, 여러 컴포넌트에서 쓸 데이터를 보관하고, 언제든 데이터를 바로 가져다 쓸 수 있게 도와준다. 마냥 좋아보이는데..

Vue 2022.10.03 0

Vue - unsplash API를 활용한 이미지 검색 앱 만들어보기

이제 어느 정도 Vue의 기본에 대한 글은 대부분 작성했기에 종합편스럽게 뭐라도 하나 만들어 볼까 생각하고 있었습니다. (그럼에도 글로 적기 너무 길지 않은 걸로...) 예전에 이미지 검색 앱 만드는게 잠깐 유행했었는데, 다들 React로 만드는 글이었기에 그걸 Vue로 한번 만들어 봤습니다. 최종 구현 화면 샘플 이번 글에선 대충 아래와 같은것을 만들어 볼 것입니다. 1. unsplash 개발자 등록 Unsplash Developers 사이트..

Vue 2022.09.29 0

Vue - 라이프사이클 훅(Lifecycle hooks)

1. Lifecycle 리액트 관련 글에선 생명주기 함수라고 많이 하던데 Vue에서는 생명주기라고 부르는 경우를 잘 못본거 같다. 어쨌건 이 라이프 사이클이 뭐냐면 인스턴스가 생성되고 소멸되기까지의 과정이 어쩌구 저쩌구 하는데, 그냥 컴포넌트가 화면에 나타나고 사라질때까지의 과정을 여러 단계로 세분화 해놓은거라고 생각하면 됩니다. 아래는 vue 공식 문서에서 볼수 있는 라이프사이클 다이어그램입니다. 2. 무엇때문에..

Vue 2022.09.26 0

Vue - computed, methods, watch 정리

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

Vue 2022.09.22 0

Vue 데이터를 전달하는 또 다른 방법 Slot

1. slot이 필요한 경우 아래의 샘플은 App.js 내부에 Box 컴포넌트가 하나 삽입되어 있는 형태입니다. 만일 Box 컴포넌트는 여기저기서 앞으로도 계속 써야 하는데, 지금 내가 필요한 건 Contents 1번 밑에 안내글 한 줄만 더 추가하고 싶은 경우. 다시 말하자면 데이터를 추가하고 싶은데 이전 모습 그대로의 컴포넌트를 계속 사용하고 싶다면, 원하는 위치에 구멍 을 뚫어 필요한 데이터를 ..

Vue 2022.09.19 0
반응형