SPA 프레임 워크를 사용한다면, 등록된 문서를 출력하는 컴포넌트를 재활용 하거나, 필요에 따라 미리보기용 컴포넌트를 추가해서 모달 형식으로 보여 줄수도 있겠다.
같은 프로젝트 내에서 입력과 출력 모든 것이 해결 가능하다면 위와 같은 방식으로 구현해 보는 것이 간단할 것이다.
만약 관리자 페이지에서 입력을 하고 홈페이지에서 출력을 해야 하는 것 처럼 서로 다른 프로젝트에서 미리보기를 구현해야 하는 경우 위와 같은 방식을 사용 한다면 불가능 한것은 아니지만 업데이트가 필요한 경우 비효율적인 작업이 수반될 수 있다.
이러한 경우 아래와 그림과 같이 새로운 윈도우를 띄워서 출력이 필요한 페이지가 필요로 하는 데이터를 전달하는 방식으로 구현해 볼수 있다.
새로운 윈도우를 띄우는 방식은 디자인 요구사항에 맞게 보여주면 되겠지만 해당 페이지 내 특정 영역에서 출력 하려면 ifram 을 사용해도 되고, 새로운 브라우저 위에 띄우려면 window.open()
함수를 사용 하면 된다.
새로운 윈도우를 띄워서 미리보기를 구현하는 방법으로 해보자.
중요한 점은 새로운 윈도우에서 필요한 데이터를 적절한 타이밍에 잘 전달해서 원하는 결과로 출력이 가능해야 한다는 것이다.
var newWindow = null1. 새 윈도우 열기// Parent
newWindow = window.open(
CHILD_WINDOW_URL,
'_blank',
'width=1400, height=880, top=0, left=0'
)2. 새로운 윈도우 상태 알리기// Child
window.opener.postMessage(
'READY_TO_CHILD_WINDOW',
PARENT_WINDOW_URL
)3. 데이터 전달하기// Parent
window.addEventListener('message', (event) => {
if ( // 데이터를 전달 받을 도메인이 맞는지, 데이터를 받을 준비가 되었는지 확인
event.origin !== CHILD_WINDOW_URL ||
event.data !== 'READY_TO_CHILD_WINDOW'
) {
return
}
var data = getData() // 준비된 데이터 가져오기
newWindow.postMessage(data, CHILD_WINDOW_URL)
})4. 데이터 받기// Child
window.addEventListener(
'message',
(event) => {
if (event.origin !== PARENT_WINDOW_URL) {
return
}
console.log(event.data)
})
정리해보면 아래와 같이 분리 할 수 있다.
Parent window
var newWindow = nullnewWindow = window.open(
CHILD_WINDOW_URL,
'_blank',
'width=1400, height=880, top=0, left=0'
)window.addEventListener('message', (event) => {
if (
event.origin !== CHILD_WINDOW_URL ||
event.data !== 'READY_TO_CHILD_WINDOW'
) {
return
}
var data = getData()
newWindow.postMessage(data, CHILD_WINDOW_URL)
})
Child window
window.opener.postMessage(
'READY_TO_CHILD_WINDOW',
PARENT_WINDOW_URL
)window.addEventListener(
'message',
(event) => {
if (event.origin !== PARENT_WINDOW_URL) {
return
}
console.log(event.data)
})
만약 Parent window 에서 새로운 하나의 윈도우만 띄워서 미리보기를 구현 하고 싶다면 아래 내용을 추가해 주면 된다.
// Parent
if (newWindow) {
newWindow.close()
}
...