[Spring Boot + Vue.js 연동] 프로젝트 개발 환경 세팅, axios로 데이터 전송, prettier와 cors 에러 해결

Spring Boot는 다음 포스팅을 참고해서 만들자.

[Spring Boot + Vue.js] 프로젝트 개발 환경 구성

Spring Boot + MySQL + JPA + Thymeleaf 로 CRUD 구현하기 01 - 데이터베이스 환경설정, 프로젝트 생성

 

 

연동하는 포스팅을 왜 또 올리냐면 이번에는 Vite 기반이기 때문이다.

vite란

https://vitejs-kr.github.io/

Vite

 

 

 

1. Node를 설치한다.

https://nodejs.org/ko/

Node.js

버전 확인

node -v

 

2. 이미 Node가 설치 되어 있다면 Npm을 업데이트 해주자.

npm install -g npm

버전 확인

npm -v

 

 

3. vue 프로젝트 생성

npm init vue@latest
Ok to proceed? (y)

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√  Add Prettier for code formatting? » No / Yes

 

 

4. 프로젝트 이동후 npm install 

Done. Now run:
  cd vue-project
  npm install
  npm run lint
  npm run Dev

 

 

5.  npm run lint 해보자

 

'cypress' is not defined no-unde cypress.config.js

'module' is not defined. eslint(no-undef)

'require' is not defined. eslint(no-undef)

 

Delete `␍` prettier/prettier

Insert ␍⏎ (prettier/prettier)

 

위와 같은 에러가 뜬다면 .eslintrc.cjs 파일을 수정해주자

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  env: {
    amd: true,
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "plugin:cypress/recommended",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  overrides: [
    {
      files: [
        "**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}",
        "cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}",
      ],
      extends: ["plugin:cypress/recommended"],
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
  rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
  },
};

 

 

6. npm run dev로 서버를 띄워보자

 

 

7. axios 설치

npm install --save axios

 

 

8. 필요한 페이지를 만든다.

/src/components/Logintem.vue

<script setup>
import { ref } from "vue";

import axios from "axios";

const id = ref("");
const password = ref("");

const login = function () {
  axios.post("/login", {
    id : title.value,
    password: content.value,
  });
};
</script>

<template>
  <div>
    <div>
      <input type="text" name="id" v-model="id" />
    </div>
    <div>
      <input type="text" name="password" v-model="password" />
    </div>
    <div>
      <button @click="login()">로그인</button>
    </div>
  </div>
</template>

<style scoped></style>

 

/src/views/LoginView.vue

<script setup>
import LoginItem from "../components/LoginItem.vue";
</script>

<template>
  <div class="about">
    <LoginItem />
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

 

8. 라우터를 추가해준다.

 

App.vue에 RouterLink를 추가해준다.

<RouterLink to="/login">Login</RouterLink>

 

/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import LoginView from "../views/LoginView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/login",
      name: "login",
      component: LoginView,
    },
  ],
});

export default router;

 

 

 

9. SpringBoot 프로젝트에 컨트롤러를 생성한다.

@RestController
public class Controller {

    @PostMapping("/login")
    public String test(@RequestBody Login loginDTO) {
        System.out.println("id = " + loginDTO.getId());
        System.out.println("password = " + loginDTO.getPassword());
        return "Hello World";
    }
}

 

DTO도 생성해준다.

@Getter
@Setter
public class LoginDTO {
    private String id;
    private String password;
}

 

 

10. 프론트엔드 서버를 실행해서 /login로 들어간 후 id와 password를 입력하여 로그인 버튼을 눌러보자. 

 

cors 설정을 해줘야한다.

backed 서버에서도 해결 할 수 있지만 간단히 vite.config.js 파일을 수정해서 문제를 해결해보자.

아래 코드를 vite.config.js에 추가해준다.

/api로 시작하는 주소로 요청을 보내면 target에 있는 주소로 요청을 날린다.

server: {
proxy: {
  "/api": {
    target: "http://localhost:8086",
    rewrite: (path) => path.replace(/^\/api/, ""),
  },
},
},

vite.config.js

 

import { fileURLToPath, URL } from "node:url";

 

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import vueJsx from "@vitejs/plugin-vue-jsx";

 

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue(), vueJsx()],

  resolve: {

    alias: {

      "@": fileURLToPath(new URL("./src", import.meta.url)),

    },

  },

  server: {

    proxy: {

      "/api": {

        target: "http://localhost:8086",

        rewrite: (path) => path.replace(/^\/api/, ""),

      },

    },

  },

});

 

https://vitejs.dev/config/server-options.html#server-proxy

Vite

 

LoginItem.vue의 요청 주소를 수정하자.

...
axios.post("/api/login", {
...

 

11. 다시 서버를 실행해 아이디와 비밀번호 입력, 로그인 버튼을 누른 후 콘솔에 입력한 id와 password가 출력하는지 확인해본다.