뷰에 대한 정리 및 뷰 사용

프런트 개발자라면 vue와 react에 대해 고민이 많을 것이다.

그중에서 오늘은 vue에 대해 공부를 해보려고 한다.

최근 회사에서는 vue 프로젝트를 하는 회사로 들어와서 vue에 대한 공부가 많이 필요했고,

지속적인 공부를 업데이트를 해 나갈 예정이다.

 

 

Vue.js는 뭘까?

먼저 vue는 Component 기반의 SPA(Single Page Application) 사이트를 구축할 수 있는 프레임워크다.

 

여기서 간략하게 하나 짚고 넘어갈 점은 리액트는 UI라이브러리로 자유롭지만, 뷰는 기능이 정해져 있는 프레임워크라고 한다. 쉽게 생각하면 뷰에서는 뷰만의 문법이 정해져 있어 정해진 코드가 있다는 것이다.

 

뷰를 전역적으로 설치하게 되면 vue 이후에 관련된 명령어를 사용할 수 있다.

npm i -g @vue/cli

 

뷰에서 쓰이는 터미널 명렁어는 아래와 같다.

 

뷰 버전 확인

vue --version
vue -V

자주 쓰이는 일은 없지만, 프로젝트에서 버전으로 인한 문제가 발생할 수 있으니 한 번쯤은 확인하는 것도 좋다.

 

뷰 업그레이드

npm update -g @vue/cli

자주 쓰이진 않겠지만, 업데이트가 필요할 경우를 위해 정리하였다.

 

vue-cli로 프로젝트 생성

뷰를 생성하기 위해서는 아래와 같은 커맨드를 입력하면 된다.

vue create 프로젝트명

생성하고 싶은 프로젝트명은 몇가지 기준에 맞게 작명해주면 된다.

 

그리고 엔터를 눌렀을 때 해당 화면이 나와 뷰의 버전을 고를 수 있다.

뷰의 버전체크 및 완료화면

일반적으로는 vue3를 추천하지만, 업데이트가 지속적으로 이루어지기 때문에 체킹이 지속적으로 필요할 수 있다. 설치가 완료가 되면 오른쪽 이미지처럼 나온다.

 

다만, 이러한 경우 프로젝트의 크기가 커질수록 빌드할 시간이 너무 오래 걸리기에 빌드 시간도 줄일 수 있는 vite가 있다고 한다.

 

Vite로 프로젝트 생성

npm create vite@latest

Vite(비트)는 프랑스어로 빠른이라는 단어로, 웹 프로젝트에 더 빠르고 간결한 개발에 도움을 주는 빌드 도구다. 명령어를 실행하게 되면 몇 가지 질문사항이 나열되며 해당하는 것을 선택하면 된다.

 

프로제트명 입력

패키지 설치를 위해 한번더 체크를 해준 후 내가 원하는 프로젝트명으로 변경하여 입력한다.

프레임워크 선택하기

어떤 프레임워크를 쓸지를 선택하는데 vue, react도 다양하게 존재한다.

타입 선택하기

확실히 타입스크립트가 인지도가 있는지 JS와 TS선택지도 주어졌다. 이 모든 걸 선택하면 내가 프로젝트명으로 하나의 폴더가 생성이 될 것이다.

완료가 된 모습

 

 

이렇게 오늘은 뷰에 대한 내용과 뷰 명령어 몇가지를 정리하며 프로젝트 만드는 방법까지 정리를 했다.

아직까진 이 설치방법이 얼마나 효율적인지를 모르지만,

앞으로 계속 써보다면 느끼지 않을까?