Hyeyumpa

Spring-boot + Maven + @vue/cli 서버는 spring-boot를 사용하고 웹은 vue를 이용하기 위해 다음과 같은 몇가지 과정을 거쳐야 합니다. 스프링부트 프로젝트 구성 Controller 매핑 설정 vue 프로젝트 구성 vue config 설정 frontend 메이븐 플러그인 추가 이 과정을 풀어서 이 글을 읽으시는 분들 누구나 따라할 수 있도록 남겨 보려고 합니다. 스프링 프로젝트 구성 우선 사용하시는 IDE에는 기본적으로 spring-initializer 가 탑재 되어 있을 것입니다. 지금 이 글을 찾아 들어오시는 분들이라면 기본적으로 spring-boot 프로젝트 생성에는 문제가 없을 것으로 생각 되므로 이 부분은 그냥 넘어 가도록 하겠습니다. 단! vue 실행시 spring 기본 웹 포트와 같은 포트로 실행되기 때문에 스프링 프로젝트를 만드신 후에는 반드시 개발용 포트를 따로 지정하시거나 vue 에서 웹 서비스 포트를 변경하셔야 합니다. 저는 보통 application.properties 를 개발용과 배포용을 따로 만들어 사용하는데 따로 구분해서 사용하는 방법은 따로 포스팅 하도록 하겠습니다. 여기서는 application.properties 파일에 server.port=33080 으로 설정하고 진행 하도록 하겠습니다. Controller 매핑 설정 웹페이지 연결을 vue를 이용할 것이기 때문에 서버 api로 사용되지 않는 모든 url에 대해서 /index.html 페이지로 연결 되도록 설정해야 합니다. 그러기 위해서는 spring-boot 프로젝트 안에 컨트롤러를 만들어 url 매핑을 해 주어야 합니다. 기본 패키지 혹은 web controller를 모아 사용할 패키지에 DefaultController.java 파일을 생성하여 아래와 같이 모든 URL에 대하여 Get 방식의 요청은 index.html 페이지로 연결되도록 합니다. @Controller public class Default...

Maven dependences < dependency > < groupId > org.springframework.boot </ groupId > < artifactId > spring-boot-starter-websocket </ artifactId > </ dependency > < dependency > < groupId > org.webjars </ groupId > < artifactId > sockjs-client </ artifactId > < version > 1.1.2 </ version > </ dependency > < dependency > < groupId > org.webjars </ groupId > < artifactId > stomp-websocket </ artifactId > < version > 2.3.3-1 </ version > </ dependency > HTML < script src = "/webjars/sockjs-client/1.1.2/sockjs.min.js" > </ script > < script src = "/webjars/stomp-websocket/2.3.3-1/stomp.min.js" > </ script > Java config @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override publ...