[ MEVN 스택 ] 2. Vue + Express axios로 연동하기

프로젝트 과정

 

1. vsCode에 vue, express 프로젝트를 생성한다. 

2. vue와 express를 연동한다. - 현재 포스트

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

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

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

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

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

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

 

 

vue와 express를 연동하기 전에 이해를 돕기 위해 전체 구조를 설명해보겠다.

 

우리는 vue를 express 프로젝트 내부에 빌드하고,

빌드된 vue를 사용해서 작업하는 express를 실제 서버에 배포할 것이다.

즉 쉽게 말하자면, 사용자에게 보여지는 프론트엔드 영역을 빌드해서 express 폴더 내부에 위치시키고,

사용자는 express가 배포된 서버를 사용하게 될 것이다.

그리고 express는 사용자의 명령에 따라서 각종 서버와 데이터를 주고받으며,

필요에 따라 자신 내부에 저장되어 있는 빌드된 vue를 사용자에게 보여줄 것이다.

 

그러므로 우선 해야할 일은 vue를 express 내부에 빌드하는 것이다.

 

2-1 vue 빌드 위치 설정

터미널을 front로 이동시키고 npm run build 명령어를 실행해보자.

(터미널 왓다갓다 귀찮으므로 2개 켜놓고 하나는 front, 하나는 back에 두는 것을 추천한다.)

 

아무 설정 없이 빌드를 했다면 위 사진에서 볼 수 있다시피 front/dist에 빌드된 파일이 위치하게 된다.

우리는 이제 빌드된 파일이 express 내부에 위치하도록 할 것이다.

 

front폴더에 vue.config.js 파일을 만들고, 다음과 같이 내용을 입력해준다.

이것은 빌드할 때 ../back/public위치에서 빌드하겠다는 뜻이다.

 

vue.config.js 는 @vue/cli-service 에 의해 자동으로 load되는 선택가능한 config파일이다.

vue 프로젝트의 각종 설정을 담당한다.

https://cli.vuejs.org/config/

Configuration Reference | Vue CLI

에 접속하면 vue.config.js에서 사용되는 config 의 모든 레퍼런스를 살펴볼 수 있다.

 

이제 npm run build를 입력하면, back/public 폴더가 생성되며 배포된 파일이 위치하게 되는 것을 알 수 있다.

 

2-2 vue 프록시 연결

 

안합니다.

전 오히려 vue와 express를 처음 개발하는 사람이 proxy 연결을 하지 않은 채로 프로젝트를 진행해야 한다고 생각합니다. 이유는 세 가지 입니다.

 

1. 이 프로젝트는 최대한 간소하게, 최대한 작게 MEVN을 구현합니다. 

효율적인 설정, 반복을 감소시키기 위한 구조 그런 것 없이, 사용자가 매우 빠르게 MEVN스택으로 실제 서버를 구축하는 것을 목표로 합니다.

 

2. 연결을 하지 않고, express에서 빌드된 vue를 사용하며 디버깅을 하다, 나중에 proxy를 설정하고, front에서 이것저것 디버깅을 해봐야 왜 이 행위가 효율적인지, 왜 이런 행동을 하며 개발을 하는지를 알게됩니다. 처음부터 모든 행위를 효율적으로 하면, 원리를 이해할 수 없습니다.

 

3. 어차피 배포하면 proxy 필요없습니다. 경로 같아지니까

 

 

2-3 Vue Express 연동 - express로 접근해서 데이터 받기

 

이제 vue와 express를 연동해야 합니다.

사실 이미 연동은 되어 있습니다. vue프로젝트를 build하면 express내부에 위치되고, express를 구동시킨 후 접속하면 vue에서 만든 프론트가 출력되니까...

하지만 우리가 하고 싶은 것은 vue와 express가 서로 데이터를 주고받는 행위를 더 자세하게 하는 것입니다.

 

우선 express에서 어떻게 데이터를 받고, 반환하는지 알아보자.

 

디렉토리를 보면 app.js가 있고, routes 폴더 안에 여러 js파일들이 있는데(없을 수도 있음)

위와 같이 바운딩 되있다고 생각하면 된다.

require메소드로 사용할 js의 위치를 알려주고, 해당 변수를 url과 매칭시키는 것이다.

 

예를 들자어보자.

 

var indexRouter = require('./routes/users.js');

app.use('/users',indexRouter);

를 해석하면

 

/users로 들어온 요청은 indexRouter로 보내겠다. 그리고 indexRouter은 ./routes/user.js파일이다.

get으로 요청이 온 경우 user.js의 router.get내부의 함수를 동작시킨다.

 

라고 할 수 있다.

 

실제로 위와 같이 동작한다.

 

 

 

2-4 Vue Express 연동 - vue에서 express로 접근하기

 

우선 가장 중요한 것은 vue에서 express 서버에 요청을 할 때 화면이 갱신되면 안된다는 것이다.

전체화면의 갱신이나 변화 없이 해당 데이터만 받아와야 한다.

 

이러한 비동기 통신은 주로 jquery의 ajax api가 많이 사용되었지만,

vue에서는 독립적으로 ajax통신을 지원하기 위해  axios를 사용한다.

 

npm install --save axios

 

명령으로 axios를 설치할 수 있다.

 

axios를 설치한 후 main.js에서 axios를 전역에서 사용할 수 있게 하자.

 

파란 색 부분이 내가 추가한 부분이다.

 

front/views/Home.vue를 위와 같이 작성해보자.

쓸대없는 모든 구문을 삭제하고 기능만 알아보기 위해 간결하게 작성했다.

 

이제 npm run build를 입력해서 이 vue파일들을 express 내부로 빌드시키고,

express로 터미널을 옮겨 서버를 실행해보자.

 

 

 

submit을 누르면 /user로 get메소드를 사용해서 접속하고, express의 서버는 이 접근에 대해서 위에서 설명했던 것과 같이 응답을 한다.

개발자모드의 response를 보면 user 요청에 대해서 respond with a resource라고 응답이 온 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

2-4 부록

에러가 짜증날정도로 많이뜬다

 

vue.config.js 파일에

lintOnSave:false,

를 추가하면 짜증나는 에러창을 안뜨게 할 수 있다.

 

왜 public에 빌드해야 하는가?

그것은 back/app.js에 정의되어있다.

app이 디렉토리 경로+public을 사용하고 있기 때문인데, 실험해보고 싶다면 저 public을 다른 문자로 바꿔보면 기존 express 화면이 출력된다.