0427 오늘의 에러

name : AxiosError 
 

 
 

---

 
리액트 특정 컴포넌트에만  css 변경사항이 적용 안 되는 문제
검색 키워드 : react component style not applying, react component style not updating, 리액트 캐시 초기화 
 

다른데는 적용이 잘 되는데 answer에만 되지 않았다.
그러고보니 answer만 파일 이름이 소문자... 그래서 Answer.tsx로 바꿔봤는데 그때부터 변경사항이 실시간 반영된다ㅎㅎ
 
이게 문제였던건지 아니면 그냥 파일이름을 바꿔줌으로써 뭔가 초기화가 된건진 모르겠다. 
 
컴포넌트 이름이 대문자로 시작해야 한다는 건 알고 있는데, 파일 이름도 그런가? 
 

원래 answer 부분도 밑줄 쳐져있었는데 그게 문제였던걸까
 
-아직 해결 못 함
 

---

 

문제 상황

export const login = async (email: string, password: string) => {
  try {
    await axios
      .post(
        `${URL}/auth/login`,
        {
          data: {
            email,
            password,
          },
        },
        { withCredentials: true }
      )
      .then((res) => console.log(res));
    // const response = await axios({
    //   method: "post",
    //   url: URL + "/auth/login",
    //   data: {
    //     email,
    //     password,
    //   },
    // });

    // return response.data;
  } catch (error) {
    console.log(error);
  }
};

withCredentials를 빼면(주석의 코드로 보내면) 로그인은 되지만 쿠키가 브라우저에 담기지 않는다. 
그래서 withCredentials : true 로 보내보니 
 

이런 오류가 뜬다. 
 

시도

백엔드에게 credentials를 true로 해달라 요청드림
 

---

로그인 해야하는 구역에 로그인이 안 된 유저가 접근하면 -> 모달창 -> 로그인창 이동 -> 로그인 후 보던 페이지로 이동
이렇게 해주고 싶다. 

import { useRouter } from "next/router";
import { useEffect } from "react";
import { useRecoilState, useRecoilValueLoadable } from "recoil";
import { accessTokenState } from "../../../../commons/store/atoms";

export default function useAuth() {
  const router = useRouter();
  const [accessToken] = useRecoilState(accessTokenState);

  console.log(router);
  useEffect(() => {
    localStorage.setItem("prevPage", router.pathname);
    console.log(localStorage.getItem("prevPage"));
  }, []);
}

일단 로컬스토리지에 현재 있는 페이지(로그인 전 페이지)를 저장했다.
 

const handleLoginButton = async () => {
    event?.preventDefault();
    await login(inputs.email, inputs.password)
      .then((data) => {
        setAccessToken(data);
      })
      .then(() => {
        const prevPage = localStorage.getItem("prevPage");
        router.push(prevPage!);
      });
  };

그런데 아무런 일도 일어나지 않았다. 

 useEffect(() => {
    localStorage.setItem("prevPage", router.pathname);
    console.log(localStorage.getItem("prevPage"));

    if (!accessToken) {
      console.log("accessToken없음!", accessToken);
      router.push("/signin");
    }
  }, []);

그럼 설마 작성 페이지->로그인 페이지->(로그인 실패)-> 작성 페이지->로그인 페이지
이렇게 되는건가 해서 console.log에 저렇게 적어봤지만 뜨지 않는다.
 

아니네 뜨네 
 
그래서 지금 로그인이 안 되는구나 싶어서 siginin으로 push하는 코드를 없애자 로그인을 누르면 잘 동작한다!
근데 로그인이 되지 않았는데 왜 then 이후의 일이 일어나는거지? 
 

그것은 코드가 없었기 때문이었다.
내 코드 어디갔지...? 
\

근데 이렇게 떴는데도! 이전 페이지로 이동한다.
 
내가 then을 잘못 알고 있는 걸까? 
 

아하
 

이 안에서 await axios ~ 요청에 대해 성공하면 then으로 간다.
 
그러나

여기선 login이란 함수에서 return(성공이든 실패든)을 받으면 resolved 된거니까 then으로 가는 것이당. 
 

  const handleLoginButton = async () => {
    event?.preventDefault();
    await login(inputs.email, inputs.password).then((data) => {
      console.log(data);
      setAccessToken(data);
    });

    if (accessToken) {
      const prevPage = localStorage.getItem("prevPage") || "/";
      console.log(prevPage);
      router.push(prevPage);
    }
  };

gㅏ우에버 이 코드는 통하지 않았다. 
 
setAccessToken는 비동기적으로 작동하기 때문에...
 
accessToken이 없다고 판단할 수 있다! 
 

  const handleLoginButton = async () => {
    event?.preventDefault();
    const response = await login(inputs.email, inputs.password);

    if (response) {
      const prevPage = localStorage.getItem("prevPage") || "/";

      router.push(prevPage);
    }
  };

그래서 이렇게 코드를 바꿨다. 
 

---

다시 로그인  문제
 

이때까지 액세스토큰이 안 실려서 갔다는 놀라운 사실을 깨달았다.
이제 새로운 게 떴다!
 

Set-Cookie was blocked because its Domain attribute was invalid with regards to the current host url

Set-Cookie was blocked because its Domain attribute was invalid with regards to the current host url

 
도메인에 localhost, localhost:3000 은 안 됨 
아예 도메인을 없애봤는데 그것도 안됨
 
 
 
~ 다음 이 시간에...