Incognito Mode란? (+Next.js에서 query 값이 아직 없을 때)

Incognito Mode(인코그니토 모드)

Incognito Mode란?

• =프라이빗 브라우징
• 사용자들이 원치 않는 쿠키가 저장되는 일이나, 온라인 추적이 이뤄지는 것을 걱정치 않고 인터넷 서핑을 할 수 있도록 해주는 기술
• 크롬의 경우 '시크릿 브라우징(시크릿 모드)' 기능이 이것이다!

 

크롬 시크릿 모드 사용하기

오른쪽 상단에 더보기 > 새 시크릿 창 클릭

 

크롬 시크릿 모드에서 userRouter()에 접근하기

• 코드

import { useRouter } from "next/router";

export default function Detail() {
  const router = useRouter();
  const [title, id] = router.query.params;

  return (
    <div> 
      <h4>{title}</h4>
    </div>
  );
}

에러가 발생한다. 왜냐하면 Next.js로 만든 해당 페이지는 SSR로 동작하기 때문에 백엔드에서 pre-render되기 때문이다.

server에서 미리 렌더링되는데, router.query.params는 서버에서 없다. 정확히 말하면 아직 배열이 아니다.

그래서 서버에서 값이 없을 경우를 고려해서 빈 배열로 정의를 해주어야 한다.

const [title, id] = router.query.params || [];

그러면 에러가 발생하지 않는다!