inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next + React Query로 SNS 서비스 만들기

개인 팀프로젝트 중에 NextJS + react-query 관련 궁금증입니다.

해결된 질문

304

달지

작성한 질문수 2

0

먼저 강의와 상관없는 질문 죄송합니다.

Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다.

이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다.

getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다.

서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다.

로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데,

서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다.

모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다.

이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.

react next.js react-query next-auth msw

답변 1

1

제로초(조현영)

리액트 쿼리가 넥스트 서버에서 로컬스토리지를 읽었을 것 같지는 않은데요. 못 읽는 게 맞고요. 네트워크 탭에서 첫 페이지 html 확인해보세요.

0

달지

헉 늦은시간 답변 감사합니다!

몇개월 전 프로젝트이고 현재 서버 배포가 중단되어 확인하려면 코드를 일부 수정해야하는 상황이라 나중에 한번 확인해보겠습니다ㅠㅠ

로컬 스토리지가 아니라 쿠키에 저장하긴 하였는데, 클라이언트에서 쿠키를 저장하고 읽는 방식으로 구현하였습니다.
(정확히는 잘 모르겠지만 원래는 서버에서 httpOnly 쿠키를 세팅하는 것이라고 들었습니다.)
쿠키도 읽지 못하는 것이 맞는거죠..? 그렇다면 어떻게 토큰을 읽어서 통신했을지 정말 의문이네요...

1

제로초(조현영)

아뇨 쿠키는 읽을 수 있습니다. 브라우저가 쿠키를 자동으로 넥스트 서버로 보냅니다.

0

달지

앗 그렇군요!

그럼 쿠키에 저장해서 읽을 수 있었나 봅니다..

분명 getServerSideProps 내에서 쿠키에 저장된 토큰을 못읽어서 React Query 도입을 시도했던거 같은데 빠른 시일 내에 프로젝트를 다시 실행해보겠습니다,,

당시 문제 해결을 위해 여러 방법을 동시에 시도해서 무엇 때문에 해결되었는지 정리가 잘 안되었네요 ㅜ

도움주셔서 정말 정말 감사합니다 ㅠ

캡처링부분 질문있습니다.

0

76

2

깃에 소스코드를 찾을 수 없습니다.

0

113

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

98

1

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

0

111

2

css 라이브러리 추천 부탁드립니다

0

141

2

팔로우 추천 목록이 빈 배열로 들어옵니다.

0

133

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

119

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

172

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

184

3

폴링이 필요없는 이유

0

93

2

next Request Memoization과 react cache

0

110

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

84

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

173

2

프레임워크 여론 파악법

0

125

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

103

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

102

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

66

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

132

2

next.js 에서 로그인에 관하여

0

139

1

Next의 route handler에 대한 질문이 있습니다.

0

101

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

98

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

85

2

vanilla-extract 못찾는 문제

0

230

2

fetch 캐싱과 revalidate 관련

0

85

2