기본 콘텐츠로 건너뛰기

라벨이 single file component인 게시물 표시

[Vue] Vue - 키포인트 이해하기

[Vue] Keypoints of Vue 프로젝트에서 사용할 Front-End Framework을 고심하던 중에 Gregg이 Vue.js를 소개하는 공식 자료를 보고 Vue를 선택했다. 아래의 내용은 참고자료에 언급한 원문을 번역하면서 나름대로 정리한 것으로 왜 Vue가 43%의 개발자들이 vue.js를 배우려고 하는지를 알 수 있다. 참고 현재 TOP 3 (Angular, React, Vue)의 자바스크립트들에 대한 비교는 vue.js 공식문서 를 참고하면 된다. 점진적인 프레임워크 Vue는 진입장벽이 낮고, 유연하고, 성능이 우수하고, 유지보수와 테스트가 편한 자바스크립트 프레임워크로 점진적인 프레임워크를 지향 하고 있다. 점진적인 프레임워크라는 것은 웹 어플리케이션 전체를 한꺼번에 하나의 프레임워크 구조로 구조화하지 않아도 일정 부분만 적용 가능 해서 사용자에게 더 좋은 사용자 경험을 제공할 수 있다는 것을 의미한다. 물론 전체를 처음부터 Vue로 구현할 수도 있다. Vue가 큰 규모의 어플리케이션을 개발할 수 있도록 핵심 라이브러리와 주변 생태계를 제공하고 있다. 재 사용 가능한 컴포넌트 (단일 파일 컴포넌트) 다른 프레임워크들처럼 재 사용이 가능한 컴포넌트로 웹 페이지를 구성할 수 있으며, 각 컴포넌트는 페이지 영역을 표시하는데 필요한 HTML, CSS, Script 를 가지는 단일 파일 컴포넌트 구조를 제공한다. 프로젝트로 알아보기 아주 간략하고 특징적인 Vue의 주요 컨셉을 알아볼 수 있다. 대 부분의 자바스크립트와 같이 페이지에 데이터를 표시하는 것부터 시작한다. 위의 그림에 표시된 것과 같이 "X"의 위치에 스크립트에서 설정한 "Boots"를 표시하고 싶으면 아래와 같이 구현하면 된다. 위의 내용을 좀 더 자세히 확인하면 다음과 같다. 정보를 표시할는 것은 Vue의 데이터를 바인딩할 때 사용하는 {{ ... }} 를 사용한다. 위의 예는 Vue 에서 관리하는 데이터 중에