404 페이지로 예외처리

여기에 이렇게 내가 만든 게시물이 있다.

이 페이지는 랜덤한 Id값을 테이블에 저장해 클라이언트와 연동하여 Id값을 비교하여 맞는 데이터를 가져오도록 구현되어있다.

 

문제는 게시물을 삭제해도 유저가 삭제하기전 URL을 복사한뒤에 삭제하고 다시 URL을 넣게되면 이미 삭제된 테이블로 인해서 아무런 데이터가 없는 빈 창고로 이동해 아무내용도 없는 가장 기본값인 페이지를 볼 수 있다는것이다.

 

때문에, 404 페이지를 제작하고 예외처리를 통해서 Id값이 동일하지 않을시에 404페이지로 이동하게끔 하였다.

아직 배포를 하기전이기에 현재의 URL은 다음과 같다.

(http://localhost:5173/pages/post.html?id=7a02551f-c0ac-4051-a13f-86de3b59b088)

 

하지만 지금 위사진의 페이지를 삭제하게되면 테이블에서 ID 값도 함께 사라지므로 아예 없는 데이터가 되게된다.

위의 사진과 같이 회고록 데이터에서 삭제가 되어서 빈 상태가 되게된다 이때 이전 URL을 붙여넣어서 접근할 경우 예외처리를 진행해야 한다.

 

이렇게 404 페이지로 이동하며 목록으로 돌아가기를 누르면 홈으로 돌아가지도록 구현했다.

 

이를 구현하기 위해서 생각의 흐름

1. DB에서 유일한 키값이 있어야한다.

2. 유일한 키값이 없다면 404페이지로 이동하도록 해야한다.

3. 기존에 존재하는 함수에 녹여내야한다.

4. Id 값이 없더라도 404페이지로 이동시켜야한다.

 

이렇게 생각해 낸 키 값은 랜덤하며 동시에 유일한 값을 갖는 기본키인 Id로 정했고, 시스템에서 Id 값을 받아와 만약 Id 값이 없는 테이블의 값이라면 404로 이동하도록 로직을 구현했다.

 

또한, Id 값이 없는 포스트의 html은 보여줄수 없기에 id와 관련된 내용 자체가 없다면 접근할 수 없도록 하였다.

 

또한, 기존 로직에 최대한 녹여내기 위해서 페이지를 로드하는 시작점에서 예외값 처리를 진행했다.

postLoad.js의 일부분
if (!postId){
    blockAccess();
    return;
  }
  if (error || !data) {
    blockAccess();
    return;
  }
  
  
  404.js
  export function blockAccess(){
  window.location.replace("/pages/404.html");
}

여기서 postId값은 URLSearchParams를 사용하여 id라는 데이터 자체를 가져오기로 하였다.

만약 여기서 id라는 텍스트가 없다면 404 페이지로 날려버린다.

 

또한, Id라는 텍스트가 있더라도 곧바로 supabase에서 data가 있는지를 확인한다. 만약 없다면 404페이지로 이동되도록 한다.

---

정리

삭제된 게시물 접근 시 404 페이지 처리 구현

현재 게시물 상세 페이지는 랜덤하면서도 유일한 ID 값을 기준으로 Supabase 테이블과 연동되어 있다.
클라이언트는 URL의 id 파라미터를 기준으로 해당 ID와 일치하는 게시물 데이터를 조회하여 화면에 렌더링한다.

 

---

문제 상황

게시물을 삭제한 이후에도,
사용자가 삭제 이전에 복사해 둔 URL로 다시 접근할 경우 문제가 발생

• 테이블에서는 이미 해당 ID의 데이터가 삭제됨
• Supabase 조회 결과 data = null
• 하지만 페이지 자체는 로드되며
  → 아무 내용도 없는 빈 게시물 페이지가 노출됨

이는 사용자 경험 측면에서 올바르지 않다고 판단했다.

---

해결 방향

삭제된 게시물 혹은 잘못된 접근에 대해서는
명확하게 “존재하지 않는 페이지”임을 알려야 한다고 생각했다.

따라서 다음과 같은 목표를 세웠다.

1. DB에서 유일한 키 값이 필요하다
2. 해당 키 값이 존재하지 않으면 404 페이지로 이동한다
3. 기존 로직을 최대한 유지한 상태로 구현한다
4. ID 파라미터 자체가 없는 경우도 차단한다

---

흐름 요약

1. URLSearchParams로 id 값 추출
2. id가 없으면 즉시 404 페이지로 이동
3. Supabase에서 해당 id로 데이터 조회
4. 조회 결과가 없으면 404 페이지로 이동
5. 정상 데이터일 경우에만 게시물 렌더링