vue.js (9) 썸네일형 리스트형 Vue.js 컴포지션 옵션 Vue 인스턴스 생성 시 컴포넌트의 상속 관계나 기본 동작에 영향을 미치는 옵션을 설정할 수 있습ㄴ디ㅏ. 이를 컴포지션 옵션이라고 합니다. 1. parent 옵션 parent 옵션은 Vue 컴포넌트의 부모 컴포넌트를 정의하는 데 사용됩니다. 이 옵션을 사용하면 자식 컴포넌트가 부모 컴포넌트와 상호작용하거나 부모 컴포넌트의 데이터나 메서드를 사용할 수 있습니다. {{ parentData }} 위의 코드에서 parent 옵션은 ParentComponent라는 부모 컴포넌트와의 관계를 정의합니다. 자식 컴포넌트에서 parentData를 사용하여 부모 컴포넌트의 데이터에 접근할 수 있습니다. 2. mixins 옵션 mixins 옵션은 컴포넌트에서 재사용 가능한 코드와 로직을 정의하는 데 사용됩니다. 믹스인은 객.. Vue.js DOM 옵션 Vue.js는 Vue 인스턴스 및 컴포넌트에서 DOM에 접근하고 조작하기 위한 몇 가지 옵션 및 메서드를 제공합니다. 이러한 옵션과 메서드를 사용하면 Vue 애플리케이션에서 DOM을 효과적으로 다룰 수 있습니다. 아래에는 주요 DOM 관련 옵션과 메서드를 설명합니다. 1. el 옵션: Vue 인스턴스의 마운팅 포인트를 지정하는 옵션입니다. 이를 통해 Vue 애플리케이션을 HTML 요소에 연결합니다. new Vue({ el: '#app', // ... }); $el 속성: Vue 인스턴스의 실제 DOM 요소에 접근할 때 사용합니다. const vm = new Vue({ /* ... */ }); vm.$el // 실제 DOM 요소에 접근 2. $refs 속성: 템플릿 내에서 ref 속성으로 정의한 DOM 요.. Vue.js 상태 옵션 상태 옵션은 Vue 인스턴스와 컴포넌트에서 상태 값을 다루거나 전달하는 데 사용합니다. 1. data 옵션 data 옵션은 Vue.js 컴포넌트에서 사용할 데이터를 정의하는데 사용되는 옵션입니다. 이 데이터는 컴포넌트의 상태를 나타내며, 뷰(템플릿)와 함께 사용하여 동적으로 화면을 렌더링할 때 중요한 역할을 합니다. {{ message }} 위 예제에서 data 옵션은 message라는 데이터 속성을 정의하고 초기 값으로 '안녕, Vue.js!'를 설정합니다. 이 데이터는 템플릿 내에서 {{ message }}를 사용하여 출력됩니다. data 옵션의 중요한 점은 데이터 속성을 Vue 인스턴스에 반영하면 Vue.js가 데이터 변경을 감지하고 화면을 업데이트할 수 있게 됩니다. 따라서 데이터가 변경되면 해당.. Vue.js 라이프사이클 Vue.js 애플리케이션에서 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 제거되는 과정에서 발생하는 다양한 이벤트 및 훅(생명주기 메서드)을 의미합니다. 이러한 라이프사이클 훅을 활용하면 컴포넌트의 동작을 특정 시점에 제어하거나 커스터마이징할 수 있습니다. Vue.js에서 컴포넌트의 주요 라이프사이클 훅은 다음과 같습니다 1. beforeCreate: 컴포넌트 인스턴스가 생성되고 데이터 초기화 이전에 호출됩니다. 이 시점에서 컴포넌트의 데이터 및 이벤트 리스너 등이 아직 초기화되지 않았습니다. 2. created: 컴포넌트 인스턴스가 생성되고 데이터 초기화가 완료된 후에 호출됩니다. 이 시점에서 컴포넌트의 데이터와 이벤트 리스너가 초기화되었습니다. 3. beforeMount: 컴포넌트 템플릿이 가상 DO.. Vue.js 에서 필요한 용어 이번에는 Vue.js 기반 웹 애플리케이션을 만들 때 자주쓰는 용어에 대해 정리해 보았습니다. 1. 컴포넌트(Component) Vue.js 애플리케이션의 구조를 구성하는 기본 단위로, 재사용 가능한 UI 요소입니다. 컴포넌트는 Vue 인스턴스를 기반으로 구성되며, 데이터와 뷰(템플릿)로 이루어집니다. 2. Vue 인스턴스(Instance) Vue.js 애플리케이션의 개별 컴포넌트 또는 페이지를 나타내는 객체입니다. Vue 인스턴스는 데이터, 메서드, 라이프사이클 훅 등을 포함하며 템플릿과 연결됩니다. Vue.js 프로그램을 만들 때 가장 먼저 해야 하는 일은 최상위 Vue vm 인스턴스를 생성하는 것입니다. Vue.js는 Vue 템플리과 인스턴스의 속성을 바인딩하고 DOM 이벤트를 Vue 메서드로 전달.. Vue.js 빌드 도구 Vue.js를 웹 페이지나 애플리케이션에 쉽게 포함하는 방법은 script 태그를 사용하는 것 입니다. 자바스크립트는 기본적으로 모듈화 기능을 지원하지 않으므로 모듈화하려면 빌드 도구를 사용해야 합니다. 이번에는 빌드 도구를 소개 하겠습니다. 1. 주요 빌드 소개 - Vue CLI (Vue Command Line Interface): Vue.js 프로젝트를 생성, 관리 및 빌드하기 위한 공식 빌드 도구입니다. Vue CLI는 프로젝트 생성, 개발 서버 실행, 프로덕션 빌드, 테스트, 사용자 정의 명령 및 다양한 플러그인을 지원합니다. - Webpack: Vue CLI와 함께 사용되는 가장 일반적인 빌드 도구 중 하나입니다. Webpack은 모듈 번들링 및 자바스크립트, CSS, 이미지 및 기타 자산의 번.. Vue.js 개발 환경 지난 시간에 이어 Vue.js의 개발 환경을 구축하는 방법의 하나인 npm과 Vue CLI 설치를 살펴봅니다. 1. Node.js 및 npm 설치 먼저 Node.js와 npm이 컴퓨터에 설치되어 있는지 확인하세요. Node.js를 설치하면 npm도 함께 설치됩니다. Node.js를 아직 설치하지 않았다면 https://nodejs.org/에서 Node.js를 다운로드하고 설치하세요. 2. Vue CLI 설치 Vue.js를 사용하는 프로젝트를 생성하고 관리하는 데 도움이 되는 Vue CLI 도구를 설치하려면 다음 명령을 사용합니다. npm install -g @vue/cli 3. Vue.js 설치 Vue CLI를 사용하지 않고 Vue.js를 직접 설치하려면 프로젝트 폴더로 이동한 후 다음 명령을 실행합니다.. Vue.js 버전 및 CDN Vue.js의 개발용 버전과 배포용 버전을 알아봅니다. Vue.js 라이브러리 파일을 포함할 때 사용하는 CDN에 대해 알아봅니다. 1. Vue.js 개발용 버전 개발용 버전은 주로 개발 및 디버깅 목적으로 사용됩니다. 코드가 더 가독성 있으며, 디버깅 및 개발 도구의 사용을 지원합니다. 개발용 버전에는 더 많은 경고 메시지와 디버깅 정보가 포함되어 있어 개발자가 문제를 파악하기 쉽습니다. Vue 개발 도구와 관련된 기능을 지원하며, 런타임 컴파일러가 포함됩니다. 2. Vue.js 배포용 버전 배포용 버전은 실제 사용자에게 제공되는 프로덕션 환경에서 사용됩니다. 코드는 최적화되어 있으며, 디버깅 정보와 불필요한 경고 메시지가 제거됩니다. 파일 크기가 작아져 로딩 속도를 향상시키며, 성능을 최적화합니다. .. Vue.js 소개 vue.js 의 탄생 배격, 장점, 활용 방법을 설명합니다. Vue.js 프로그램의 실행 결과를 이해하는데 필요한 기반 지식을 다룹니다. 1. Vue.js 탄생 배경 ■ Evan You의 개인 프로젝트 Vue.js는 Evan You가 개인적으로 웹 개발을 좋아하는 개발자로서 시작했습니다. 그는 AngularJS를 사용하여 프로젝트를 진행하면서 AngularJS의 일부 측면이 복잡하게 느껴졌고, 더 단순하고 가벼운 프레임워크를 만들고자 했습니다. 이 프로젝트는 그의 개인적인 필요성에서 시작되었습니다. ■ AngularJS와 React의 영감 Evan You는 AngularJS와 React와 같은 기존의 자바스크립트 프레임워크와 라이브러리에서 영감을 받았습니다. 그는 AngularJS의 양방향 데이터 바인딩.. 이전 1 다음
