[에러] 'a' 이름을 찾을 수 없습니다.

에러 문구

'accessToken' 이름을 찾을 수 없습니다.ts(2304)

위와 같은 에러가 떴다.

문제코드

  useEffect(() => {
    const url = new URL(window.location.href);
    const { href } = url;
    if (!href) return;
    const accessToken = href.split('&')[0].split('=')[1];
    console.log(accessToken);
  }, [navigate]);
  instance.defaults.headers.common.Authorization = `Bearer ${accessToken}`;

참고로 위 코드는 url 내에서 엑세스토큰을 분리하는 코드이다. 자세한 내용은 다른 게시물에서 다룰 예정이다.

해결방안

생각보다 단순한 문제이다. 선언한 변수의 스코프 외에서 해당 변수를 이용한 코드를 작성했기 때문이다. 위 코드를 보았을 때, accessToken을 useEffect 내에서 선언했으나 axios에 저장하는 코드는 useEffect의 스코프 외에서 작성했기 때문에 accessToken 변수를 찾을 수 없다는 에러가 뜬 것이다.

해결 코드

  const navigate = useNavigate();
  useEffect(() => {
    const url = new URL(window.location.href);
    const { href } = url;
    if (!href) return;
    const accessToken = href.split('&')[0].split('=')[1];
    console.log(accessToken);
    instance.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
  }, [navigate]);