hands on vue3 - vue3 & spring boot로 api 연동한 뒤 값 가져와보기(가장 쉬운 예제!) - 2편 vue 셋팅

[목표]

1편에서는 백엔드 셋팅을 마쳤다.

2편에서는 프론트 셋팅을 하고 

백단에 api 요청하여 값을 

console에 찍어보자

 

vue.js에 대한 환경설정을 하지 않았다면 하고 오길 바람!

 

Vscode로 진행한다. 

 

---

프로젝트 생성

윈도우일 경우 

vue.cmd를 붙여줘야 보안문제가 안생긴다. 

 

버전 3으로 진행

 

서버 실행

 

실행해서 들어가면 위와 같은 이미지가 뜬다. 

 

우리는 간단하게 실행하기 위해

버튼만 생성하도록 한다.

 

[App.vue]

<template>
  <button @click="test">Test Button</button>
</template>

<script>

export default {
  methods: {
    test(){
      alert("버튼 테스트!");
    }
  }
}
</script>

버튼을 눌렀을 때

버튼을 눌러 메소드가 잘 실행되는 걸 확인했으니

백단을 통해 값을 불러와 

콘솔에 찍어보자