자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

Node.js + Express + Vue.js로 토이 프로젝트를 만들고 있는데, Axios를 이용해 이미지 업로드 기능을 만들어보려고 한다. 시나리오 버거 메뉴 등록 폼에서 이미지를 비롯해 각종 데이터를 작성하고 해당 데이터를 multipart/form-data 컨텐츠 형식으로 서버에 전달하고 서버가 캐치해서 핸들링하는 것이 목적이다. 방법 data에 담고 관리하기 위해 데이터 속성을 선언하자. 데이터 속성을 선언했으면 이제 file 태그에서 파일을 선택하면 선택한 파일을 데이터 속성에 추가하자. methods 속성에 함수를 하나 만들고, data의 이미지 속성에 접근하여 데이터를 담아주자. file 태그에 Vue 인스턴스로 접근하기 위해 $refs 인스턴스 속성을 사용해야한다. 해당 인스턴스는 자식 ..

네비게이션 가드란네비게이션 가드란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 뜻한다. 예를 들면, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하도록 차단할 때 사용하는 기술이다. 네비게이션 가드 종류네비게이션 가드의 종류는 다음과 같이 3가지가 존재한다.애플리케이션 전역에서 동작하는 전역 가드특정 URL에서만 동작하는 라우터 가드라우터 컴포넌트 안에 정의하는 컴포넌트 가드 전역 가드전역 가드는 라우터 인스턴스를 참조하는 객체로 설정할 수 있다.전역 가드의 설정 방법을 알아보자. 가장 먼저 라우터 인스턴스를 생성한다.1const router = new VueRouter();cs router 변수에 다음과 같이 beforeEach() API를 호출한다.12345rout..

Vuex - 폴더 구조화 & Namespacing애플리케이션의 크기가 어느정도 커지기 시작했을 때, getters & mutations & actions의 이름을 고유하게 정하지 않으면 namespace 충돌이 발생한다. 네임스페이스를 구분하기 위해 속성명.js로 각 속성의 이름들을 파일 단위로 나누고 store.js와 각 컴포넌트에 import하여 사용하는 방법이 있다. 폴더 구조화 (모듈화)를 하는 방법을 알아보자. 1. 폴더에서 속성명.js 형태로 파일을 생성한다. 2. 각 속성명.js 파일에 속성들을 객체로 정의하고 export로 모듈로 사용할 수 있도록 지정한다. 3. export한 모듈 파일들을 store.js에서 import하여 사용한다. 참고 - https://joshua1988.githu..

Vuex - Actions이전 글에서 설명했듯이 Mutations에는 순차적인 로직들만을 선언하고, Actions에는 비 순차적 또는 비동기 처리 로직들을 선언한다고 했다. 왜 처리 로직의 성격에 따라 Mutations와 Actions로 나눠 등록해야 할까? Mutations의 역할은 State 관리이다.상태관리 자체가 한 데이터에 대해 여러 개의 컴포넌트가 관여하는 것을 효율적으로 관리하기 위함인데, Mutations에 비동기 처리 로직들이 포함되면 같은 값에 대해 여러 개의 컴포넌트에서 변경을 요청했을 때, 그 변경 순서 파악이 어렵기 때문이다. 따라서, setTimeout()이나 서버와의 HTTP 프로토콜 통신 처리 같이 결과를 받는 타이밍이 예측되지 않는 로직들은 Actions에 선언하는 것이다...

Vuex - MutationsVuex의 데이터(state) 값을 변경하는 로직들을 의미한다. Getters와의 차이점은 아래와 같다.인자를 받아 Vuex에 넘겨줄 수 있다computed가 아닌 methods에 등록한다. 그리고 추후 챕터에 작성할 Actions와의 차이점은 아래와 같다.Mutations는 동기적 로직을 정의Actions는 비동기적 로직을 정의 Mutations의 성격 상, 안에 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수가 있다. 지금까지 counter의 값을 조작할 때 아래와 같이 작업을 했었다.1return this.$store.state.counter++;cs 이러한 작업방식은 안티패턴이라고 불리는데, Vue의 Reactivity 체계와 상태관리 ..

Vuex - Getters중앙 데이터 관리식 구조에서 발생하는 문제점은 각 컴포넌트에서 Vuex의 데이터를 접근할 때 중복된 코드를 반복호출하게 되는 것이다. 코드를 통해 예를 들어보자.12345678910111213// App.vuecomputed: { doubleCounter() { return this.$store.state.counter * 2; }} // Child.vuecomputed: { doubleCounter() { return this.$store.state.counter * 2; }}Colored by Color Scriptercs여러 컴포넌트에서 같은 로직을 비효율적으로 중복 사용하고 있다.이 때, Vuex의 데이터 변경을 각 컴포넌트에서 수행하는 게 아니라, Vuex에서 수행하도록..

Vuex Vue.js를 통해 회원가입, 로그인 기능을 포함하는 게시판 프로그램을 하나 만드려고 했는데 한가지 문제에 봉착했다. 그건 바로 로그인 상태에 대하여 모든 컴포넌트 간 상태 데이터를 공유하는 부분이었다. 사용자가 로그인을 했다면 로그인을 한 플래그를 컴포넌트간 공유를 해야 로그인 상태를 유지할 수 있는데, props나 eventBus를 활용하여 매번 데이터를 상위 컴포넌트 -> 하위 컴포넌트, 하위 컴포넌트 -> 상위 컴포넌트로 전달하기가 버거움이 느껴졌다. 그래서 Vuex에 대하여 알아보고 공부해보려고 한다. Vuex란Vue.js의 상태관리를 위한 패턴 라이브러리이다. Vue의 Reactivity(반응성) 체계를 효율적으로 활용하여 화면 업데이트가 가능하다. 상태관리가 필요한 이유는 무엇인가컴..

[vue-router] SPA 방식 애플리케이션 운영 시 주의사항Vue를 Single Page Application 방식으로 애플리케이션을 작성하고 운영할 때 백엔드 서버 애플리케이션에 올려서 사용하니 한가지 문제를 만나게 되었다. 바로 URL을 통해 GET 통신으로 특정 페이지화면으로 접근하면 404 에러가 발생하는 것이다. Vue-router 레퍼런스를 찾아보니 아래와 같은 내용을 찾을 수 있었다. https://router.vuejs.org/kr/guide/essentials/history-mode.html 레퍼런스에서는 nginx나 apahce, node.js 등은 다루고 있으나 Spring boot(tomcat과 같은 서블릿 컨테이너 서버)는 언급하고 있지 않았다. 문제사항1. vue-route..