| 제목 | Angular Universal 환경에서 document.referrer 개체를 사용하는 방법(팁) | ||||||
| 글쓴이 | 이지섭 | 작성일 | 2019-02-27 | 수정일 | 2022-05-05 | 조회수 | 2500 |
Angular Universal 환경에서 document.referrer 개체를 사용하는 방법이다.
import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
@Component({
selector: 'app-board-view',
templateUrl: './board-view.component.html',
styleUrls: ['./board-view.component.css']
})
export class BoardViewComponent implements OnInit {
constructor(
//....
@Inject(PLATFORM_ID) private platformId: Object
) { }
ngOnInit() {
let referrer = "";
if (!isPlatformServer(this.platformId)) {
referrer = document.referrer;
}
}
}
런타임에 isPlatformServer(this.platformId) 실행 값에 따라서 서버에서 실행되는 Angular Universal 에서는 document 개체를 참조하지 않고 클라이언트 브라우저에서만 document 개체를 참조하도록 구분을 둔 것이다.
이렇게 함으로써 서버단에서 소소를 보는 부분이 정상적으로 실행되며, 브라우저 클라이언트단에서는 document.referrer 개체를 활용하여 프로그래밍 할 수 있다.
Angular Universal 에서 자바스크립트 document 개체를 사용하면 SSR (Server Side Rendering) 이 되지 않는다.
다소 불완전한 방법이기는 하다. | |||||||
로그인 | Language : |