[#angular] scully로 SPA를 기존 방식의 여러 스태틱 파일로 쪼개기

 

 

 

Angular의 가장 큰 장점이자 단점이라고 볼 수 있는 SPA(Single Page Application) 특성에 대해서 사용자 입장에서 생각해보자.(개발 관점은 말할 것도 없이 기존 js, html, css 방식보다 생산성, 재사용성이 비교도 할 수 없을 정도로 좋아졌으니 논외)

 

장점은 로딩만 되면 이후부턴 네이티브 앱과 거의 비슷한 성능을 기대할 수 있다.

단점은 첫 로딩이 느리고, 검색에 노출되기 힘들다는 점이다.

 

첫 로딩이 느리다는 말은 처음에 전체 어플리케이션 동작에 필요한 js, css, html 덩어리를 한번에 받아와야하므로 초기 로딩에 시간이 많이 걸린다는 뜻이고, 검색에 노출되기 힘들다라는 말은 SEO(Search Engine Optimization) 이슈, 쉽게 말해 Agnular의 라우팅은 실제 서버 라우팅 주소가 아니라 client 메모리상에 존재하는 가상의 주소 같은 개념을 사용하므로 검색엔진에서 이를 크롤링하지 못해 사용자에게 노출되지 못하는 문제이다.

 

이를 손쉽게 해결할 수 있는 방법 두 가지중 한 가지인 scully를 소개한다.

(나머지 한 방법은 SSR, Server Side Rendering 방식의 Angular Universal 인데 다른 포스팅에서 다룰 예정)

 

결론부터 말하면 scully를 쓰면 첫 로딩도 빠르고, 검색에도 아주 잘 노출된다.

 

자세한 내용은 https://github.com/scullyio/scully 에서 확인할 수 있다.

scullyio/scully

 

1. Scully

scully의 역할은 Angular를 미리 렌더링해 Machine Learning을 이용해 가능한 모든 라우팅을 찾고, 각각 html 파일을 만들어버리는 것이다. 각각의 파일은 자신이 필요한 내용만 가지고, 불필요하게 모든 요소들을 제거해, 초기 로딩시간이 매우매우 짧아진다. 또 각각의 라우팅 링크는 실제 파일 위치에 대응되는 주소를 가리키므로 검색엔진이 이를 잘 수집하게 되는 것이다.

 

2. 기존 Angular 프로젝트에 @scullyio/init 설치하기

Angular 프로젝트 안에서 아래 명령어를 치면 scully 설치가 완료된다.

ng add @scullyio/init

 

혹시 Angular 프로젝트를 만드는 방법이 궁금하다면 https://korband.tistory.com/11 에서 그대로 따라해보자

[angular] 프로젝트 생성, 실행하기

 

3. 라우터 추가하기

app.component.html 에 <router-outlet></router-outlet> 넣어주고,

<router-outlet></router-outlet>

 

라우터를 추가할 땐, 모듈 단위로 생성해준다. 만약 home 페이지를 만들고, /home 으로 라우팅하고 싶다면 아래와 같이 커맨드를 실행해주면 된다.

ng generate module home --route=home --module=app-routing

 

4. 만약 모든 라우팅 경로를 알고 싶다면

아래와 같이 ScullyRouteService를 이용해 모든 라우팅 경로를 알 수 있다.

home.component.ts

import {ScullyRoutesService} from '@scullyio/ng-lib';
import {Observable} from 'rxjs';

@Component()
//...
export class HomeComponent implements OnInit {
  links$: Observable<any> = this.scully.available$;

  constructor(private scully: ScullyRoutesService) {}

  ngOnInit() {
    // debug current pages
    this.links$.subscribe(links => {
      console.log(links);
    });
  }
}

 

페이지 안에서도 보여주고 싶다면 아래와 같이 코드를 작성해주자.

home.component.html

<p>home works!</p>

<ul>
  <li *ngFor="let page of links$ | async">{{ page.route }}</li>
</ul>

 

5. 빌드하기

scully는 반드시 ng build 또는 ng build --prod 를 실행해 dist/app (app은 앱 이름) 이 생성됐을때만 빌드가 가능하다.

# dev
ng build

# prod
ng build --prod

 

그리고 아래처럼 scully를 실행해주면 dist/static 하위에 스태틱 파일들이 생성된다.

npm run scully

 

static 를 그대로 서빙하면 끝.