문서 보기문서 편집수정 내역 Vue.js (덤프버전으로 되돌리기) [include(틀:웹 프레임워크)] ||<-2> {{{+1 '''뷰'''}}}[br]Vue.js || ||<-2> [[파일:Vue.js 로고.svg|width=40%]] || || '''종류''' ||[[웹 프레임워크]] || || '''라이선스''' ||[[MIT 라이선스]] || || '''개발''' ||Evan You || || '''언어''' ||[[JavaScript]] || || '''버전''' ||3.3.4 || || '''링크''' ||[[https://ko.vuejs.org/|[[파일:홈페이지 아이콘.svg|width=20]]]] [include(틀:GitHub 로고,링크=vuejs/core,크기=20)] [include(틀:트위터 로고,링크=vuejs,크기=20)] [[https://medium.com/the-vue-point|[[파일:미디엄 아이콘.svg|width=20]]]] || [목차] [clearfix] == 개요 == [[JavaScript|자바스크립트]]로 개발된 컴포넌트 구조 기반 [[프론트엔드(프로그래밍)|프론트엔드]] 프레임워크. 보통 '''뷰'''라고 부른다.[* 버전 3이 나온지 얼마 되지 않아 아직 Vue 2도 같이 지원되고 있고, 2.7 LTS 버전을 마지막으로 3로 완전히 전환할 계획이다. 아직도 나온지 2년 정도로 오래된 수준은 아니지만, 사용률이 너무 저조하여 Vue 개발 진영에서 3을 정착시키기 위해 상당히 노력하고 있다.] == 예시 == 이러한 HTML 파일이 있다고 가정했을 때, {{{#!syntax xml 안녕, {{ name }}! }}} 해당 코드를 실행시키면, {{{#!syntax javascript Vue.createApp({ data() { return { name: '나무위키' } } }).mount('#app') }}} "안녕, 나무위키!" 가 출력된다. == 시작하기 == === 개발 환경 만들기 === * 설치 [[Node.js]]와 [[npm]]을 설치한 후, 프로젝트를 만들 폴더에서 선호하는 종류의 터미널을 열고 다음을 입력한다. {{{#!syntax powershell npm init vue@latest }}} 커맨드 실행 후 몇 가지 질문이 나오는데, 원하는 프로젝트명을 입력하라는 뜻의 첫 질문을 제외하면 나머지는 전부 엔터를 쳐서 기본값인 No로 넘겨도 무방하다. 이후 생성된 프로젝트 폴더를 열고, 의존성 패키지들을 설치한다. {{{#!syntax powershell cd (프로젝트 이름) npm install }}} * 실행 다음 명령어를 입력하면 개발 서버를 띄워 실행이 가능하다. {{{#!syntax powershell npm run dev }}} 이 가이드는 공식 제공되는 {{{create-vue}}} 패키지를 활용한 방법이며, 이외에 {{{create-vite}}}나 Vue CLI 등을 활용하여 생성하는 방법도 존재한다. == 가상 DOM == Vue.js 2.0 부터 추가된 기능. 잘 알려진 [[React(라이브러리)|React]]처럼, Vue.js도 가상 DOM (Virtual DOM)을 활용한다. 브라우저의 DOM을 직접 컨트롤하는 것은 상당히 무거운 작업인데, 이것을 가상 DOM을 먼저 업데이트한 후에 브라우저의 DOM을 한번에 업데이트시키는 식으로 최적화하기 위해서 가상 DOM이 사용된다. 특히 Vue나 React같이 자바스크립트를 사용해 웹페이지를 자주 변형하는 경우에는 가상 DOM이 가져다주는 성능 이득이 극대화된다. == Composition API == Vue.js 3.0부터 추가된 기능. [[React(라이브러리)|React]]의 Hooks로부터 영감을 받아 추가된 컴포넌트 제작 방법으로, 여러 기능들을 {{{data()}}}, {{{methods}}}, {{{computed}}} 등에 나누어 놓던 기존의 Options API와는 달리 {{{setup()}}} 함수 안에 {{{reactive()}}}나 {{{computed()}}} 등의 함수들을 이용하여 모든 기능들을 배치한다. 용도별 코드 정리가 가능하기 때문에 기존 방식에 비해 대규모 컴포넌트의 코드 가독성을 높일 수 있다. 또한 {{{this}}}에 의존하지 않는 API 구조 특성상 모듈화가 매우 원활하며, 뛰어난 타입스크립트 지원을 보여 준다. 장점들을 종합해 보자면 결국 Vue가 기존까지 지적받던 대형 프로젝트에서의 문제점들을 해결하기 위한 API라고 볼 수 있다. {{{@vue/composition-api}}} 패키지를 이용하면 Vue 2에서도 사용할 수 있다. === Script Setup === 위 Composition API 를 더욱 더 간편하게 사용할 수 있는 Vue 3.2 의 신규 기능. 이 기능은 3.0 출시 전 Composition API와 함께 RFC로 논의된 적이 있었으나, 3.0 출시 후에는 실험적 기능으로 활성화 시에만 사용 가능하다가, 3.2 에 정식 출시되었다. 기존 Composition API와의 차이점은, {{{ }}} 이렇게 {{{ }}} 단점으로는, 문서화가 불가능하다. 문서화된 컴포넌트(공통 컴포넌트 등) 작성을 원할 경우, 기존 {{{되돌리기