[ MEVN 스택 ] 1. Vue + express프로젝트 생성

MEVN 스택이란?

 

Mongoose DB + Express + Vue.js + Node.js 의 약자이다.

몽구스 DB를 이용하며, Node.js런타임 위에서 동작하는 JS의 Express 프레임워크로 백엔드를 구성하고,

프론트엔드를 Vue.js프레임워크로 구성한다고 이해하면 된다.

유사한 MEAN, MERN스택은 프론트엔드의 Vue만 Angular, React로 바뀐 것이라고 생각하면 된다.

프로젝트 과정

 

1. vsCode에 vue, express 프로젝트를 생성한다. - 현재 포스트

2. vue와 express를 연동한다.

3. Mongoose DB를 생성한다. (로컬이 아닌 클라우드 서비스 이용할 예정)

4. 웹 프로젝트와 DB를 연동한다.

5. Google Cloud Platform에서 원격 컴퓨터를 임대받는다.

6. 임대받은 컴퓨터에 서버환경을 구축한다.

7. 서버에 우리의 프로젝트를 배포한다.

8. localhost가 아닌 실제 서버에 접속해서 만들어진 기능을 시험해본다.

 

 

1-1 터미널 열기

전체 프로젝트 폴더를 만든다. 좌측 상단 File에서 Open Folder를 누르면 된다.

필자는 MEVN이라는 이름으로 만들었다.

 

그리고 원활한 진행을 위해 터미널을 열어야한다.

특별히 설정을 바꾸지 않은경우 Ctlr+Shift+` 를 누르면 위와같이 터미널이 생성된다.

 

1-2 Vue 프로젝트 생성

 

npm install -g @vue/cli

 

우선 터미널에 vue-cli를 설치한다.

vue-cli는 vue 프로젝트를 생성하는 공식 CLI다.

vue -V를 입력하면 현재 vue-cli의 버전을 확인할 수 있다.(대소문자 구분함)

갑자기 생각난건데, 당연한 말이지만 npm과 node는 설치되있어야한다;

 

 

vue create front

 

(vue create [프로젝트 이름])

 

위 명령어를 사용해서 프로젝트를 생성하자.

vue init ~~하는 명령어도 있는데, 이 명령어는 vue-cli 2.9이전의 옛 버젼이며, 언어도 디폴트 ES5기준이므로 vue create 명령어를 사용하도록 하자.

front라는 이름의 프로젝트를 만들것이다.

 

이것저것 많이 물어보는데 위와 같이 답하면 된다.

 

1-3 Express 프로젝트 생성

 

npm install express-generator -g

 

express-generator을 설치한다. 이것도 express 프로젝트를 생성해주는 툴이다.

 

express back

(express [프로젝트 이름])

 

위 명령어로 express 프로젝트를 만든다.

 

기본적인 디렉토리 구성이다.

 

이제 터미널을 back으로 이동시킨 후 

 

npm install

 

을 입력하면, 프로젝트에 필요한 파일들이 node_module이라는 폴더에 담겨 서버를 실행할 수 있게 된다.

 

이제 직접 실행해보자.

 

npm start

 

를 입력하면 서버가 실행된다.

그리고 웹 브라우저를 켜서 localhost의 포트번호 3000에 접속하면 다음과 같은 화면이 출력된다.

 

 

 

1-4 부록 

여기서부턴 안읽고 다음으로 넘어가도 된다.

하지만 더 깊게 프로젝트의 구성에 이해하고싶다면 읽어보자.

 

 

위에서 서버를 실행시킬 때 사용했던 npm start라는 명령은 back/bin/www 파일을 실행하는 하나의 명령어다.

 

back/package.json에 그 내용이 있다.

./bin/www 에 node를 명령하는 내용을 npm start로 짧게 줄인 것이다.

자기 하고싶은대로 바꿔도 된다.

 

나중에 front에서 쓰일 npm build, npm serve 등 도 모두 front/packge.json 내부에 정의되어 있는 명령어이다.

 

Express 포트번호 변경

 

back/bin/www에 정의되어있다.

포트번호가 기본적으로 3000으로 설정되어 있는데, 사정에 의해 3000번 포트를 사용하지 못할 경우

위 처럼 바꿔주면 다른 포트를 사용할 수 있다.