| 제목 | Angular Universal 환경에서 document.referrer 개체를 사용하는 방법(팁) | ||||||
| 글쓴이 | 이지섭 | 작성일 | 2019-02-27 | 수정일 | 2025-12-31 | 조회수 | 7049 |
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) 이 되지 않는다.
다소 불완전한 방법이기는 하다.
인터넷 서핑 중 알게된 내용인데,
if (typeof window !== "undefined") {
referrer = document.referrer;
}
PLATFORM_ID 를 사용하지 않고서 위와 같이 간단하게 처리할 수도 있겠다. | |||||||
로그인 | Language : |