선세!! 질문있어요 리액트 쿼리 리액트리코일 ..

[정중식]

선세!! 질문있어요 리액트 쿼리 리액트리코일 그리고 리액트 쿠키!!!!!!!!!  헉헉헉,..
리액트 리덕스(+툴킷), 리액트 쿼리와 리액트 리코일의 장단점을 다 고려해서 
제 프로젝트에 리액트 쿼리와 리액트 리코일을 넣으려고합니다.

1. 근데 굳이 리액트 쿼리와 리액트 리코일을 같이 넣어줘야하나? 싶은 생각이 강하게드는데요 선생님 생각은어떤가요?

데이터파싱 기능이있는 리액트쿼리는 음.. 게시글을 불러올때 쓰면 좋을거같은데
리액트 리코일로도 게시글 불러오는건 충분히가능한데.. 왠지 겹치는거같아서요

그리고
2.  리액트 쿠키 질문있습니다.

서버쪽에서 이런식으로 
  res.cookie('access_token', token, {
          httpOnly: true, // JavaScript로 쿠키에 접근하지 못하도록 설정
          secure: false, // HTTPS 프로토콜에서만 쿠키를 전송하도록 설정(true), 지금은 잠시 false로 해줌
          maxAge: 3600000, // 쿠키 만료 시간 설정 (1시간)
        });

쿠키를 전송합니다.

근데 저는 프론트에서도 쿠키로 사용자를 확인하고싶어서 간단하게 만질수있게 리액트-쿠키 라이브러리를 사용했는데요

이런식으로 프론트에서  쿠키를 저장해줍니다

  const [cookies, setCookie, removeCookie] = useCookies();

  if (data.success === true) {
      // 회원가입 성공 시 쿠키에 사용자 정보 저장

        setCookie('rememberText', data.token, {
          path: '/',
          expires: new Date(Date.now() + 3600000),
        });

}

그리고 f12 쿠키 확인해보면
이런식으로 쿠키가 두개 띠용있어요.
하나는 서버에서 전송해준거고 하나는 프론트가 만든건데..
그러면 서버쪽에서 전송해주는 쿠키 값을  삭제해줄까요?
이런경우 어떻게해줘야하나요?

[codingapple]

취업용이면 리덕스 리액트쿼리씁시다 리액트쿼리로 가져오는 데이터는 state공유가 별로 필요없긴합니다
서버에서 보낸 쿠키를 써야 로그인이 잘 되지않을까요

[정중식]

선생님 추가 질문있습니다.

서버에서 회원가입이나 로그인시 쿠키에 토큰을 받아넘기는데 httponly설정때문에 클라이언트에서 서버쪽에서 받은 쿠키를 못건드립니다.

이럴땐 어떻게 사용자인증처리를 클라이언트에서 해주나요?

f12눌러서 쿠키탭확인해보면 서버쪽에서 전달받은 쿠키는 있습니다.

문제는 로그인 유지랑 게시글쓰기 뭐 사용자인증등등인데..

// api.js
import axios from 'axios';

const api = axios.create({
  timeout: 3000,
  baseURL: '/api',
});

api.interceptors.request.use(
  (config) => {
    const token = document.cookie
      ? document.cookie.trim().slice('access_token='.length)
      : null;
  
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    return config;
  },
  (error) => Promise.reject(error)
);

export { api };

지금 제 코드에서 token이게 먹통입니다 document.cookie가 안되서요..ㅠㅠ 

로컬스토리지에 토큰값을 담아서 사용하는 방법이 가장 베스트인가요?

추가로 이런방법도 한번 써봤는데요

회원가입이나 로그인 코드창에서

      if (data.success === true) {
   
        document.cookie = `access_token=${data.token}`;

}

이렇게 해줬었습니다. 근데 이러면 어쨋든 서버쪽에서 쿠키를 전송해주는게아니라 클라이언트에서 쿠키를 다시 설정해주는거라서 
말짱도루묵인거같아서요..

도와주세요 ㅠㅠㅠ

[codingapple]

직접 쿠키에있는거 추출하기보다는 
서버가 로그인여부랑 유저이름같은거 함께 보내주면 state에 저장해두고 씁시다

[정중식]

제가 착각하고있었네요.

돌고돌아 일단 이 프로젝트에서는 로컬스토리지를 사용하기로했습니다. (쿠키사용하려면 백엔드 다시 갈아엎어야해서요..)

선생님 혹시 useSelector 타입설정은 어떤식으로해줘야하나요? 선생님 타입스크립트 강의를 보고 RootState 타입 설정해줬는데

  const { user } = useSelector((state: RootState) => state.auth);

여기까지는 잘되는데 이 user을 다른 하위컴포넌트로 보낼때 문제가발생합니다.

cosnt MobileHeader = ({ user }: any) => { }

그래서 일단 이렇게 any로 줬습니다.
타입을 제대로 명시해주고싶은데 어떡해야할까요?

{_id: '64c8f3a0054c29af260063fc', username: '정중식', email: 'wndtlr1024@gmail.com', date: '2023-08-01T11:59:28.894Z', __v: 0}
date: "2023-08-01T11:59:28.894Z"
email: "wndtlr1024@gmail.com"
username: "정중식"
__v: 0
_id: "64c8f3a0054c29af260063fc"

}

user안에는 이런 목록이들어가있습니다. 

[codingapple]

자식컴포넌트에서 useSelector 또 쓰면 되는데 굳이 복잡하게 props전송은 안하는게 좋아보입니다

[글쓴이]

글