Vue&Express 연동하기 (2)

Client

 

---

1. Client 파일을 열고 config/index.js 파일을 열어 proxyTable을 설정해준다.

proxyTable: {
      '/api':{
        target:'http://localhost:3000/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api':''
        }
      }
    },

2. axios 모듈을 설치 : npm i axios

3. src/main.js 파일에 axios를 전역에서 사용할 수 있도록 코드를 추가해 준다.

import axios from 'axios'

Vue.prototype.$http = axios

4. components/IndexPage.vue파일을 만들고 코드를 작성해준다. 

   (화면에 보여질 vue파일 만드는것!)

<template>
    <div v-if="user">       
        <h1> 접속한 유저</h1>        
        <div>
            <p>아이디: {{ user.id }}</p>
            <p>비밀번호: {{ user.password }}</p>
            <p>이름: {{ user.name }}</p>
        </div>
    </div>
</template>
<script>
export default {
    name: 'IndexPage',
    data() {
        return {
            user: {
                id: 'jun12',
                password:'5678',
                name:'namjun'
            }
        }
    },
    created() {
        console.log('created()가 실행됨');
        this.$http.get('/api/login').then((res) => {
            console.log('/api/login 들어옴 ');
            const user = res.data.user;
            if(user) this.user=user;
        }).catch((err)=>{
            console.error(err);
        });
    },
}
</script>

5. router/index.js 파일을 열고 라우터를 설정한다.

방금 만들어준 IndexPage.vue의 라우터를 설정해준다.

경로가 '/'(root)가 올 경우, Helloworld.vue가 아니라 IndexPage에 향하도록 해준다.

6. Client 빌드하기 : npm run build

 

---

Server

---

1. server파일에 data폴더와 user.json파일을 만들고 테스트용 유저 데이터를 입력한다.

data\user.json 생성

현재 데이터베이스를 연결해주지 않았기 때문에 임시로 유저 데이터를 만든다.

2. routes폴더에 login.js 파일을 생성. 아래처럼 코드를 작성한다.

const express = require('express');
const router = express.Router();
const users = require('../data/users.json');
router.get('/',function(req, res, next){
    res.json({user: users[0]});
});
module.exports = router;

3. app.js파일에 login라우터를 추가한다.

4. npm start

이제 localhost:3000에서 잘 뜨면 되는데.....

hum....

오류가 뜬닿ㅎㅎㅎ

 

여기서부터는 에러 해결부분!!!!

---

으악 ERROR.....

1번째 오류

해결...!! ㅎㅎ 그냥 내가 오타를 냈었다. 금방 찾아서 해결했다. 

위 코드에 있는 사진들은 다 수정했는데 철자 하나씩 틀렸었다ㅎㅎㅎㅎㅎ 근데..........

2번째 오류...

어휴

이번엔 에러는 안나는데 화면이 나오질 않는다..!! IndexPage가 로드되지 못했다ㅠㅠㅡ 차라리 오류가 뜨면 뭐가 문제인지 알텐뎅,,,,,,,,,

 

일단 서버랑 클라이언트랑 분리해서 클라이언트에 user데이터를 임의로 줬다.

 

user가 정의되지 않았다고 뜨고

created()가 가장 먼저 실행이 되어야하는데 console.log가 안뜨는걸 보니 created도 실행이 안되는듯하다.

 

한참 찾아보고 이유를 찾았다.......ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅋㅋㅋㅋㅋㅋ

<style></style>를 썻다고 생각했는데 내가 <script></script>로 써줬었다. 이거 지우니까,,,,,,

악

  script를 지웠다고 된다고...!? 근데 원래 script는 여러번 사용할 수 있는거 아닌가.....??

그래서 중간에다 써봤는데

 

앞에 script를 넣어줌 

504에러는 서버 연결안해줘서 뜬것! 중간에 넣은 스크립트는 로그는 안뜨지만 실행은 잘된다.

맨뒤에 script를 넣어줌

마지막에 script를 넣어주면 역시 뜨지 않는다,,, 이유는 모르겠땋ㅎㅎㅎ

 

찾아보니 이 문제는 vue 파일의 구조와 연관되어 있는것 같다.

vue-cli에서 vue의 파일 구조는 template, style, script 3가지 태그를 사용한다.

 

<template>

• 화면을 구성하는 html부분이다. 반드시 하나의 root element를 가져야한다.

• 어차피 하나의 template만 존재하므로 별도의 id를 부여하지 않는다. 

<style>

• 스타일을 담당하는 css코드가 들어간다.

• 그냥 작성하면 전역이 되어 다른 컴포넌트에게도 영향을 준다. 현재 컴포넌트에게만 값을 주고 싶다면 scoped속성으로 지정해 주도록 한다.

<script>

• 컴포넌트를 만들어서 export 해준다. 객체는 하나만 만들고 default로 export한다. 

• 하나뿐이기 때문에 template를 지정하지는 않는다.

여기에서 참고하였다.

goodteacher.tistory.com/217

SPA와 VueCLI 3

vue 구조상 컴포넌트를 만들어서 export를 해주는 script는 하나만 사용할 수 있기 때문에 중간에 써주었던 script는 무시당했고, 마지막에 있는 script를 export해주는 script라고 인식하기 때문에 저런 결과가 나온것이 아닐까 생각한다.

 

암튼 script를 다지워주니까 잘 뜬다! 이제 코드를 다시 수정하고 서버를 재연결해보쟈

 

 

---

5. ERROR해결!  localhost:3000에 접속하면 프론트엔드와 백엔드가 작동하는것을 확인할 수 있다!!!