[Vue&Express] Vue와 Express 시작하기

1. Node.js 설치 여부 확인

Vue 설치 전에 Node.js가 설치되어 있는지 cmd창을 열어서 아래 명령어를 통해 확인해보자.

node -v

아래와 같이 버전이 나오면 설치가 되어 있는 것이니 2번 단계로 넘어가면 되고, 저렇게 나오지 않으면 Node.js가 설치되어있지 않은 것이니 1-1번 단계를 따라 설치해주자.

나의 경우 16.15.0 버전이 설치되어 있다.

1-1. Node.js 설치

https://nodejs.org/ko/

Node.js

위 링크로 들어가서 설치파일을 다운받을 것인데 아래처럼 다운로드 버튼 두 개의 버튼이 나온다. 그 중 왼쪽에 있는 LTS 버튼을 클릭해서 다운받고 설치하면 된다. 설치할 때 뭐 이거저거 누를 거 없이 NEXT만 누르면 잘 설치가 된다. 

왼쪽 버튼 LTS로 다운받는다.

설치가 다 됐다면 다시 cmd창을 열어서 설치가 잘 됐는지 확인해보고 잘 설치됐다면 다음 단계로 넘어가자.

2. 프로젝트 폴더 생성

nodeTest라는 프로젝트 폴더를 생성하고 해당 경로로 VScode를 실행시킨다.

3. vue/cli 설치

nodeTest폴더경로로 VScode를 실행시켰다면 터미널에 아래 명령어를 입력해 vue/cli을 설치해준다. -g는 전역으로 설치하겠다는 의미이다.(npm은 node를 설치하면 자동으로 같이 설치된다.) vue/cli는 기본 vue 개발 환경을 설정해주는 도구이다.

npm install -g @vue/cli

4. 프론트 작업을 위한 vue 폴더 생성

프론트엔드 작업을 하기 위한 vue 폴더를 생성해보겠다. nodeTest 경로의 터미널에 아래 명령어를 입력해주면 폴더명이 frontend인 폴더가 생성되고 안에 작업을 위한 각종 폴더와 파일이 생성된다.

vue create frontend

설치가 쭉 되다가 vue버전을 선택하라는 화면이 나오는데 나는 회사에서 vue2.0 버전을 사용하고 있으니 나도 vue2.0로 설치해준다.

---

router와 router/index.js

4. 그 다음 frontend 폴더에 라우터를 설치해주겠다. 3번 과정까지는 nodeTest폴더에서 실행하고 지금 4번 과정부터는 생성한 frontend폴더에서 실행할 것이다. 터미널에 vue ui를 치면 페이지가 뜨는데 거기서 라우터를 설치해줘도 된다. 나는 cli를 썻고 아래 명령문으로 설치해줬다. 설치 중간에 질문 두 개가 나오는데 전부 y를 선택했다. 설치가 다 되면 router 폴더가 생긴다.

vue add router

생성된 router폴더 내 index.js 파일 내용

라우터를 설치하면 알아서 이렇게 소스가 만들어지는데 이전에 스프링으로 웹 만들때 로그인페이지라면 /login 이런식으로 ULR 주소를 정해주지 않았나? 저 /login이 여기서는 라우터라고 표현한다. / 뒤에 원하는 값을 넣어주면 된다.

라우터 소스에서 9~19번째 라인을 보면 path, name, componet가 있는데 path는 내가 지정해줄 URL 경로 이름이다. name은 뭔지 모르겠고 component는 해당 path로 들어왔을 때 띄워지는 vue를 말한다. 소스 9번째 라인에 /로 지정된 라우터를 보면 component가 HomeView로 되어 있지 않은가? 그건 3번째 줄에 HomeView.vue가 있는 위치를 HomeView라는 명칭으로 import해줬기 때문에 간단하게 적을 수 있었던 것이다. 소스 19번째 라인을 보면 좀 복잡하게 적혀있지 않은가? 저것도 import를 해주면 간단하게 작성할 수 있을 것이다.

만약 라우터 경로가 /로 설정되어 있는게 마음에 들지 않는다면 아래처럼 수정해줘도 된다. 나는 소스를 수정하지 않고 아래에 소스를 추가해줬다.

아래에 추가만 해줬다.(21~25번 라인)

/으로만 쳐도 홈화면이 나오고

/home으로 쳐도 홈 화면이 잘 나온다.

그리고 소스 29번째 라인에 mode: 'history'라고 있는데, 이 부분이 없으면 URL에 불필요한 /#/이 추가 된다. 그래서 어느 페이지로 이동해도 라우터 경로와 포트 번호 사이에 /#/가 포함되게 된다.

history가 없을 때

history가 없을 때

불필요한 부분이기 때문에 mode: 'history'를 추가해서 /#/을 없애준다.

history가 있을 때

history가 있을 때

---

라우터 추가하면 src>main.js에도 라우터 소스가 추가 된다. 아래 소스에서 3번 라인과 8번 라인에 라우터 소스가 추가된 것을 볼 수 있다.

main.js 소스

---

package.json

아래 그림을 보면 package.json 파일 안에 scripts 부분에 start라는 문구를 저장했다. 그럼 npm start만 입력해도 알아서 npm run serve가 실행된다.

package.json 파일 내부에 start를 추가해줬다.

이제 npm start를 하면 서버가 실행된다.

TMI) 원래 npm run serve를 하면 아래와 같이 >frontend@0.1.0 serve >vue-cli-service serve 이렇게 두 줄만 생기는데 npm start를 만들어 줘서 >frontend@0.1.0 start >npm run serve >frontend@0.1.0 serve >vue-cli-service serve 총 네 줄이 생겼다.

npm run serve 하면 두 줄만 출력된다.

---

views 폴더와 views/HomeView.vue

views 폴더에 아래와 같이 vue 파일 2개가 저장되어 있는데, Home화면을 나타내는 HomeView.vue파일과 About이라는 화면을 나타내는 AboutView.vue파일로 구성되어 있다. 만약 구현하려는 페이지 UI를 늘리려면 이 .vue 파일도 같이 늘어난다.

vue파일이 있다.

 

views 폴더 안에 알아서 생성된 HomeView.vue가 홈 화면이 디자인 되어 있는 소스인데, 소스를 보면 1~6번 라인은 HTML이고, 8~18번 라인은 스크립트로 작성되어 있다. HTML은 최소화 시키고 스크립트를 사용하자.

HomeView.vue 소스

+ 업무에선 MVC패턴 쓸거라 여기 폴더에 페이지를 생성하거나 하진 않겠다. 페이지생성은 5번과정을 보자.

---

5. 테스트 페이지를 생성해 보았다. 업무에서 MVP 패턴을 이용하여 개발을 할 것이기 때문에 component폴더 내에 model, view, controller 폴더를 추가생성해준다. (HTML이 view에 해당한다.)

아래와 같이 각자 폴더에 필요한 파일들을 추가해줄 것이다. 밑에 글을 읽으면서 따라오면 동일한 트리이 생성될 것이니 지금 다 만들지 않아도 된다.(HelloWorld.vue는 내가 만든거 아니다. 프로젝트 생성하면서 기본으로 만들어진거다.)

mvc폴더 추가하고 test페이지 생성에 필요한 파일들도 추가해줬다.

이제 views 폴더에 test.html파일을 추가해주고 그 안에 페이지에 띄울 내용을 작성했다. 아래 캡쳐화면과 같이 간단하게 테스트만 해볼 것이기 때문에 h1태그로 한 줄만 작성해줬다.

h1 한 줄만 작성했다.

자, 그 다음 이 test.html의 정보를 가지고 있을 vue파일을 만들어 주겠다. 생성해준 contollers폴더에 TestPage.vue 파일을 만들어 주고 그 안에 아래와 같이 작성해줬다.

TestPage.vue는 이렇게 작성했다. 간단하다.

위 소스를 보면 template태그로 TestPage.vue가 가지고 있는 html 정보가 어떤 html 파일의 정보인지 작성해줬다. (src에 ..는 상위 위치를 의미하는데 지금 파일 구성에서는 views의 상위 폴더인 components를 의미한다.) 그 다음 script태그를 써서 name속성을 적어줬다.( 여기에 적은 name속성이 뭘 의미하는진 아직 모르겠다. TestPage라고 적었던 걸 ABC로 바꿔봤는데 페이지는 문제없이 잘 떴다.)

 

이제 페이지를 다 만들었고 라우터에 해당 페이지로 연결될 수 있도록 소스를 작성하겠다. 나중에 헷갈릴까봐 전체 소스를 다 캡쳐하긴 했는데 지금 추가 작성한 부분은 4번 라인, 27~31번 라인 뿐이다.

test페이지 소스 추가 완료한 index.js소스

여기까지 잘 따라왔다면 이제 테스트페이지를 띄워보자. URL에 /test를 추가해주면(http://localhost:8080/test) 생성한 테스트 페이지가 잘 나오게 된다. 야호~

잘 나온다.

+ controller폴더에 있는 vue파일과 views폴더에 있는 html파일은 1대1로 만들어줘야 한다.(당연한 사실이겠지만 언젠가 또 머리가 백지상태가 될 미래의 나를 위해 적어둔다.) 예를 들어, 로그인페이지를 만들겠다고 하면

  1) views 폴더에서 로그인.html 파일을 만들어서 UI를 작성하고

  2) controllers 폴더에 로그인.html 정보를 가지고 있을 로그인.vue 파일을 만들어 준다.

  3) 그 다음, 라우터에 해당 페이지로 넘어갈 수 있도록 경로를 작성해준다.

이렇게 하면 로그인 페이지 하나가 완성되는 것이다.

---

6. vuetify를 설치해보자

 frontend 경로에 아래 명령어를 치고 y -> Default(recommended)를 선택하면 잘 설치가 됐을 것이다.

vue add vuetify

트리를 보면 vuetify.js 가 생겼을 것이다. 이제 vuetify 홈페이지에 가서 getStarted를 누르고 아래 소스를 긁어와서 생성된 vuefity.js의 소스를 뒤엎어줬다. 기존에 있던 소스는 다 지워버리고 긁어온 소스만 넣어준다.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

7. vuetify를 설치했으니 이제 버튼을 하나 만들어주자. vuetify 사이트에 들어가서 아래쪽에 드래그 표시해놓은 버튼 소스를 긁어오겠다.

긁어온 소스를 test.html에 입력해주고 8080/test를 들어가보면 버튼이 생성된 걸 확인할 수 있다.

---

8. 드디어 Express를 설치해보자. nodeTest 경로에서 아래 명령어를 입력해 express를 설치해준다.

npm install -g express

그런 다음 아래 명령어를 입력한다.

express --view=pug backend

이제 backend 폴더가 생성되었을 것이다. backend 폴더로 들어가 아래 명령어를 입력해주자.

npm install -g express-generator

그러고 다음 명령어 입력하고 서버를 돌려보면 잘 돌아갈 것이다.

npm install
npm start

localhost:3000 들어가보았는가? Welcom to Express가 잘 뜰것이다.

---

9. backend경로에서 다음 명령어를 치고 소스도 추가해주겠다.

npm install connect-history-api-fallback --save

backend폴더에서 app.js소스를 보면 var app = express(); 부분이 있을텐데 그 바로 아랫 줄에 다음 소스를 추가해준다.

app.use(require('connect-history-api-fallback')());

테스트를 위해  routes 폴더 아래에 test.js 파일을 추가해준다. test.js 파일에 아래처럼 소스를 추가해주었다.

test.js를 추가한 트리 모습

test.js에 이렇게 입력해주자. 타자치기 귀찮으면 아래 코드 긁어서 넣자.

var express = require('express');
var router = express.Router();
let Test_ctrl = require('../controllers/test');
let test_ctrl = new Test_ctrl();

router.get('/check', function(req, res, next){
	test_ctrl.check(req, res);
});

module.exports = router;

---

10. backend에도 controllers와 models 폴더를 만들어준다. 그리고 controllers 폴더 아래에 test.js 파일을 추가로 만들어준다. 아래 트리를 참고하자.

이런 트리가 나오면 된다.

이제 contorller 폴더 안에 만들어준 test.js 파일에 아래과 같이 소스를 작성해준다.

---

11. 이제 frontend로 돌아와서 아까 만들어준 버튼에 기능을 추가해보자. 

components폴더 > views폴더 > testPage.html 파일에 소스를 아래와 같이 수정하자. 만약 vuefity를 설치하지 않았다면 첫 번째 소스화면말고 두 번째 소스화면으로 작성하면 동일하게 작동한다.

클릭이벤트를 만들어 줄것이다.

vuetify를 설치하지 않았다면 이 소스로 작성하면 된다.

그 다음 controllers 폴더 > testPage.vue 파일도 다음과 같이 수정해주자. 클릭메소드를 생성해 주었다. 버튼을 클릭하면 콘솔창에 "chekc"라고 출력될 것이다.

testPage.vue

이제 frontend와 backend 둘 다 서버를 켜주고 8080으로 들어가보면 아래처럼 화면이 잘 나온다. (아까 vuetify 설치해줘서 페이지 ui가 바뀐거다.)

8080화면이다.

이제 8080/test로 들어가보면 아래처럼 버튼이 하나 있는걸 볼 수 있다.

8080/test 화면이다.

아까 express에서 버튼을 클릭했을 때 check라는 값을 넘겨주도록 소스를 구현하지 않았는가? 잘 돌아가는지 확인해 보겠다. 콘솔 확인은 웹페이지에서 F12를 누르고 Console 칸으로 들어가주면 된다. 아래에 check라고 문구가 뜨는게 보이는가? 잘 돌아가는 것을 확인할 수 있다.

---

12. 이제 axios를 설치하고 소스들을 변경해보자.

frontend경로에 아래 명령어를 쳐서 axios를 설치해보자.

vue add axios

다 설치가 되고 나면 plugins폴더의 axios.js 파일에서 "options is defined 블라블라" 라고 에러가 발생할텐데 axios.js 에 작성되어 있던 코드를 그냥 시원하게 밀어버리고 아래 소스만 입력한다.

import axios from "axios";
const apiClient = axios.create({
  baseURL: "http://localhost:3000/api",
  headers: {
    "Content-type": "application/json",
  },
});
export default apiClient;

그 다음 testPage.html 소스를 수정해주자. get과 post를 각각 만들어보겠다. Check버튼은 post이고, Final버튼은 get방식이다. 소스는 아래와 같이 수정해주면 되겠다.

testPage.html이다.

 

소스에서 block은 버튼을 블록으로 감싸겠다는 것이다. 아래 캡쳐가 block을 쓰고 안쓰고 차이이다.

block이 있는 버튼

block이 없는 버튼

이제 contollers 폴더에 있는 testPage.vue 소스를 아래와 같이 수정해보자.

그런 다음 backend로 넘어와서 routes폴더에 있는 test.js를 아래와 같이 수정해준다.

routes폴더에 있는 test.js

그리고 controllers 폴더의 test.js 파일은 아래와 같이 수정해준다.

controllers 폴더의 test.js

이제 웹페이지로 가서 만들어 놓은 check버튼을 눌러보면 아래와 같이 console창에 로그가 잘 찍힐 것이다.

check버튼 클릭 시

아래는 final버튼을 클릭했을 때 찍히는 로그이다.

final버튼 클릭 시

---

+ backend에서 app,js파일이 조금씩 소스가 추가됐는데 어느 과정에서 소스가 추가 된거였는지 기억이 잘 안난다. 그래서 통째로 캡쳐해서 올려두겠다.

app.js

 

+ 그리고 중간에 CORS에러가 발생하는데 크롬에서 제공하는 프로그램을 설치해서 해결했다.

나는 이미 설치해서 'Chrome에서 삭제' 버튼이 나온다.

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=ko 

Allow CORS: Access-Control-Allow-Origin

위 링크로 들어가서 크롬에 CORS를 설치해주고 크롬 URL뜨는 자리 오른쪽에 아래캡쳐화면처럼 퍼즐모양이 생겼을 것이다.

퍼즐을 클릭하면 아래처럼 화면이 나오는데 Allow CORS: Access-Contrl-A... 옆에 압정?모양을 눌러서 크롬에 표시되게 하고

퍼즐 누르면 이렇게 나온다.

고정시키면 퍼즐 옆에 C라고 생긴다.

C버튼 클릭하면 아래처럼 창이 뜨는데 그럼 왼쪽의 거대한 C 그림을 클릭해서 프로그램을 활성화 시켜주면 된다. 그럼 바로 해결된다!

CORS 프로그램이 활성화 되어 있을 때는 컬러로 나온다.

CORS 프로그램이 비활성화일땐 흑백으로 나온다.

그 다음에 데이터를 주고 받게 되면 또 CORS 에러가 발생하는데 그때는 위의 CORS 창에서 Open options page를 눌러서 옵션페이지로 넘어간다. 아래 화면이 옵션페이지인데 3번에 Access-Control-Allow-Headers의 체크박스가 체크되어있지 않을 것이다. (나는 에러 잡는다고 이미 클릭해놓은 것이다.) 저 3번 체크박스에 체크를 해주면 이 에러도 잡히게 된다.

+소스가 성공적으로 돌아갈 때 트리 모양이다.

frontend 트리

backend 트리

---

GET과 POST

이틀동안 소스를 보면서 드 디 어 깨달은 것이 있다. 초기 환경 세팅을 마치고 나서 신경쓸 부분은 몇 개 되지 않는 다는 것이다... 이 사실을 깨닫기 위해서 얼마나 어지러웠는지... 도리도리

frontend, backend 모두 아래 빨간 박스 표시한 부분만 신경쓰면 된다.

frontend에서 index.js는 페이지별로 URL을 설정하는 부분이고, testPage.html은 HTML을 작성해서 페이지의 뼈대를 만들어 주는 것이다. testPage.vue는 html로 만든 페이지에 데이터 처리를 위해 스크립트로 get과 post방식을 작성하는 것이다.

backend에서 app.js는 백엔드의 모든 파일의 중심이라고 생각하면 된다. 노드 모듈을 로딩하고 초기화를 해야하는 변수나 object를 선언하고 라우터에 유입이 이루어지는 그 유입접의 역할을 하는 부분이기 때문이다. controllers폴더의 test.js는 데이터 처리를 위한 함수를 작성해주는 것이다. 그 다음 routes폴더의 test.js는 controllers의 test.js에서 생성한 함수를 이용하는데 프론트단에서 testPage.vue에서 get과 post방식으로 데이터를 보내준 것을 받아서 처리하고 응답?하는 부분인 것이다.

 

frontend에서 get과 post로 작성하지 않았는가? backend에서 get과 post를 받아 처리하는 부분이 약간 다른데 get은 param()으로 처리하고, post는 query로 처리한다. frontend에서는 get이랑 post랑 뭐 다를게... 없다.