3일 차

yoon Y·2021년 9월 13일
0
post-custom-banner

popState이벤트로 url앞 뒤 이동을 구현했는데 많은 버그가 생겼다.

현재 보여지는 페이지를 목록에서 삭제 할 시 어떤 화면을 보여줘야 하는가?

  • history.back()을 이용해 바로 전 페이지로 이동

현재 페이지 삭제 전에 바로 전 페이지를 먼저 삭제해 404에러가 날 경우?

  • 존재하는 url까지 history.back()반복
    → 반복문을 돌려야한다.
  • 첫 포스팅으로 이동
    → 서버에서 전체 목록을 불러와서 첫번째 페이지 데이터를 불러와야한다.
  • 루트 페이지로 이동
    → 에러 처리로 에러가 날 시 루트 페이지로 가게 한다.

가장 간편한 3번째 방법으로 처리했다.

catch (e) {
    push('/'); // 없는 페이지일 경우 url을 바꾸고 routing
  }

root url로 들어올 때 편집 화면에는 어떤 것을 보여줘야 하는가?(페이지 선택 전)

  • 저장된 데이터가 없을 경우
    : 사용 안내 텍스트가 적혀있는 화면을 보여줌
  • 저장된 데이터가 있을 경우
    : 페이지를 새롭게 생성하는 화면을 보여줌

이 경우 서버에서 전체 목록 데이터를 불러와서 데이터 유무를 따진 후 각각의 경우를 처리해야했다.

리스트를 다 삭제했을 경우 화면에는 어떤 것을 보여줘야 하는가?

  • 사용 안내 텍스트가 적혀있는 화면을 보여줌

이 경우 목록을 다 삭제한 후 새로 고침을 해야만 사용 안내 화면이 보여졌다.
삭제 할 때마다 이전 url로 바뀔 뿐 routing이 되는 것이 아니기 때문이었다.



여러 경우를 다 생각하고 각각을 다르게 처리하려고 했어서 너무 복잡하고 구현하기 어려웠다. 결국 기존 페이지들이 없거나 선택되지 않았을 때는 페이지를 새롭게 생성하는 화면을 보여주는 것으로 통일했다.
profile
#프론트엔드
post-custom-banner

0개의 댓글