로춘남의 IT이야기

뷰 템플릿(Template)란? : HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성 템플릿에서 사용하는 뷰의 속성과 문법 1) 데이터 바인딩(Data Binding) : HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는것을 의미. {{ }} - 콧수염 괄호 : 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식. v-bind : 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결 할 때 사용하는 데이터 연결 방식 2) 자바스크립트 표현식 3) 디렉티브(Directive) : HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미. ex) 두잇..

라우팅이란? 웹 페이지 간의 이동 방법을 말함. 라이팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용. 화면 간의 전환을 매끄럽게 진행 시킬 수 있음. 서버에서 응답을 받아 웹 페이지 처리하면 화면상에 깜빡거림이 있을수있는데, 라우팅을 사용 할 경우 깜빡거림 없이 매끄럽게 사용 할 수 있다. 뷰 라우터란? 뷰에서 라우팅 기능을 구현 할 수 있도록 지원하는 공식 라이브러리. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동이 가능하다 [뷰 라우터 구현할 때 필요한 특수 태그와 기능] 태 그 설 명 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동 페이지 표시 태그. 변경되는 URL에 따라 해..

컴포넌트(Component)란? 조합하여 화면을 구성 할 수 있는 블록(화면의 특정 영역)을 의미. 컴포넌트를 활용하면 빠르게 구조화하여 일괄적인 패턴으로 개발이 가능하다. → 화면의 영역을 컴포넌트로 쪼개서 활용하다보니 나중에 관리하기도 편함. 또한 정해진 방식대로 컴포넌트를 사용하기때문에 다른 사람이 보기에도 직관적이다. 이렇게보니깐 컴포넌트의 관계도는 자료구조 트리(Tree)와 비슷한거 같다. ※ 트리 구조란? 자료구조 중 하나로, 노드끼리의 연결이 부모 - 자식의 구조를 따름. 트리는 윈도우 파일 시스템 체계를 비롯하여 각종 데이터베이스에 활용되고 있고 뷰에서도 컴포넌트를 이해할 때 필요한 개념이다. 컴포넌트를 등록하는 방법 1) 전역(Local) 컴포넌트 특정 인스턴스에서만 유효범위를 가짐. →..

뷰 인스턴스(instance) 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위. new Vue({ el : '#app', data : { message: 'Hello Vue.js!' } }); new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 부름. 생성자를 사용하는 이유는 뷰로 개발 할때 필요한 기능을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함. ※ 생성자란? : 객체를 새로 생성 할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성 할때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법. 일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를..

Vue.js 첫 시작하기..! Vue.js란?(보통 '뷰'로 약칭) : 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크. 뷰는 화면단 라이브러리이자 프레임워크라고 볼 수 있다. ※ 프레임워크 : 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 ※ 라이브러리 : 자주 사용되는 기능들을 모아 재활용 할 수 있도록 정리한 기술 모음집 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합 할 수 있는 형태로도 제공. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미. 뷰의 장점 1) 배우기 쉽다. 2) 리액트와 앵귤러에 비해 성능이 우수하고 빠름..