삭제 후 홈으로 돌아가는 코드 관련 질문

프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)

delete로 글 삭제하기

해결된 질문

작성

안녕하세요, "delete로 글 삭제하기" 강의를 듣던 중 궁금한 점이 생겨 질문드립니다.

삭제 후 다시 supabase에서 글 목록을 조회하고, 조회한 글들로 홈 화면의 게시글 목록을 구성하기 위해 goto 대신 location.reload() 함수를 사용하신 내용을 이해했는데요,

홈 화면에서 삭제하는 경우가 아닌 글 조회 후 /read/{diary_id} 경로에서 삭제 버튼을 누르게 되면 해당 경로에서 reload가 되기 때문에 문제가 발생하지 않나요?

따라서 말씀하신 location.reload() 대신 location.href = '/' 만 사용할 수 있는것이 아닌지 여쭤봅니다,

감사합니다!

svelte sveltekit supabase

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. antk7894님.

삭제 후 페이지 경로 문제에 대한 질문을 해주셨네요. 강의에서 언급된 location.reload()와 goto 사용에 대해 혼란스러우신 것 같습니다.

location.reload()는 현재 페이지를 새로고침하는 함수로, 사용 시 현재 보고 있는 페이지의 데이터를 갱신할 수 있습니다. 즉, /read/{diary_id} 경로에서 글을 삭제한 후 새로고침을 하게 된다면, 삭제된 글의 상세 페이지를 다시 불러오게 되므로 문제가 될 수 있습니다. 따라서, 모든 경로에서 적용하기에는 적절하지 않을 수 있습니다.

반면에 location.href = '/'는 루트 경로로 직접 이동하도록 해주는 코드입니다. 따라서 글을 삭제한 후 특정 페이지(예: 홈 화면)로 사용자 경로를 변경하고 싶다면 이 방법이 더 적합할 수 있습니다.

적절한 것은 상황에 따라 다르겠지만, 일반적으로 삭제 후 홈 화면으로 돌아가고자 한다면 location.href = '/'를 쓰는 것이 논리적으로 명확할 수 있습니다.

관련하여 더 많은 예제를 원하신다면, 아래의 답변도 참고하실 수 있습니다:

리다이렉트와 새로고침의 차이

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Michael Kwon

지식공유자

네, 맞습니다!

글 삭제 후 해당 글이 없어지면 edit 페이지를 찾을 수 없어서 에러가 발생하는게 맞습니다. 삭제 후에는 home 페이지로 리다이렉트 해야 합니다. 삭제 작업이 완료된 후 home으로 이동하도록 하면 문제를 방지할 수 있습니다.

버튼 컴포넌트에서 현재 페이지 새로고침(reload)이 아닌 goto('/')로 홈(글목록)으로 이동시켜 주세요. 그럼 500에러는 사라질 겁니다.

참고로 goto는 svelte 라우터 함수이고 말씀하신 location.href = '/' 를 써도 됩니다.

  <button 
    class="btn" 
    on:click={
      async () => {
        await deleteDiary(diary.id); 
        goto('/'); // 삭제 후 홈 이동
        // location.reload(); // 페이지 새로고침
      }
    }
  >

수강생 분과 소통하니 강의가 더욱 흥미로워 지네요!

감사드립니다~

인프런 커뮤니티 질문&답변

삭제 후 홈으로 돌아가는 코드 관련 질문