ํ๋ก ํธ์๋ ํ๋ ์ ํ ์ด์ API๋ฅผ ํ์ํ์ฌ ๋งค๋๋ฌ์ด ๋ฉํฐ์คํฌ๋ฆฐ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค์ด ๋ณด์ธ์. ์ฌ๋ฌ ๋์คํ๋ ์ด์ ๊ฑธ์ณ ๋ชฐ์ ๊ฐ ์๋ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๊ธฐ ์ํ ๊ฐ๋ , ๊ตฌํ, ๊ทธ๋ฆฌ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐฐ์๋๋ค.
๋ฉํฐ์คํฌ๋ฆฐ ๊ฒฝํ ๊ตฌํํ๊ธฐ: ํ๋ก ํธ์๋ ํ๋ ์ ํ ์ด์ API ์ฌ์ธต ๋ถ์
์ค๋๋ ๊ณผ ๊ฐ์ด ๋ชจ๋ ๊ฒ์ด ์ฐ๊ฒฐ๋ ์ธ์์์ ์ฌ์ฉ์๋ค์ ์ฌ๋ฌ ๊ธฐ๊ธฐ์์ ๋งค๋๋ฌ์ด ๊ฒฝํ์ ๊ธฐ๋ํฉ๋๋ค. ํ๋ก ํธ์๋ ํ๋ ์ ํ ์ด์ API๋ ์น ๊ฐ๋ฐ์๋ค์ด ๋จ์ผ ํ๋ฉด์ ๋์ด ๋งค๋ ฅ์ ์ด๊ณ ํ์ ์ ์ธ ๋ฉํฐ์คํฌ๋ฆฐ ๊ฒฝํ์ ์ ๊ณตํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. ์ด ์ข ํฉ ๊ฐ์ด๋์์๋ ํ๋ ์ ํ ์ด์ API์ ๊ธฐ๋ฅ, ๊ตฌํ ์ธ๋ถ ์ ๋ณด ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ํ์ํ์ฌ ์ฌ๋ฌ ๋์คํ๋ ์ด์ ํ์ ํ์ฉํ๋ ํ์ ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์๋๋ก ๋์ต๋๋ค.
ํ๋ ์ ํ ์ด์ API๋ ๋ฌด์์ธ๊ฐ?
ํ๋ ์ ํ ์ด์ API๋ ์น ํ์ด์ง(ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ)๊ฐ ๋ณด์กฐ ๋์คํ๋ ์ด(ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ)๋ฅผ ๋ฐ๊ฒฌํ๊ณ ์ฐ๊ฒฐํ ์ ์๊ฒ ํด์ฃผ๋ ์น API์ ๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋ค์๊ณผ ๊ฐ์ด ์ฌ๋ฌ ํ๋ฉด์ ์ฝํ ์ธ ๋ฅผ ํ์ํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค:
- ํ๋ ์ ํ ์ด์ : ๋ฐํ์๋ ๋ ธํธ๋ถ์ผ๋ก ๋ ธํธ๋ฅผ ๋ณด๋ฉด์ ํ๋ก์ ํฐ์ ์ฌ๋ผ์ด๋๋ฅผ ํ์ํฉ๋๋ค.
- ๋์งํธ ์ฌ์ด๋์ง: ์ค์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ ์ดํ๋ ๊ณต๊ณต ๋์คํ๋ ์ด์ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ค๋๋ค.
- ๊ฒ์: ํฅ์๋ ๋ชฐ์ ๊ฐ์ด๋ ํ๋ ํ๋ ์ด๋ฅผ ์ํด ๊ฒ์ ํ๋ ์ด๋ฅผ ๋ ๋ฒ์งธ ํ๋ฉด์ผ๋ก ํ์ฅํฉ๋๋ค.
- ์ธํฐ๋ํฐ๋ธ ๋์๋ณด๋: ๊ด์ ์ค์ด๋ ์ฌ๋ฌด์ค ํ๊ฒฝ์ ์ฌ๋ฌ ๋ชจ๋ํฐ์ ๊ฑธ์ณ ์ค์๊ฐ ๋ฐ์ดํฐ์ ์๊ฐํ๋ฅผ ํ์ํฉ๋๋ค.
- ํ์ ์ ํ๋ฆฌ์ผ์ด์ : ์ฌ๋ฌ ์ฌ์ฉ์๊ฐ ๋ณ๋์ ํ๋ฉด์์ ๋์์ ์ฝํ ์ธ ์ ์ํธ ์์ฉํ ์ ์๋๋ก ํฉ๋๋ค.
๋ณธ์ง์ ์ผ๋ก ํ๋ ์ ํ ์ด์ API๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ค๋ฅธ ํ๋ฉด์ผ๋ก ์ฝํ ์ธ ๋ฅผ "๋ฐฉ์ก"ํ ์ ์๊ฒ ํด์ค๋๋ค. ํฌ๋กฌ์บ์คํธ(Chromecast)์ ๋น์ทํ์ง๋ง, ๋ธ๋ผ์ฐ์ ์ ์ง์ ๋ด์ฅ๋์ด ์๊ณ ๊ฐ๋ฐ์๊ฐ ์ ์ดํ ์ ์๋ค๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. ์ด API๋ ์ ์ดํ๋ ์น ํ์ด์ง์ ์ ์๋ ์ฝํ ์ธ ๋ฅผ ๋ ๋๋งํ๋ ํ๋ ์ด์์ ์์ ์น ํ์ด์ง ๊ฐ์ ํต์ ์ ์ฉ์ดํ๊ฒ ํฉ๋๋ค.
์ฃผ์ ๊ฐ๋ ๋ฐ ์ฉ์ด
ํ๋ ์ ํ ์ด์ API๋ก ์์ ํ๋ ค๋ฉด ๋ค์ ๊ฐ๋ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ (Presentation Controller): ํ๋ ์ ํ ์ด์ ์ ์์ํ๊ณ ์ ์ดํ๋ ์น ํ์ด์ง์ ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ํธ ์์ฉํ๋ ๊ธฐ๋ณธ ํ๋ฉด์ ๋๋ค.
- ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ (Presentation Receiver): ๋ณด์กฐ ํ๋ฉด์ ํ์๋๋ ์น ํ์ด์ง์ ๋๋ค. ์ด ํ์ด์ง๋ ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ๋ก๋ถํฐ ์ฝํ ์ธ ๋ฅผ ๋ฐ์ ๋ ๋๋งํฉ๋๋ค.
- ํ๋ ์ ํ ์ด์ ์์ฒญ (Presentation Request): ํน์ URL(ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ)์์ ํ๋ ์ ํ ์ด์ ์ ์์ํ๋ผ๋ ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ์ ์์ฒญ์ ๋๋ค.
- ํ๋ ์ ํ ์ด์ ์ฐ๊ฒฐ (Presentation Connection): ์ฑ๊ณต์ ์ธ ํ๋ ์ ํ ์ด์ ์์ฒญ ํ ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ์ ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ ์ฌ์ด์ ์ค์ ๋ ์๋ฐฉํฅ ํต์ ์ฑ๋์ ๋๋ค.
- ํ๋ ์ ํ ์ด์ ๊ฐ์ฉ์ฑ (Presentation Availability): ํ๋ ์ ํ ์ด์ ๋์คํ๋ ์ด๋ฅผ ์ฌ์ฉํ ์ ์๋์ง ์ฌ๋ถ๋ฅผ ๋ํ๋ ๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ์ ์ด์ ์ฒด์ ์ ์ํด ๊ฒฐ์ ๋ฉ๋๋ค.
ํ๋ ์ ํ ์ด์ API ์๋ ๋ฐฉ์: ๋จ๊ณ๋ณ ๊ฐ์ด๋
ํ๋ ์ ํ ์ด์ API๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉํฐ์คํฌ๋ฆฐ ํ๋ ์ ํ ์ด์ ์ ์ค์ ํ๋ ๊ณผ์ ์ ์ฌ๋ฌ ๋จ๊ณ๋ก ์ด๋ฃจ์ด์ง๋๋ค:
- ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ: ๊ฐ์ฉ์ฑ ๊ฐ์ง: ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ๋ ๋จผ์ `navigator.presentation.defaultRequest` ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ ์ ํ ์ด์ ๋์คํ๋ ์ด๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํ์ง ํ์ธํฉ๋๋ค.
- ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ: ํ๋ ์ ํ ์ด์ ์์ฒญ: ์ปจํธ๋กค๋ฌ๋ ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ ํ์ด์ง์ URL๊ณผ ํจ๊ป `navigator.presentation.defaultRequest.start()`๋ฅผ ํธ์ถํฉ๋๋ค.
- ๋ธ๋ผ์ฐ์ : ์ฌ์ฉ์์๊ฒ ํ์ธ: ๋ธ๋ผ์ฐ์ ๋ ์ฌ์ฉ์์๊ฒ ํ๋ ์ ํ ์ด์ ์ ์ํ ๋์คํ๋ ์ด๋ฅผ ์ ํํ๋ผ๋ ๋ฉ์์ง๋ฅผ ํ์ํฉ๋๋ค.
- ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ: ํ์ด์ง ๋ก๋: ๋ธ๋ผ์ฐ์ ๋ ์ ํ๋ ๋์คํ๋ ์ด์ ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ ํ์ด์ง๋ฅผ ๋ก๋ํฉ๋๋ค.
- ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ: ์ฐ๊ฒฐ ์ค์ : ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ ํ์ด์ง๋ `PresentationConnection` ๊ฐ์ฒด๋ฅผ ํฌํจํ๋ `PresentationConnectionAvailable` ์ด๋ฒคํธ๋ฅผ ์์ ํฉ๋๋ค.
- ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ: ์ฐ๊ฒฐ ์ค์ : ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ๋ ์์ฒด `PresentationConnection` ๊ฐ์ฒด์ ํจ๊ป `PresentationConnectionAvailable` ์ด๋ฒคํธ๋ฅผ ์์ ํฉ๋๋ค.
- ํต์ : ์ด์ ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ์ ์์ ๊ธฐ๋ `PresentationConnection` ๊ฐ์ฒด์ `postMessage()` ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ํต์ ํ ์ ์์ต๋๋ค.
๊ตฌํ ์ธ๋ถ ์ ๋ณด: ์ฝ๋ ์์
๊ฐ๋จํ ํ๋ ์ ํ ์ด์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌํํ๋ ๋ฐ ํ์ํ ์ฝ๋๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ (sender.html)
์ด ํ์ด์ง๋ ์ฌ์ฉ์๊ฐ ํ๋ ์ ํ ์ด์ ๋์คํ๋ ์ด๋ฅผ ์ ํํ๊ณ ์์ ์์๊ฒ ๋ฉ์์ง๋ฅผ ๋ณด๋ผ ์ ์๋๋ก ํฉ๋๋ค.
<!DOCTYPE html>
<html>
<head>
<title>ํ๋ ์ ํ
์ด์
์ปจํธ๋กค๋ฌ</title>
</head>
<body>
<button id="startPresentation">ํ๋ ์ ํ
์ด์
์์</button>
<input type="text" id="messageInput" placeholder="๋ฉ์์ง ์
๋ ฅ">
<button id="sendMessage">๋ฉ์์ง ์ ์ก</button>
<div id="status"></div>
<script>
let connection = null;
const startPresentationButton = document.getElementById('startPresentation');
const messageInput = document.getElementById('messageInput');
const sendMessageButton = document.getElementById('sendMessage');
const statusDiv = document.getElementById('status');
startPresentationButton.addEventListener('click', async () => {
try {
connection = await navigator.presentation.defaultRequest.start('receiver.html');
statusDiv.textContent = 'ํ๋ ์ ํ
์ด์
์ด ์์๋์์ต๋๋ค!';
connection.onmessage = (event) => {
statusDiv.textContent += '\n์์ ๊ธฐ๋ก๋ถํฐ ๋ฐ์: ' + event.data;
};
connection.onclose = () => {
statusDiv.textContent = 'ํ๋ ์ ํ
์ด์
์ด ์ข
๋ฃ๋์์ต๋๋ค.';
connection = null;
};
} catch (error) {
statusDiv.textContent = 'ํ๋ ์ ํ
์ด์
์์ ์ค๋ฅ: ' + error;
}
});
sendMessageButton.addEventListener('click', () => {
if (connection) {
const message = messageInput.value;
connection.postMessage(message);
statusDiv.textContent += '\n์ ์ก๋จ: ' + message;
messageInput.value = '';
} else {
statusDiv.textContent = 'ํ๋ ์ ํ
์ด์
์ฐ๊ฒฐ์ด ์์ต๋๋ค.';
}
});
</script>
</body>
</html>
ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ (receiver.html)
์ด ํ์ด์ง๋ ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ์์ ๋ฐ์ ์ฝํ ์ธ ๋ฅผ ํ์ํฉ๋๋ค.
<!DOCTYPE html>
<html>
<head>
<title>ํ๋ ์ ํ
์ด์
์์ ๊ธฐ</title>
</head>
<body>
<div id="content">์ฝํ
์ธ ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ์ค...</div>
<script>
navigator.presentation.receiver.connectionList.then(list => {
list.connections.forEach(connection => {
handleConnection(connection);
});
list.addEventListener('connectionavailable', event => {
handleConnection(event.connection);
});
});
function handleConnection(connection) {
const contentDiv = document.getElementById('content');
contentDiv.textContent = '์ฐ๊ฒฐ์ด ์ค์ ๋์์ต๋๋ค!';
connection.onmessage = (event) => {
contentDiv.textContent += '\n์์ ๋จ: ' + event.data;
connection.postMessage('์์ ๊ธฐ๊ฐ ๋ฐ์: ' + event.data);
};
connection.onclose = () => {
contentDiv.textContent = '์ฐ๊ฒฐ์ด ์ข
๋ฃ๋์์ต๋๋ค.';
};
}
</script>
</body>
</html>
์ค๋ช :
- sender.html(ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ)์ `navigator.presentation.defaultRequest.start('receiver.html')`๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ ์ ํ ์ด์ ์ ์์ฒญํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ์ฐ๊ฒฐ์ด ์ค์ ๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ๊ณ ๋ฉ์์ง๋ฅผ ๋ณด๋ผ ์ ์๋ ๋ฒํผ์ ์ ๊ณตํฉ๋๋ค.
- receiver.html(ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ)์ `navigator.presentation.receiver.connectionList`๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ด์ค๋ ์ฐ๊ฒฐ์ ์์ ํฉ๋๋ค. ์ฐ๊ฒฐ์ด ์ค์ ๋๋ฉด ๋ฉ์์ง๋ฅผ ์์ ํ๊ณ ํ์ํฉ๋๋ค. ๋ํ ๋ต์ฅ ๋ฉ์์ง๋ฅผ ๋ณด๋ ๋๋ค.
ํ๋ ์ ํ ์ด์ ๊ฐ์ฉ์ฑ ์ฒ๋ฆฌํ๊ธฐ
ํ๋ ์ ํ ์ด์ ์ ์์ํ๊ธฐ ์ ์ ํ๋ ์ ํ ์ด์ ๋์คํ๋ ์ด์ ๊ฐ์ฉ์ฑ์ ํ์ธํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. `navigator.presentation.defaultRequest.getAvailability()` ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ ์ ํ ์ด์ ๋์คํ๋ ์ด๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํ์ง ํ์ธํ ์ ์์ต๋๋ค.
navigator.presentation.defaultRequest.getAvailability()
.then(availability => {
if (availability.value) {
console.log('ํ๋ ์ ํ
์ด์
๋์คํ๋ ์ด๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.');
} else {
console.log('์ฌ์ฉ ๊ฐ๋ฅํ ํ๋ ์ ํ
์ด์
๋์คํ๋ ์ด๊ฐ ์์ต๋๋ค.');
}
availability.addEventListener('change', () => {
if (availability.value) {
console.log('์ด์ ํ๋ ์ ํ
์ด์
๋์คํ๋ ์ด๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.');
} else {
console.log('๋ ์ด์ ํ๋ ์ ํ
์ด์
๋์คํ๋ ์ด๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.');
}
});
})
.catch(error => {
console.error('ํ๋ ์ ํ
์ด์
๊ฐ์ฉ์ฑ ํ์ธ ์ค ์ค๋ฅ ๋ฐ์:', error);
});
์ค๋ฅ ์ฒ๋ฆฌ ๋ฐ ์์ ์ฑ
๋ค๋ฅธ ์น API์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ ์ ํ ์ค๋ฅ ์ฒ๋ฆฌ๋ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ๊ณ ๋ ค ์ฌํญ์ ๋๋ค:
- ์์ธ ์ฒ๋ฆฌ: ์ ์ฌ์ ์ธ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด Presentation API ํธ์ถ์ `try...catch` ๋ธ๋ก์ผ๋ก ๊ฐ์ธ์ญ์์ค.
- ์ฐ๊ฒฐ ๋๊น ์ฒ๋ฆฌ: `PresentationConnection`์ `close` ์ด๋ฒคํธ๋ฅผ ์์ ํ์ฌ ์ฐ๊ฒฐ์ด ๋์ด์ก์ ๋๋ฅผ ๊ฐ์งํ์ญ์์ค. ์ฌ์ฐ๊ฒฐํ๊ฑฐ๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์์ฐ์ค๋ฝ๊ฒ ์ ํํ๋ ๋ฉ์ปค๋์ฆ์ ๊ตฌํํ์ญ์์ค.
- ์ฌ์ฉ์์๊ฒ ์๋ฆผ: ์ฌ์ฉ์์๊ฒ ์ ๋ณด์ฑ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ์ ๊ณตํ์ฌ ๋ฌธ์ ์ ์ ์ค๋ช ํ๊ณ ๊ฐ๋ฅํ ํด๊ฒฐ์ฑ ์ ์ ์ํ์ญ์์ค.
- ์ ์ง์ ์ ํ(Graceful Degradation): ๋ธ๋ผ์ฐ์ ์์ ํ๋ ์ ํ ์ด์ API๋ฅผ ์ง์ํ์ง ์๊ฑฐ๋ ์ฌ์ฉ ๊ฐ๋ฅํ ํ๋ ์ ํ ์ด์ ๋์คํ๋ ์ด๊ฐ ์๋ ๊ฒฝ์ฐ, ๋ฉํฐ์คํฌ๋ฆฐ ๊ธฐ๋ฅ์ด ๋นํ์ฑํ๋๋๋ผ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฌ์ ํ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ฒฝํ์ ์ ๊ณตํ๋๋ก ํ์ญ์์ค.
๋ณด์ ๊ณ ๋ ค ์ฌํญ
ํ๋ ์ ํ ์ด์ API์๋ ์ฌ์ฉ์๋ฅผ ๋ณดํธํ๊ณ ์ ์์ ์ธ ์ฌ์ฉ์ ๋ฐฉ์งํ๊ธฐ ์ํ ๋ณด์ ๊ธฐ๋ฅ์ด ๋ด์ฅ๋์ด ์์ต๋๋ค:
- ์ฌ์ฉ์ ๋์: ๋ธ๋ผ์ฐ์ ๋ ํญ์ ์ฌ์ฉ์์๊ฒ ํ๋ ์ ํ ์ด์ ์ ์ํ ๋์คํ๋ ์ด๋ฅผ ์ ํํ๋๋ก ์์ฒญํ์ฌ ์ฌ์ฉ์๊ฐ ํ๋ ์ ํ ์ด์ ์ ์ธ์งํ๊ณ ์น์ธํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ๊ต์ฐจ ์ถ์ฒ ์ ํ(Cross-Origin Restrictions): ํ๋ ์ ํ ์ด์ API๋ ๊ต์ฐจ ์ถ์ฒ ์ ์ฑ ์ ์ค์ํฉ๋๋ค. ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ์ ์์ ๊ธฐ๋ ๋์ผํ ์ถ์ฒ์์ ์ ๊ณต๋๊ฑฐ๋ ํต์ ์ ์ํด CORS(๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ )๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
- HTTPS ์๊ตฌ ์ฌํญ: ๋ณด์์์ ์ด์ ๋ก ํ๋ ์ ํ ์ด์ API ์ฌ์ฉ์ ์ผ๋ฐ์ ์ผ๋ก ๋ณด์ ์ปจํ ์คํธ(HTTPS)๋ก ์ ํ๋ฉ๋๋ค.
๋ฉํฐ์คํฌ๋ฆฐ ๊ฐ๋ฐ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
๋งค๋ ฅ์ ์ด๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ๋ฉํฐ์คํฌ๋ฆฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ํด์๋์ ๋ง๊ฒ ๋์์ธ: ํ๋ ์ ํ ์ด์ ์์ ๊ธฐ ํ์ด์ง๊ฐ ๋ค์ํ ๋์คํ๋ ์ด ํฌ๊ธฐ ๋ฐ ํด์๋์ ์์ฐ์ค๋ฝ๊ฒ ์ ์ํ๋๋ก ํ์ญ์์ค. ๋ฐ์ํ ๋์์ธ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ฌ๋ฌ ํ๋ฉด์์ ์ผ๊ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋์ญ์์ค.
- ์ฑ๋ฅ ์ต์ ํ: ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ์ ์์ ๊ธฐ ๊ฐ์ ์ ์ก๋๋ ๋ฐ์ดํฐ ์์ ์ต์ํํ์ฌ ํนํ ๋ฎ์ ๋์ญํญ ์ฐ๊ฒฐ์์๋ ์ํํ ์ฑ๋ฅ์ ๋ณด์ฅํ์ญ์์ค. ๋ฐ์ดํฐ ์์ถ ๊ธฐ์ ์ฌ์ฉ์ ๊ณ ๋ คํ์ญ์์ค.
- ๋ช ํํ ์๊ฐ์ ์ ํธ ์ ๊ณต: ์ฌ์ฉ์์๊ฒ ์ด๋ค ํ๋ฉด์ด ๊ธฐ๋ณธ ํ๋ฉด์ด๊ณ ์ด๋ค ํ๋ฉด์ด ๋ณด์กฐ ํ๋ฉด์ธ์ง ๋ช ํํ๊ฒ ํ์ญ์์ค. ์๊ฐ์ ์ ํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ์ฃผ์์ ์ํธ ์์ฉ์ ์ ๋ํ์ญ์์ค.
- ์ ๊ทผ์ฑ ๊ณ ๋ ค: ๋ฉํฐ์คํฌ๋ฆฐ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ๋ ์ ๊ทผ ๊ฐ๋ฅํ๋๋ก ํ์ญ์์ค. ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํ๊ณ , ์ ์ ํ ์์ ๋๋น๋ฅผ ์ฌ์ฉํ๋ฉฐ, ํค๋ณด๋ ํ์์ด ์ง์๋๋์ง ํ์ธํ์ญ์์ค.
- ๋ค์ํ ๊ธฐ๊ธฐ ๋ฐ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธ: ํธํ์ฑ์ ๋ณด์ฅํ๊ณ ์ ์ฌ์ ์ธ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ธฐ ์ํด ๋ค์ํ ๊ธฐ๊ธฐ ๋ฐ ๋ธ๋ผ์ฐ์ ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒ ์ ํ ํ ์คํธํ์ญ์์ค. ํ๋ ์ ํ ์ด์ API๋ ์ฑ์ํ์ง๋ง ๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ๊ตฌํ์ ๋ฏธ๋ฌํ ์ฐจ์ด๋ ์ฌ์ ํ ์กด์ฌํฉ๋๋ค.
- ์ฌ์ฉ์ ์ฌ์ ๊ณ ๋ ค: ์ด๊ธฐ ์ค์ ๋ถํฐ ์ฐ๊ฒฐ ํด์ ๊น์ง ์ ์ฒด ์ฌ์ฉ์ ๊ฒฝํ์ ๊ณ ๋ คํ์ญ์์ค. ์ฌ์ฉ์๊ฐ ๊ณผ์ ์ ๋ฐ๋ผ๊ฐ ์ ์๋๋ก ๋ช ํํ ์ง์นจ๊ณผ ํผ๋๋ฐฑ์ ์ ๊ณตํ์ญ์์ค.
์ค์ ์ฌ๋ก ๋ฐ ์ฌ์ฉ ์ฌ๋ก
ํ๋ ์ ํ ์ด์ API๋ ํ์ ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๊ด๋ฒ์ํ ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์์ ๋๋ค:
- ์ธํฐ๋ํฐ๋ธ ํ์ดํธ๋ณด๋: ์ฌ๋ฌ ์ฌ์ฉ์๊ฐ ๋ํ ํฐ์น์คํฌ๋ฆฐ์ด๋ ํ๋ก์ ํฐ์ ํ์๋ ๊ณต์ ์บ๋ฒ์ค์์ ํ์ ํ ์ ์๋ ์น ๊ธฐ๋ฐ ํ์ดํธ๋ณด๋ ์ ํ๋ฆฌ์ผ์ด์ .
- ์๊ฒฉ ํ์ ๋๊ตฌ: ์๊ฒฉ ํ์ด ์ฌ๋ฌ ํ๋ฉด์์ ์ค์๊ฐ์ผ๋ก ๋ฌธ์๋ ํ๋ ์ ํ ์ด์ ์ ๊ณต์ ํ๊ณ ์ฃผ์์ ๋ฌ ์ ์๋ ๋๊ตฌ.
- ์ปจํผ๋ฐ์ค ๋ฐ ์ด๋ฒคํธ ์ ํ๋ฆฌ์ผ์ด์ : ์ค์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก ์ ์ด๋๋ ์ปจํผ๋ฐ์ค ๋ฐ ์ด๋ฒคํธ์ ๋ํ ํ๋ฉด์ ๋ฐํ์ ์ ๋ณด, ์ผ์ , ์ธํฐ๋ํฐ๋ธ ์ค๋ฌธ ์กฐ์ฌ๋ฅผ ํ์ํฉ๋๋ค.
- ๋ฐ๋ฌผ๊ด ๋ฐ ๊ฐค๋ฌ๋ฆฌ ์ ์: ์ฌ๋ฌ ํ๋ฉด์์ ๋ฐฉ๋ฌธ๊ฐ์ ์ฐธ์ฌ๋ฅผ ์ ๋ํ๊ณ ์ ์๋ ์ ๋ฌผ์ ๋ํ ๊น์ด ์๋ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ๋ ์ธํฐ๋ํฐ๋ธ ์ ์๋ฅผ ๋ง๋ญ๋๋ค. ์ฃผ ํ๋ฉด์ ์ ๋ฌผ์ ๋ณด์ฌ์ฃผ๊ณ ์์ ํ๋ฉด์์ ์ถ๊ฐ์ ์ธ ๋งฅ๋ฝ์ด๋ ์ธํฐ๋ํฐ๋ธ ์์๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ์์ํด ๋ณด์ญ์์ค.
- ๊ต์ค ํ์ต: ๊ต์ฌ๋ ๊ธฐ๋ณธ ํ๋ฉด์ ๊ต์ก์ฉ์ผ๋ก ์ฌ์ฉํ๊ณ ํ์๋ค์ ๊ฐ๋ณ ๊ธฐ๊ธฐ์์ ๋ณด์ถฉ ์ฝํ ์ธ ์ ์ํธ ์์ฉํ๋ฉฐ, ์ด ๋ชจ๋ ๊ฒ์ด ํ๋ ์ ํ ์ด์ API๋ฅผ ํตํด ์กฐ์ ๋ฉ๋๋ค.
๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ๋์
ํ๋ ์ ํ ์ด์ API๋ ์ฃผ๋ก ๊ตฌ๊ธ ํฌ๋กฌ ๋ฐ ๋ง์ดํฌ๋ก์ํํธ ์ฃ์ง์ ๊ฐ์ ํฌ๋ก๋ฏธ์ ๊ธฐ๋ฐ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋ฉ๋๋ค. ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ๋ ๋ถ๋ถ์ ์ด๊ฑฐ๋ ์ง์ํ์ง ์์ ์ ์์ต๋๋ค. ์ต์ ๋ธ๋ผ์ฐ์ ํธํ์ฑ ์ ๋ณด๋ MDN ์น ๋ฌธ์๋ฅผ ํ์ธํ์ญ์์ค.
๋ค์ดํฐ๋ธ ํ๋ ์ ํ ์ด์ API๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํด์ผ ํ๋ ๊ฒฝ์ฐ ๋ค์ ๋์์ ๊ณ ๋ คํ ์ ์์ต๋๋ค:
- ์น์์ผ (WebSockets): ์น์์ผ์ ์ฌ์ฉํ์ฌ ํ๋ ์ ํ ์ด์ ์ปจํธ๋กค๋ฌ์ ์์ ๊ธฐ ๊ฐ์ ์ง์์ ์ธ ์ฐ๊ฒฐ์ ์ค์ ํ๊ณ ํต์ ํ๋กํ ์ฝ์ ์๋์ผ๋ก ๊ด๋ฆฌํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ ๋ง์ ์ฝ๋ฉ์ด ํ์ํ์ง๋ง ๋ ํฐ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค.
- WebRTC: WebRTC(Web Real-Time Communication)๋ P2P ํต์ ์ ์ฌ์ฉ๋ ์ ์์ด ์ค์ ์๋ฒ์ ์์กดํ์ง ์๊ณ ๋ฉํฐ์คํฌ๋ฆฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ WebRTC๋ ์ค์ ํ๊ณ ๊ด๋ฆฌํ๊ธฐ๊ฐ ๋ ๋ณต์กํฉ๋๋ค.
- ์๋ํํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ: ๋ฉํฐ์คํฌ๋ฆฐ ํต์ ๋ฐ ํ๋ ์ ํ ์ด์ ๊ด๋ฆฌ๋ฅผ ์ํ ์ถ์ํ๋ฅผ ์ ๊ณตํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋ ์์ํฌ๋ฅผ ํ์ํด ๋ณด์ญ์์ค.
๋ฉํฐ์คํฌ๋ฆฐ ์น ๊ฐ๋ฐ์ ๋ฏธ๋
ํ๋ก ํธ์๋ ํ๋ ์ ํ ์ด์ API๋ ๋ ํ๋ถํ๊ณ ๋งค๋ ฅ์ ์ธ ๋ฉํฐ์คํฌ๋ฆฐ ์น ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ์ค์ํ ์ง์ ์ ๋ํ๋ ๋๋ค. ๋ธ๋ผ์ฐ์ ์ง์์ด ๊ณ์ ์ฆ๊ฐํ๊ณ ๊ฐ๋ฐ์๋ค์ด ๊ทธ ์ ์ฌ๋ ฅ์ ์ต๋ํ ํ์ํจ์ ๋ฐ๋ผ, ์ฌ๋ฌ ๋์คํ๋ ์ด์ ํ์ ํ์ฉํ๋ ๋์ฑ ํ์ ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณผ ์ ์์ ๊ฒ์ผ๋ก ๊ธฐ๋ํฉ๋๋ค.
๊ฒฐ๋ก
ํ๋ ์ ํ ์ด์ API๋ ์น ๊ฐ๋ฐ์๋ค์ด ๋งค๋๋ฝ๊ณ ๋งค๋ ฅ์ ์ธ ๋ฉํฐ์คํฌ๋ฆฐ ๊ฒฝํ์ ๋ง๋ค ์ ์๋๋ก ํ์ฌ ํ๋ ์ ํ ์ด์ , ํ์ , ๋์งํธ ์ฌ์ด๋์ง ๋ฑ์ ์ํ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค. ์ด ๊ฐ์ด๋์์ ์ค๋ช ํ ํต์ฌ ๊ฐ๋ , ๊ตฌํ ์ธ๋ถ ์ ๋ณด ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ดํดํจ์ผ๋ก์จ ํ๋ ์ ํ ์ด์ API๋ฅผ ํ์ฉํ์ฌ ๋จ์ผ ํ๋ฉด์ ํ๊ณ๋ฅผ ๋์ด์๋ ํ์ ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ด ๊ธฐ์ ์ ๋ฐ์๋ค์ด๊ณ ๋ฉํฐ์คํฌ๋ฆฐ ์น ๊ฐ๋ฐ์ ์ ์ฌ๋ ฅ์ ๋ฐํํ์ญ์์ค!
์ ๊ณต๋ ์ฝ๋ ์์ ๋ฅผ ์คํํ๊ณ ๋ค์ํ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ํ์ํ์ฌ ํ๋ ์ ํ ์ด์ API์ ๋ํ ๋ ๊น์ ์ดํด๋ฅผ ์ป๋ ๊ฒ์ ๊ณ ๋ คํด ๋ณด์ญ์์ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ํธํ์ฑ์ ์ ์งํ๊ณ ๋ฉํฐ์คํฌ๋ฆฐ ์น ๊ฐ๋ฐ์ ์ต์ ๋ฐ์ ์ ํ์ฉํ ์ ์๋๋ก ๋ธ๋ผ์ฐ์ ์ ๋ฐ์ดํธ ๋ฐ ์๋ก์ด ๊ธฐ๋ฅ์ ๋ํ ์ ๋ณด๋ฅผ ๊ณ์ ํ์ธํ์ญ์์ค.