스터디 때 협업으로 만들었던 React + Netflix = Retfilx 넷플릭스 UI 클론코딩 프로젝트를
한 달 만에 스스로 배포해보기로 했다.
원래 Github Organization을 사용중이었는데,
여기에 소속된 repo를 Vercel 로 배포해서 유지하려면 pro 요금제를 써야했다....
그래서 github pages로 배포할까 하다가 다른 문제도 생기고 해서 어물쩡 스터디가 끝났다..;
그런 문제가 있었기 때문에 이번에 배포할 때는 team repo를 fork 떠서 개인 repo로 가져온다음 배포를 했다.
위에서 말한 다른 문제는 라우팅 문제였는데
사실 해결하지 못한 상태로 끝난게 너무 아쉬워서 언젠가 저걸 꼭 해결하고 말겠다..! 생각을 했었다.
그래서 배포 전에 이 문제를 해결한 방법을 써보겠다!
🏁 작동 목표 !
토큰이 없을 경우 (= 로그인 X) 인트로 페이지 가 첫 페이지
토큰이 있을 경우 (= 로그인 O) 메인 페이지 가 첫 페이지
📌 그렇다면 구체적으로 어떤 부분들이 문제였는가..?
문제 1
라우팅 설정을 위의 사진처럼 해주고 있었고,
새로고침을 해줘도 아래 사진 처럼 토큰이 있는데도 불구하고 인트로 페이지에서 넘어가지 않았다.
수정 전 useEffect 안에서 토큰을 변수에 저장해주는 코드이다.
이 코드를 분석해보자면,
동작했을 때 저장되어 있던 토큰으로 라우팅을 시켜주어야 하는데,
새로고침을 해도 useEffect 가 실행되어
라우팅 부분으로 넘어가지 못하는 문제 인 것 같았다.
우선 sessionStorage에 있는 토큰을 저장해주는 부분을 위 사진 처럼 수정해주고 나니,
새로고침을 했을 때 드디어 메인페이지가 보였다..!
문제 2
하지만, 여전히 고질적 문제인..
토큰이 있는지 확인 후 메인페이지로 넘어가게 하는 기능은 수동으로 해줘야 된다는 이상한(?) 문제가 있었다.
수동으로 새로고침을 해줘야 한다는 건 결국 리랜더링 을 해주면 해결되는 문제겠다! 라고 생각했고,
이제 리랜더링을 해주기 위한 코드를 어디에 작성해야하는가가 관건이었다.
로그인을 하고나서 새로고침이 필요한 상황 이었기에
로그인에서 navigate로 기본경로로 이동시켜주는 코드 뒤에 리랜더링을 해줬다.
위 코드 처럼 window.location.reload() 를 사용하여 리랜더링을 해주면
로그인 후 메인으로 가는 것을 확인할 수 있다.
gif가 너무 느리지만... 깨지지만...
