JavaScript
-
Vuex - MutationsJavaScript/Vue.js 2019. 3. 11. 16:09
Vuex - MutationsVuex의 데이터(state) 값을 변경하는 로직들을 의미한다. Getters와의 차이점은 아래와 같다.인자를 받아 Vuex에 넘겨줄 수 있다computed가 아닌 methods에 등록한다. 그리고 추후 챕터에 작성할 Actions와의 차이점은 아래와 같다.Mutations는 동기적 로직을 정의Actions는 비동기적 로직을 정의 Mutations의 성격 상, 안에 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수가 있다. 지금까지 counter의 값을 조작할 때 아래와 같이 작업을 했었다.1return this.$store.state.counter++;cs 이러한 작업방식은 안티패턴이라고 불리는데, Vue의 Reactivity 체계와 상태관리 ..
-
Vuex - GettersJavaScript/Vue.js 2019. 3. 11. 15:12
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 - stateJavaScript/Vue.js 2019. 3. 11. 13:57
Vuex Vue.js를 통해 회원가입, 로그인 기능을 포함하는 게시판 프로그램을 하나 만드려고 했는데 한가지 문제에 봉착했다. 그건 바로 로그인 상태에 대하여 모든 컴포넌트 간 상태 데이터를 공유하는 부분이었다. 사용자가 로그인을 했다면 로그인을 한 플래그를 컴포넌트간 공유를 해야 로그인 상태를 유지할 수 있는데, props나 eventBus를 활용하여 매번 데이터를 상위 컴포넌트 -> 하위 컴포넌트, 하위 컴포넌트 -> 상위 컴포넌트로 전달하기가 버거움이 느껴졌다. 그래서 Vuex에 대하여 알아보고 공부해보려고 한다. Vuex란Vue.js의 상태관리를 위한 패턴 라이브러리이다. Vue의 Reactivity(반응성) 체계를 효율적으로 활용하여 화면 업데이트가 가능하다. 상태관리가 필요한 이유는 무엇인가컴..
-
[vue-router] SPA 방식 애플리케이션 운영 시 주의사항JavaScript/Vue.js 2019. 3. 9. 17:49
[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..
-
Spring Boot와 Vue.js 연동하기JavaScript/Vue.js 2019. 3. 3. 19:27
Spring Boot와 Vue.js 연동하기지금까지 Vue.js를 배웠으니 Spring Boot 프레임워크 프로젝트와 연동하여 사용해보자. Vue.js Webpack 템플릿 만들기Spring boot 프로젝트 루트 폴더에 뷰 템플릿을 구성할 폴더 하나를 생성한다. 터미널에서 해당 폴더로 접근한 뒤 vue init webpack 으로 webpack 템플릿을 구성한다. 작업이 완료되면 아래와 같이 웹팩 템플릿 구조가 만들어진다. 웹팩 번들링 output 설정하기뷰로 작성한 코드들을 번들링하고 번들링된 결과를 어느 위치에 뽑아낼 것인지를 정해야한다. Spring Boot는 자동 설정에 의해 src/main/resources에서 static에 index.html과 정적 파일들(js, css, image)을 인식..
-
뷰 프로젝트 구성 방법JavaScript/Vue.js 2019. 3. 1. 18:13
뷰 프로젝트 구성 방법 HTML 파일에서 뷰 코드 작성 시의 한계점 이전까지 '뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하고, 페이지 사이를 이동할 때에는 라우터를 이용해야 한다.'라고 설명해왔다. 그러나 실제로 애플리케이션을 제작하다보면 다음과 같은 상황에서 파일 구조에 한계를 느끼게 된다. 다음의 예제를 보자.1234567891011121314151617181920212223242526 Vue.component('my-component', { template : ` complex markup can you figure this syntax out? this is the second list item ` }); Vue.component('your-component', { template : `..
-
뷰 템플릿JavaScript/Vue.js 2019. 2. 28. 17:58
뷰 템플릿뷰의 템플릿은 HTML , CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성이다. 템플릿 속성을 사용하는 방법은 두 가지가 있는데, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법이다.123new Vue({ template : 'Hello {{ message }}'});Colored by Color Scriptercs 템플릿 속성에 대해 반드시 알아야 할 특징이 있는데, 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다.변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을..
-
뷰 HTTP 통신JavaScript/Vue.js 2019. 2. 28. 12:46
뷰 HTTP 통신HTTP 통신이란 브라우저와 서버 간 데이터를 주고받는 통신 프로토콜이다.브라우저에서 데이터를 보내달라고 서버에게 요청하면 서버가 그에 알맞는 데이터를 응답해주는 방식이다. (브라우저와 서버간 HTTP 통신 흐름) 웹 앱에서 HTTP 통신을 하는데 대표적인 사례로는 제이쿼리의 ajax가 있다. (vanilla JS에서는 XmlHttpRequest)ajax는 서버에서 받은 데이터를 화면에 표현할 때 화면 전체를 갱신(새로고침)하지 않아도 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. 뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공한다.뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 많이 사용하는 액시오스(axios)가 있다. 뷰 리소스뷰 리소스는 초기에 공..