HTML - Web Messaging

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 여러분의 웹 애플리케이션의 다른 부분들이 서로 소통할 수 있도록 하는 흥미로운 주제에 대해 배울 것입니다. 마치 여러분의 웹 페이지들이 대화를 나누는 것을 가르치는 것처럼! 함께 웹 메시징의 세계를 탐험해 보겠습니다.

웹 메시징 소개

코드로 뛰어들기 전에, 웹 메시징이 무엇인지 이해해 보겠습니다. 가정해 봅시다, 브라우저의 다른 탭에서 두 개의 웹 페이지가 열려 있다고요. 일반적으로 이 페이지들은 서로 직접 소통할 수 없습니다. 하지만 정보를 공유하고 싶다면 어떻게 하죠? 이때 웹 메시징이 등장합니다!

웹 메시징은 웹 애플리케이션의 다른 부분들이 서로 메시지를 보낼 수 있게 해줍니다, 심지어 다른 원본(예: 다른 도메인)에서도 그렇습니다. 마치 여러분의 웹 페이지들이 자신만의 특별한 전화线路을 통해 대화를 나누는 것처럼입니다!

메시지 이벤트

웹 메시징의 핵심은 message 이벤트입니다. 이 이벤트는 메시지를 수신할 때 발생합니다. 단계별로 설명해 보겠습니다.

기본 구조

다음은 메시지를 수신하기 위해 듣는 간단한 예제입니다:

<script>
window.addEventListener("message", function(event) {
console.log("Message received from " + event.origin);
console.log("Message content: " + event.data);
});
</script>

이를 해독해 보면:

window.addEventListener을 사용하여 "message" 이벤트를 듣습니다.
메시지가 도착하면, 우리의 함수가 호출됩니다.
함수는 메시지에 대한 정보를 포함한 event 객체를 수신합니다.
우리는 메시지의 원본과 내용을 로그합니다.

메시지 전송

이제 메시지를 보내는 방법을 살펴보겠습니다:

<script>
// iframe id 'myFrame'에 메시지를 보내는 것을 가정합니다
var iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage("Hello from the parent page!", "*");
</script>

이 예제에서:

우리는 페이지에 있는 iframe에 대한 참조를 가져옵니다.
postMessage를 사용하여 iframe에 메시지를 보냅니다.
첫 번째 인자는 메시지의 내용입니다.
두 번째 인자 "*"는 메시지를 어떤 원본에도 보내겠다는 의미입니다. 실제 애플리케이션에서는 보안상 정확한 원본을 지정해야 합니다.

보안 고려 사항

언제나 수신하는 메시지의 원본을 확인하세요! 다음은 더 안전한 메시지 리스너입니다:

<script>
window.addEventListener("message", function(event) {
// 신뢰할 수 있는 원본에서 오는 메시지만 처리합니다
if (event.origin !== "https://trusted-site.com") return;

console.log("Trusted message received: " + event.data);
});
</script>

이 추가 확인은 우리가 신뢰하는 원본에서 오는 메시지만 처리하게 합니다.

실제 예제

웹 메시징이 빛을 발하는 실제 세계의 시나리오를 살펴보겠습니다!

예제 1: 페이지와 iframe 간의 소통

주요 페이지에서 iframe에 게임을 로드하고, 버튼을 클릭할 때 게임을 시작하도록 하겠습니다.

주요 페이지 (parent.html):

<!DOCTYPE html>
<html>
<body>
<button onclick="startGame()">게임 시작</button>
<iframe id="gameFrame" src="game.html"></iframe>

<script>
function startGame() {
var gameFrame = document.getElementById('gameFrame');
gameFrame.contentWindow.postMessage("start", "*");
}

window.addEventListener("message", function(event) {
if (event.data === "gameOver") {
alert("게임 종료! 당신의 점수가 기록되었습니다.");
}
});
</script>
</body>
</html>

게임 페이지 (game.html):

<!DOCTYPE html>
<html>
<body>
<h1>.awesome 게임</h1>
<div id="gameArea">게임이 곧 시작됩니다...</div>

<script>
window.addEventListener("message", function(event) {
if (event.data === "start") {
document.getElementById('gameArea').innerHTML = "게임이 실행 중!";
// 5초 후 게임 종료 시뮬레이션
setTimeout(function() {
window.parent.postMessage("gameOver", "*");
}, 5000);
}
});
</script>
</body>
</html>

이 예제에서:

주요 페이지에 게임을 시작하는 버튼이 있습니다.
클릭할 때, iframe에 "start" 메시지를 보냅니다.
게임 페이지는 이 메시지를 듣고 게임을 시작합니다.
게임이 끝나면 "gameOver" 메시지를 부모 페이지로 보냅니다.
부모 페이지는 "gameOver" 메시지를 수신하면 알림을 띄웁니다.

예제 2: 창 간 통신

한 페이지에 장바구니가 있고, 다른 페이지에 상품 상세 정보가 있다고 가정해 봅시다. 상품 페이지에서 장바구니에 상품을 추가하고 싶습니다.

상품 페이지 (product.html):

<!DOCTYPE html>
<html>
<body>
<h1>최고의 상품</h1>
<button onclick="addToCart()">장바구니에 추가</button>

<script>
function addToCart() {
window.opener.postMessage({
action: "addToCart",
product: "최고의 상품",
price: 19.99
}, "https://shop.example.com");
}
</script>
</body>
</html>

장바구니 페이지 (cart.html):

<!DOCTYPE html>
<html>
<body>
<h1>장바구니</h1>
<ul id="cartItems"></ul>

<script>
window.addEventListener("message", function(event) {
if (event.origin !== "https://shop.example.com") return;

if (event.data.action === "addToCart") {
var cartList = document.getElementById('cartItems');
var newItem = document.createElement('li');
newItem.textContent = event.data.product + " - $" + event.data.price;
cartList.appendChild(newItem);
}
});
</script>
</body>
</html>

이 시나리오에서:

상품 페이지에 "장바구니에 추가" 버튼이 있습니다.
클릭할 때, 장바구니 페이지(열린 창으로 가정)에 메시지를 보냅니다.
장바구니 페이지는 메시지를 듣고 상품을 장바구니에 추가합니다.

결론

웹 메시징은 상호작용적이고 동적인 웹 애플리케이션을 만들기 위한 무한한 가능성을 열어줍니다. 여러분의 웹 생태계의 다른 부분들이 원활하게 소통할 수 있게 하여 사용자 경험과 기능성을 향상시킵니다.

강력한 기능을 가지고 있지만, 책임감도 함께 가야 합니다! 메시지의 원본을 항상 확인하고, 신뢰할 수 있는 원본에서 오는 메시지만 처리하세요. 행복한 코딩을 기원하며, 여러분의 웹 페이지들이 항상 흥미로운 대화를 나눌 수 있기를 바랍니다!

메서드	설명
`window.postMessage(message, targetOrigin)`	다른 창에 메시지를 보냅니다
`window.addEventListener("message", function(event) { ... })`	들어오는 메시지를 듣습니다
`event.data`	메시지와 함께 전달된 데이터
`event.origin`	보낸 사람의 원본을 나타냅니다
`event.source`	보낸 사람의 창에 대한 참조를 제공합니다

이 표는 우리가 웹 메시징 여정에서 다룬 주요 메서드와 속성을 요약한 것입니다. 여러분이 자신만의 메시징 구현을 실험하기 시작할 때 이를 손쉽게 참조할 수 있도록 유지하세요!

Credits: Image by storyset