본문 바로가기

전체 글118

뷰 이벤트 (Vue Event) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 이벤트 (Vue Event) 웹 어플리케이션에서 사용자가 동적으로 웹 어플리케이션과 상호작용을 할 수 있도록 하는 기능을 의미합니다. 뷰 이벤트는 크게 3가지 역할로 구성되어 있습니다. 이벤트 소스 (Event Source): 이벤트가 발생한 객체 이벤트 핸들러 (Event Handler): 이벤트 처리 내용이 구현된 객체 리스너 (Listener).. 2022. 12. 2.
뷰 디렉티브 (Vue Directive) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 디렉티브 (Vue Directive) HTML 태그 안에 'v-'를 접두사로 가지는 모든 속성을 의미합니다. 뷰 디렉티브는 화면 요소를 더 쉽게 조작하기 위해 사용하는 기능으로 동적인 웹을 구현할 수 있습니다. v-if / v-else-if / v-else 목적 지정한 뷰 데이터의 값(참, 거짓)에 따라 해당 HTML 태그를 화면에 표시하거나 하지 .. 2022. 12. 1.
뷰 데이터 바인딩(Vue Data Binding) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 템플릿 (Vue Template) HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성을 의미합니다. 데이터 바인딩 (Data Binding) HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 데이터 바인딩의 주요 문법으로 '.. 2022. 11. 30.
뷰 라우터 (Vue Router) - 네임드 뷰(Named View) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 라우터 (Vue Router) 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다. 뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며, 본 글에서는 네임드 뷰에 대해서 정리하였습니다. 네임드 뷰 (Named View) 한 화면에 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식 네스티드 라우터와의 .. 2022. 11. 29.
뷰 라우터 (Vue Router) - 네스티드 라우터 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 라우터 (Vue Router) 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다. 뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며, 본 글에서는 네스티드 라우터에 대해서 정리하였습니다. 네스티드 라우터 한 화면에 최소 2개 이상의 컴포넌트를 표시하는 경우 사용하기 적합한 라우터 상위 컴포넌트 1.. 2022. 11. 28.
뷰 라우터 (Vue Router) - 기본 라우터 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 라우터 (Vue Router) 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다. 뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며, 본 글에서는 기본 라우터에 대해서 정리하였습니다. 기본 라우터 한 화면에 하나의 컴포넌트만 표시하는 경우 사용하기 적합한 라우터 사용 태그 뷰 기본 라우터 구현시 .. 2022. 11. 25.
뷰 컴포넌트 (Vue Component) 통신 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 컴포넌트 통신 뷰는 하나 이상의 뷰 컴포넌트로 구성되며, 각각의 고유한 유효 범위를 지니고 있어 타 컴포넌트의 데이터를 직접적으로 참조할 수 없습니다. 따라서 뷰 프레임워크 자체에서 정의한 상/하위 컴포넌트 관계의 특성을 이용하여 데이터 및 이벤트를 전달합니다. 상/하위 컴포넌트 관계에서의 통신 컴포넌트 간의 상/하위 관계를 지정하는 속성은 별도로 .. 2022. 11. 24.