NEXT.js beforeunload 사용에 대한 질문입니다.

Question

안녕하세요. 현재 next.js 13버전에서 javascript (typescript strict mode 끄고 사용)를 사용해서 스포티파이 클론코딩을 진행 중에 있습니다. 플레이리스트를 수정하는 기능을 구현 중에 있고,firestore (firebase)를 db로 사용하고 있습니다.플레이리스트 내에서 사진처럼 곡을 검색한 후 '추가하기'로 곡 추가가 가능한데요.사용자가 추가할 때마다 firestore에 업데이트 요청을 보내면 요청수가 너무 많을 것 같아 페이지를 벗어나거나, 새로고침 할 때 업데이트 할 수 있도록 로직을 짜고 있습니다.NEXT.js에서 useRouter를 사용해 router.events.on을 사용하려 했으나 이는 페이지라우팅 방식에만 지원되고제가 사용 중인 앱라우팅 방식에는 사용이 불가하더라구요.그래서 web api를 사용해 window의 beforeunload 이벤트를 처리하는 동작으로 코드를 아래와 같이 작성하였습니다.... async function updatePlaylist({ playlistInfo, playlistTracks, slug }) { console.log('updated') try { const playlistData = doc(firebaseDB, 'myPlaylists', `${slug}`) await updateDoc(playlistData, { ...playlistInfo, tracks: playlistTracks, }) } catch (e) { console.log('Error updating current playlist', e) } } export function PlaylistProvider({ children, playlistSlug }) { const [playlistTracks, setPlaylistTracks] = useState([]) const [playlistInfo, setPlaylistInfo] = useState({ author: '', coverImg: '', title: '' }) //이 부분에서 이벤트 리슨 window.addEventListener('beforeunload', () => { updatePlaylist({ playlistInfo: playlistInfo, playlistTracks: playlistTracks, slug: playlistSlug }) }) useEffect(() => { console.log('rendered') async function getCurrentPlaylist() { try { const playlistData = (await getDoc(doc(firebaseDB, 'myPlaylists', `${playlistSlug}`))).data() setPlaylistTracks(playlistData?.tracks) // setPlaylistInfo({ author: playlistData?.author, coverImg: playlistData?.coverImg, title: playlistData?.title }) console.log('playlist set done') } catch (e) { console.log('Error getting current playlist') } } getCurrentPlaylist() }, []) ... 이 Provider가 page.tsx에서 컴포넌트들을 감싸고 있습니다.firestore에서 해당하는 플레이리스트의 문서를 slug로 넘겨주어 url을 playlist/문서명 이런식으로 동적으로 페이지를 할당합니다.정상 작동을 하지만 새로고침할 때만 업로드가 되고 뒤로가기, 다른 url로 라우팅했을 때 업데이트가 되지 않습니다.beforeunload라면 새로고침 이외에도 뒤로가기, 앞으로가기, 다른 url로 라우팅 모두 포함되는 걸로 아는데왜 새로고침할 때만 적용되는 걸까요?next.13에 대한 정보가 별로 없어서 삽질만 계속하다가 질문한번 올려봅니다..

Hee Sung Son · Answer

제생각에는 동적 라우트이기 때문이라고 생각됩니다. 한번 다른 url을 수동으로 복사하신후에 붙여넣어보세요. 그러면 잘 작동할 것입니다. 그렇다면 현재 방식으로는 전부 커버가 불가능함으로 다른방법을 써야 하는데요.제가 제안드리는 방법은 현행의 beforeunload 에 작동되는 로직과 layout 파일에 useEffect로 경로가 바뀔때마다 업데이트 하는 식으로 하는게 어떨까요?

NEXT.js beforeunload 사용에 대한 질문입니다.

1개의 답변

기술 목록