[TIL] 내배캠4기-NextJs-130일차

• url masking
• router.push

router.push

client-side 전환을 할 수 있도록 도와주고 Next/link 대신 사용할 수 있음.

router.push는 라우터 히스토리 스택에 새로운 url을 쌓아줍니다

url 마스킹

query:{uid: 값, displayName: 값}
이동한 페이지의 폴더 구조: profile>[uid].tsx

현재 라우팅으로 넘겨주는 query 값

내가 보여주고 싶은 url: 유저 uid는 길고, 개인정보같아 url에서 숨기고 싶었다.
http://localhost:3000/profile/유저닉네임

현재 표시되는 url: http://localhost:3000/profile/QC4xOhtrK3RlIOFo8wMclfkAckE3?uid=QC4xOhtrK3RlIOFo8wMclfkAckE3&displayName=된다

해결

<Link
  className="flex items-center cursor-pointer"
  href={{
    pathname: `/profile/${userData?.userNickname}`,
    query: {
      id: userData?.userId,
      displayName: userData?.userNickname,
    },
  }}
  as={`/profile/${userData?.userNickname}`}
>

이동후 보여줄 페이지

useEffect(() => {
  if (!router.isReady) return;
  const { id, displayName } = router.query;
  const res = {
    id,
  };
  setIsOwner(res);
  getCurrentUserInfo(id);
}, [router.isReady]);

url에 닉네임만 찍히고, 나머지 정보는 보여주지 않는다. 받아온 router.query로 id값을 파이어베이스 db 조회의 user id로 넘겨주어 데이터도 잘 받아오게 된다.

새로운 문제점

모든게 완벽한줄 알고 깃헙에 바로 푸시했는데, 이동한 페이지에서 refresh를 하게 되면 받아온 데이터를 모두 잃어버리고, 당연히 id값도 undefined가 된다.

생각해보면 회원정보 수정 후에도 문제가 있을 듯한게, 닉네임을 변경하고 마이페이지로 돌아오면 url은 여전히 이전 닉네임을 보여주고 있을 것 같은 것이다.
팀원과 상의하여 이 url 마스킹은 개인 리팩토링으로 빼기로 했다.
돌려 돌려..😇