묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
강의 1-5 npx react-native@latest init MatzipApp
npx react-native@latest init MatzipApp 부분을 진행하면ruby 에 대한 오류는 뜨지 않고 이게 뜹니다저게 뜨면 어떻게 진행해야할까요?? Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd "C:\Users\younm\Documents\AwesomeProject" && npx react-native run-android Run instructions for Windows: • See https://aka.ms/ReactNativeGuideWindows for the latest up-to-date instructions.
-
미해결Next + React Query로 SNS 서비스 만들기
서버 액션를 통한 API 통신 시 쿠키 제어
안녕하세요. 강의를 보면서 NextAuth 없이 fetch 을 커스텀 함수로 구현 후 서버 액션에서만 호출하는 방식으로 구현해보고 싶어서 진행하고있습니다. 로그아웃 기능을 구현 중 토큰이 만료되었을때(API 호출 시 401 오류 발생으로) 쿠키를 제거하는 로직을 추가하였는데, 서버 액션에서만 가능하다는 오류가 발생합니다. 수동으로 로그아웃시에는 정상적으로 토큰이 제거되고, 정상적으로 로그인 페이지로 이동됩니다.. 정확한 상황은 페이지 진입 시 토큰 만료된 경우 middleware 에는 토큰이 있기때문에 페이지에 진입되고, API 호출 시 401 오류가 발생하고 쿠키 삭제 후 로그인 페이지로 리다이렉트되는데, 이때 middleware 상에는 토큰이 존재합니다..보통 자동 로그아웃 시 middleware 에서 쿠키 만료기간을 확인하고 제거하는 방식을 사용하는지, 저와 같이 해도 정상적으로 동작되어야하는건지 어떻게 접근해야될지 모르겠습니다 ㅠㅠ
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
강의 1-5를 진행하다 문제가 생겼습니다
강의 1-5를 진행하다 처음부터 진행이되지 않아 여러 방법을 시도해보고 있는데요이런 오류가 발생하는데 해결 부탁드립니다C:\Users\younm>npm run androidnpm error code ENOENTnpm error syscall opennpm error path C:\Users\younm\package.jsonnpm error errno -4058npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Users\younm\package.json'npm error enoent This is related to npm not being able to find a file.npm error enoentnpm error A complete log of this run can be found in: C:\Users\younm\AppData\Local\npm-cache\_logs\2024-09-11T08_15_28_839Z-debug-0.log
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
맥북이 아니고 윈도우 사용자 질문있습니다!!! (급해요)
맥북을 사용하지 않고 윈도우를 사용하고 있습니다강의 중 섹션 2에서 윈도우사용자면 1-5를 들어야하나요?화면에 진행하시는 컴퓨터가 맥북이신거 같아 질문드립니다
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
리액트 네이티브 열 때 오류가 납니다 (급해요!!!!)
강의 1-5 에서 react native 에서 start 로 열 때 에러가 너무 많은 파일이 열려있다고 합니다.해결 어떻게 하나요ㅠㅠ
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
맥북이 아니고 윈도우 사용자 질문있습니다!!! (급해요)
맥북을 사용하지 않고 윈도우를 사용하고 있습니다강의 중 섹션 2에서 윈도우사용자면 1-2,1-3,1-5 듣지 않고 1-4만 듣고 2-0으로 넘어가면 될까요??
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
QueryClient 에서 retry 를 false 로 설정하신 이유
3-8 강의 1:04 에서, QueryClient 의 retry 옵션을 false 로 설정하신 특별한 이유가 있으신가요? 왜 이렇게 설정한지 궁금합니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
백엔드에 요청을 보내면 Network Error가 발생합니다
안녕하세요. 지금 강의 3-8을 들으면서 회원가입, 로그인 요청을 보내는 코드를 작성 중입니다.다름아니라 회원가입 등 백엔드에 요청을 보내면 백엔드 서버까지 요청이 전달되지 못하고 network error를 반환합니다.소스코드는 다음과 같습니다// auth.ts const postSignup = async ({email, password}: RequestUser): Promise<void> => { try{ const {data} = await axiosInstance.post('/auth/signup', { email, password, }); return data; } catch (error) { console.error(error); } };// axios.ts import axios from 'axios'; const axiosInstance = axios.create({ baseURL: 'http://localhost:3030', withCredentials: true, }); export default axiosInstance;백엔드와 DB연결이 잘못되어있나 싶어서 postman으로 요청을 보내니 그 요청은 잘 전달되어 DB에 user가 생성됩니다.그리고, 강의 3-8의 소스코드를 그대로 가져와 서버를 켜고 요청을 보내니 여전히 network error가 발생합니다. 어디서 실수를 해서 에러가 나는 것일까요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
빈 프로젝트 생성
❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, ReactNative 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 잘라서 올리지 말아주세요.)프로젝트 생성 시 빈 프로젝트만 생성되고 안에 폴더 내부는 비어있는데 혹시 어떤 문제일까요
-
미해결Next + React Query로 SNS 서비스 만들기
로그인이 안 됩니다.
▲ Next.js 14.2.8 - Local: http://localhost:3000 - Environments: .env ✓ Starting... ✓ Ready in 4.2s ○ Compiling / ... ✓ Compiled / in 3.5s (1022 modules) GET / 200 in 4384ms GET / 200 in 81ms ✓ Compiled /api/auth/[...nextauth] in 364ms (493 modules) GET /api/auth/session 200 in 2386ms ○ Compiling /login ... ✓ Compiled /login in 1020ms (1035 modules) GET /api/auth/session 200 in 1561ms GET /login?_rsc=1pqm1 200 in 126ms ○ Compiling /(.)i/flow/login ... ✓ Compiled /(.)i/flow/login in 731ms (1050 modules) GET /api/auth/providers 200 in 44ms GET /api/auth/csrf 200 in 19ms [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror [auth][cause]: TypeError: Failed to parse URL from undefined/api/login at node:internal/deps/undici/undici:13178:13 [auth][details]: { "code": "ERR_INVALID_URL", "input": "undefined/api/login", "provider": "credentials" } POST /api/auth/callback/credentials? 200 in 40ms GET /api/auth/session 200 in 26ms윈도우 인데 memurai설치가 도저히 안 되어서 그냥 redis 설치했습니다. 백엔드 코드 실행시키면 redis connected라고도 뜨고, service에도 실행중도 뜨고, hello world도 잘 뜹니다.REDIS_URL=redis://127.0.0.1:6379 //백엔드 env NEXT_PUBLIC_BASE_URL=http://localhost:3000 //z-com 에 있는 .env이거로도 고쳐봤습니다. localhost:3000/login 여기로 넘어는 가는데 로그인이 안 됩니다.깃허브에서 코드 잘 가져왔고, 회원가입도 잘 되는데 로그인만 안 됩니다. 뭐가 문제일까요 ㅠㅠ
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
Sending 'onAnimatedValueUpdate with no listeners registered. 오류
안녕하세요 강사님아래 같이 오류가 발생하는데 해결방법이 있을까요..?감사합니다
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
환경 설정 및 프로젝트 생성에서 오류가 납니다.
구글링해서 찾은 방법과 GPT에서 찾은 방법으로는 해결이 안되고 있어요.brew update를 해도 안되고 watchman으로 하는 해결방법도 안됩니다. Gpt는 파일이 많아서 제한 수를 늘리는 해결방안을 주는데 그것도 안되고 있습니다!어떻게 해야할까요? 참고로 처음에 강사님이 말씀하신 버전대로 깔아서 셋팅했을 때 저 오류가 계속 떠서이번에는 다 최신 버전으로 바꿔서 해보았는데도 똑같은 오류가 발생합니다.
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
유효성 검사 누락된 부분...
회원가입과 로그인 기능에서 이메일 형식과 비밀번호 최소 길이 등에 대한 유효성 검사를 추가해 주실 수 있는지 궁금합니다. 현재 학습 중인데, 이 부분에 대한 자료를 추가로 올려주시면 감사드리겠습니다.
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
npm run dev 오류 내용을 모르겠습니다
npm run dev 접속이 안되는데 무슨 오류인지 모르겠습니다전체 코드 따라했는데 이렇게 뜹니다layout? middleware? 이쪽 같아서 계속 건드려보다가 안되서 질문 남깁니다
-
미해결Next + React Query로 SNS 서비스 만들기
refresh token rotation 질문
안녕하세요 강의를 듣고 next-auth를 활용하여 개발 중에 궁금한 점이 생겨 질문 드립니다.프로젝트에서 일반 로그인과 소셜 로그인을 모두 사용하고 있어next-auth의 signin callback에서 로그인일 경우 자체 서버에 요청하여 accessToken과 refreshToken을 발급 받고 jwt callback에서 엑세스 토큰의 만료 시간을 체크하여 만료 시에 재발급 요청이 되도록 구현하고 있습니다.이렇게 구현했을 경우 간헐적으로 서버 시간과의 타이밍 이슈 때문인지 api 요청 시에 401 토큰 만료 에러가 발생하는 순간이 존재합니다.따라서 401 상태코드일 경우에 refreshToken 토큰 재발급 요청을 하려고 하는데 refreshToken이 현재 next-auth에서 jwt 콜백에서 리턴되어 jwt토큰으로 생성되어 있습니다.이 401일 경우 재발급 요청 처리를 클라이언트 단에서 할 경우 refreshToken이 노출되어 보안상 이슈가 있을 것으로 예상이 되는데 서버단에서 처리를 하려면 next에서 어디서 처리를 하면 좋을 지 문의드립니다. async signIn({ account, user, credentials }) { const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const action = authorizationParams.action; user.platform = authorizationParams.platform; if (!account?.provider || !sns_type_map[account.provider]) { throw new Error("Unsupported provider"); } user.snsType = sns_type_map[account.provider]; if (action === auth_action_type.signin) { return handleSignIn(user); // getAccessToken } if (action === auth_action_type.signup) { return handleSignUp(); } return false; }, async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { ...token, ...user, accessToken: user.refreshToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: "refreshtoken", }; } // Return previous token if the access token has not expired yet if (new Date() < new Date(token.expiresAt as string)) { console.log("@@@@@@valid"); return token; } else { // Access token has expired, try to update it console.log("@@@@@@expired"); const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const body = { .... }; const tokenData = await authApi.reissueAccessToken(body); // reissue token return { ...token, ...user, accessToken: tokenData.accessToken, expiresAt: new Date( Date.now() + (tokenData.expiresIn ?? 0) ).toISOString(), refreshToken: tokenData.refreshToken, }; } }, 미들웨어에서 401 상태 코드 처리하는 것도 알아보았으나 일반적인 방식인지 궁금합니다.미들웨어에서 401일때 재발급 요청 시 새로운 엑세스 토큰으로 재요청이 정상적으로 되는 것은 확인했으나 다시 next-auth의 jwt토큰에 재발급된 값을 세팅해줘야 하는데 어떻게 해야할지도 궁금합니다.import { NextResponse } from 'next/server'; import { getToken } from 'next-auth/jwt'; export async function middleware(request) { const token = await getToken({ req: request, secret: process.env.AUTH_SECRET }); if (request.nextUrl.pathname.startsWith('/gateway')) { const accessToken = token?.accessToken; const headers = new Headers(request.headers); if (response.status === 401) { const refreshToken = token?.refreshToken; const refreshResponse = await fetch("/reissueToken") const refreshData = await refreshResponse.json(); if (refreshResponse.ok) { const newAccessToken = refreshData.accessToken; headers.set('Authorization', `Bearer ${newAccessToken}`); const newResponse = NextResponse.next({ request: { headers: request.headers, }, }); } // 토큰 재발급 실패 시 처리 return NextResponse.redirect('/login'); } return NextResponse.next(response); } return NextResponse.next(); }
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
선생님 강의를 따라가려면 함수형 프로그래밍을 배워야 하나요?
선생님 코드의 로직이 어렵게 느껴져 따라가는데 어려움을 겪고 있습니다. chatgpt를 활용해보니, 함수형 프로그래밍을 공부하면 된다고 하는데요. 혹시 먼저 함수형을 공부하고 다시 선생님 강의에 도전을 하는게 맞는 순서일까요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
RN expo 에 대하여
안녕하세요.현업자로서 RN expo에 대한 강사님의 생각이 궁금합니다. RN 공식 페이지에서 expo 와 같은 프레임 워크 사용을 권장하는 뉘앙스로 설명을 시작하는데 ,(You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo.) 만약 강사님이 완전 새로운 앱 개발에 착수하신다면, expo 를 사용하실것 같으신가요? 아니면 native cli 로 시작하실것 같으신가요?
-
미해결Next + React Query로 SNS 서비스 만들기
msw 를 사용하는 이유
결국 next js 에서만 http.ts 를 만들어주어서 express 서버로 mock server(?)를 직접 띄우는 형식인것 같은데 맞나요? 또 제 생각에는 이렇게 msw 를 사용하면, 내가 백엔드 서버로 요청을 보내도 그 요청을 중간에 가로채서 mock api 로 요청이가고 내가만든 가짜응답을 보내주는것이 되어야 할것같은데, 지금은 저희가 띄운 9090으로 요청을 보내고 있네요. (이 내용도 맞는지 궁금합니다, next 프로젝트가 아니라면 localhost:8888(실제 나의 백엔드 서버)로 요청을 보냈다고 가정할때 msw가 요청을 가로채가나요?)그렇다면 굳이 msw 를 사용하는 이유가 무얼까요..? 혼자 express 서버를 만들어서 가짜응답 전해주는것과 차이를 모르겠습니다..!감사합니다
-
미해결Next + React Query로 SNS 서비스 만들기
트워터 홈페이지에서 svg 복사하는 방법
강의에서 svg 복사하는 방법을 알려줬는데 어디 강의인지 기억이 나지 않아서 질문합니다.알려주세요 ㅠ
-
해결됨Next + React Query로 SNS 서비스 만들기
useQuery + fetch에 대해 메모이제이션 질문드립니다.
Next.js의 fetch는 requiest Memoization과 data Memoization를 이용해서 사용하는 것으로 이해했습니다. header랑 body를 보내서 api에 재 요청 하지않고 캐싱하는 것을 확인 했는데요 만약에 useQueryhook을 사용한다고 가정하면, useQuery 도 데이터 캐싱기능을 staleTime 등으로 핸들링 할 수 있기에 Next.js의 fetch 캐싱기능을 꺼야 적절할까요? "no-cache"를 해서 useQuery의 캐싱기능만 이용하는 것이 간결하고 시점을 통일 할 수 있을 것 같아서 질문드립니다.