DO MY BEST

프론트앤드 입장에서 내가 로그인 했다는 사실을 어떻게 알 것인가?

보통 로그인이 성공하면 내 정보를 서버에서 갖다준다. 그 정보가 밑의 그림과 같다. 로그인을 하면 이 데이터를 프론트에서 갖고있다가 로그아웃이 되면 버린다.

이 데이터를 저장하려면 Redux가 필요하다. 이 때 state에서 저장하면 되지 않냐는 질문이 나올 수 있다. 

그러나 “state에서는 하나의 component에서만(로그인 컴포넌트에서만) 저장이 된다.” 이렇게 되면 다른 컴포넌트에서 로그인 되었다는 사실을 모르게 되어서 정상적인 웹페이지가 안된다. 

그래서 컴포넌트를 넘나들면서 로그인되었다는 데이터를 갖고 있어야 한다. 이것을 하기 위해서 Redux가 필요하지만, 대안으로 context api, swr이 있다.

※ 쿠키는 항상 백앤드에서 생성을 해준다. 그래서 프론트앤드가 기억을 하게끔 만들어주고 프론트앤드에서 한번 기억한 쿠키를 매 요청마다 백앤드로 보내준다.

Revalidate

서버로 요청을 보내서 데이터를 다시 가져오는것

예)

const {data, error, revalidate} = useSWR('http://localhost:3095/api/users', fetcher);

axios
    .post(
      …
    )
    .then(() => {
        revalidate();
    })
    .catch((error) => {
        …
    });

💡 revalidate는 서버에 요청을 보내서 데이터를 가져오는 것이다. 그리고 data에 그 정보를 넣는다. 그 컴포넌트가 실행 될 때는 data는 false가 되면서 null이 된다. 데이터 수정 후 바로 서버에 revalidate 요청을 보내면 된다.

Mutate

서버에 요청을 안보내고 데이터를 수정하는 것

예)

const {data, error, mutate} = useSWR('http://localhost:3095/api/users', fetcher);

axios
    .post(
      …
    )
    .then((response :AxiosResponse<any>) => {
        mutate(response.data, false);
    })
    .catch((error) => {
        …
    });

로그인을 하면 응답이 오고, 그 응답의 데이터인 response.data에 내 정보가 들어있다. 

이 정보를 mutate(response.data, false)로 data에 넣어버린다. 이렇게 되면 요청을 안보내도 된다. 

두 번째 매개변수에 false는 무엇을 의미하냐면 mutate가 데이터를 수정했다가 나중에는 데이터가 정말로 이렇게 바뀐게 맞는지 서버에 점검하는데, 

그것이 shouldRevalidate라는 것이다. default값이 true인데 false로 설정해두면 서버요청을 안한다.

Optimistic UI  -  페이스북을 예로 들면 좋아요 눌렀을 때 바로 좋아요가 반영되어 보이는 기능

• 먼저 성공한다고 생각하고 먼저 수정한 데이터와 서버에 있는 데이터가 일치하는지 점검을 하는 것 (만약 실패했으면 서버에 있는 데이터 그대로 반영) 

※ shouldRevalidate: true 여야지만 Optimistic UI가 가능하다.

Pessimistic UI

• 먼저 실패한다고 생각하고 무조건 서버 요청을 보낸다음 요청 성공을 했으면 데이터 수정을 하는 것

※ 아무 설정 없이 기본적으로 Pessimistic UI 이다.

a

<a href="/login">로그인 하러가기</a>

 📌  새로고침 되어버린다. 화면 깜빡임 발생함.

Link

<Link to="/login">로그인 하러가기</Link>

 📌   화면만 바꿔주므로 싱글페이지 어플리케이션에 용이하므로 대체방안으로 사용할 수 있다. 화면 깜빡임 발생 하지 않음.