전자정부프레임워크에서 React.js, Vue.js 사용하기 -들어가며-

전자정부프레임워크에도 webpack기반 react.js, vue.js 를 사용할 수 있을까

webpack과 babeljs의 조합으로 react.js, vue.js 를 구축하는 방법을 알아보고자 한다.

기존 스프링프레임워크에서는 MVC패턴을 아래와 같이 사용한다면

 

이번에 적용하는 MVC패턴은 front-end 에 Controller 와 view 를 보내 사용한다

데이터의 전송방식은 RESTFul 을 사용하여 json 혹은 xml 통신을 한다.

 

기존 springframework에서는 프론트엔드와 백엔드(view단)이 통합되어 컴파일된  html을 서버에서 반환되었지만

적용되는 통신방식은 Axios를 통한 ajax통신을 사용하여 RESTful 로 호출하고 Json 혹은 xml로 return 받는다.

 

최종 구성된 프로젝트는 프론트엔드와 백엔드에 기존에 사용하던 환경과는 다를 것이다. 프론트엔드는 SPA(Single Page Application) 을 사용하는 React, Vue.js 이고 이는 페이지의 리로딩이 없이 데이터를 주고받아야 하는 환경이다. 그러므로 axios라는 라이브러리를 사용하여 ajax통신을하고 json을 받아사용한다. 스프링에서는 service의 조회 결과나 트랜젝션 결과를 처리하는 역할만 수행한다.

댓글 남기기