2017.1.2 작성
새해를 맞이하여 가장 큰 난제를 만났고 해결했다.
기본 지식이 풍부한 분들이라면 너무나도 쉬운 문제였겠지만,
내게는 한없이 어려운 문제였고, 아무리 구글링을 해도 만족할만한 답을 얻지 못하였다.
혹여나 같은 문제로 고생하고 있을 분들을 위해 블로그에 남겨야 겠다!
실은 연동해서 실행한다는 말조차도 맞는건지 모르겠다.
그냥 Angular를 서버단에 배포한다는 말이 더 어울릴 듯하다.
(17.3.18 추가)
실제로 Angular는 프론트 엔드의 프레임워크이다. 스프링은 서버를 다룬다.
결국 Angular와 spring의 연동이라는 것은 스프링으로 짜여진 서버에 페이지를 요청했을때에
Angular로 빌드된 SPA를 응답한다는 의미이다.
- 먼저 Angular cli가 있어야 한다.
Angular cli 는 개발자가 Angular 개발에만 집중할 수 있도록 지원해주는 아주아주 편리한 도구라고 생각하면 되겠다.
설치하는 방법은 간단하다
앵귤러를 쓰려는 분들은 기본적으로 node.js 와 npm이 깔려있다는 전제하에 바로 소개하겠다
전역으로 설치하여준다. 이 도구가 설치되면 터미널에서 ng 명령어를 사용할수 있게된다.
$ npm install -g angular-cli
- 프로젝트 생성
앞서 이야기하였듯이 이제는 ng 명령어를 사용할 수가 있다. 이걸 이용해서 프로젝트를 생성한다.
참 필자는 현재 Mac 환경에서 쓰고 있다.
테스트를 해본답시고 프로젝트 이름을 Test로 작성하게 되면 저렇게 사용할수 없다는 오류가 발생하니 참고.
3번째 줄을 보면 알 수 있듯이, 4200번 포트로 서버에 접근할 수 있다.
http://localhost:4200
브라우저를 통해 들어가면 헬로~ 라는 문구가 뜨며 서버가 잘 개통 됨을 알 수 있을 것이다.
이 도구를 통해 개발하고자하는 바를 서버를 통해 테스트도 해보며 개발 하면 된다.
그리고 오늘 포스팅의 주제였던 스프링에 연동하는 방법을 알아본다.
명령어를 실행하면 이 도구에서 자체 제공하는 개발서버가 실행되어지는데 명령어는 다음과 같다.
$ ng new 프로젝트이름
$ ng serve
- 스프링과의 연동
우리가 만든 프로젝트를 이용해서 구현하고자 하는 바를 다 이루었다면 이제는 스프링 프로젝트와 함께 서버에 올리고 싶을 것이다.
이때 쓰는 것이 ng build 명령어이다.
angular - cli 로 만들어진 프로젝트의 코드는 타입스크립트 기반이기때문에
빌드과정을 거쳐 브라우저에서 동작 가능한 자바스크립트로 변경해주어야 한다.
저 명령어를 사용해주면 dist라는 폴더가 만들어지면서 배포가능한 형태로 변환되어지는데
안에는 index.html 과 함께 잡다한 소스파일들이 들어있다.
$ng bulid
- 빌드 상태
빌드가 되었다면 이렇게 dist 디렉토리가 생성된다.
스프링에서도 처음로드 할때 실행하고자 하는 인덱스파일이 있을것이다.
로드하려는 경로에다가 dist 폴더안 파일을 죄다 긁어다 복사하고 붙여넣고 스프링을 실행해보자.
스프링으로 만들어진 프로젝트는 로드되자마자 index 파일을 찾게 될 것이다.
index 파일은 자연스럽게 빌드된 환경에 있는 자원들을 이용해 클라이언트에게 전달된다.
SPA이기 때문에 한번만 전송하면 끝!
이클립스를 통해 어떻게 들어갔는지 살펴보자!
스프링 부트를 통해 만든 프로젝트
resources 디렉토리에 위에서 설명했던 dist 파일 내부를 전부 복사붙여넣기 하였다.
나도 이번에 알았는데 Angular는 SPA (Single Page Application)에 최적화된 프레임워크라고 한다.
한장으로 이루어진 어플리케이션이어서 페이지의 이동이 아닌 Restful 한 데이터 송수신을 통해 동적인 화면을 만들어 낸다는 것이다.