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 입문을 읽고 정리한 내용입니다. 뷰 라우터 기본 라우터 라우팅이란 웹 페이지 간의 이동 방법을 말하는 것으로 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에 표시되는 내용과 모..

https://vuejs.org/guide/typescript/overview.html#typescript-in-templates 읽고 필요한 부분만 정리한 내용 Using Vue with TypeScript General Usage Notes defineComponent() TypeScript가 component option들의 타입을 제대로 추론하기 위해서 컴포넌트를 선언할 때 defineComponent를 사용한다. import { defineComponent } from 'vue' export default defineComponent({ // type inference enabled props: { name: String, msg: { type: String, required: true } },..