ํ๋ก ํธ์๋ ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ํ์ํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฝ ์์ ์ ๊ด๋ฆฌํ์ธ์. ์ํํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ํจ์จ์ ์ด๊ณ ์์ ์ ์ธ ๋ฐฑ๊ทธ๋ผ์ด๋ ํ๋ก์ธ์ค๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ์ธ์.
ํ๋ก ํธ์๋ ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ: ์์ฝ ์์ ๊ด๋ฆฌ ๋ง์คํฐํ๊ธฐ
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์, ๋ฐ์์ฑ์ด ๋ฐ์ด๋๊ณ ์ ๋ขฐํ ์ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ฌ์ฉ์๋ค์ ๋คํธ์ํฌ ์ฐ๊ฒฐ์ด ๊ฐํ์ ์ด๊ฑฐ๋ ๋ถ๊ฐ๋ฅํ ๋์๋ ์ํํ ๊ฒฝํ์ ๊ธฐ๋ํฉ๋๋ค. ํ๋ก ํธ์๋ ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ(Frontend Periodic Background Sync)๋ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ฐ๋ ฅํ ๋๊ตฌ๋ก ๋ฑ์ฅํ์ผ๋ฉฐ, ๊ฐ๋ฐ์๋ค์ด ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์คํ๋๋ ์์ ์ ์์ฝํ์ฌ ๋คํธ์ํฌ ์ํ์ ๊ด๊ณ์์ด ๋ฐ์ดํฐ ์ผ๊ด์ฑ๊ณผ ์ ํ๋ฆฌ์ผ์ด์ ๊ธฐ๋ฅ์ ๋ณด์ฅํ ์ ์๊ฒ ํด์ค๋๋ค.
๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ์ ํ์์ฑ ์ดํดํ๊ธฐ
๊ธฐ์กด ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์ดํฐ ์ ๋ฐ์ดํธ, ์๋ฆผ ์ ์ก, ๋ก์ปฌ ์คํ ๋ฆฌ์ง ๋๊ธฐํ์ ๊ฐ์ ์์ ์ ์ํํ๊ธฐ ์ํด ์ฆ๊ฐ์ ์ธ ๋คํธ์ํฌ ์์ฒญ์ ์์กดํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด ์ ๊ทผ ๋ฐฉ์์ ๋คํธ์ํฌ ์ฐ๊ฒฐ์ด ์ข์ง ์๊ฑฐ๋ ์๋ ์ํฉ์์๋ ๋ฌธ์ ๊ฐ ๋ ์ ์์ต๋๋ค. ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ ์ด๋ฌํ ์์ ๋ค์ ์ง์ฐ์์ผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋น๋๊ธฐ์ ์ผ๋ก ์คํํ ์ ์๋๋ก ํจ์ผ๋ก์จ ํด๊ฒฐ์ฑ ์ ์ ๊ณตํฉ๋๋ค.
๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๊ฐ ๋งค์ฐ ์ ์ฉํ ๋ค์๊ณผ ๊ฐ์ ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํด ๋ณด์ธ์:
- ์์ ๋ฏธ๋์ด ์ฑ: ์ฑ์ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉํ์ง ์์ ๋์๋ ํผ๋๋ฅผ ์๋์ผ๋ก ์๋ก๊ณ ์นจํ๊ณ ์๋ฆผ์ ์ ๋ฌํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ผ๋ณธ์ ์๋ ์ฌ์ฉ์๊ฐ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋ถ์์ ํ๋๋ผ๋ ์ ์ธ๊ณ ์น๊ตฌ๋ ๊ฐ์กฑ์ ์ ๋ฐ์ดํธ์ ๋ํ ์๋ฆผ์ ๋ฐ๋ ๊ฒ์ ์์ํด ๋ณด์ธ์.
- ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ: ์ด๋ฉ์ผ ๊ณ์ ์ ๋๊ธฐํํ์ฌ ์ฌ์ฉ์๊ฐ ์คํ๋ผ์ธ์์๋ ์ต์ ๋ฉ์์ง๋ฅผ ๋ณผ ์ ์๋๋ก ํฉ๋๋ค. ๋นํ ์ค์ ์คํ๋ผ์ธ์ผ๋ก ๋ฐ์ ํธ์งํจ์ ์ ์ํด์ผ ํ๋ ๋น์ฆ๋์ค ์ฌํ๊ฐ์ ์๊ฐํด ๋ณด์ธ์.
- ์ ์ ์๊ฑฐ๋ ํ๋ซํผ: ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ฌ๊ณ ์์ค์ ์ ๋ฐ์ดํธํ๊ณ ์ฃผ๋ฌธ์ ์ฒ๋ฆฌํ์ฌ ์ ํํ ์ฌ๊ณ ์ ๋ณด๋ฅผ ๋ณด์ฅํ๊ณ ์ฃผ๋ฌธ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํฉ๋๋ค. ๊ธ๋ก๋ฒ ์๋งค์ ์ฒด๋ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ฌ์ฉํ์ฌ ์ผ๋ถ ์ง์ญ์ ๋คํธ์ํฌ ์ค๋จ์ด ์๋๋ผ๋ ์ฌ๋ฌ ์ง์ญ์ ๊ฑธ์ณ ์ฌ๊ณ ์ผ๊ด์ฑ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
- ๋ด์ค ์์ง๊ธฐ: ์ต์ ๋ด์ค ๊ธฐ์ฌ๋ฅผ ๊ฐ์ ธ์ ์คํ๋ผ์ธ ์ฝ๊ธฐ๋ฅผ ์ํด ์บ์ํฉ๋๋ค. ์ฌ์ฉ์๋ค์ ์๊ณจ ์ง์ญ๊ณผ ๊ฐ์ด ์ธํฐ๋ท ์ ์์ด ์ ํ๋ ๊ณณ์์๋ ์ ๋ณด๋ฅผ ์ป์ ์ ์์ต๋๋ค.
- ๋ฉ๋ชจ ์ฑ: ์ ๊ธฐ์ ์ผ๋ก ๋ ธํธ๋ฅผ ํด๋ผ์ฐ๋์ ๋ฐฑ์ ํ์ฌ ๋ฐ์ดํฐ ์์ค์ ๋ฐฉ์งํฉ๋๋ค. ์ด๋ ์ค์ํ ์ ๋ณด๋ฅผ ์ํด ์ด๋ฌํ ์ฑ์ ์์กดํ๋ ์ฌ์ฉ์๋ค์๊ฒ ํนํ ์ค์ํฉ๋๋ค.
์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ API ์๊ฐ
์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ API๋ ๊ฐ๋ฐ์๊ฐ ๋ธ๋ผ์ฐ์ ์ ์์ ์ ๋ฑ๋กํ์ฌ ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉํ์ง ์์ ๋์๋ ๋ฐ๋ณต์ ์ธ ๊ฐ๊ฒฉ์ผ๋ก ์คํํ ์ ์๋๋ก ํ๋ ์น ํ์ค์ ๋๋ค. ์ด API๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๋คํธ์ํฌ ์ฌ์ด์ ํ๋ก์ ์ญํ ์ ํ๋ ์๋น์ค ์์ปค(Service Worker)๋ฅผ ํ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋ ์์ ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
API์ ์ฃผ์ ๊ตฌ์ฑ ์์
- ์๋น์ค ์์ปค: ์ฃผ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ค๋ ๋์ ๋ณ๊ฐ๋ก ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์คํ๋๋ ์คํฌ๋ฆฝํธ์ ๋๋ค. ๋คํธ์ํฌ ์์ฒญ์ ๊ฐ๋ก์ฑ๊ณ , ์บ์๋ฅผ ๊ด๋ฆฌํ๋ฉฐ, ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํฉ๋๋ค.
- `registration.periodicSync.register()`: ์ด ๋ฉ์๋๋ ํน์ ํ๊ทธ์ ๊ฐ๊ฒฉ์ผ๋ก ์ฃผ๊ธฐ์ ๋๊ธฐํ ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ํ๊ทธ๋ ํน์ ์์ ์ ์๋ณํ๊ณ , ๊ฐ๊ฒฉ์ ํด๋น ์์ ์ด ์ผ๋ง๋ ์์ฃผ ์คํ๋์ด์ผ ํ๋์ง๋ฅผ ์ ์ํฉ๋๋ค.
- `sync` ์ด๋ฒคํธ: ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฑ๋ก๋ ์์ ์ ์คํํด์ผ ํ๋ค๊ณ ํ๋จํ ๋ ์๋น์ค ์์ปค๋ `sync` ์ด๋ฒคํธ๋ฅผ ์์ ํฉ๋๋ค.
- `periodicSync` ์ด๋ฒคํธ: ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ๋ฑ๋ก์ ์ํด ํน๋ณํ ํธ๋ฆฌ๊ฑฐ๋๋ฉฐ, ์ด๋ฌํ ๋ฐ๋ณต ์์ ์ ์ํ ์ ์ฉ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ๊ตฌํ: ๋จ๊ณ๋ณ ๊ฐ์ด๋
์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ๊ตฌํํ๋ ๊ณผ์ ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1๋จ๊ณ: ์๋น์ค ์์ปค ๋ฑ๋กํ๊ธฐ
๋จผ์ , ๋ฉ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์๋น์ค ์์ปค๋ฅผ ๋ฑ๋กํด์ผ ํฉ๋๋ค:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(error => {
console.error('Service Worker registration failed:', error);
});
}
2๋จ๊ณ: ์ฃผ๊ธฐ์ ๋๊ธฐํ ์ด๋ฒคํธ ๋ฑ๋กํ๊ธฐ
์๋น์ค ์์ปค(sw.js) ๋ด๋ถ์์ ์ฃผ๊ธฐ์ ๋๊ธฐํ ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํฉ๋๋ค:
self.addEventListener('install', event => {
event.waitUntil(self.registration.periodicSync.register('update-data', {
minInterval: 24 * 60 * 60 * 1000, // 24 hours
}).catch(err => console.log('Background Periodic Sync failed', err)));
});
self.addEventListener('periodicsync', event => {
if (event.tag === 'update-data') {
event.waitUntil(updateData());
}
});
์ค๋ช :
- `update-data`: ์ด๊ฒ์ ์ฐ๋ฆฌ์ ์ฃผ๊ธฐ์ ๋๊ธฐํ ์์ ๊ณผ ๊ด๋ จ๋ ํ๊ทธ์ ๋๋ค. ๊ณ ์ ํ ์๋ณ์์ ๋๋ค.
- `minInterval`: ์์ ์ด ์คํ๋์ด์ผ ํ๋ ์ต์ ๊ฐ๊ฒฉ(๋ฐ๋ฆฌ์ด ๋จ์)์ ์ง์ ํฉ๋๋ค. ์ด ์์์๋ 24์๊ฐ์ผ๋ก ์ค์ ๋์ด ์์ต๋๋ค.
- `event.waitUntil()`: `updateData()` ํจ์๊ฐ ์๋ฃ๋ ๋๊น์ง `periodicsync` ์ด๋ฒคํธ์ ์๋ช ์ ์ฐ์ฅํฉ๋๋ค.
3๋จ๊ณ: ๋ฐฑ๊ทธ๋ผ์ด๋ ์์
๊ตฌํํ๊ธฐ (updateData())
updateData() ํจ์๋ ์ค์ ๋ฐฑ๊ทธ๋ผ์ด๋ ์์
์ ์ํํฉ๋๋ค. ์ฌ๊ธฐ์๋ API์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ๋ก์ปฌ ์คํ ๋ฆฌ์ง ์
๋ฐ์ดํธ, ์๋ฆผ ์ ์ก ๋ฑ์ด ํฌํจ๋ ์ ์์ต๋๋ค.
async function updateData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
// Update local storage with the new data
localStorage.setItem('data', JSON.stringify(data));
console.log('Data updated in the background!');
} catch (error) {
console.error('Failed to update data:', error);
// Handle the error gracefully
}
}
์ค์ ๊ณ ๋ ค์ฌํญ:
- ์ค๋ฅ ์ฒ๋ฆฌ: ๋คํธ์ํฌ ์ค๋ฅ๋ API ์คํจ๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๊ธฐ ์ํด ๊ฐ๋ ฅํ ์ค๋ฅ ์ฒ๋ฆฌ ๋ก์ง์ ๊ตฌํํ์ธ์. ์คํจํ ์์ฒญ์ ์ฌ์๋ํ๊ธฐ ์ํด ์ง์์ ๋ฐฑ์คํ(exponential backoff) ์ฌ์ฉ์ ๊ณ ๋ คํ์ธ์.
- ๋ฐ์ดํฐ ๊ด๋ฆฌ: ์คํ ๋ฆฌ์ง ์ ํ์ ์ด๊ณผํ์ง ์๋๋ก ๋ก์ปฌ ์คํ ๋ฆฌ์ง๋ฅผ ์ ์คํ๊ฒ ๊ด๋ฆฌํ์ธ์. ๋ฐ์ดํฐ ์ ๊ฑฐ ๋ฐ ๋ฒ์ ๊ด๋ฆฌ ์ ๋ต์ ๊ตฌํํ์ธ์.
- ๋ฐฐํฐ๋ฆฌ ์๋ช : ๋ฐฐํฐ๋ฆฌ ์๋ชจ์ ์ ์ํ์ธ์. ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ ์ ์ํํ๋ ๊ฒ์ ํผํ์ธ์. ํ์ํ ์ ๋ฐ์ดํธ ๋น๋์ ๋ฐ๋ผ `minInterval`์ ์กฐ์ ํ์ธ์.
๊ถํ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ
์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ ์ฌ์ฉ์ ๊ถํ์ด ํ์ํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฒ์์ผ๋ก ์ฃผ๊ธฐ์ ๋๊ธฐํ ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ๋ ค๊ณ ์๋ํ ๋ ๋ธ๋ผ์ฐ์ ๋ ์ฌ์ฉ์์๊ฒ ๊ถํ์ ๋ถ์ฌํ๋๋ก ์์ฒญํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ํ์๋ก ํ๋์ง์ ๋ํ ๋ช ํํ๊ณ ์ ์ตํ ์ค๋ช ์ ์ฌ์ฉ์๊ฐ ๊ถํ์ ๋ถ์ฌํ ์ํฅ์ ํฌ๊ฒ ๋์ผ ์ ์์ต๋๋ค.
์ฌ์ฉ์ ๊ถํ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก:
- ๋ฌธ๋งฅ์ ๋ง๋ ์ค๋ช : ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ฌ์ฉํ๋ ํน์ ๊ธฐ๋ฅ์ ๋งฅ๋ฝ์์ ๊ทธ ์ด์ ์ ์ค๋ช ํ์ธ์. ์๋ฅผ ๋ค์ด, "ํญ๊ณตํธ ์ํ์ ๋ํ ์ค์๊ฐ ์ ๋ฐ์ดํธ๋ฅผ ๋ฐ์ผ๋ ค๋ฉด ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ํ์ฉํ์ธ์."์ ๊ฐ์ด ์ค๋ช ํฉ๋๋ค.
- ํฌ๋ช ํ ์ํต: ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๊ฐ ์ด๋ป๊ฒ ์ฌ์ฉ๋ ๊ฒ์ด๋ฉฐ ๋ฐฐํฐ๋ฆฌ ์๋ช ๊ณผ ๋ฐ์ดํฐ ์ฌ์ฉ๋์ ์ด๋ค ์ํฅ์ ๋ฏธ์น ์ง์ ๋ํด ์์งํ๊ฒ ์๋ฆฌ์ธ์.
- ์ฌ์ฉ์ ์ ์ด: ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ค์ ์ ํตํด ์ธ์ ๋ ์ง ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ํ์ฑํํ๊ฑฐ๋ ๋นํ์ฑํํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ธ์.
๊ณ ๊ธ ๊ธฐ์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
1. ๋คํธ์ํฌ ์ธ์
๋คํธ์ํฌ ์ํ์ ๋ฐ๋ผ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์์ ์ ์ต์ ํํ์ธ์. `navigator.onLine` ์์ฑ์ ์ฌ์ฉํ์ฌ ์ฅ์น๊ฐ ํ์ฌ ์จ๋ผ์ธ ์ํ์ธ์ง ํ์ธํ์ธ์. ์คํ๋ผ์ธ์ธ ๊ฒฝ์ฐ, ์ฐ๊ฒฐ์ด ๊ฐ๋ฅํด์ง ๋๊น์ง ์์ ์ ์ง์ฐ์ํค์ธ์.
async function updateData() {
if (navigator.onLine) {
try {
// Fetch data from the API
} catch (error) {
// Handle the error
}
} else {
console.log('Device is offline. Data will be updated when online.');
}
}
2. ์กฐ๊ฑด๋ถ ๋๊ธฐํ
๋ถํ์ํ ์ ๋ฐ์ดํธ๋ฅผ ํผํ๊ธฐ ์ํด ์กฐ๊ฑด๋ถ ๋๊ธฐํ๋ฅผ ๊ตฌํํ์ธ์. ์๋ฅผ ๋ค์ด, ๋ง์ง๋ง ๋๊ธฐํ ์ดํ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ์๋ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ฐ์ดํธํ์ธ์. ETag ํค๋๋ ๋ง์ง๋ง ์์ ํ์์คํฌํ๋ฅผ ์ฌ์ฉํ์ฌ ์ ๋ฐ์ดํธ๊ฐ ํ์ํ์ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ์ธ์.
3. ๋ฐฑ๊ทธ๋ผ์ด๋ ํ์น API
๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋์ฉ๋ ํ์ผ์ ๋ค์ด๋ก๋ํด์ผ ํ๋ ๊ฒฝ์ฐ, ๋ฐฑ๊ทธ๋ผ์ด๋ ํ์น API(Background Fetch API) ์ฌ์ฉ์ ๊ณ ๋ คํ์ธ์. ์ด API๋ ํนํ ๋ถ์์ ํ ๋คํธ์ํฌ ํ๊ฒฝ์์ ๋์ฉ๋ ๋ค์ด๋ก๋๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ ๋ ๊ฐ๋ ฅํ๊ณ ์ ๋ขฐํ ์ ์๋ ์๋ฃจ์ ์ ์ ๊ณตํฉ๋๋ค.
4. ํ ์คํธ ๋ฐ ๋๋ฒ๊น
์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ ๋น๋๊ธฐ์ ํน์ฑ ๋๋ฌธ์ ํ ์คํธํ๊ธฐ๊ฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค. Chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์ด๋ฒคํธ๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๊ณ ์๋น์ค ์์ปค์ ์ํ๋ฅผ ๊ฒ์ฌํ์ธ์.
๋๋ฒ๊น ํ:
- Application ํญ: Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์ Application ํญ์ ์ฌ์ฉํ์ฌ ์๋น์ค ์์ปค์ ์ํ, ์บ์ ์คํ ๋ฆฌ์ง, ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ๋ฑ๋ก์ ๊ฒ์ฌํ์ธ์.
- ์๋น์ค ์์ปค ์ฝ์: ์๋น์ค ์์ปค ์ฝ์์ ๋ฉ์์ง๋ฅผ ๊ธฐ๋กํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์์ ์ ์คํ์ ์ถ์ ํ์ธ์.
- ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์๋ฎฌ๋ ์ด์ : Application ํญ์ "Simulate background sync" ์ต์ ์ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์ด๋ฒคํธ๋ฅผ ์๋์ผ๋ก ํธ๋ฆฌ๊ฑฐํ์ธ์.
5. ์์ ์ฐ์ ์์ ์ง์
๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ์ฌ๋ฌ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์์ ์ ์ฐ์ ์์๋ฅผ ์ ํด์ผ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ค์ํ ์ ๋ฐ์ดํธ(๋ณด์ ํจ์น ๋ฑ)๋ ๋ ์ค์ํ ์์ (์๋ก์ด ์ฝํ ์ธ ์ถ์ฒ ๊ฐ์ ธ์ค๊ธฐ ๋ฑ)๋ณด๋ค ์ฐ์ ์๋์ด์ผ ํฉ๋๋ค. ๊ฐ์ฅ ์ค์ํ ์์ ์ด ๋จผ์ ์คํ๋๋๋ก ์ฐ์ ์์๊ฐ ์๋ ์์ ํ๋ฅผ ๊ตฌํํ์ธ์.
๊ธ๋ก๋ฒ ๊ณ ๋ ค์ฌํญ ๋ฐ ํ์งํ
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ๋๋ ํ์งํ์ ์ง์ญ์ ์ฐจ์ด๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ด๋ฌํ ๊ณ ๋ ค์ฌํญ์ด ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ์ ์ด๋ป๊ฒ ์ ์ฉ๋๋์ง๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์๊ฐ๋: ์์ ์ ์์ฝํ ๋ ์๊ฐ๋์ ์ ์ํ์ธ์. ์ผ๊ด ์ ์ฝ ์๊ฐ์ ๋ ๋ค๋ฅธ ์๊ฐ๋ ์ค์ ์ผ๋ก ์ธํ ๋ฌธ์ ๋ฅผ ํผํ๊ธฐ ์ํด UTC ๋๋ ์ ์ฌํ ์๊ฐ ํ์ค์ ์ฌ์ฉํ์ธ์. ์ฌ์ฉ์๊ฐ ์ ๋ฐ์ดํธ ์์ฝ์ ์ํด ์ ํธํ๋ ์๊ฐ๋๋ฅผ ์ค์ ํ ์ ์๋๋ก ํ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ๋ฐ์ดํฐ ์ฌ์ฉ๋: ์ฌ๋ฌ ์ง์ญ์ ๋ฐ์ดํฐ ์๊ธ์ ์ ์ํ์ธ์. ํนํ ๋ฐ์ดํฐ ์๊ธ์ ๊ฐ ์ ํ์ ์ด๊ฑฐ๋ ๋น์ผ ์ฌ์ฉ์๋ฅผ ์ํด ๋์ญํญ ์๋น๋ฅผ ์ต์ํํ๋๋ก ๋ฐ์ดํฐ ์ ์ก์ ์ต์ ํํ์ธ์. ๋ฐ์ดํฐ ์ฌ์ฉ๋์ ์ค์ด๊ฑฐ๋ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์์ ํ ๋นํ์ฑํํ๋ ์ต์ ์ ์ ๊ณตํ์ธ์.
- ์ธ์ด ๋ฐ ๋ฌธํ์ ์ ํธ๋: ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ์ ๊ด๋ จ๋ ๋ชจ๋ ์๋ฆผ์ด๋ ๋ฉ์์ง๊ฐ ์ฌ์ฉ์์ ์ ํธ ์ธ์ด๋ก ํ์งํ๋์๋์ง ํ์ธํ์ธ์. ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋์์ธํ๊ณ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ์ ๋ํด ์ค๋ช ํ ๋ ๋ฌธํ์ ์ฐจ์ด๋ฅผ ๊ณ ๋ คํ์ธ์.
- ๋คํธ์ํฌ ์ธํ๋ผ: ์ ์ธ๊ณ์ ์ผ๋ก ๋คํธ์ํฌ ์ธํ๋ผ๊ฐ ํฌ๊ฒ ๋ค๋ฅด๋ค๋ ์ ์ ์ธ์ํ์ธ์. ์ฌ๋ฌ ์ง์ญ์ ์ผ๋ฐ์ ์ธ ๋คํธ์ํฌ ์ํ์ ๋ฐ๋ผ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์ ๋ต์ ์กฐ์ ํ์ธ์. ์๋ฅผ ๋ค์ด, ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋ถ์์ ํ ์ง์ญ์์๋ `minInterval`์ ๋๋ฆด ์ ์์ต๋๋ค.
- ๊ฐ์ธ์ ๋ณด ๋ณดํธ ๊ท์ : ์ฌ๋ฌ ๊ตญ๊ฐ ๋ฐ ์ง์ญ์ ๋ฐ์ดํฐ ๊ฐ์ธ์ ๋ณด ๋ณดํธ ๊ท์ ์ ์์งํ์ธ์. ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์ฌ์ฉ์ ๋ฐ์ดํฐ๋ฅผ ์์งํ๊ณ ์ฒ๋ฆฌํ ๋ ๋ชจ๋ ๊ด๋ จ ๋ฒ๊ท๋ฅผ ์ค์ํด์ผ ํฉ๋๋ค.
๋ณด์ ๊ณ ๋ ค์ฌํญ
๋ค๋ฅธ ์น API์ ๋ง์ฐฌ๊ฐ์ง๋ก, ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ ๊ฐ๋ฐ์๊ฐ ํด๊ฒฐํด์ผ ํ ์ ์ฌ์ ์ธ ๋ณด์ ์ํ์ ๋ดํฌํ๊ณ ์์ต๋๋ค.
- ๊ต์ฐจ ์ฌ์ดํธ ์คํฌ๋ฆฝํ (XSS): ์ธ๋ถ API์์ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ ๋ ์ฃผ์ํ์ธ์. XSS ์ทจ์ฝ์ ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ์ด๊ท (sanitize) ์ฒ๋ฆฌํ์ธ์.
- ์ค๊ฐ์ ๊ณต๊ฒฉ(Man-in-the-Middle): ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์๋ฒ ๊ฐ์ ํต์ ์ ์ํธํํ๊ธฐ ์ํด HTTPS๋ฅผ ์ฌ์ฉํ์ธ์. ์ด๋ ๋ฏผ๊ฐํ ๋ฐ์ดํฐ๊ฐ ๋์ฒญ ๋ฐ ๋ณ์กฐ๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
- ์๋น์ค ๊ฑฐ๋ถ(DoS) ๊ณต๊ฒฉ: ์๋ฒ ๊ณผ๋ถํ๋ฅผ ์ ๋ฐํ ์ ์๋ DoS ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์๋ ์ ํ ๋ฐ ๊ธฐํ ๋ณด์ ์กฐ์น๋ฅผ ๊ตฌํํ์ธ์.
- ๋ฐ์ดํฐ ์ฃผ์ : ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฌด๊ฒฐ์ฑ์ ์์์ํฌ ์ ์๋ ๋ฐ์ดํฐ ์ฃผ์ ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ชจ๋ ์ฌ์ฉ์ ์ ๋ ฅ์ ๊ฒ์ฆํ๊ณ ์ด๊ท ์ฒ๋ฆฌํ์ธ์.
- ์๋น์ค ์์ปค ๋ณด์: ์๋น์ค ์์ปค๊ฐ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๋์ผํ ์ถ์ฒ(origin)์์ ์ ๊ณต๋๋์ง ํ์ธํ์ธ์. ์ด๋ ์ ์ฑ ์คํฌ๋ฆฝํธ๊ฐ ๋คํธ์ํฌ ์์ฒญ์ ๊ฐ๋ก์ฑ๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋ฐ ํด๋ฆฌํ
๋น๊ต์ ์๋ก์ด ์น ํ์ค์ผ๋ก์, ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์์ ํ ์ง์๋์ง ์์ ์ ์์ต๋๋ค. Can I Use ([https://caniuse.com/](https://caniuse.com/))์ ๊ฐ์ ์น์ฌ์ดํธ์์ ํ์ฌ ๋ธ๋ผ์ฐ์ ํธํ์ฑ ํ๋ฅผ ํ์ธํ์ฌ ์ด๋ค ๋ธ๋ผ์ฐ์ ๊ฐ ์ด API๋ฅผ ์ง์ํ๋์ง ํ์ธํ์ธ์.
๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํด์ผ ํ๋ ๊ฒฝ์ฐ, ํด๋ฆฌํ(polyfill) ์ฌ์ฉ์ ๊ณ ๋ คํ์ธ์. ํด๋ฆฌํ์ ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์ ์ต์ API์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ์ฝ๋ ์กฐ๊ฐ์ ๋๋ค. ๊ธฐ๋ฐ์ด ๋๋ ์๋น์ค ์์ปค ์๊ตฌ์ฌํญ ๋๋ฌธ์ ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ํ ์์ ํ ํด๋ฆฌํ์ ์ด๋ ต์ง๋ง, ํ์ด๋จธ๋ ์น ์์ปค๋ฅผ ์ฌ์ฉํ์ฌ ์ผ์ ํ ๊ฐ๊ฒฉ์ผ๋ก ์์ ์ ์ํํ๋ ๋ฑ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ์ ๋์์ ๋ชจ๋ฐฉํ๋ ๋์์ ์ธ ํด๊ฒฐ์ฑ ์ ๊ตฌํํ ์ ์์ต๋๋ค.
์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ฌ์ฉํ๋ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์์
๋ง์ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ๋ค์ด ์ด๋ฏธ ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ์ ํ์ ํ์ฉํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ณ ์คํ๋ผ์ธ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ ์์ต๋๋ค. ๋ช ๊ฐ์ง ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๊ธ๋ก๋ฒ ๋ด์ค ์ฑ: BBC News ์ฑ์ด๋ CNN ์ฑ๊ณผ ๊ฐ์ ์ฑ๋ค์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ฌ์ฉํ์ฌ ์ต์ ๋ด์ค ๊ธฐ์ฌ๋ฅผ ๊ฐ์ ธ์ ์คํ๋ผ์ธ ์ฝ๊ธฐ๋ฅผ ์ํด ์บ์ํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ค์ ์ฌํ ์ค์ด๊ฑฐ๋ ์ธํฐ๋ท ์ ์์ด ์ ํ๋ ์ง์ญ์์๋ ์ ๋ณด๋ฅผ ์ป์ ์ ์์ต๋๋ค.
- ๊ตญ์ ์ฌํ ์ฑ: TripAdvisor๋ Booking.com๊ณผ ๊ฐ์ ์ฑ๋ค์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ํธํ ๊ฐ๊ฒฉ๊ณผ ์์ฝ ๊ฐ๋ฅ ์ฌ๋ถ๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ค์ ์ฌํ์ ๊ณํํ ๋ ๊ฐ์ฅ ์ต์ ์ ๋ณด๋ฅผ ์ป์ ์ ์์ต๋๋ค.
- ๋ค๊ตญ์ด ํ์ต ์ฑ: Duolingo๋ Babbel๊ณผ ๊ฐ์ ์ฑ๋ค์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ๋ชฉํ ์ธ์ด๋ก ๋ ์๋ก์ด ๊ฐ์์ ์ดํ๋ฅผ ๋ค์ด๋ก๋ํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ค์ ์คํ๋ผ์ธ ์ํ์์๋ ํ์ต์ ๊ณ์ํ ์ ์์ต๋๋ค.
- ๊ธ๋ก๋ฒ ํ์ ๋๊ตฌ: Slack์ด๋ Microsoft Teams์ ๊ฐ์ ์ฑ๋ค์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์๋ฆผ์ ์ ๋ฌํ๊ณ ๋ฉ์์ง ์ค๋ ๋๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ค์ ์ฑ์ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉํ์ง ์์ ๋์๋ ์ฐ๊ฒฐ ์ํ๋ฅผ ์ ์งํ๊ณ ์ ๋ณด๋ฅผ ์ป์ ์ ์์ต๋๋ค.
๊ฒฐ๋ก : ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ก ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐํํ๊ธฐ
ํ๋ก ํธ์๋ ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ์์ฝ๋ ์์ ์ ๊ด๋ฆฌํ๋ ํ์ ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ๋ฐฑ๊ทธ๋ผ์ด๋์์ ์์ ์ ๋น๋๊ธฐ ์คํ์ ๊ฐ๋ฅํ๊ฒ ํจ์ผ๋ก์จ, ๊ฐ๋ฐ์๋ค์ ์ ์ธ๊ณ ์ฌ์ฉ์๋ค์๊ฒ ๋ ๋ฐ์์ฑ์ด ๋ฐ์ด๋๊ณ , ์ ๋ขฐํ ์ ์์ผ๋ฉฐ, ๋งค๋ ฅ์ ์ธ ๊ฒฝํ์ ๋ง๋ค์ด๋ผ ์ ์์ต๋๋ค. API๊ฐ ๊ณ์ ๋ฐ์ ํ๊ณ ๋ธ๋ผ์ฐ์ ์ง์์ด ๊ฐ์ ๋จ์ ๋ฐ๋ผ, ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ ํ๋ ์น ๊ฐ๋ฐ ํดํท์์ ์ ์ ๋ ํ์์ ์ธ ๋๊ตฌ๊ฐ ๋ ๊ฒ์ ๋๋ค. ์ด ๊ฐ๋ ฅํ ๊ธฐ์ ์ ํ์ฉํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด๊ณ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ค์๊ฒ ํ์ํ ๊ฒฝํ์ ์ ๊ณตํ์ธ์.
์ด ๊ฐ์ด๋์์ ์ค๋ช ํ ๋ชจ๋ฒ ์ฌ๋ก, ๋ณด์ ๊ณ ๋ ค์ฌํญ, ๊ธ๋ก๋ฒ ์ํฅ ๋ฑ์ ์ ์คํ๊ฒ ๊ณ ๋ คํจ์ผ๋ก์จ, ์ฃผ๊ธฐ์ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ตฌํํ๊ณ ์ง์ ์ผ๋ก ๊ฒฌ๊ณ ํ๋ฉฐ, ์ ๊ทผ์ฑ ๋๊ณ , ์ ์ธ๊ณ์ ์ผ๋ก ์ ํฉํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค.