초코레

뷰 템플릿이란? HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성 템플릿 속성을 사용하는 방법 ES5에서 뷰 인스턴스의 template 속성을 활용한다. ES6에서 싱글 파일 컴포넌트 체계의 코드를 활용한다. 템플릿 속성의 특징 라이브러리 내부적으로 template 속성에서 정의한 마크업과 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. 변환 과정에서 뷰의 반응성이 화면에 더해진다. 템플릿에서 사용하는 뷰의 속성과 문법 데이터 바인딩 자바스크립트 표현식 디렉티브 이벤트 처리 고급 템플릿 기법 ..

대표적인 웹 앱 HTTP 통신으로는 jQuery의 ajax가 있다. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. 뷰에도 ajax를 지원하기 위한 라이브러리인 뷰 리소스와 액시오스가 있다. 뷰 리소스 2016년 말에 공식적인 지원을 중단했지만 아직도 계속 사용할 수 있는 라이브러리 CDN를 이용하거나 NPM으로 라이브러리를 설치하는 방법(ES6 기준)으로 사용할 수 있다. 뷰 리소스 라이브러리를 이용하면 서버로부터 데이터를 받아와 화면에 나타낼 수 있다. 액시오스 (Axios) 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리 Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할..

라우팅이란? 웹 페이지 간의 이동 방법을 말한다. 라우팅은 싱글 페이지 애플리케이션에서 주로 사용하고 있다. SPA(Single Page Application) 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있고 더 빠르게 화면을 조작할 수 있어 사용자 경험이 향상된다. 뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있다. 프런트엔트 프레임워크를 사용하지 않고도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다. 대표적인 라우팅 라이브러리로는..

뷰는 컴포넌트로 화면을 구성하고 있기 때문에 같은 웹 페이지라도 데이터를 공유할 수 없다. 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문이다. 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다. 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법 지역 또는 전역 컴포넌트를 등록하면 등록된 컴포넌트는 하위 컴포넌트가 되고 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다. 인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위 컴포넌트가 되고, 새로 등록된 컴포넌트는 하위 컴포넌트가 된다. 이렇게 새 컴포넌트를 등록한 인스턴스를 최상위 컴포..

지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행한다. 1 2 3 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); cs 컴포넌트 이름 : HTML에서 사용할 사용자 정의 태그 이름을 작성한다. 컴포넌트 내용 : 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성한다. template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다. 뷰 라이브러리 파일 로딩 → 뷰 생성자로 컴포넌트 등록 Vue.component() → 인스턴..

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. new Vue()로 뷰 인스턴스를 생성한다. 이때 Vue를 생성자라고 하며, 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 뷰의 필요한 기능들을 미리 정의해 놓고 그 기능들을 재정의하여 편리하게 사용하기 위해 생성자를 사용한다. 뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다. 인스턴스의 유효 범위는 el 속성으로 지정한 HTML의 범위 안에서만 옵션 속성들이 적용된다. 뷰 라이브러리 파일 로딩 → 인스턴스 객체 생성(옵션 속성 포함) → 특정 화면 요소에 인스턴스를 붙임 → 인스턴스 내용이 화면 요소로 변환 → 변환된 화면 요소를 사용자가 최종 확인 뷰 인스..

웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 화면단 라이브러리이자 프레임워크라고도 볼 수 있다. 프레임워크 : 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 즉, 라이브러리 역할 뿐만 아니라 프레임워크 역할도 할 수 있다. Vue.js의 장점 리액트와 앵귤러에 비해 배우기 쉽고 성능이 우수하고 빠르다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 모두 ..