Vue9 Vue #5 - 뷰 라우터 라우팅이란? 라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야한다. 라우팅이란 웹 페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션에서 주로 사용하고 있다. 싱글 페이지 애플리케이션은 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션이다. 라우팅을 이용하면 화면 간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 사용자 경험을 향상시킬 수 있다. 일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타난다. 이런 부분.. 2021. 12. 11. Vue #4 - 뷰 컴포넌트 통신 컴포넌트 간 통신과 유효 범위 앵귤러1이나 백본과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰로 간주했다. 따라서 한 화면의 데이터를 해당 화면 영역 어디서든지 호출할 수 있었다. 하지만 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문이다. 이는 뷰 프레임워크 내부적으로 정의된 특징이다. 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 위 코드는 2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조한다. my-component2 컴포넌트 내용에서 {{ cmp2Data }}는 my-component1 컴포넌.. 2021. 12. 11. Vue #3 - 뷰 컴포넌트 컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있느 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리하다. 또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다. 뷰에서는 웹 화면을 구성할 때 흔히 사용하는 내비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다. 컴포넌트 등록하기 컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공.. 2021. 12. 11. Vue #2 - 뷰 인스턴스 뷰 인스턴스의 정의와 속성 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위다. 'Hello Vue.js!' 텍스트가 화면에 표시된 것은 인스턴스가 있었기 때문에 가능한 것이다. 인스턴스튼 뷰로 화면을 개발하기 위해 빠트릴 수 없는 필수 조건이다. 'Hello Vue.js!' 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였다. 그리고 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지저하고, data 속성에 message 값을 정의하여 화면의 {{ message }} 에 연결하였다. 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue 생성잔느 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자를 사.. 2021. 12. 11. 이전 1 2 3 다음
