스프링 (Spring Vue) 게시판 만들기 #7. FrontEnd와 BackEnd 연결(Vue-Spring 연결)

이전 포스팅에 이어서 이번에는 프로젝트에 프론트 환경을 구축해서 Spring에 연결하는 환경을 만들어 보겠습니다.

우선

프로젝트의 소스파일 폴더에 Vue프로젝트를 생성해보도록 하겠습니다.

src에서 마우스 우측클릭을 하면 보이는 설정에서 Properties를 클릭합니다.

해당 버튼을 누르면 해당 소스가 있는 파일 편집기 폴더를 열어줍니다.

스프링폴더의 루트 레벨에서 frontend를 만들어 보겠습니다.

해당 파일의 주소를 클릭하고 cmd를 누르고 엔터를 하게 되면 해당 위치의 cmd창이 열립니다.

저번과 마찬가지로 Vue create frontend 명령어를 입력하여 frontend라는 이름의 Vue 프로젝트 폴더를 생성합니다.

정상적으로 폴더가 완성이 되었습니다.

아까 없었던 frontend라는 폴더가 생성되었는것을 확인 할 수 있습니다.

frontend폴더를 확인하면 

이렇게 정상적으로 vue 프로젝트 구조가 생성되어 있는것을 확인 할 수 있습니다.

이클립스로 돌아와서 새로고침을 해보면 똑같이 폴더가 생성되어 있는 것을 볼 수 있습니다.

 

이번에는 axiox를 통해서 백엔드와 HTTP 통신을 할 수 있는 의존성라이브러리를 설치해보겠습니다.

frontend위치로 갑니다.

npm install axios를 명령어를 입력합니다.

정상적으로 설치가 완료되면 package.json에서도 axios를 확인 할 수 있습니다.

제일 처음 생성한 Vue 프로젝트에서는 Helloworld.vue파일을 호출해서 첫 화면을 띄웁니다.

이 HelloWorld에서 axios를 통해서 백엔드를 호출하는지 확인을 해보도록 하겠습니다.

created()는 Vue 라이프 사이클에서 해당 컴포넌트가 생성될때 호출이 되는 곳을 정의하는 영역으로 첫화면에서 HelloWorld를 통해서 첫 화면의 컴포넌트를 호출하기 때문에 해당 영역에서 axios를 사용해서 백엔드에서 정의한 주소로 정상적으로 호출하는지 확인 해 볼 수 있습니다.

정의한 주소가 board/get-board-list.do라고 매핑했으니 톰캣의 실행 포트 주소가 8080으로 정상적으로 실행되어 있다면 해당 주소로 Vue의 첫화면에서 해당 주소로 HTTP통신을 정상적으로 GET방식으로 호출 할 것입니다.

정상적으로 호출하는지 확인하기 위해서 getBoardList의 메소드 중 아무 라인이나 break point를 잡아봅니다.

새로고침을 하면 개발자모드의 Network탭에서 get-board-list.do주소를 호출하는 것을 볼 수 있습니다.

이클립스에서는 브레이킹 포인트로 디버깅이 잡히기도 했습니다.

 

이번에는 axios를 통해서 프론트엔드와 백엔드의 통신을 하는 방법에 대해서 간략하게 알아봤습니다.

 

 

 

대략적으로 프론트엔드와 백엔드간의 상호작용을 나타내자면

 

[프론트엔드]   ===========================================> [백엔드]

aixos를 통한 Rest API 주소 호출                       API주소에 대한 명세 및 비즈니스 로직 처리

 

이런식으로 볼 수 있습니다.

다음에는 데이터를 불러와 화면에서 보여주도록 하겠습니다.