Vue란? CDN 및 npm으로 시작하기

Vue

Vue.js는 대표적인 프론트엔드 프레임워크다. 소위 3대 프론트엔드 프레임워크 중 하나다. 3대 프론트엔드 프레임워크에는 Vue를 제외하면, 페이스북(현 메타)에서 만든 ‘React‘와 구글에서 만든 ‘Angular‘가 있다.

Vue는 구글의 앵귤러 개발자가 앵귤러의 장점과 리엑트의 장점을 모아서 만들었다. 물론 리엑트가 가장 많이 사용되지만, Vue는 문법이 단순하고 쉬우며, 용량이 비교적 작고 빠르기 때문에 2번째로 많이 사용된다.

Vue 사용하기

Vue를 사용하는 방법은 2가지가 있다. 하나는 CDN을 사용하는 방법이고, 다른 하나는 npm을 사용하는 방법이다. 먼저 간단한 CDN을 사용하는 방법을 알아보자.

CDN 방식

[1] CDN 작성하기

html 파일에 <script>태그 위에 CDN링크를 복붙하면 된다. CDN은 공식문서에서 확인할 수 있는데, 그냥 아래 코드를 복사해서 써도 된다.

  ● <script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script>

[2] Vue 객체를 통해 createApp 메서드 구조분해 할당 받기

CDN으로 Vue를 사용하는 경우, Vue라는 전역 객체를 사용할 수 있다. 구조분해 할당을 통해 Vue 객체 속에 있는 똑같은 이름의 createApp의 함수를 createApp 변수에 할당한다.

[3] 앱 인스턴스 생성

모든 Vue 애플리케이션은 ‘createApp’ 함수로 생성한다. createApp 함수를 호출하여 ‘app’이라는 이름의 인스턴스를 생성하면 된다. 앱 인스턴스 이름이 꼭 app일 필요는 없지만 ‘app’으로 명명하는 것이 일반적이다.

[4] mount로 특정 DOM 요소와 연결

‘mount()’는 Vue 앱 인스턴스의 메서드다. mount를 통해 특정 DOM 요소에 Vue 앱 인스턴스를 연결할 수 있다. 이를 통해 Vue의 기능이 해당 요소에서 동작할 수 있게 된다.

[5] setup() 함수와 컴포넌트 작성

createApp()의 인자로 객체가 들어가는데, 그 객체도 ‘컴포넌트‘라고 부른다. 컴포넌트는 재사용 가능한 코드 블럭을 말한다. 컴포넌트에서 사용되는 변수를 ‘상태state’라고 하는데, setup() 함수 내에서 선언되어야 한다.

setup()함수에서 선언된 상태는 객체 형태로 반환(return)되어야 템플릿에서 참조하여 사용할 수 있다.

npm 방식

CDN 방식은 간단하고 빠르게 Vue를 사용할 수 있다는 장점이 있지만, 규모가 커지면 사용하기 어렵다. 먼저 프로젝트의 규모가 커질수록 많은 라이브러리를 설치하고 관리해야 하는데, CDN 방식은 이에 대한 의존성 관리가 어렵다. 하나 하나 일일이 찾아서 업데이트해야한다.

또한 프로젝트 규모가 커지면서 프로그램을 구성하는 독립적 코드 블록인 모듈의 수가 극단적으로 많아진다. 모듈 간 연관성도 많다 보니 CDN 방식으로는 각 모듈이 어떤 모듈이었는지도 하나 하나 관리하기 어렵다.

그래서 규모가 커지게 되면 npm 방식을 사용해야 한다.

npm이란 node.js의 기본 패키지 관리자를 말한다. 수많은 오픈 소스 패키지와 라이브러리를 사용할 수 있다. node.js를 다운로드 하면 npm도 함께 설치된다.

Vue 프로젝트를 할 때는 npm을 통해 빌드 도구를 사용하면 된다. 빌드 도구란 브라우저에서 실행할 수 있도록 여러 소스 코드를 최적화된 형태로 조합해주는 도구를 말한다. 빌드 도구를 무수히 많은 모듈을 묶어 주고 최적화해주는 번들링(bundling)이 가능해진다.

대표적인 빌드 도구인 Vite를 사용해서 Vue를 사용해보자.

[1] Vue 프로젝트 생성

$ npm create vue@latest

최신 버전의 Vite기반의 Vue 프로젝트를 생성한다.

[2] 프로젝트 설정

프로젝트 이름을 설정하고, 나머지는 일단 다 No를 선택하면 된다.

[3] 프로젝트 폴더로 이동

[4] 패키지 설치

[5] Vue 프로젝트 서버 실행

저 주소를 누르면 Vite 서버가 정상적으로 실행되는 걸 확인할 수 있다.

[6] SFC 기초 문법

Vue 프로젝트를 열어보면 ‘.vue’파일을 확인할 수 있다. ‘.vue’ 파일은 ‘HTML + CSS + JS’가 합쳐진 컴포넌트인데, 이를 Single-File Component, SFC라고 한다. 어플리케이션이 거대해지면서 HTML과 CSS, JS를 나눠서 관리하면 너무 복잡하기 때문에 이렇게 vue파일로 묶게 되었다.

SFC는 그냥 실행될 수 없고, 빌드된 후에 실행할 수 있다. 여기서는 Vite를 통해 빌드가 된다.

<template> 태그에는 HTML 이 작성되고, <script setup>태그에는 JS가 작성되며, <style scoped> 태그에는 CSS가 작성된다.

이때 <script setup>태그는 하나만 작성 가능하다. 앞서 살펴본 CDN 방식과 다르게 script태그에 setup함수가 합쳐져 있으므로 새로 setup함수를 작성할 필요가 없다. return이나 mount도 작성할 필요가 없기 때문에 간편하다.

한편, CDN 방식에서는 구조 분해 할당을 통해 Vue 객체로부터 기능(함수)을 가져왔지만, npm 방식에서는 import를 통해 기능을 가져와야 한다. 문자열 ‘vue’를 사용하면 된다. ‘vue’는 단순한 문자열이 아니라 Vue.js 라이브러리를 의미한다.

● const { ref } = Vue // CDN

● import { ref } from ‘vue’ // npm

끝.