vscode vue.js 기본설치 및 개발환경 설정

VUE.js 로 front-end 개발을 처음 시작하기 위한 글을 작성해봤습니다.
vue.js의 경우 진입장벽이 낮다, 비교적 쉽다 하는 내용의 글들이 많은데 다른 언어들과 비교해서 그런것이지 기본적으로 프로그래밍 언어라는 것이 생각보다 쉬운편은 아닙니다. 
하지만 한번에 모든 것을 하겠다! 라는 마음이 아니라 그냥 거북이 걸음으로 차근차근 하나씩 해보지 뭐 라는 마음으로 접근한다면 어느새 그럴듯한 나만의 것들을 완성하는 자신을 발견 하실 수 있을 겁니다.
 

vue.js 준비물

1. VISUAL STUDIO CODE - 통합 IDE TOOL 

visual studio code 다운로드

Visual Studio Code - Code Editing. Redefined

저는 개발 환경이 windows 이기 때문에 저와 같은 환경이시라면 download for windows 라는 stable build 가 있을 겁니다.
기본적으로 4가지 다운로드 방법이 주어지는데 아마도 macOS와 windowsX64 가 제일 많을 것같네요 
기본적으로 stable / insiders 두가지 다운로드가 있는데 그냥 stable 받으세요~

다운로드 카테고리

• macOS Universal stable / insiders
• Windows x64 User Installer stable / insiders
• Linux .deb / .rpm stable / insiders

vscode IDE 다운로드 페이지

 
visual studio를 설치하면 몇가지 편의성을 위한 플러그인을 설치하셔서 사용하면 만족도가 많이 올라갈 겁니다.
아래 내용도 한번 확인해보세요~
2022.07.12 - [dev/VUE] - Vue.js 개발을 위한 vscode 필수 플러그인 9가지 소개 (code extension)

Vue.js 개발을 위한 vscode 필수 플러그인 9가지 소개 (code extension)

설치과정은 생략하겠습니다 
그냥 다운로드 > 설치 > 실행 끝!
그냥 일반적인 프로그램들과 다르지 않습니다.

2. node.js

다음으로 node.js 를 설치해야 합니다.
 

node.js 설치 다운로드 바로가기

다운로드 | Node.js

마찬가지로 저는 windows 개발환경이기 때문에 windows Installer (.msi) 64-bit 버전을 다운받았습니다.
현시점에 맞는 LTS 버전은 18.17.0 이고 이부분은 아마도 이글을 읽으시는 시점마다 다를 수있습니다.
 
만약 누군가와 협업을 해서 개발을 진행한다면 꼭 최신버전을 설치하는 것보다 먼저 사용하는 버전과 같은 것으로 맞추는 것이 좋습니다. 
 
패이지 하단에 보시면 모든 다운로드보기 에서 node.js의 이전 버전들을 받으 실수있으니 만약 공부하는 단계라면 현시점의 LTS 버전을 받으시고 누군가와 협업으로 또는 다른 프로그램과 node.js를 공유하고 있다면 거기에 맞는 버전을 설치하는 것이 좋습니다.
 
node.js의 여러가지 버전을 번갈아가면서 사용할 수있는 것도 있기는 한데 그부분은 나중에 따로 글로 작성하도록 하고 지금은 한가지 버전으로 진행 하겠습니다.
 
저는 최신 LTS 버전을 설치 했습니다!
 

node.js 다운로드 페이지

각자의 OS에 맞는 버전을 다운받은다음 실행시켜 줍니다. 
이것도 특별할것없이 확인 > next > 확인 > next등으로 빠르게 설치해줍니다.
마지막 설치단계가 시간이 조금 오래 걸리기는 하지만 인내심을 갖고 기다리다보면 결국 설치 됩니다
뭔가 로딩바가 오래걸린다 싶을때 화장실 한번 다녀오세요~
 

visual studio에서 vue.js 설치

1. 현재 내 PC에 vue가 설치가 되어 있는지 확인을 합니다.

vue -version

vue 설치가 안됐을때

만약 이런 메세지가 나온다면 아직 설치가 안된겁니다!
 
위의 node.js 설치를 했다는 가정하에 아래와 같은 메세지를 입력합니다.

npm install -g @vue/cli

그렇다면 아래처럼 뭔가 알아서 막 설치가 될겁니다 
작업이 끝날때까지 대기 하시면 됩니다.

npm으로 vue 설치

설치가 끝나고 마지막에 여러 업데이트 정보와 몇개가 add되어 설치가 됐다 뭐 이런정보들과 함께 완료가 됩니다.

vue -version 확인

다시 vue -version 을 타이핑 해보니 정상적으로 설치가 된것을 확인 할수있습니다.
 

vue 프로젝트 생성 및 확인

이제야 드디어 vue 프로젝트를 생성할 차례 입니다!!!
vue 프로젝트 생성은 간단합니다

vue create [내가원하는 프로젝트 명]

위의 내용을 입력하고 엔터를 치면 이제부터 여러가지 선택사항들이 있는데 차근차근 따라오시면 됩니다.

vue create 실행시 선택화면

첫번째로 프리셋을 선택하라고 나오는데 
첫번째로 myproject 라는게 선택이 되어 있을겁니다. 이건 내가 기본적으로 설치하는프로그램들을 커스텀 할수있는데 최초에 내가 선택한 것들이 없으니 vue에서 이것들을 사람들이 많이 쓰더라 하면서 기본으로 세팅해놓은 프리셋입니다.
저는 하나하나 직접 설치할계획이므로 vue에서 제공해주는 프리셋 말고 두번째 VUE3 babel, eslint 를 선택하겠습니다.

두번째 default 선택

방향키로 위아래 선택이 가능하니 화살표를 움직여 두번째 것을 선택하고 엔터!

vue create 설치 진행

설치가 바로 진행이 되고 뭐라뭐라 솰라솰랴 막 나오면서 진행이 되고 조금더 기다리면 설치가 완료가 됩니다!
그리고 마지막에 보면 명령어가 하나 보이는데 

$ cd firstvue
$ npm run serve

cd firstvue의 경우 vue create로 생성한 폴더 firtvue 폴더로 이동을 하라는 뜻이고 
이동한 후에 npm run serve로 실행을 해보라는 뜻입니다.

npm run serve 실행

시키는 대로 실행을 해보면 뭐라뭐라 솰라솰랴 나오고 중요한부분은

- Local: http://localhost:8080/
- Network: http://192.168.10.41:8080/

이렇게 두가지 인데 
vue가 실행이 되며 웹브라우저에 저 두가지 방법으로 실행을 시킬 수 있다 그런 뜻입니다.
 
저 같은 경우 바로 실행이 안됐는데 내용을 보면 Note that the development build is not optimized. 됐다고 나오네요 
 
ctrl+z 버튼을 누르면 일괄 작업을 끝내시겠습니까 (Y/N)? 라는 메세지가 나옵니다 "Y" 를 눌러서 command를 나와주시고

npm run build

입력을 해줍니다.

npm run build 실행

마찬가지로 지가 알아서 뭔가 설치하도록 냅둡니다.
그리고 작업이 끝나면 다시 npm run serve 를 입력합니다.

npm run serve 실행

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.10.41:8080/
둘중 아무거나 ctrl 버튼을 누른상태로 마우스클릭을 하면 웹브라우저로 바로 연결이 됩니다.

localhost:8080 실행페이지

이렇게 vue 페이지가 열리면 성공입니다!!!!
 
마지막으로 생성이 된 vue 프로젝트의 폴더구조만 확인하겠습니다.

vscode explorer

vs code에서 open folder 클릭!

내가 생성한 폴더까지 이동을 한 후 확인 클릭!

vscode 폴더선택 메세지

이런 메세지가 뜬다면 체크하시고 클릭합니다.
그냥 이 폴더를 신뢰하냐 뭐 그런 메세지인데 언제부턴가 IDE 프로그램들 모두 이런 메세지들이 뜨더라구요 귀찮지만 한번만 해주면 되니 확인을 해줍니다.

vue 프로젝트 구조

처음 생성된 폴더의 구조입니다.
여기서 몇가지 더하거나 빼거나 하는 수준이며 대규모 프로젝트가 아니라면 이 틀에서 크게 벗어나지 않습니다.
 

마무리

이상 vue.js 로 처음 프로젝트를 생성하는 과정을 작성해봤습니다.
여기까지 진행하시면 vue.js를 50% 이상 알게 된겁니다!! 왜냐하면 시작이 반이니까요 ㅎㅎ
 
여기서 나머지 50% 잘 채워서 멋진 개발자로 성장하셨으면 좋겠습니다.

vue.js 프로젝트 시작하기