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

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..

[HTML] Highlight Matching TagHTML 파일을 작성하면서 태그가 많아지거나 하나의 태그 안에 자식 태그가 너무 많아져 눈으로 보기에 열고 닫히는 태그가 어느 부분인지 한 눈에 파악하기 힘든 경우가 많다. 이런 경우 시작 태그와 닫는 태그를 시각적으로 표현해주는 플러그인이 있다. 태그에 포커스를 맞추면 실눈금이 닫는 태그의 위치까지 연결시켜 표현해준다.

This connection has been closed.실제 서버를 운영하고 있는 도중 위와 같은 에러가 발생했다. 커넥션이 닫혔다는 내용인데, 그 이유야 여러가지가 있을 것이다. "HikariPool-1 - Connection is not available, request timed out after 30003ms." 내가 경험한 운영 환경에서는 위와 같은 에러가 나왔다. 클라이언트로부터 요청이 서버로 전달되었고, 서버에서 DB 서버로 요청을 연결하여 원하는 결과를 전달해주어야 하는데, 여유 커넥션이 존재하지 않아 요청 시간이 30초를 넘어버려 발생하는 것으로 판단된다. 실제 위 로그 내용을 보면 30003ms (30.003초) 동안 요청 대기가 발생해서 하이버네이트 예외 중 JDBCConnectio..

[JavaScript] JavaScript (ES6) code snippets프론트엔드 개발자를 위한!(이라고 쓰고 풀스택을 위한...)자바스크립트 ES6 기준 스니펫 플러그인이다. 회사에서도 ES6를 지향하는 분위기라 한번 설치해보고 사용 중이다.