[SPRING] Spring프레임워크와 Angular 연동하기

실무에서 일하다보면 회사마다 다르겠지만, 대부분은 Spring 프레임워크를 사용한다고 생각을 합니다.

그렇다면 지금까지 대부분 Spring프레임워크나 전자정부프레임워크를 사용하면서 jQuery를 기반으로 개발을 해왔다고 보여지고, 저 또한 그렇게 개발을 해왔었습니다.

최근 조금씩 사용되는 프론트엔드 프레임워크에는 Angular나 Vue 등이 있고 이와 비슷한 라이브러리에는 React가 있습니다. 

여기서 제가 얘기할 것은 Angualr라는 프레임워크를 사용할 때 기존 Spring프레임워크에서 어떻게 사용하면 좋을지 얘기해보려 합니다.

Angular는 기본적으로 컴포넌트 기반의 프레임워크입니다. 

javascript기반이 아닌 TypeScript를 기반으로 개발하고, TypeScript는 컴파일하는 과정에서 javascript파일로 컴파일됩니다.

(설명하자면 너무 길기 때문에 검색해보시면 많이 찾아보실 수 있을겁니다ㅠㅠ)

Angular라는 언어에 대해서 설명하기보다는 이 Angular라는 프레임워크를 실무에서 어떤식으로 활용할 수 있을까를 한 번 얘기해보려 합니다,

보통 실무에서는 신사업을 하든 유지보수를 하든 기존 Spring프레임워크에 맞게 javascript나 class파일들이 공통으로 묶여져 있는 것을 많이 볼 수 있습니다.

하지만, Angular를 사용하게 되면  jQuery, javascript와 같은 라이브러리 및 언어를 사용하지 못하게 됩니다.(실제로 사용할 수 있지만 Angular에서는 DOM을 직접적으로 컨트롤 하는 것을 지양합니다.)

그렇다면 저희가 사용해오던 jsp와 같이 View를 담당하는 섹션은 어떻게 처리해야할까? 라는 의문이 생길 수 있습니다.

제 나름대로 개발을 하다보면서 느낀 것은 Spring 프레임워크의 공통을 살리면서 js같은 프론트엔트 섹션만 Angular로 전환할 수 있다면 가장 좋지 않을까라는 생각이 들었습니다.

이전에 Web Server와 WAS(Web Application Server)에 대해서 설명드릴 필요가 있습니다.

Web Server와 WAS의 차이점을 아는 것이 중요합니다. 

Web Server는 정적인(이미지파일, Database를 통하지 않는 페이지, 구글 메인등)을 담당하는 서버이고 WAS는 동적인(우리가 흔히 보게 되는 페이지(Database에서 데이터를 가져오는 페이지, 네이버 메인 등)을 담당하는 서버입니다. 

Spring 프레임워크에서는 Apache Tomcat을 사용하다보니 이러한 차이점을 느끼지 못합니다.

하지만 Angular를 사용하게 되면 이를 구분해서 개발할 필요가 있습니다.

기존 Spring프레임워크에서 쓰던 공통 소스들을 버리지 않고 그대로 사용하고 싶은데 FrontEnd만 Angular로 변환하고 싶다면 쉽게 생각하면 서버를 2개를 올리면 됩니다.

정적인 페이지를 처리해주는 Web Server는 Node.js가 담당하고 동적인 페이지를 처리하는 WAS는 Tomcat이 담당하도록 하는 것입니다. 

정확히 말하면 Node.js서버라기보다는 angular cli에서 지원하는 Webpack-dev-server 를 올리는 것입니다.

소스로 보여드리면 다음과 같습니다

기본적으로 Angular는 angular cli에서 제공하는 Webpack-dev-server를 사용하게 되고 4200번 포트에서 서버가 올라가게 됩니다. 

(Node.js에서 npm을 이용해서 angular cli을 설치하고 서버를 올린 경우이기 때문에 알기 쉽게 위의 그림에서는 Node.js가 WebServer를 담당하는 것 처럼 보일 수 있습니다.)

하지만, Tomcat의 기본 포트는 8080 포트이므로 Database에서 데이터를 가져와야하는 URL의 앞에 /api/라는 이름이 붙게되면 톰캣 서버의 기본 포트인 8080포트로 가게 설정하는 proxy.config.json파일을 만들었습니다. 

이후, 윈도우 명령프롬포트에서 해당 Angular프로젝트로 경로를 이동한다음, 

"node_modules\.bin\ng" serve --proxy-config proxy.config.json" 라고 입력을 하게 되면 4200번 포트에 proxy.config.json 설정을 갖고 Node 서버가 올라가게 됩니다.

그리고 기본 자바 소스에서 프론트엔드 부분을 제외한 나머지 자바 소스를 Tomcat서버를 통해서 기존의 방식과 같은 방식으로 올려줍니다. 

물론 Tomcat서버의 Url과 proxy.config.json파일의  Url은 같아야 합니다.

그리고 기존에 jQuery를 사용할 때는 ModelMap을 이용해서 내리거나 Ajax 방식으로 writer를 통해 내렸다면 VO나 Map, List 자체를 컨트롤러에서 리턴해줍니다.

쉽게 말하면 데이터 자체를 리턴해줍니다.

기존에 jQuery에서는 ajax처리를 직접 해줘야했다면, Angular에서는 Request를 받은 Url의 컨트롤러에서 데이터를 리턴해주게되면 json방식으로 response가 넘어가게 됩니다.

따라서, Angular에서 직접적으로 json 파싱을 해주지 않아도 데이터를 프론트엔드에서 처리할 수 있습니다.

화면으로 설명을 해드리면 다음과 같습니다.

처음에 4200번 포트로 접근을 하게되면 위와 같은 화면이 뜨게 됩니다.

저기서 사용자관리라는 링크를 누르게 되면 이와 같이 데이터베이스에서 데이터를 가져온 결과 값들을 뿌려주게 됩니다.

그리고 이 과정에서 

명령 프롬프트에서의 로그를 보면 /api/sysop/user/userlist라는 Url은 8080포트로 접근한 것을 볼 수 있습니다.

즉, 기존의 Spring 프레임워크 소스를 살리면서 Angular를 도입하고 싶다면 이와 같이 서버를 2개 올려 작업을 하고, 차후 배포시에는 위에서 말씀드렸듯이 TypeScript소스는 javascript로 컴파일되기 때문에 해당 js파일을 한 개의 서버에 같이 배포시키면 서버 1개로 돌릴 수 있습니다.

Angular는 아직까지 많이 쓰이지 않는 회사가 더 많고, 차츰 도입하고 있고 계속해서 패러다임이 바뀌고 있는 언어이기 때문에 논란이 많을 수 있습니다.

위와 같은 방법은 제 개인적인 생각이 많이 담긴 방법론이기 때문에 좀 더 좋은 의견이 있으신 분은 댓글로 말씀해주시면 한 수 더 배워갈 수 있을 것 같습니다.