Programming/Vue8

• 

  [Vue] Vuex 새로고침 후 데이터 유지 방법 (초기화 발생 이유/ 예제) 서론 Vuex라는 상태관리 패턴을 사용한 페이지에선 새로고침을 하면 State에 저장해놓은 데이터가 초기화된다. 하여, 해당 데이터들이 사라지는 현상에 대해서 어떻게 해결할지 알아보려한다. 내용은 생각보다 간단하니 따라하기만 하면 쉽게 해결할 수 있다. npm vuex-persistedstate 사용하기 필자는 vuex-persistedstate라는 npm을 사용하여 해당 이슈를 해결하려한다. vuex-persistedstate ? vuex에 저장되는 값(State)들을 사용하는 웹 브라우저의 LocalStorage에 저장하여, 새로고침 시에도 해당 로컬스토리지의 값은 없어지지 않기 때문에 해당 값을 가져와 동기화시켜주는 역할을 한다. 아래에서 추가 설명을 하겠지만 해당 기능을 모든 페이지에 적용하면 L.. Programming/Vue 2022. 5. 24.

• 

  [Vuetify] v-data-table Column Hidden 처리 방법 서론 Vuetify에서 data table의 컬럼을 숨김처리하는 방법에 대한 포스팅이다. 자세한 내용은 Vuetify 공식 홈페이지에 나와있다. 방법 header의 데이터 안에 align : ' d-none'를 붙여주면 된다. 여기서 d-none앞에 공백을 지우면 적용이 안되니 주의할 것. 예제 소스 headers: [ {text: '번호', value: 'noticeNo', align:' d-none'}, {text: '제목', value: 'noticeTitle'} ], 결과 적용 전 적용 후 Vuetify 공식 홈페이지 링크 https://vuetifyjs.com/en/styles/display/#display Display helpers Display helper classes allow you .. Programming/Vue 2022. 5. 20.

• 

  [Vue] 상태 관리 Vuex란? (개념/ 사용 이유) 서론 이번글에서는 vuex라는 vue에서 컴포넌트간 유기적으로 데이터를 주고받을 수 있는 패턴이자 라이브러리에 대해 알아보려한다. Vuex가 왜 필요할까? Vuex를 알아보기 전 Vue의 특성에 대해 알아보면 이해하기 더 쉬운데, Vue는 가상 DOM을 활용하여 모든 요소를 실시간 반응형 컴포넌트로 생성할 수 있다는 특징이 있다. 그런데 프로젝트의 규모가 커질수록 컴포넌트는 늘어날 수 밖에 없고 늘어난 컴포넌트들 관계에서 데이터를 주고 받는 부모 자식 관계는 점점 복집해질 수 밖에 없다. 이 부모와 자식 관계를 예로 들면, vue를 이용하여 페이지를 만든다하면 header, footer, button, list 등의 여러 컴포넌트로 구성된다. 이렇게 한 페이지에서도 여러 컴포넌트가 합쳐져서 만들어지게 되.. Programming/Vue 2022. 5. 19.

• 

  [Vue] lodash를 이용하여 중복 값을 제거하는 방법 (_uniqBy, _unionBy) 서론 보통 백단에서 중복제거를 하고 화면에서는 해당 값을 받아서 처리하는경우가 많은데, 백단 수정이 불가한 api에서 중복 값을 받게 되었을 때 쉽게 중복을 제거할 수 있는 lodash의 기법을 알아보려한다. 이번글에서는 lodash의 개념보단 vue에서 lodash를 사용하여 중복제거하는 방법에 대해서만 정리한다. npm lodash 설치 방법 npm i lodash 터미널에서 위의 명령어를 입력하여 lodash를 설치하면 끝이다. _uniqBy 위는 lodash 홈페이지에서 가져온 이미지이다. 파라미터 형식은 다음과 같다. _uniqBy(Array, '반환할 속성의 고유 이름')으로 되어있다. 속성의 이름은 본인이 설정하면 된다. _uniqBy 기능 1. 배열 데이터 안의 값에서 중복되는 값들을 제거.. Programming/Vue 2022. 4. 27.

• 

  [Vue] should always be multi-word-component 에러 해결 방법 (ESLint 설정) 서론컴포넌트를 만들때마다 하나의 단어로 만들면 아래의 에러가 발생하는 현상을 겪었다. 필자는 급한 김에 접두사에 My 또는 다른 단어를 합쳐 처리했는데 매번 이렇게 처리하는건 아닌것같아서 해결방법에 대해 정리하려한다. 에러 발생 문구 1:1 error Component name "Headline" should always be multi-word vue/multi-word-component-names ✖ 1 problem (1 error, 0 warnings) 전체 에러 본문 보기 더보기 Compiled with problems: X ERROR C:\Users\jkan.DESKTOP-IKN64I8\Desktop\vue_study\vue_fastcam\vue-web\src\components\Headlin.. Programming/Vue 2022. 4. 25.

• 

  [Vue] 컴포넌트(Component)란 ? (개념 / 특징 / 예제) 서론 이번 글에서는 Vue에서 가장 중요하다고 할 수 있는 컴포넌트의 개념에 대해 알아보려한다. 중요도에 비해 생각보다 정리할 내용은 그리 많지 않으니 가볍게 보면 좋을 것 같다. 컴포넌트(Component)란 ? 화면을 구성할 수 있는 블록을 의미한다. 위의 (그림1)에서 보면알 수 있듯 하나의 Object를 각 레이아웃 별로 컴포넌트로 쪼개서 구성할 수 있다. 특징 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 코드를 쉽게 이해하고 재사용할 수 있다. 단위테스트에 용이하다. 위의 특징들이 나올 수 있는 이유는 컴포넌트는 "블록" 개념이기 때문이다. 하나의 블록이기 때문에 구조화하기 쉽고, 재사용할 수 있는 장점이 있으며 추가로 블록 별(기능 별) 단위테스트에도 용이하다. 사용 방법 Me.. Programming/Vue 2022. 4. 21.

• 

  [Vue] 인스턴스 라이프 사이클(Life Cycle)이란? (개념 / 예제) 서론 Vue에서 인스턴스나 컴포넌트를 생성할 때 생기는 과정들을 라이프 사이클이라 하는데, 이 라이프 사이클 과정중 일어나는 일과 해당 개념들에 대해 알아보도록 하자. 인스턴스 라이프 사이클이란? 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(Hook)이라고 한다. 라이프 사이클 속성 종류 위의 그림은 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램이다. 키워드를 보면 총 8개의 속성이 있다. 이 속성에 대해 하나씩 알아보면 다음과 같다. 1. beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라.. Programming/Vue 2022. 4. 18.

• 

  [Vue] MVVM 패턴이란? (개념 / 특징 / 장점) 서론 이번에는 마틴 파울러의 프레젠테이션 모델 디자인 패턴의 변형인 MVVM패턴에 대해 정리해보려한다. 바로 알아보도록 하자. MVVM 패턴이란 ? MVVM[모델 - 뷰 - 뷰 모델(Model - View - viewModel)]은 아래와 같은 패턴을 말한다. 마크업 언어나 GUI 코드를 비지니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 아키텍처 패턴을 말한다. 이 정의를 다시 정리해보면 화면 앞단(프론트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 DB 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다는 말을 뜻한다. MVVM 패턴은 데이터를 가능한 순수한 응용 프로그램 모델에 가깝게 바인딩하는 데이터 바인딩과 프레임워크의 장점을 활용함과 동시에 MVC가 제공하는 기능 요.. Programming/Vue 2022. 4. 18.