FrontEnd (6) 썸네일형 리스트형 뷰 템플릿 템플릿(template) : HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성 1. ES5에서 뷰 인스턴스의 template 속성 활용 ex. template: Hello {{message}}와 같은 코드 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할이고 변환 과정에서 뷰의 반응성이 화면에 더해진다고 한다 2. 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 Hello {{message}} 데이터 바인딩 데이터 바인딩(Data Binding) : HTML 화면 요.. Vue.js 뷰 HTTP 통신 HTTP(HyperText Transfer Protocol) : 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜 프로토콜 : 컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙 제이쿼리(jQuery)의 ajax : 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법. 웹 앱 HTTP 통신의 대표적인 사례 엑시오스(Axios) : 가장 많이 사용되는 HTTP 통신 라이브러리 설치하는 법 API 유형 처리결과 axios.get('URL주소').then().catch() 해당 URL 주소에 대해 HTTP GET 요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 오류가 발생하면 cat.. Vue.js 뷰 라우터 | 네스티드 뷰 | 네임드 뷰 라우팅(routing) : 웹 페이지 간의 이동 방법. 싱글 페이지 애플리케이션(SPA)에서 주로 사용 ○ 화면 간의 전환이 매끄러움 Vuejs 뷰 컴포넌트 통신 컴포넌트 간 통신과 유효 범위 2개의 지역 컴포넌트를 등록하고 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제 my-component2 컴포넌트 내용에서 {{cmp2Data}}가 my-component1 컴포넌트의 data.cmp1Data를 참조하고 있다 아무것도 값이 나오지 않은 이유는 my-component2에서 my-component1의 값을 직접 참조할 수 없기 때문이다 상-하위 컴포넌트 관계 : 트리 구조에서 부모노드, 자식노드처럼 컴포넌트 간의 관계가 부모, 자식으로 이루어진 컴포넌트를 의미 지역 또는 전역 컴포넌트를 등록하면 등록된 컴포넌트는 하위 컴포넌트(자식 컴포넌트)가 된다. 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트(부모 컴포넌트)가 된다 props 속성 : 상위 컴포넌.. Vue.js 컴포넌트 컴포넌트(component) : 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있음 뷰에서는 내비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다 컴포넌트 등록하기 1. 지역(local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가짐 2. 전역(global) 컴포넌트는 여러 인스턴스에서 공통으로 사용 가능 전역 컴포넌트 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); - 컴포넌트 이름 : template 속성에서 사용한 HTML 사용자 정의 태그 이름을 의미 - 컴포넌트 내용 : 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때.. Vue.js 기초 | 라이프사이클 Vue.js란? 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 {{message}} 뷰 인스턴스 : 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 new Vue({ ... }); 코드에서는 new Vue({ el: '#app', //el속성 data : { message : 'Hello vue js' //data속성 } }); //인스턴스 'Hello vue js'라는 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성 그리고 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 message 값을 정의하여 화면에 {{message}}에 연결하였다 뷰 인스턴스 생성자 : new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 함.. 이전 1 다음
