전체 글16 Vue #7 - 싱글 파일 컴포넌트 체계 싱글 파일 컴포넌트 체계 싱글 파일 컴포넌트 체계란 .vue 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다. 의 export default { } 코드는 ES6의 자바스크립트 모듈화와 관련된 문법이다. 2021. 12. 12. Vue #6 - 뷰 템플릿 뷰 템플릿이란? 뷰의 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수 있는 형태의 HTML로 변환해 주는 속성이다. 템플릿 속성을 사용하는 방법은 두 가지로, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법이다. // ES5에서 template 속성 new Vue({ template: 'Hello {{ message }}' }); 여기서 템플릿 속성에 대해 한 가지 알아둘 특징이 있다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 .. 2021. 12. 12. Vue #5 - 뷰 라우터 라우팅이란? 라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야한다. 라우팅이란 웹 페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션에서 주로 사용하고 있다. 싱글 페이지 애플리케이션은 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션이다. 라우팅을 이용하면 화면 간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 사용자 경험을 향상시킬 수 있다. 일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타난다. 이런 부분.. 2021. 12. 11. Vue #4 - 뷰 컴포넌트 통신 컴포넌트 간 통신과 유효 범위 앵귤러1이나 백본과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰로 간주했다. 따라서 한 화면의 데이터를 해당 화면 영역 어디서든지 호출할 수 있었다. 하지만 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문이다. 이는 뷰 프레임워크 내부적으로 정의된 특징이다. 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 위 코드는 2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조한다. my-component2 컴포넌트 내용에서 {{ cmp2Data }}는 my-component1 컴포넌.. 2021. 12. 11. 이전 1 2 3 4 다음
