173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강사님 좋은 강의 잘 듣고 있습니다! 포스트맨으로 요청을 보내도 정상적으로 응답이오고, psql로 연결이 되었다고 나오고 테이블도 조회가 되는데 pm2 log를 보면 Unable to connect to the database. 라고 에러 메시지가 나옵니다. 열심히 해결해보려고 했는데 이유를 모르겠어서 질문합니다..
해결됨
Next + React Query로 SNS 서비스 만들기
getFollowingPosts 호출 시 내 게시글들이 불러와집니다. credentials: 'include' 제대로 넣어줬는데 원인을 모르겠습니다. 무한스크롤은 적용했고 팔로잉은 아직 없는 상태입니다. getFollowingPosts type Props = { pageParam?: number; }; export async function getFollowingPosts({ pageParam }: Props) { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/followings?cursor=${pageParam}`, { next: { tags: ['posts', 'followings'], }, credentials: 'include', cache: 'no-store', }, ); if (!response.ok) { throw new Error('Failed to fetch data'); } return response.json(); } FollowingPosts 'use client'; import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'; import { getFollowingPosts } from '../_lib/getFollowingPosts'; import Post from '../../_components/post'; import type { Post as IPost } from '@/model/post'; import { useInView } from 'react-intersection-observer'; import { Fragment, useEffect } from 'react'; export default function FollowingPosts() { const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery< IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number >({ queryKey: ['posts', 'followings'], queryFn: getFollowingPosts, initialPageParam: 0, // required getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, // required staleTime: 60 * 1000, gcTime: 300 * 1000, }); const { ref, inView } = useInView({ threshold: 0, delay: 0, }); useEffect(() => { //. inView: ref가 화면에 보일 때 //. !isFetching: 패칭상태 아닐때 (중복 패칭 방지) //. hasNextPage: 다음 페이지가 있을 때 console.log('useEffect', { inView, isFetching, hasNextPage }); if (inView && !isFetching && hasNextPage) { fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); return data?.pages.map((page, index) => ( <Fragment key={`posts-followings-page-${index}`}> {page.map((post) => ( <Post key={post.postId} post={post} /> ))} {!isFetching && <div ref={ref} style={{ height: 50 }}></div>} {isFetching && <div style={{ height: 50 }}></div>} </Fragment> )); } response에는 내 게시글들이 담겨옵니다 서버쪽 PostsService findAll 콘솔 찍어보면 유저정보 제대로 받아옵니다 { cursor: 0, type: 'followings', user: { id: 'asdf', nickname: '슈퍼맨', image: '/upload/dummy1719568724038.png' } }
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 선생님강의 따라서 로그인을 구현했습니다. auth에서 관리해주는 세션으로는 프론트용, 로그인 후 내려주는 connect.id 세션으로는 백엔드용, 으로 사용했습니다. 그런데 궁금한게 로그인을 하고 기간이 지나거나 그런 경우를 대비해서 엑세스토큰, 리프레시 토큰을 많이 사용하는 것을 보았는데 선생님은 넥스트에서 어떤 방식을 사용하시는지, 어떤방식을 추천하시는지 궁금합니다. 검색해보니까 엑세스토큰이 아닌 쿠키세션으로 사용할때에는 일정시간 inter시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요. 선생님 조언이 궁금합니다. 감사합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 강의를 보고 참고해서 채팅 기능을 만들었습니다. 그런데 a,b가 채팅화면에 들어왔을때 소켓 연결이 안되거나, 늦게 되거나 하는 경우가 있어서 제가 로직을 잘못짠건지 어딜 확인해야하는건지 조언을 들을수 있을까해서 문의 남깁니다. 먼저 서버에서 이렇게 socket.io 를 설정해주고 /app.js const app = express(); const httpServer = new createServer(app); const io = new Server(httpServer, { cors: { origin: 'https://zzimzzim.com', credentials: true, }, }); /utils/io.js module.exports = function (io, db) { const userSockets = {}; const nsp = io.of('/messages'); nsp.on('connection', (socket) => { console.log('soket connected'); socket.on('disconnect', () => { console.log('-----------------user disconnected'); }); socket.on('login', (user) => { userSockets[user.id] = socket.id; console.log(userSockets, '-------------------------------userSockets'); console.log(`User ${user.id} connected with socket id ${socket.id} --------- 유저입장`); }) socket.on('sendMessage', async (data) => { try { const roomId = data.room.split('-').sort().join('-'); console.log(roomId, '---------------------------------roomId'); console.log(data, '---------------------------------data'); console.log(userSockets, '---------------------------------userSockets'); let room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }); if (room) { room = await room.update({ content: data.content }); } else { const roomCreated = await db.Room.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }) console.log(roomCreated, '------------------------------roomCreated') room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }) } const savedMessage = await db.Message.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }); // console.log(savedMessage, '------------------------Message saved'); console.log(room, '------------------------room saved'); const receiverSocketId = userSockets[data.receiverId]; if (receiverSocketId) { socket.to(receiverSocketId).emit('receiveMessage', savedMessage); socket.to(receiverSocketId).emit('receiveRoom', room); } else { console.log(`User ${data.receiverId} is not connected`); } } catch (error) { console.error('Error saving message:', error); } }); }) } 클라이언트에서는 선생님이 useSocket만든것과는 다르게 useContext를 이용해서 /src/app/(afterLogin)/messages/_component/SocketProvider.tsx 'use client'; import { useSession } from 'next-auth/react'; import { ReactNode, createContext, useCallback, useEffect, useMemo, useState } from 'react'; import { io, Socket } from 'socket.io-client'; type Props = { children: ReactNode }; type SocketContextType = { socket: Socket | null; isConnected: boolean; disconnect: Function; goDown: boolean; setGoDown: Function; } export const SocketContext = createContext<SocketContextType>({ socket: null, isConnected: false, disconnect: () => { }, goDown: false, setGoDown: () => {}, }) export default function SocketProvider({ children }: Props) { const { data: session } = useSession(); const [socket, setSocket] = useState<any | null>(null); const [isConnected, setIsConnected] = useState(false); const [goDown, setGoDown] = useState(false); const disconnect = useCallback(() => { socket?.disconnect(); setSocket(null); }, [socket]); const value = useMemo(() => { return { socket, isConnected, disconnect, goDown, setGoDown } }, [socket, isConnected, disconnect, goDown]); useEffect(() => { console.log(socket, '-----------------------------------------socket???'); if (!socket) { const socketInstance = io(`${process.env.NEXT_PUBLIC_BASE_URL}/messages`, { withCredentials: true, }); socketInstance.on('connect', async () => { setIsConnected(true); console.log("소켓연결 성공!!!", socketInstance.id); // console.log(socketInstance, '--------------------socketInstance'); }) setSocket(socketInstance); } }, [socket]); useEffect(() => { if (socket?.connected && session?.user?.id) { console.log('--------------------------------------------socket emit login') socket?.emit('login', { id: session?.user?.id }); } }, [session, socket]); return ( <SocketContext.Provider value={value}> {children} </SocketContext.Provider> ) } 이런식으로 만들고 /src/app/(afterLogin)/messages/layout.tsx import { ReactNode } from 'react'; import SocketProvider from './_component/SocketProvider'; type Props = { children: ReactNode }; export default function Layout({ children }: Props) { return ( <SocketProvider> {children} </SocketProvider> ) } 레이에다가 적용해주었습니다. 이런식으로 해주면 소켓연결을 한번만 하고 원할때 메세지를 주고 받을 수 있을거라고 생각해서 적용한건데 혹시 소켓 연결 관련해서 더 확인해야하거나 수정할 부분이 있을지 궁금합니다. 감사합니다!
미해결
Next + React Query로 SNS 서비스 만들기
Q질문 로그인 버튼 클릭시 주소변경없이 모달창을 보이게 하려면 결국 라우팅만 이용해서는 할 수 없고 , 기존에 리액트에서 사용하던 모달 state를 관리해주는 방식 으로 해야한다. 라고 생각되어집니다. 이 부분에 대해서 강사님의 생각을 여쭤봅니다. 이렇게 생각한 이유는 로그인 버튼 클릭시 주소변경없이 모달창을 띄우려면 우선, 패러렐 라우팅과 인터셉트 라우팅 둘다 사용해야 하며 '/' 주소가 아닌 '/login' 주소로 바뀌어야만 한다. (이때 인터셉트 라우팅을 사용해야 하는 이유는 새로고침이 뒤에있는 모달창을 안보여도, 뒤에있던 화면은 보여야하기 때문이다. ) 주소가 바뀌어야 하는 이유를 설명하자면 패러렐 라우팅을 '/' 주소로 하게 되면 처음 브라우저에 방문하게 되면 모달창이 보이게 되기 때문이다. 그러므로 로그인 버튼 클릭시 '/login' 의 주소에서 홈화면과 모달창이 보이게 해야한다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요 npx react-native doctor을 했을 때 이런 에러가 뜨는데 어떻게 해결할 수 있을까요?ㅠ TypeError: Cannot read properties of undefined (reading 'X_OK') at Object.getDiagnostics (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/tools/healthchecks/gradle.js:42:57) at /Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:116:29 at Array.map (<anonymous>) at iterateOverHealthChecks (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:106:51) at Array.map (<anonymous>) at iterateOverCategories (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:139:70) at Object.doctorCommand [as func] (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:140:41) at async Command.handleAction (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli/build/index.js:116:9)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요 강사님!! 강의에서 type을 정의할 때 type과 interface 키워드 모드 사용하는걸 볼 수 있는데,어떨때 type을 사용하고 interface를 사용하는지 알 수 있을까요? 느낌상 확장성(extends), 재사용성(제네릭) 등 타입이 확정적이지 않은곳에서 interface를 사용하고 그 이외에는 type을 사용하는것같은데 맞을까요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. 강의 진행 중 애플 로그인 구현하기 까지 진행하고 있습니다. 강의에서는 별다른 설명 없이 등록이 진행 되는걸로 보여지는데 저는 멤버십을 구매하라고 나오네요.. 제가 혹시 가입 중 뭔가 잘못 한건가요? 아니면 원래 애플 개발자에 등록을 하려면 개인도 13만원 가량 하는 금액을 지불해야 하는건가요? 제가 혹시 잘못 가입 한거라면 비용을 지불하지 않고 개발자를 등록하는 방법을 한번만 자세히 알려주시면 감사드리겠습니다!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요, yarn start를 하고 i를 눌러 Ios를 실행하면 이런 에러가 뜹니다 ㅠ i - run on iOS a - run on Android d - open Dev Menu r - reload app info Opening app on iOS... info A dev server is already running for this project on port 8081. Error: Error: Command failed with exit code 1: xcodebuild -list -json xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance at getInfo (/Users/woojin/Desktop/Repos/AwesomeProject/node_modules/@react-native-community/cli-platform-apple/build/tools/getInfo.js:31:11) at getConfiguration (/Users/woojin/Desktop/Repos/AwesomeProject/node_modules/@react-native-community/cli-platform-apple/build/commands/buildCommand/getConfiguration.js:36:37) at Object.func (/Users/woojin/Desktop/Repos/AwesomeProject/node_modules/@react-native-community/cli-platform-apple/build/commands/runCommand/createRun.js:113:52) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Command.handleAction (/Users/woojin/Desktop/Repos/AwesomeProject/node_modules/@react-native-community/cli/build/index.js:118:9) 그리고 자꾸 이런 것도 뜨는데 저는 다른 포트가 없는데 왜 뜨는걸까요? info A dev server is already running for this project on port 8081.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요! 강의에서는 npx react-native@latest init ~~ 이라고 되어있는데 지금 공식 문서에는 npx @react-native-community/cli@latest init AwesomeProject 이라고 되어 있습니다. 어떤 차이가 있는걸까요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요! 이거 설정은 필요 없는걸까요? 강좌에 설명이 없어서 질문 드립니다!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요, 안드로이드 스튜디오에서 SDK 플랫폼 설정에서 안드로이드 api 34 가 있고 33을 추가로 설치하라고 하셨는데, 저한테는 그게 없는데 어떻게 할까요?
해결됨
Next + React Query로 SNS 서비스 만들기
https://github.com/ZeroCho/next-app-router-z/blob/master/lecture/src/app/(afterLogin)/layout.tsx 제로초님 강의를 다 듣고 코드를 살펴보던 중 의문이 있어 질문 드립니다. 해당 코드를 보면 lecture/src/app/(afterLogin)/layout.tsx 파일에서 거의 최고 부모컴포넌트인 <RQProvider>가 "use client"를 사용하여 클라이언트 컴포넌트가 되는것으로 알고있는데 이렇게 한다면 그 하위 컴포넌트들은 전부 클라이언트 컴포넌트가되는게 아닌가요? 어떻게 서버컴포넌트를 사용할 수 있는건지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 완강하고 채팅을 구현해보려고 합니다. 그런데 강의와 깃헙을 보면 soket으로 보내는 내용, 쿼리에 데이터 추가하는 내용은 있는데 소켓으로 보낸 내용이 백엔드에 저장되는 부분이 보이질 않더라구요, 클라이언트에서 소켓으로 데이터를 보내면 그걸 받고 백엔드에서 저장해주는 로직이 따로 있는걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
// 1번 - A 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), staleTime: 6000 }) // 2번 - B 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), }) StaleTime 덮어 써지는지 질문 1번이 A 컴포넌트에서 실행되고, 1분이 지나기전에 B 컴포넌트에 선언한 2번이 실행 될 경우 1번에 선언한 키값이 같기 때문에 1분이 지나지 않았다면 실제 fetching 없이 캐싱된 데이터를 가져온다 키가 같더라도 useQuery로 선언했기 때문에 fetch되고 1번에 선언한 staleTime은 2번으로 덮어써져서 추후 무시된다 1번이 A 컴포넌트에서 실행되고, 1분이 지난 후 B 컴포넌트에 선언한 2번이 실행 될 경우 1분이 지났기 때문에 다시 2번에서 fetching이 일어나고 1번에 선언한 staleTime은 유지된다 1분이 지났기 때문에 다시 fetching이 일어나고 2번으로 덮어써져서 추후 staleTime은 2번에 정의된 대로 없어진다(기본값 0으로 세팅된다) getQueryData 정확하게 사용 하는 방법 // 1번 - A 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), staleTime: 6000 }) // 2번 - B 컴포넌트 const data = queryClient.getQueryData(['user']) 위 처럼 선언했을 경우 A 컴포넌트 -> B 컴포넌트가 순차 실행되면 getQueryData를 잘 가져 오겠지만 만약 B 컴포넌트가 먼저 실행될 경우 어떻게 해야 할까요? 있는지 검사하고 없으면 1번처럼 다시 선언해야 할까요? 순차 보장이 안된다면 B컴포넌트도 동일하게 useQuery로 staleTime 동일하게 작성해야 할까요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
npx react-native run-android 를 진행할 떄, Android APK를 빌드하면서 react-native-reanimated 의 DevMenuUtils 클래스에서 문제가 발생하는것 같아요. 해당 Java파일에서 호출하는 패키지의 문제로 보입니당. package.json은 아래와 같이 설정되어 있습니다. "dependencies": { "@react-native-masked-view/masked-view": "^0.3.1", "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.17.1", "react-native-reanimated": "^3.12.1", "react-native-safe-area-context": "^4.10.7", "react-native-screens": "^3.32.0" }, node_module의 패키지를 직접 수정하는 방법이라 좋은것은 아닌 걸로 보이나, 실행해보는게 더 중요한것 같아서용~ 원본DevMenuUtils Class package com.swmansion.reanimated; public class DevMenuUtils { private void addDevMenuOption(ReactApplicationContext context, DevOptionHandler handler) { // In Expo, `ApplicationContext` is not an instance of `ReactApplication` if (context.getApplicationContext() instanceof ReactApplication) { final DevSupportManager devSupportManager = ((ReactApplication) context.getApplicationContext()) .getReactNativeHost() .getReactInstanceManager() .getDevSupportManager(); devSupportManager.addCustomDevOption( "Toggle slow animations (Reanimated)", handler); } } } 변경한 DevMenuUtils Class package com.swmansion.reanimated; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.ReactApplication; import com.facebook.react.devsupport.interfaces.DevOptionHandler; import com.facebook.react.devsupport.interfaces.DevSupportManager; public class DevMenuUtils { public static void addDevMenuOption(ReactApplicationContext context, DevOptionHandler handler) { // In Expo, `ApplicationContext` is not an instance of `ReactApplication` if (context.getApplicationContext() instanceof ReactApplication) { final DevSupportManager devSupportManager = ((ReactApplication) context.getApplicationContext()) .getReactNativeHost() .getReactInstanceManager() .getDevSupportManager(); devSupportManager.addCustomDevOption( "Toggle slow animations (Reanimated)", handler); } } } 참고한 이슈 : https://github.com/software-mansion/react-native-reanimated/issues/6076
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
Invariant Violation: "matzipApp" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes react navigation 강의에서 react-native-gesture-handler 를 설치하고 나서 계속 위와 같은 오류가 납니다. 개발환경은 윈도우이구요. 아무리 gesture-handler의 버전을 조정해봐도 같은 오류가 계속 나고 구글링을 해서 issue들을 살펴봐도 정말 명확한 해결책도 없구요.. 빨리 다음 강의 듣고싶은데 답답하네요..
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
너무 거슬리는 prettier 오류가 뜨는데, 코드 주시면 적용해보겠습니다 감사합니
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 강의 잘 듣고 있습니다. 사실 이 문제가 몇개월동안 계속 해결이 안되어서 강의를 수강한거나 마찬가지인데요. 아무리 스택오버플로우나, next.js issue에 직접 글을 올려도 해결이 안되어서 이렇게 질문 글 올립니다. 일단 Next.js 14 + Express 조합으로 배포를 한 상황이고 jwt 토큰을 쿠키에 담아서 로그인 기능을 구현했습니다. 또한 next.js Middleware 내부에서 액세스토큰을 재발급 받아주고 있습니다. 순서는 이렇습니다. 로그인 시에 사용자가 아이디 + 비밀번호를 입력해서 서버에게 요청한다. 서버에서 해당 아이디 값을 받아서 조회 후, 새로운 리프레시 토큰 + 액세스 토큰을 클라이언트로 보내준다. 백엔드 내부 코드는 다음과 같습니다. const newAccessToken = createNewAccessToken(existingUser); const newRefreshToken = createNewRefreshToken(existingUser); const hashedToken = await hashValue(newRefreshToken); await deleteRefreshTokenData(existingUser.id); await createRefreshTokenData(hashedToken, existingUser.id); return res.json({ success: true, accessTokenValue: newAccessToken, refreshTokenValue: newRefreshToken, }); Next.js 측에서 액세스 토큰과 리프레시 토큰을 받아서 API ROUTE로 POST 요청을 날려서 set cookie를 해준다. const sendTokenCookieToHandler = async (accessTokenValue: string, refreshTokenValue: string) => { await fetch('/api/token', { method: 'POST', body: JSON.stringify({ accessTokenValue, refreshTokenValue }), headers: new Headers({ 'Content-Type': 'application/json', }), cache: 'no-store', }); }; export default sendTokenCookieToHandler; ``` 그 후 액세스 토큰이 만료 되면, Next.js 미들웨어 단에서 리프레시 토큰을 다시 백엔드로 보내서 새로운 액세스 토큰을 받아온다. Next.js 미들웨어 코드는 이렇습니다. export async function middleware(request: NextRequest) { const { accessToken, refreshToken } = getTokenValues(request); if (!accessToken && refreshToken) { const res = await getNewAccessToken(refreshToken); if (res && res.newAccessToken) { const response = NextResponse.next(); const { newAccessToken } = res; response.cookies.set('accessToken', newAccessToken, { expires: new Date(Date.now() + 24 * 60 * 60 * 1000), }); return response; } } return NextResponse.next(); } ``` 받아온 액세스 토큰 값을 아예 middleware 단에서 set cookie 를 통해 쿠키로 설정해준다. 근데 여기서 문제는 초기에는 정상적으로 잘 작동합니다. 액세스 토큰이 만료 된 후에도 정상적으로 새로운 액세스토큰을 받아오기도 하고요 근데 문제는 일정 시간 후에(제가 생각했을때 리프레시토큰이 만료 된 후, 다시 로그인 요청을 보냈을때 같습니다.) 아예 새로운 리프레시 토큰과 액세스 토큰을 제대로 받아오지 못하는거 같습니다. 근데 F12 를 켜서 확인해보면 백엔드로 api 콜은 정상적으로 가고 있습니다.. 그래서 현재 다시 재배포를 할때마다 초기 상태로 돌아가서 로그인이 정상적으로 작동 하게 되는데요. 어디가 문제인걸까요 ? 여러 오픈톡이나 커뮤니티에 물어봤지만, 어떤분은 Next.js 내부에서 같은 라우트 그룹이면 미들웨어를 거치지 않아서 발생하는 문제라고도 하시는데 초기 배포 당시에, 리프레시 토큰을 처음에 잘 받았을때 일부러 액세스 토큰을 삭제하고 다시 새로고침하면 액세스 토큰을 제대로 잘 받아오고 있습니다.. 도저히 아무리 이리저리 수정해봐도 몇개월 동안 고치지 못해서 이렇게 글 남깁니다. 읽어주셔서 감사합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
프로젝트 생성 시 npm start를 하고 a를 눌러 안드로이드 에뮬레이터를 키려면 오류가 납니다. info Dev server ready i - run on iOS a - run on Android d - open Dev Menu r - reload app info Opening app on Android... info A dev server is already running for this project on port 8081. info Launching emulator... info Installing the app... > Task :gradle-plugin:checkKotlinGradlePluginConfigurationErrors > Task :gradle-plugin:compileKotlin UP-TO-DATE > Task :gradle-plugin:compileJava NO-SOURCE > Task :gradle-plugin:pluginDescriptors UP-TO-DATE > Task :gradle-plugin:processResources UP-TO-DATE > Task :gradle-plugin:classes UP-TO-DATE > Task :gradle-plugin:jar UP-TO-DATE 5 actionable tasks: 1 executed, 4 up-to-date info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor FAILURE: Build failed with an exception. * Where: Build file 'C:\Users\kimch\Documents\MatzipApp\android\app\build.gradle' line: 1 * What went wrong: A problem occurred evaluating project ':app'. > Failed to apply plugin 'com.android.internal.application'. > Android Gradle plugin requires Java 17 to run. You are currently using Java 11. Your current JDK is located in C:\Program Files\Microsoft\jdk-11.0.23.9-hotspot You can try some of the following options: - changing the IDE settings. - changing the JAVA_HOME environment variable. - changing org.gradle.java.home in gradle.properties . * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 6s info Run CLI with --verbose flag for more details.
