열이의 개발블로그

Do it! Vue.js 뷰 템플릿 뷰의 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성 ✏️ 템플릿 속성 사용 방법 1. ES5에서 뷰 인스턴스의 template 속성을 활용 template: 'Hello {{ message }}' 템플릿 속성의 특징 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 하고 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해줌 1. {{ message ]} ... ..

Do it! Vue.js 뷰 컴포넌트 통신 ✏️ 컴포넌트 간 통신과 유효 범위 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없음 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접 참조할 수 없음 2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제 my-component2 컴포넌트 내용에서 {{ cmp2Data }}는 my-component1 컴포넌트의 data.cmp1Data를 참조하고 있음 자바스크립트의 객체 참조 방식을 생각해 보면 참조 값 100이 화면에 표시되어야 하지만 아무것도 표시하지 않음 {{ cmp2Data }}에 아무것도 출력되지..

Do it! Vue.js ✏️ 뷰 인스턴스 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 ✏️ 뷰 인스턴스 생성 뷰 인스턴스를 사용하기 위한 코드 new Vue({ ... }); 예제 // 인스턴스 new Vue({ // el 속성 el: '#app', // data 속성 data: { message: 'Hello Vue.js!' } }); 'Hello Vue.js!' 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정 data 속성에 message 값을 정의하여 화면의 {{ message }}에 연결 ✏️ 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 함 Vue 생성자는 뷰..

Do it! Vue.js ✏️ Vue.js를 사용하는 이유 "Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 만들 수 있도록 도와주는 데 있다." - 에반 유(Vue.js 창시자) 진입 장벽이 낮다 ✏️ Vue.js란? 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있음 ✏️ 뷰의 장점 배우기가 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 갖고 있다. ✏️ 뷰의 특징 1. UI 화면단 라이브러리 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리 화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고도 함 MVVM 패턴이란 마크업 ..