- ๋ ์ง : 2025.05.20
- ์ข
๋ฅ : ๋ฒ๊ทธ
- ์ค์๋ : ๐ด
- ๊ฒ์ ํ๋ฉด์ ์ ํํ๋ค๊ฐ ๋ธ๋ผ์ฐ์ ์๋ก๊ณ ์นจ ํน์ ๋ค๋ก ๊ฐ๊ธฐ/์์ผ๋ก ๊ฐ๊ธฐ(
popstate
)๋ฅผ ํ๋ฉด,
- ๊ธฐ์กด์ ์ฝ์
๋
<object>
๊ฐ ์ ๊ฑฐ๋์ง ์๊ณ ์๋ก ๋ ํ๋๊ฐ ์ถ๊ฐ๋ผ์ ๊ฐ์ฒด๊ฐ ๋ ๊ฐ ์ด์ ์์
-
pushState
โ popstate
๋ก์ง์์ ๋งค๋ฒ ๋ฌด์กฐ๊ฑด ์ <object>
๋ง ์์ฑ
- ์ด์ ์ ์์ฑ๋
<object>
๋ฅผ ๊ฐ๋ฆฌํค๋ ์ฐธ์กฐ(currentObj
)๋ฅผ ๊ด๋ฆฌํ์ง ์์, ๊ธฐ์กด DOM์์ ์ ๊ฑฐ๋์ง ์๊ณ ๋จ์ ๋ฒ๋ฆผ
// ๋งค ํด๋ฆญ ์ ๋ฌด์กฐ๊ฑด ์ object ์์ฑ
selection.querySelectorAll(':scope > div').forEach(icon => {
icon.addEventListener('click', () => {
history.pushState({ view: 'game', key }, '', `/#${key}`);
gameScreen.innerHTML = ''; // โ ์ด๋ฌ๋ฉด popstate์์ ๊ธฐ์กด์ ๋ชป ์ก์
const obj = document.createElement('object');
obj.data = url;
โฆ
gameScreen.appendChild(obj);
});
});
// popstate์์๋ ๋ฌด์กฐ๊ฑด append
window.addEventListener('popstate', e => {
if (state.view === 'game') {
const obj = document.createElement('object');
โฆ
gameScreen.appendChild(obj);
}
});
-
innerHTML = ''
๋ก ์น ๋ค ์ง์ ์ง๋ง, popstate ๋ก ๋ค์ append ํ ๋ ์ด์ ์ฐธ์กฐ๋ฅผ ๋ชจ๋ฅด๋ ์ค๋ณต ๋ฐ์
// ๋ค๋ก/์์ผ๋ก ๊ฐ๊ธฐ ์ฒ๋ฆฌ
window.addEventListener('popstate', e => {
const state = (e.state as any) || { view: 'menu' };
if (state.view === 'menu') {
if (currentObj) {
currentObj.hidden = true;
currentObj.style.display = 'none';
}
selection.style.display = 'grid';
}
});
-
currentObj.dataset.key
๋ก ์ฌํ์ฉ ์กฐ๊ฑด ๊ฒ์ฌ
- ํ์คํ ๋ฆฌ ๋ณ๊ฒฝ ์์๋
currentObj
๋ง ์กฐ์ โ ์ค๋ณต ์ ๊ฑฐ