본문 바로가기

📠 archive29

[Vue.js 상태관리 2편] Vuex 를 이용한 상태 관리 📌 Vuex 란? Vuex 는 vue 커뮤니티에서 공식 지원하는 중앙 집중식 상태 관리 시스템입니다. 관리하는 데이터가 중앙에 집중되어있는 덕분에 데이터를 props 와 event emit 으로 다른 컴포넌트들과 통신하는 복잡도를 낮출 수 있습니다. 📌 Vuex를 왜 써야 할까? 앱이 사용자와 상호작용하는 과정 우리의 애플리케이션(SPA)은 다음과 같이 view, state, actions 의 흐름으로 사용자와의 상호작용이 일어납니다. 사용자가 특정 action 을 취하면 그에 따라 state 가 바뀌고 이것이 view 에 반영됩니다. 우리가 구현하는 각각의 컴포넌트들은 view 를 구성하고 있으며 때문에 각각의 state 는 컴포넌트에 종속되어 있습니다. 그렇다면 대규모 앱에서는? 작은 크기의 앱이라면.. 2022. 3. 7.

[Vue.js 상태관리 1편] Vue.Observable 을 통한 상태관리 📌 Vue.Observable? Vue 2.6 버전부터 데이터를 반응형으로 만들어 사용할 수 있는 방법이 생겼습니다. 이번 포스트에서는 이를 활용한 간단한 상태 관리 방법에 대해서 살펴보겠습니다. 📌 Store 패턴 사용해보기 간단한 counter 앱을 통해서 Vue.observable 을 어떻게 사용할 수 있는지 살펴보겠습니다. 먼저 프로젝트를 생성하고 다음과 같이 count 값을 가지고 있는 컴포넌트를 생성합니다. 버튼을 클릭하면 count 가 1씩 증가하는 예제입니다. {{ count }} 클릭 현재 컴포넌트 상태 값으로 관리하고 있는 count 값을 전역에서 관리하도록 변경하겠습니다. 먼저 store 디렉토리를 생성하고 index.js 파일에 다음과 같이 코드를 작성합니다. import Vue f.. 2022. 3. 7.

[Vue.js] $el 옵션은 무엇일까? 📌 el 옵션이란? Vue 라이프 사이클 공부하다가 생소한 el 옵션이 튀어나와서 한번 찾아봤습니다. el 옵션은 Vue 컴포넌트에서 제공하는 옵션으로 마운팅 포인트를 결정 할 수 있습니다. 단 el 옵션은 new 를 통한 Vue 인스턴스 생성시에만 유효합니다. 📌 el 옵션 사용 예시 {{message}} el 에는 querySelector 와 같이 지정할 수 있으며 지정된 요소에 Vue 컴포넌트가 대체됩니다. 만약 template 옵션이나 render 함수가 없다면 지정된 DOM 요소 내부 내용이 렌더링 됩니다. 위 예시의 경우 message 내용이 p 태그에 둘러싸여 렌더링 되겠네요. 📌 $mount 메서드란? el 옵션을 사용하는 대신 $mount 옵션을 사용할 수도 있습니다. 만약 특정한 목적으.. 2022. 3. 1.

[Vue.js] 예시와 함께 보는 동적 컴포넌트 📌 Vue 동적 컴포넌트 이번에 사내에서 개발하는 앱의 화면 편집 기능을 추가하면서 동적 컴포넌트 에 대해서 찾아보게 되었습니다. 편집 기능을 통해 상품 카드의 순서를 변경해야 하는데, 화면 리프레시가 발생하지 않고 DOM 의 순서를 조작해야하기 때문에 이를 위한 방법이 바로 동적 컴포넌트 였습니다. 📌 동적 컴포넌트란? 동적 컴포넌트 는 말 그대로 렌더링되는 컴포넌트를 동적으로 변경 가능한 것을 의미합니다. 따라서 특정 조건에 따라 서로 다른 컴포넌트를 마운트 하는 것이 가능합니다. 클릭 동작 예시를 위한 간단한 예제입니다. component 의 is 속성에 렌더링하고자 하는 컴포넌트를 지정해서 동적으로 컴포넌트를 할당할 수 있습니다. 2022. 3. 1.

[Vue.js] computed 속성 사용 시 주의할 점들 Vue computed 속성 사용 시 주의할 점들 💡 본 포스트는 Vue.js 코어 팀 일원인 Thorsten Lünborg 이 기고한 글에 근거합니다. 📌 computed 속성이란? export default { name: "HelloWorld", data() { return { todos: [ { title: "wash dishes", done: true }, { title: "remove trash", done: false }, ], }; }, computed: { needTodos() { return this.todos.filter((todo) => !todo.done); }, }, }; Vue 에서 computed 속성은 data 의 변화를 감지하여 동적으로 계산된 값을 이용할 때 사용합니다. .. 2022. 2. 23.

[Vue.js] Error Boundary 로 에러 핸들링하기 Vue 에서 Error Boundary로 에러 처리하기 📌 Error Boundary 란? 이전에 잠깐 React 공부할 때 공식 문서에 Error Boundary 라는 기법이 소개되어 있었습니다. Error Boundary 는 컴포넌트에서 발생한 에러를 다루는 하나의 방법으로 에러를 처리하는 컴포넌트(Error Boundary)를 만들어 앱의 실행에 문제가 생기지 않도록 하는 것입니다. Vue 에도 해당 기법이 있을까 궁금해서 찾아봤었는데 이를 소개하는 글이 있어서 정리해봤습니다. 📌 Vue 에서 Error Boundary 사용하기 Vue 2.5 버전에서는 errorCaputred 라는 훅을 지원하기 시작했습니다. 해당 훅에서는 자식 컴포넌트에서 발생한 에러를 감지해 처리할 수 있습니다. Error B.. 2022. 2. 20.

이전 1 2 3 4 5 다음

티스토리툴바