뷰 프로젝트(Vue Project) 구성 방법 HTML 파일에서 뷰 코드 작성 시의 한계점 앞에서 뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하고, 페이지 사이를 이동할 때는 라우터를 사용해야 한다고 설명하였다. 특히 앞에서 다룬 예제들은 모두 HTML 파일에서 자바스크립트와 마크업을 이용하여 예시를 들었으나 실제 애플리케이션을 제작하다 보면 파일 구조에 한계를 느끼게 된다. Vue Template(뷰 템플릿) - 2 이벤트 처리 뷰는 이벤트 처리를 위해 v-on 디렉티브와 methods속성을 활용한다. ... {{ message }} 문자열 역순 캐싱 면에서 두 속성을 보면 methods속성은 수행할 때마다 연산을 하기 때문에 별도로 캐싱하지 않지만, computed속성은 데이터가 변경되지 않는 한 이전의 계산값을 가지고 있다가(캐싱하고 있다가) 필요할 때 바로 반환해 준다. 따라서 복잡한 연산을 반복 수행하여 화면에 나타내야 한다면 computed속성을 이용하는 것이 methods속성을 사용하는 것보다 성능 면에서 효율적이다. watch 속성 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다, computed속성과 유사하지만 computed속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면, watch.. Vue Template(뷰 템플릿) - 1 뷰 템플릿이란? HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다. 템플릿 속성을 사용하는 방법은 첫번째로 ES5에서 뷰 인스턴스의 template속성을 활용하는 방법이다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다. 변환된 render()함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. 그리고 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해진다. 두 번째 방법은 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법이다. Hello {{message}} 템플릿에서 .. Vue HTTP 통신 웹 앱의 HTTP 통신 방법 HTTP는 브라우저와 서버 간에 테이터를 주고받는 통신 프로토콜(protocol)이다. 브라우저에서 특정 데이터를 보내달라고 요청을 보내면 서버에서 응답으로 해당 데이터를 보내주는 방식으로 동작한다. 서버에 '해당 데이터를 보내주세요'라는 메시지를 보내는 게 바로 'HTTP 요청을 보낸다'와 같은 의미이다. 웹 앱 HTTP 통신의 대표적 사례로 JQuery와 Ajax가 있다. Ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. Ajax가 대중화되면서 많은 웹 앱에서 Ajax를 사용하고 있다. 리액트와 앵귤러등에서도 활발히 사용되고 있는 것처럼 뷰에서도 Ajax를 지원하기 위한 라이브러리를 제공.. Vue Router(뷰 라우터) 라우팅(Routing)이란? 라우터를 이해하기 위해서는 라우팅(Routing)을 먼저 알아야 한다. 라우팅이란 웹 페이지 간의 이동방법을 의미한다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용하고 있다. 뷰뿐만 아니라 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있으며 프런트앤드 프레임워크를 사용하지 않고 일반 HTML 파일들로도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다. 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다. 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 ※$mount()는 el.. Vue Component teleport(뷰 컴포넌트 통신) - 2 하위에서 상위 컴포넌트로 이벤트 전달 이벤트 발생과 수신 앞에서 배운 props는 상위에서 하위 컴포넌트로 데이터를 전달하는 방식이었다. 반대로 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하는 것은? 이벤트를 발생시켜 상위 컴포넌트에 신호를 보내면 된다. 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 것이다. 이벤트 발생과 수신 형식 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용하여 구현한다. //이벤트 발생 this.$emit('이벤트명') //이벤트 수신 $emit를 호출하면 괄호 안에 정의된 이벤트가 발생한다. 그리고 일반적으로 $emit()을.. Vue Component teleport(뷰 컴포넌트 통신) - 1 컴포넌트 간 통신과 유효범위 앵귤러1이나 백본(backbone.js)과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰(View)로 간주했습니다. 따라서 한 화면의 데이터를 해당 화면 영역 어디서든지 호출이 가능했었습니다. 하지만 뷰(Vue.js)의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없습니다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문입니다. 이는 뷰 프레임워크 내부적으로 정의된 특징입니다. 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없습니다. ... 위 예제는 2개의 지역 컴포넌트를 등록하고 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제입니다. my-componen.. Vue Component(뷰 컴포넌트) 컴포넌트란? 조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)을 의미합니다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 재사용하기가 훨씬 편리하다. 또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있습니다. 뷰에선 웹 화면을 구성할 때 흔히 사용하는 내비게이션 바, 테이블, 리스트, 인풋박스등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리합니다. 컴포넌트 등록하기 컴포넌트를 등록하는 방법은 전역과 지역의 두가지가 있습니다. 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고 전역 컴포넌트는 여러.. Vue Instance life cycle(뷰 인스턴스 라이프 사이클) 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 한다. 속성(순서대로 실행) - beforeCreate 인스턴스가 생성된 후 가장 처음 실행되는 라이프 사이클 단계 data속성과 methods속성이 아직 인스턴스에 정의되어 있지 않고 돔 같은 화면 요소에도 접근 불가 - created data속성과 methods속성이 정의되었기 때문에 this.data 또는 this.. fetchData()와 같은 로직들을 이용하여 data속성과 methods속성에 정의된 값에 접근하여 로직을 실행할 수 있다. 다만 아직 인스턴스가 화면요소에 부착되기 전이기 때문에 template속성에 정의된 돔 .. 뷰 인스턴스 뷰 인스턴스(Vue Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. {{message}} new Vue부분이 인스턴스이고 el와 data는 속성이다. 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 하고, Vue 생성자는 뷰 라이브러리를 로딩 후 접근할 수 있다. 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함입니다. 뷰 인스턴스 옵션 속성 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다. 위의 코드를 예로 하면 data라는 미리 정의된 속성을 사용하여 그 안에 message라는 새로운 속성을 추가하고.. Vue 개발환경 설정 내가 보는 책에서는 Atom을 사용했지만 나는 개발하는 사이트에서 Visual studio code를 사용하기에 Visual studio code를 사용하기로 했다. 1. Visual studio code를 우선 설치 -> 가능하면 stable 버전을 설치하자. 가장 최신 버전으로 할 시 예상치 못한 오류가 날 수도 있기 때문에 되도록이면 안정화되어 있는 stable버전으로 설치하길 권장한다. 2. node.js 설치 node.js는 서버 사이드 자바스크립트로 서버 측에서 실행되는 자바스크립트 실행환경을 의미합니다. 뷰 프로젝트 구성 방법에서 뷰 CLI(Command Line Interface)를 이용해 쉽게 뷰 프로젝트를 구성하려면 node.js가 설치되어 있어야 한다. 또한 뷰 CLI로 생성한 프로젝.. Vue의 특징 1. UI 화면단 라이브러리 2. 컴포넌트 기반 프레임워크 컴포넌트 기반으로 개발하는 이유는 코드를 재사용하기 쉽다는 장점이 있기 때문이다. 그리고 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있기 때문이다. 3. 뷰는 앵귤러의 양방향 데이터 바이딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크입니다. 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말합니다. 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미합니다. 컴포넌트 간 데이터를 전달할 때 항상 사위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 게 바로 단방향 데이터 흐름입니다. 이외에도 빠른 .. 이전 1 2 다음
