JavaScript 기반 Vue.js 웹 개발 초기 설정(feat.Node.js)

웹 개발 시 프론트엔드 개발을 위해 Django와 같은 백엔드 프레임워크에서 한번에 개발을 할 수 있지만,

큰 규모의 프로젝트를 다룬다면, 프론트와 백엔드를 분리해서 REST API로 통신하는 구조로 개발을 합니다.

 

프론트용 프레임워크 중 가장 많이 쓰이는 건 React.js이지만, 

더 쉽고 빠르게 배워 활용할 수 있는게 Vue.js입니다.

 

JavaScript 언어 기반의 Frontend 프레임워크인 Vue.js를 활용하여 프론트 페이지를 만들기 위한 초기 설정에 대해 알아보겠습니다.

 

1. node.js 설치

먼저 node.js를 설치합니다. Node.js 설치 후 npm 패키지 매니저로 Vue.js에서 사용하는 패키지들을 설치할 수 있고, package.json 파일에 패키지들을 저장해 놓고 명령어 하나만으로 node.js가 알아서 다운로드를 합니다.

 

 

• 설치 후 버전확인

$ node -v

만약 vscode나 bash를 켜놓은 상태에서 node 설치 후 버전 확인하면 "bash: npm: command not found"에러가난다.
이럴때는 그냥 vscode를 끄고 다시 실행하면된다.

 

• npm 업데이트

$ npm install -g npm

 

2. CLI 설치

$ npm i -g @vue/cli

 

3. 프로젝트 생성

$ vue create {프로젝트 이름} #소문자로 쓸 것

* 안내문구가 나오면 계속 엔터치기

 

프로젝트가 생성되면서 현재 작업 중인 폴더 아래에 다음과 같은 폴더와 파일들이 자동 생성 되는 것을 확인할 수 있습니다.

 

프로젝트 생성 후 폴더 구조

4. 실행

$ cd {프로젝트 이름}
$ npm run serve

정상 실행 되면서 localhost 주소가 나오면 클릭해서 웹 브라우저 실행 결과를 확인 할 수 있다.

 

 

나의 첫 vue.js 페이지!

 

 

Tip!

Vue 개발 시 태그(template, h1, div 등) 자동완성기능을 위해 왼쪽 바 맨 밑에 Extenstions에서 Vetur를 설치하면 훨씬 편하다!

 

 

서버 종료

터미널 창에서 ctrl+c 누르기

 

vuex/router 설치

https://ninano1109.tistory.com/124

Vue.js vuex 설치하기(feat. npm install 오류)

 

다음으로 vue.js에서 개발할 때 편하게 사용할 수 있는 vuex와 router를 설치해줍니다.

 

vuex는 중앙 집중 저장 방식으로, store에 모든 데이터를 저장해놓고 해당 view component(쉽게말해 각 페이지마다)에서 불러와 사용할 수 있습니다. 이는 프로젝트 규모가 커지고 데이터가 많아질수록 관리 차원에서 사용하기에 용이합니다.

 

router는 SPA 방식의 웹 개발을 할 때, 새로 고침 없이 라우터를 사용하여 이동하고자 하는 component를 맵핑한 후 어떤 주소에서 렌더링할 지 알려줄 수 있습니다.

 

vue/cli 사용시에는 vue add로 설치할 것!
npm i vuex 설치 후에도 자동생성이 안된다면, vue add 사용

$ vue add vuex
$ vue add router

* 안내 문구 나오면 y 계속 누르기

 

 

정상적으로 설치 후 폴더구조를 보면 router와 store에 각각 index.js 파일이 생성된 것을 확인할 수 있습니다.

이제 각각의 index에서 라우트 주소 맴핑과 store에 저장할 데이터 값, 실행 함수 등의 코드를 작성하면 됩니다.

 

router와 vuex가 추가된 폴더 구조 모습

 

*추가적으로 vuetify를 적용하고 싶다면,

$ vue add vuetify

vuetify란 html과 css 디자인을 편리하게 도와주는 Bootstrap의 vue.js 버전이라고 생각하면 됩니다.

 

vuetify를 적용한 vue.js 첫 페이지!

 

이상 오늘의 삽질 일기를 마칩니다!

 

---

여기저기 삽질도 해보고

날려도 먹으면서

배우는 게

결국 남는거다

- Z.Sabziller