JavaScript/Vue.js
-
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)가 있다. 뷰 리소스뷰 리소스는 초기에 공..
-
뷰 라우터JavaScript/Vue.js 2019. 2. 27. 19:02
뷰 라우터라우팅이란 웹 페이지 간 이동 방법을 뜻한다.라우팅은 싱글 페이지 애플리케이션에서 주로 사용된다. 라우팅을 이용하면 화면 간 전환이 매끄러워진다.페이지 이동을 라우팅으로 처리하면 매끄럽게 전환할 수 있고, 더 빠르게 화면을 조작할 수 있다. 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리다.뷰 라우터를 이용해 뷰로 만들어진 페이지 간 자유롭게 이동할 수 있다.뷰 라우터를 구현할 때 필요한 특수 태그와 기능은 아래와 같다. 태그 설명 페이지 이동 태그. 화면에서는 로 표시되며, 클릭하면 to에 지정한 URL로 이동된다. 페이지 표시 태그.변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역이다. 뷰 라우터를 이용해 예제를 작성해보자. (뷰 라우터를 이용해 만든 예제이다..
-
뷰 컴포넌트 통신JavaScript/Vue.js 2019. 2. 27. 12:08
뷰 컴포넌트 통신뷰의 경우 컴포넌트 단위로 화면을 구성하기 때문에 같은 웹 페이지라 하더라도 데이터를 서로 공유할 수가 없다는 특징이 있다.그 이유는 컴포넌트마다 자체적으로 유효 범위를 갖기 때문인데, 각 컴포넌트마다 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 상 - 하위 컴포넌트 관계컴포넌트간 데이터 전달을 하기 위해서는 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다. 상위 컴포넌트 - 하위 컴포넌트를 등록한 인스턴스 - new Vue() (부모 컴포넌트)하위 컴포넌트 - 지역 또는 전역으로 등록한 컴포넌트 - Vue.component() or new Vue({components}) (자식 컴포넌트) 상 - 하위 컴포넌트 간 통신 방식(Do..
-
뷰 컴포넌트JavaScript/Vue.js 2019. 2. 26. 18:54
뷰 컴포넌트컴포넌트는 화면을 구성하는 블록을 의미한다.컴포넌트를 활용하면 화면을 빠르게 구조화하여 정해진 패턴으로 개발할 수 있게 된다.화면을 컴포넌트 단위로 재활용하는 형태로 관리하면 코드를 재사용하기 편리해진다. 특히 코드를 직관적으로 이해할 수 있다는 것이 큰 장점이다. 컴포넌트 종류컴포넌트를 사용하는 방법은 전역 선언과 지역 선언 두 가지 방식이 존재한다.지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근이 가능한 Vue 생성자를 이용해 등록한다.Vue 생성자에 .component()를 호출하여 수행한다. 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 ..
-
뷰 인스턴스JavaScript/Vue.js 2019. 2. 26. 18:24
뷰 인스턴스 생성자뷰를 new Vue()와 같이 인스턴스를 생성할 때 이를 생성자라 표현한다.Vue 인스턴스를 생성하고 나면 뷰 라이브러리를 로딩하게되고, 이후에 접근할 수 있다. 뷰 인스턴스 유효 범위뷰 인스턴스는 HTML의 특정한 범위 내에서만 속성들이 적용된다.이를 인스턴스의 유효 범위라고 한다. 인스턴스를 생성하고 난 후(new Vue()), 화면에 인스턴스 속성을 적용하는 과정은 아래와 같다. 뷰 라이브러리 로딩▼인스턴스 객체 생성(옵션 속성 포함)▼특정 화면 요소에 인스턴스를 붙임▼인스턴스 내용이 화면 요소로 변환▼변환된 화면 요소를 사용자가 확인 뷰 인스턴스 라이프 사이클뷰 인스턴스는 생성될 때 8개의 라이프 사이클이 존재한다.(Do it! Vue.js 입문 책의 저자 캡틴 판교님의 설명 참..