스프링 (Spring Vue) 게시판 만들기 #8. BackEnd 데이터를 FrontEnd에 표현

안녕하세요.

너무 오랜만에 포스팅을 이어 나가서 죄송합니다...

그동안 회사 프로젝트와 개인 토이프로젝트랑 개발 공부까지 하다가 보니 시간이 정신없이 흘러 글을 쓸 생각조차 못했습니다...

열심히 하고 있었더라는 흔적... 중간 중간에 한줄씩 비는건 백신맞은주는 쉬어서 그래욥...

천명만 넘어도 좋겠다라는 블로그의 방문자수는 어느덧 4000이 넘는 수의 방문자를 기록하였습니다

저번달에는 방문자수가 1000을 넘었습니다... 총방문수가 1000이 넘으면 좋겠다라고 했던게 엊그제 같은데 한달에 1000이 넘는 수라니...감사합니다.

블로그명도 몽상개발자에서 개발은 재밌어야 한다로 바꾸었습니다...!

토이프로젝트나 잡담에 대한 내용들은 앞으로 NullPointerException 카테고리(Null 채우겠다라고 바뀔수도 있습니다...)에 게시물을 통해서 작성하도록 하고 이만 본론에 들어가겠습니다.

 

 

저번 포스팅에서 만든 프로젝트를 이어 가보도록 하겠습니다.

 

우선 포스팅한지 너무 오랜기간이 지나서 github에 올라가있는 마지막 프로젝트를 기준으로 다운을 받아보도록 하겠습니다.

 

 

 

 

 

https://github.com/skarbgud/Board-Project

GitHub - skarbgud/Board-Project

해당 주소에 있는 프로젝트를 클론합니다.

그럼 Git Repositories에 프로젝트가 생겨나는데 해당 프로젝트를 프로젝트로 import 해줍시다

다시 JAVE EE나 디버그 모드창으로 돌아가면 Board-Project라는 프로젝트가 생성된걸 볼 수 있습니다.

일단 프로젝트가 폴더안에 있어서 해당 폴더를 바깥으로 빼서 다시 진행 해보겠습니다.

프로젝트 폴더가 있는곳을 열어줍니다.

location이 안내해준곳으로 가면 프로젝트가 있는걸 확인 할 수 있습니다.

지금 Board-Project안에 BoardProject라는 폴더안에 소스폴더가 있으니 분간이 가지 않으니 해당 폴더안에 있는 내용을 바깥으로 다 이동시켜줍니다.

그럼 Board-Project안에 바로 소스 폴더의 형태가 됩니다. (기존에 있던 BoardProject폴더는 삭제합니다.)

그럼 위와 같이 깔끔한 구조에 프로젝트 폴더가 되었습니다. 해당 사항들은 필수는 아니고 다시보니 폴더안에 프로젝트 파일들이 올라가있는 구조라서 프로젝트 폴터 구조는 크게 상관없습니다.

 

자 다시 프론트엔드를 실행시켜 보도록 하겠습니다.

프론트엔드 폴더로 들어와 해당 위치에서 cmd 창을 띄워줍니다.

해당 폴더의 위치에서 cmd 엔터를 치면 해당 위치의 cmd창을 띄울수 있습니다! (물론 VSCode 터미널에서 진행하셔도 됩니다)

yarn install 명령어를 통해서 package.json에 있는 의존성 패키지 파일들을 모두 설치해주세요

그럼 다음과 같이 node_modules폴더가 새로 생기면 됩니다!

yarn serve를 통해서 프로젝트를 실행시켜 봅니다.

8081번 포트로 로컬로 생성이 잘 되었으니 확인해보겠습니다.

자 정상적으로 다시 화면을 띄웠습니다.

백엔드도 다시 실행을 시켜보겠습니다.

Maven업데이드도 한번 해주고 다시 한번 실행해보도록 하겠습니다.(혹시 실패하시면 위화면에서 Build Project로 빌드를 해보세요)

디버깅 모드로 프로젝트를 실행시켜주도록 합니다. (왜 Run As가 아닌 Debug As로 서버를 올리냐면 개발시에는 디버깅모드로 디버깅을 사용해서 개발할때가 많기 때문에 그냥 실행의 목적이 아니면 거의 대부분 프로젝트 실행은 디버깅모드로 합니다)

에러 없이 서버가 잘 올라가면 성공입니다.

자 그러면 이제 다시 저번처럼 get-board-list.do에 breaking point(브레이킹 포인트)를 찍어서 정상적으로 서버를 호출하는지 확인해 봅니다..

새로고침해서 확인해보면 정상적으로 해당 Mapping된 주소로 정상적으로 동작을 하는것을 확인할 수 있습니다.

F8을 누르면 브레이킹포인트에서 벗어납니다

이상허다.....?

데이터를 가져오나 확인해봤는데 이게 왠걸 500에러가 납니다.

로그를 보면 호출시에 찍히는 로그는 잘 찍히는데 WARN 으로 에러가 찍혀있는걸 확인할 수 있습니다.

 

무엇이 문제일까요?

Failed to write HTTP message: org.springframework.http.converter.HttpMessageNotWritableException: No converter found for return value of type: class com.dream.vo.ResultVO

에러 로그를 보면 해당 클래스의 값을 컨버팅해서 리턴할 수 없다고 나옵니다.

@ReponseBody로 JSON형태로 response를 하겠다고 했는데 pom.xml에 jackson에 대한 라이브러리가 없어서 변환하지 못한것 같습니다.

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
	<dependency>
		<groupId>com.fasterxml.jackson.core</groupId>
		<artifactId>jackson-core</artifactId>
		<version>2.11.2</version>
	</dependency>
	<dependency>
		<groupId>com.fasterxml.jackson.core</groupId>
		<artifactId>jackson-databind</artifactId>
		<version>2.11.2</version>
	</dependency>
	<dependency>
		<groupId>com.fasterxml.jackson.core</groupId>
		<artifactId>jackson-annotations</artifactId>
		<version>2.11.2</version>
	</dependency>

해당 코드를 pom.xml에 dependencies 안에 추가해주세요

저장후 위에서 처럼 Maven Update를 해주도록 합니다.

톰캣을 종료후에 다시 디버깅 모드로 실행시켜 보겠습니다.

자 다시 새로고침을 해보면 이번에는 에러로그없이 정상적으로 잘 출력이 됩니다.

그런데..!

이번에도 에러로 데이터를 못가져옵니다.

근데 아까 에러랑은 다른 이번에는 CORS 오류라고 나옵니다.

CORS의 정의에 대해서는 자세한 정보들이 많으니 간단히 말하면 같은 출처의 리소스가 아니라서 서버에서 response를 거부하는 겁니다.

지금 프론트는 8081번 포트를 사용하고 있고 백엔드는 8080포트로 서로 다른 포트끼리 통신을 하다보니 해당 과정에서 오류가 나는겁니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

일단은 간단하게 CORS에 대해서 처리하기 위해서 BoardController에서 @CrossOrigin(origins = "*") 어노테이션을 추가해줍니다.

다시 재실행 해보면 이번에는 정상적으로 오류없이 데이터를 response 받았습니다..!

자 클릭해서 데이터를 한번 확인 해 보도록 하겠습니다.

자 정상적으로 DB의 데이터들을 잘 받아온걸 확인 할 수 있습니다.

이번에는 화면에 한번 데이터를 표현해보도록 하겠습니다.

지금 코드를 보면 console.log로 그냥 데이터를 찍고 있습니다.

HelloWorld.vue

HelloWorld.vue파일의 소스코드를 한번 정리해서 데이터를 표현해보겠습니다.

 

created()시에 getBoardList()라는 메소드를 호출해서 비동기방식으로 response받은 데이터를 성공을 한다면 this.boardList에 response.data.result라는 데이터를 담아서 <template></template>안에서는 {{ }} 로 해당 데이터를 그냥 표현 해주도록 합니다.

<template>
  <div class="hello">
    {{ boardList }}
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  name: 'HelloWorld',
  data() {
    return {
      boardList: [],
    };
  },
  props: {
    msg: String,
  },
  created() {
    this.getBoardList();
  },
  methods: {
    getBoardList() {
      axios
        .get('http://localhost:8080/board/get-board-list.do')
        .then((response) => {
          if (response.data.success) {
            console.log(response.data.result);
            this.boardList = response.data.result;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
 

자 화면을 보면 데이터들이 잘 표현되는것을 확인 할 수 있습니다.

전체 프로젝트 코드와 파일은 아래 깃허브 레포지토리를 확인해주세요

https://github.com/skarbgud/Board-Project

GitHub - skarbgud/Board-Project

 

 

자, 다음 포스팅에서는 이 데이터들을 이제 테이블로 바인딩 시켜 이쁘게 게시판의 형태의 느낌이 나도록 한번 해보겠습니다.