뷰 썸네일형 리스트형 [Vue.js] 컴포넌트에 대해 HTML -> Vue 로 변환해서 컴포넌트의 이점을 알아보자. 컴포넌트란? 컴포넌트를 왜 사용? 컴포넌트는 어떻게 사용? 컴포넌트 정의 ➜ 컴포넌트 등록 ➜ 컴포넌트 사용 컴포넌트 시스템이란? 컴포넌트 (Component) 자바스크립트에서 재사용할 수 있도록 코드를 분리한 파일을 모듈이라고 한다. Vue 에서도 UI(HTML, CSS, JS) 를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다. 📌 JavaScript 코드를 재사용하는 모듈과 다르게, 컴포넌트는 JavaScript 뿐만 아니라 HTML, CSS 도 함께 캡슐화하여 재사용이 가능하게 한다. 컴포넌트를 사용하는 이유 컴포넌트를 사용하면 UI를 재사용할 수 있다. ➜ 프론트엔드 개발을 하다보면 JavaScript 뿐만 아니라 HTML, CS.. 더보기 [Vue.js] 뷰 컴포넌트 컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다 재사용성 직관적 이해 뷰에서는 웹 화면을 구성할 때 흔히 사용하는 네비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리 컴포넌트 등록하기 📌 전역(Global) 컴포넌트 등록 여러 인스턴스에 공통으로 사용할 수 있다 뷰로 접근 가능한 모든 범위에서 사용 가능 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue생성자에서 .component()를 호출하여 수행하면 된다 Vue.component('컴포넌트 이름', { //컴포넌트 내용 .. 더보기 [Vue.js] Vue.js 란 회사에서 쓰는 프론트엔드 프레임워크는 '뷰'를 쓰고 있다. 무엇보다 프론트엔드는 자바스크립트만 잘 할 줄 안다면(물론, HTML, CSS 도 알아야 하지만) 어느 프레임워크를 쓰던지 쉽게 적응이 가능하다 그야말로 프레임워크는 자바스크립트를 유용하게 쓰기위한 '프레임워크' 일뿐! 틈틈이 자바스크립트를 얼른 마스터해야겠다... 📌 Vue.js 란? 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크 뷰는 화면단 라이브러리이자 프레임워크이다 프레임워크 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 라이브러리 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 돔 HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있.. 더보기 이전 1 다음
