Vue.js(1)_Vue란?

해당 게시글은 2022.07.22에 깃허브로 작성되었습니다.

 

---

 

Vue는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크이다.

React와 비슷하게 Component 기반의 SPA(Single Page Application) 사이트를 구축할 수 있다.

 

여기서 Component와 SPA가 무엇인지에 대해서는 아래 React.js 글에서 설명한 부분이 있으니 링크를 참고하기 바란다.

[Component 설명]

React.js(1)_React란?

[SPA 설명]

React.js(2)_React Router

 

잘 알듯이 프레임워크의 3대장인 React와 Angular를 두고 왜 Vue를 공부해야 하냐고 묻는다면

단연 쉬워서라고 할 수 있다.

 

---

 

2. Vue CLI란?

React와는 조금 다르게 Vue에는 기본 개발 환경을 설정해주는 도구인 Vue CLI가 존재한다.

Vue CLI가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build 등에 대한 고민을 덜을 수 있다.

[여기서 CLI란?]
 명령 줄 인터페이스(Command Line Interface) 또는 명령어 인터페이스로,
 텍스트 터미널을 통해 사용자와 컴퓨터가 상호작용하는 방식을 뜻한다.

 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다.

 

(1) Vue CLI 설치

우선, npm 또는 yarn이 설치되어야 진행 가능하다.

우리는 npm을 이용하여 진행할 것이다.

npm install -g @vue/cli

위 설치 명령어를 입력하여 설치 진행 후, 아래 명령어를 입력했을 때 vue의 version이 나온다면 설치가 잘 완료된 것이다.

vue --version

 

(2) 프로젝트 생성

아래 명령어를 통해 프로젝트를 생성한다.

vue create 프로젝트명

 

위 명령어를 입력하면 아래와 같이 설정에 대한 선택지가 주어지는데

보통 default (babel, eslint) 를 선택하여 기본적인 세팅을 완료한다.

Manually select features는 추가로 설치할 라이브러리나 문법 등에 대해 설정할 수 있는 방식이다.

 

프로젝트 생성이 완료되고 나면 아래 명령어를 이용하여 dev 서버를 실행해준다.

npm run serve

 

React와 동일하게 우리가 Vue 프로젝트를 생성할 때마다 보게 될 초기 화면이다.

 

---

 

이렇게 Vue가 무엇인지와 Vue 프로젝트를 생성하는 방법에 대해 알아봤다.

이어서 다음 시간에는 Vue에서 중요한 Component에 대해 배워보자.