Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 CLI에서 사용하는 NPM NPM 설치 npm install을 사용하면 npm 설정 파일 (package.json)에 설정된 라이브러리 목록을 다운로드할 수 있다. 앞에서 뷰 CLI로 프로젝트를 생성한 후 웹팩 추가 설정을 위해 플러그인 라이브러리나 애플리케이션 로직과 관련된 외부 라이브러리를 추가하려면 --save, ---save-dev 옵션을 활용한다. npm install --save , --save-dev 옵션 package.json 파일에 아래 속성을 확인할 수 있다. dependencies : 뷰 코어 라이브러리, 애플리케이션 동작에 필요한 라이브러리, --save로 추가 devDependencies : 웹팩 관련 라이브러리 , 개발..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. Vuex 뷰엑스는 애플리케이션의 상태 관리를 돕는 라이브러리이다. 상태(state) : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터 상태 관리가 필요한 이유 최하단 컴포넌트에서 메인 컴포넌트로 데이터를 전달할 경우 그 사이에 너무 많은 컴포넌트가 있기 때문에 모든 컴포넌트를 거쳐서 props로 데이터를 전달하는 것은 번거롭고 관리도 힘들어지게 된다. 이벤트 버스를 사용할 경우 상-하위 간의 데이터 전달 구조를 따르지 않고도 한 번에 로그인 폼 컴포넌트에서 메인 컴포넌트로 데이터를 보낼 수 있게 쉽게 데이터를 전달할 수 있다. 하지만 단방향 데이터 흐름이 아닌 다양하고 많은 데이터 흐름일 경우에는 파악이 힘들어질 것이다. 이러한 이유로..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 기존 애플리케이션 구조 개선하기 현재 애플리케이션 구조의 문제점은 다음과 같다. 할 일을 입력했을 때 할 일 목록에 바로 반영되지 않는 점 할 일을 모두 삭제했을 때 할 일 목록에서 바로 반영되지 않는 점 화면을 4개의 컴포넌트로 분리해놓았기 때문에 한 영역의 처리 결과(TodoInput, TodoFooter)를 다른 영역(TodoList)에서 감지하지 못한다는 문제가 있다. 각 컴포넌트에 있는 같은 성격의 '할일' 이라는 데이터를 최상위 컴포넌트(App 컴포넌트)에 정의하고 하위 컴포넌트들에서 props로 전달하여 사용하도록 구조를 개선해볼 수 있다. 뷰 데이터 속성 todoItems와 로컬 스토리지 관리를 App 컴포넌트에서 한다..

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에 따라 페이지 깜빡임 없이 해당 컴포넌트로 이동하여 표시한다. 실제 웹 앱에서는 화면이 여러 개의 컴포넌트로 분할된 경우가 많기 때문에 여러 개의 컴포넌트들을 동시에 표시할 수 있는 라우터인 네스티드 라우터와 네임드 뷰..