๐Ÿ“š object๊ฐ€ ์ค‘๋ณต ์ƒ์„ฑ๋˜๋Š” ๋ฌธ์ œ - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

์–ธ์ œ?

  • ๋‚ ์งœ : 2025.05.20
  • ์ข…๋ฅ˜ : ๋ฒ„๊ทธ
  • ์ค‘์š”๋„ : ๐Ÿ”ด

1. ๋ฐœ์ƒ ํ˜„์ƒ

  • ๊ฒŒ์ž„ ํ™”๋ฉด์„ ์„ ํƒํ–ˆ๋‹ค๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ์ƒˆ๋กœ๊ณ ์นจ ํ˜น์€ ๋’ค๋กœ ๊ฐ€๊ธฐ/์•ž์œผ๋กœ ๊ฐ€๊ธฐ(popstate)๋ฅผ ํ•˜๋ฉด,
  • ๊ธฐ์กด์— ์‚ฝ์ž…๋œ <object>๊ฐ€ ์ œ๊ฑฐ๋˜์ง€ ์•Š๊ณ  ์ƒˆ๋กœ ๋˜ ํ•˜๋‚˜๊ฐ€ ์ถ”๊ฐ€๋ผ์„œ ๊ฐ์ฒด๊ฐ€ ๋‘ ๊ฐœ ์ด์ƒ ์Œ“์ž„

2. ์›์ธ ๋ถ„์„

  • pushState โ†’ popstate ๋กœ์ง์—์„œ ๋งค๋ฒˆ ๋ฌด์กฐ๊ฑด ์ƒˆ <object>๋งŒ ์ƒ์„ฑ
  • ์ด์ „์— ์ƒ์„ฑ๋œ <object>๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์ฐธ์กฐ(currentObj)๋ฅผ ๊ด€๋ฆฌํ•˜์ง€ ์•Š์•„, ๊ธฐ์กด DOM์—์„œ ์ œ๊ฑฐ๋˜์ง€ ์•Š๊ณ  ๋‚จ์•„ ๋ฒ„๋ฆผ

3. ๋ฐœ์ƒ ์ฝ”๋“œ

// ๋งค ํด๋ฆญ ์‹œ ๋ฌด์กฐ๊ฑด ์ƒˆ 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 ํ•  ๋• ์ด์ „ ์ฐธ์กฐ๋ฅผ ๋ชจ๋ฅด๋‹ˆ ์ค‘๋ณต ๋ฐœ์ƒ

4. ์ˆ˜์ • ์ฝ”๋“œ

// ๋’ค๋กœ/์•ž์œผ๋กœ ๊ฐ€๊ธฐ ์ฒ˜๋ฆฌ
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๋งŒ ์กฐ์ž‘ โ†’ ์ค‘๋ณต ์ œ๊ฑฐ
โš ๏ธ **GitHub.com Fallback** โš ๏ธ