JUMP개발자의 개발일기 JUMP개발자의 개발일기

CLI 2.x vs CLI 3.x - 명령어 -2.x : vue init '프로젝트 템플릿 이름' '프로젝트 폴더 위치' -3.x : vue create '프로젝트 이름' - 웹팩 설정 파일 - 2.x : 노출 O - 3.x : 노출 X - 프로젝트 구성 - 2.x : 깃헙의 템플릿 다운로드 - 3.x : 플러그인 기반으로 기능 추가 - ES6 이해도 - 2.x : 필요 X - 3.x : 필요 O 아래와 같이 터미널에서 입력을 하면 Vue 프로젝트가 생성된다. 이때 npm을 사용하면 npm run serve 명령어를 이용하면 되고, yarn을 사용하면 yarn serve 명령어를 이용하면된다. 아래와 같이 vue-cli 프로젝트 폴더가 만들어 진다.

watch : watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성임. 아래 소스의 경우 num 변수의 숫자가 변할 시에 watch가 그것을 감지하여 log를 찍는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 Document {{ num }} add new Vue({ el : '#app', data() { return { num : 10, } }, watch: { num : function() { this.logText(); } },..

컴퓨티드(computed) 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주고, 간단한 데이터 조작이 가능합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 Document {{ num }} {{ doubleNum }} loading already Login {{message}} new Vue({ el : '#app', data() { return { num : 10, uuid: 'abc1234', name: 'text-blue', loading: true, mess..

Vue에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)이다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되있고 다양한 기능을 제공한다. 아래 예제 소스를 보면 AJAX와 유사하기 때문에 쉽게 이해가 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 Document button {{users}} new Vue({ el : '#app', data() { return { users :..

Vue 라우터는 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다. Router를 이용하여 여러가지 URL과 매핑을 할 수 있다. Vue 라우터를 사용하려면 CDN을 사용하는 방법과 프로젝트에 vue-router를 설치하여 사용하는 방법이 있다. 아래 예제 소스는 CDN을 사용하였다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 Document Login Main var LoginComponent = { template: 'login' } var MainComponent = { templa..

이전에 살펴보았던 emit과 props를 사용하기 떄문에 큰 어려운 점 없이 component간의 데이터 통신이 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 Document // 5. props 사용. var appHeader = { template: '{{propsdata}}', props: ['propsdata'] } var appContent = { // 1. 클릭 이벤트 발생 template: 'contentpass', me..

하위 컴포넌트의 메서드에서 상위 컴포넌트로 통신하는 방법은 VUE에서 emit을 사용한다. 아래 소스와 결과를 보면 쉽게 이해가 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 Document {{ num }} //하위 컴포넌트 app Header에서 클릭 이벤트 발생 (emit 사용) var appHeader = { template : 'Click', methods : { passEvent :function..

스프링 EL이란? - 스프링 객체들의 정보를 질의하거나 조작하여 어떤 값을 표현할 수 있는 언어이다. - 객체 그래프를 조회하고 조작하는 기능을 제공한다. - Unified EL과 비슷하지만, 메소드 호출을 지원하며, 문자열 템플릿 기능도 제공한다. - OGNL, MVEL, JBOss EL 등 자바에서 사용할 수 있는 여러 EL이 있지만, SpEL은 모든 스프링 프로젝트 전반에 걸쳐 사용할 EL로 만들었다. - 스프링 3.0 부터 지원. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 @Component..