Do it! Vue.js 입문을 읽고 정리한 내용입니다. To Do 애플리케이션 만들기 뷰 프로젝트 생성 vue init webpack-simple npm install npm run dev컴포넌트 생성 아래와 같이 구성된 애플리케이션을 만들기 위해서 [TodoHeader] [TodoInput] [TodoList] [TodoFooter]src/components 에 각 컴포넌트 파일을 생성한다. 컴포넌트 등록 app.vue 파일에 생성한 컴포넌트들을 등록한다. import TodoHeader from './components/TodoHeader.vue'; import TodoInput from './components/TodoInput.vue'; import TodoList ..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 프로젝트 구성 방법 싱글 파일 컴포넌트 체계 HTML 파일에서 뷰 코드 작성시 가독성이 떨어지고 유지보수가 어렵다는 한계가 있다. 이를 해결하기 위해 싱글 파일 컴포넌트 체계(Single File Component)를 사용한다. SFC란 .vue 파일로 프로젝트 구조를 구성하는 방식을 말하며 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다. 아래와 같은 구조를 가진다. // 자바스크립트 내용 뷰 CLI SFC 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩(Webpack)이나 브라우저리파이(Browserify)와 같은 도구가 필요하다. 웹팩은 웹 앱의 자원들을 자..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 템플릿 뷰 템플릿이란 뷰 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성이다. 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. 그리고 변환 과정에서 뷰의 반응성이 화면에 더해진다. 템플릿 속성을 사용하는 방법은 두 가지이다. 뷰 인스턴스의 template 속성 활용 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 템플릿에서 사용하는 뷰의 속성과 문법 데이터 바인..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 HTTP 통신 웹 앱의 HTTP 통신 방법 현재 웹 앱에서는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해주기 때문에 HTTP 통신은 필수로 구현해야하는 기능이다. HTTP는 브라우저와 서버 간에 데이터를 주고 받는 통신 프로토콜이다. 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(reponse)으로 해당 데이터를 보내주는 방식으로 동작한다. 대표적인 사례로는 ajax 가 있다. Ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. 뷰에서는 ajax를 지원하기 위한 라이브러리를 제공하는데 뷰 리소스와 axios이다..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 라우터 기본 라우터 라우팅이란 웹 페이지 간의 이동 방법을 말하는 것으로 SPA에서 주로 사용하고 있다. 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다. : 페이지 이동 태그 : 페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 url에 따라 페이지 깜빡임 없이 해당 컴포넌트로 이동하여 표시한다. 실제 웹 앱에서는 화면이 여러 개의 컴포넌트로 분할된 경우가 많기 때문에 여러 개의 컴포넌트들을 동시에 표시할 수 있는 라우터인 네스티드 라우터와 네임드 뷰..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 컴포넌트 컴포넌트란 컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있기 때문에 코드의 재사용성이 높아진다. 다른 사람이 작성한 코드를 직관적으로 이해할 수 있다. 컴포넌트 등록하기 컴포넌트를 등록하는 방법은 두 가지가 있다. Local : 특정 인스턴스에서만 유효한 범위를 갖는다. Global : 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록 전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다. 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행한다. V..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 인스턴스 뷰로 화면을 개발하기 위해 필수로 생성해야하는 기본 단위 뷰 인스턴스 생성 {{message}} Vue 생성자를 이용하여 인스턴스를 생성한다. 아래와 같은 미리 정의되어 있는 속성을 사용할 수 있다. 뷰 인스턴스 옵션 속성 el : 뷰로 만든 화면이 그려지는 시작점 data : 전달할 데이터 template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성 method : 화면 로직 제어와 관계된 메서드를 정의하는 속성, 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다. created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성. 뷰 인스턴스 유효 범위 뷰 인스턴스를 생성하면..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. Vue.js vue.js란 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 따라서 점진적인 프레임워크라고 불린다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 특징을 모두 가지고 있다. 특징 UI 화면단 라이브러리 뷰는 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM패턴이란 Model - View - ViewModel로 화면을 구조화하여 개발하는 방식으로 DOM 리스너 : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 데이터 바인딩 : view에 표시되는 내용과 모..