[입문] Vue3 설치하기, 기본 편

Vue.js 는 프로젝트에 상황에 맞춰서 적용할 수 있도록 설계되어있다. 이는 프로젝트가 진행되면서 생길 수 있는 요구사항에 따라 여러 가지 방법으로 Vue.js를 활용할 수 있다는 의미다. 예를 들어 단순한 랜딩 페이지라면, Vue.js 자체 프로젝트를 생성하는 것보다 일부 영역에만 바로 사용할 수 있도록 CDN으로 연결하는 것이 더 나은 방법일 수 있다.

 

프로젝트에 Vue.js를 추가하는 3가지 주요 방법은 다음과 같다.

 

1. 정적인 페이지에 CDN Package로 연결하기

2. npm을 사용하여 연결하기

3. 공식 CLI를 사용하여 프로젝트 구조가 잡혀있는 boilerplate를 사용한다.

 

여기서 정적인 페이지에 CDN Package를 사용하는 방법은 학습하거나, 프로토 타입을 빠르게 구축해보기 위한 방법으로 적절하다. 이미 모놀리식 방식으로 개발되어 있는 프로젝트에 사용하는 것이 아니면 현업에서는 거의 쓰지 않는다. 이 글의 목적은 학습도 있지만, 최대한 실무에 적용해도 무리 없는 수준으로 실습해보는 것이기 때문에, 실제 프로젝트 구축에 많이 쓰이는 3번을 활용할 예정이다.

 

1. Node.js 설치하기

우선 현업에서 많이 쓰이는 Node.js를 설치한다. Node.js 는 Chrome V8 JavaScript 엔진으로 빌드된 자바스크립트 런타임으로, 웹 애플리케이션 개발에 새로운 흐름을 가져왔다. 아래 링크로 접속하면 다음과 같은 화면이 보인다.

 

[Node.js 공식 홈페이지]

https://nodejs.org/ko/ 

Node.js

 

Node.js 메인 화면

 

LTS는 실무 프로젝트에 적용해도 큰 문제가 없는 안정적인 버전을 뜻하고, 최신 버전은 문자 그대로 Node.js의 최신 버전을 뜻한다. 우선 2022년 10월 3일 기준으로 LTS 버전인 16.17.1을 다운로드하여서 설치한 후 터미널에 다음 명령어를 입력한다.

 

node --version // NODE 현재 버전 확인
npm --version // NPM 현재 버전 확인

 

문제없이 설치가 되었다면 현재 설치된 버전이 표시될 것이다. 만약 이미 설치한 버전이 있다면, Node.js의 여러 개의 버전을 관리할 수 있는 NVM을 설치한다. 실제로 현업에서 NVM을 사용하는 사례가 많으니, 꼭 구글링을 통해 설치 방법과 사용법을 알아두도록 하자.

 

현업에서 NVM을 사용하는 이유는 단순히 Node.js 버전이 다르기 때문인데 만약 1년 전에 개발한 프로젝트를 유지 보수한다면, 현재 Node.js의 버전과 문제없이 호환될 수가 없다. 예외적으로 문제없이 프로젝트 개발 모드로 진입했다? 에러가 없는 그 순간을 감사히 생각하자.

 

2. Vue-CLI 설치하기

Vue-CLI 란, Vue.js 애플리케이션을 구축할 때 환경 설정 시간을 단축할 수 있는 설정을 제공한다. 아직 Vue.js 에 익숙하지 않다면 다양한 방법으로 프로젝트를 설정해보는 것도 추천한다. Vue 3의 경우, npm에서 @vue/cli로 제공되는 Vue CLI v4.5 이상 버전을 사용해야 하므로, Vue-CLI 버전은 꼭 4.5 이상으로 설치한다.

 

npm install -g @vue/cli // Vue-CLI 전역 설치
vue --version // Vue-CLI 현재 버전 확인

 

3-1. Vue-CLI를 사용한 프로젝트 설치

 

vue create <project-name>

 

Vue-CLI를 이용해 Vue.js 프로젝트를 구성해보자. 먼저 명령어를 위와 같이 입력하면 다음과 같은 화면이 나오는데, 순서대로 진행하면 된다.

 

① 사전 설정을 선택 Please pick a preset

 

 

- Vue 2.x 기본 설정

- Vue 3.x 기본 설정

- 사용자 설정

 

아직 Vue.js 프로젝트 구성에 익숙하지 않다면, 기본 설정을 사용하면 좋다. 핵심 기능에 필요한 라이브러리는 기본적으로 설치해서 제공해주기 때문에, 환경 설정에 들이는 시간을 줄일 수 있다.

 

그러나 이 글에서는 최대한 실무에 가깝게 프로젝트를 구축하기 위해 사용자 선택으로 진행한다.

 

② 프로젝트에 필요한 설정 체크 Check the features needed for your project

 

- Choose Vue version

- Babel

- TypeScript

- Progressive Web App (PWA) Support

- Router

- Vuex

- CSS Pre-processors

- Linter / Formatter

- Unit Testing

- E2E Testing

 

프로젝트에 필요한 설정과 라이브러리를 미리 설치해주는 단계다. 우선 Vue 2, Vue 3 가 있기 때문에 Vue Version을 선택할 수 있도록 하고, Babel을 통해 모든 브라우저가 ES(ECMA Script)의 최신 기능을 호환할 수 있게 한다.

 

Vue.js 3.x부터는 TypeScript를 공식적으로 지원하므로 TypeScript를 선택한다. 그리고 페이지 경로를 관리하는 Router와 전역 상태 관리를 담당하는 Vuex를 선택한다. Router와 Vuex를 지금은 완전히 알지 못해도 괜찮다. 자세한 설정 가이드를 안내할 때 하나씩 설명할 예정이다.

 

그리고 CSS Pre-processors를 선택해 less 혹은 scss를 사용할 수 있도록 환경을 구성한다. 그리고 코딩 컨벤션(일종의 코딩 스타일 규약)을 위해 Linter / Formatter를 선택하여 마무리한다.

 

③ 프로젝트에 사용할 Vue 버전 선택 Choose a version of Vue.js that you want to start the project with

 

 

- 2.x

- 3.x

 

④ 클래스 스타일 구문을 사용할 것인가? Use class-style component syntax?

 

 

Vue 클래스 컴포넌트는 클래스 스타일 구문으로 Vue 컴포넌트를 만들 수 있는 라이브러리다. 필자가 현업에서 아직까지 사용하거나 사용한 것을 본 적이 없어 우선 N으로 설정했다.

 

⑤ TypeScript를 Babel과 함께 사용할 것인가? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?

 

 

TypeScript를 Babel과 함께 사용하게 되면, TypsScript를 JavaScript로 전환하는 과정에서 타입 검사를 할 수 없는 문제가 있다. 그러나 Babel을 통하여 JavaScript 호환성에 문제없게 하는 것이 더 중요하므로, Y로 설정한다.

 

⑥ 라우터에서 history mode를 사용할 것인가? Use history mode for router? (Requires proper server setup for index fallback in production)

 

 

Vue-Router 설정할 때 history mode 가 있다. history mode를 사용하지 않으면 페이지 이동 시 URL을 반환하지 않는 이슈가 있기 때문에, Y로 설정한다. 이 부분은 자세한 설정 가이드에서 다시 알아보자.

 

⑦ CSS 전처리기 선택 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)

 

 

node-sass 기반의 scss를 선택한다. 아직 CSS 만 사용하고 있다면, 이 기회에 scss를 익혀두는 것을 추천한다. CSS 작성 효율이 놀랍도록 올라간다.

 

⑧ linter / formatter 설정 선택 Pick a linter / formatter config

 

 

- ESLint with error prevention only

- ESLint + Airbnb config

- ESLint + Standard config

- ESLint + Prettier

- TSLint (deprecated)

 

ESLint와 Formatter는 다양한 조합으로 사용할 수 있는데, ESLint + Prettier 조합이 현업에서 자주 사용된다.

 

⑨ Lint 검사 시점 선택 Pick additional lint features

 

 

- Lint on save

- Lint and fix on commit

 

ESLint를 통해 일관된 코드 스타일을 작성하기 위해 저장할 때마다 지정된 ESLint 설정을 기준으로 Lint 검사를 실행할 수 있도록 한다. 

 

①⓪ Babel, ESLint 등 추가 설정은 어느 파일에 설정할 것인가? Where do you prefer placing config for Babel, ESLint, etc.?

 

 

- In dedicated config files

- In package.json

 

Babel, ESLint 등 개발을 원활하게 할 수 있도록 지원해주는 기능은 config 설정이 필요한데, 이 config를 어디에서 설정하겠는지 묻는 것이다. 단순한 프로젝트라면 package.json 에 설정해도 좋지만, 전용 config 파일을 별도로 만들어두면 다른 프로젝트에서도 동일하게 사용할 수 있기 때문에 별도로 구성하는 것이 좋다.

 

①① 다음에도 이 설정을 사용하도록 저장할 것인가? Save this as a preset for future projects?

 

 

프로젝트는 계속해서 발전하기 때문에, 다음 프로젝트 때 해당 설정을 사용할 경우 놓치는 부분이 있을 수 있다. 그렇기 때문에 N으로 설정하여 다음번에도 프로젝트 설정을 선택할 수 있도록 한다.

 

여기까지 설정하고 나면 npm을 통해 자동으로 설정된 파일을 다운로드하고, 해당 라이브러리에 대한 기본 설정을 프로젝트에 적용하는 것이 진행된다.

 

 

cd <project-name> // 설치한 프로젝트 폴더에 진입
npm run serve // 프로젝트 개발모드 실행

 

 

그 후, 위 명령어를 입력하면 다음과 같은 화면들이 각각 터미널과 웹 브라우저에 나타나면서 프로젝트 설치가 성공적으로 완료된 것을 확인할 수 있다.

 

개발 모드 진입 후 터미널 상태

 

터미널에 있는 URL 을 브라우저에서 실행한 화면

 

 

Vue.js 프로젝트 기본 구축을 마치며

여기까지 따라오느라 고생 많았다. 한 가지 슬픈 소식을 알려주자면, 위 프로젝트는 Vue-CLI를 통해 기본적인 프로젝트를 구축할 때 필요한 구성과 설정들을 알아보기 위해 실습한 것이고, 다음에 올라올 실전 편에서 구축하는 것을 기반으로 현업에서 사용할 수 있는 수준의 환경 설정까지 진행할 예정이다.

 

그러나 요구사항에 따라, Vue-CLI를 사용하여 구축한 프로젝트도 얼마든지 현업에 사용될 수 있으니 이해하지 못하고 건너뛴 것이 있다면 천천히 다시 살펴보기를 추천한다.