176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
stack 네비게이션 수업을 들으며 적용하다가 그전 강의 까지 잘 적용되던것이 에러가 발생하여 해결해보려고 하루를 날려 검색을 해보고 이것 저것 해봤는데 VDM 실행하고자 A 누르면 계속 저 메시지 뜨고 VDM은 렌더 에러 이렇게 뜹니다. 뭐가 문제인지 정말 모르겠습니다. 현재 2-4강 수업까지 적용된 코드 입니다. 이후 될 줄 알았는데 역시나 이 상태 입니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
다른분 말씀대로 아래 명령어로 진행해보았으나 똑같은 오류가 발생합니다ㅠㅠ 혹시 해결방법을 여쭤볼 수 있을까요... yarn remove react-native-maps 실행 yarn add react-native-maps@1.8.3 실행 node_modules 디렉터리 삭제 yarn 명령으로 패키지 설치 npx pod-install ios 실행 cd android 명령으로 android 디렉터리 이동 rm -rf .gradle 실행 ./gradlew clean 실행 npm run android, npm run ios 로 재빌드하여 실행
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
프로젝트 껐다가 켜보시면 되실 수도 있습니다.. 저는 중도 포기하고 오랜만에 다시 공부하려고 앱 틀었는데 갑자기 맵이 뜨네요..!?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
이수업에서 텍스트 넣고 스타일 시트 넣고 했는데 Welcome to React Native 까지 되고는 변동이 되지 않습니다. rr 해도 안되고 인터넷에서 원인 찾고 5번 다시 설치 하고 다했는데도 같은 결과가 나옵니다 . 제가 뭘 놓치고 있는것인지 모르겠습니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
inputcontainer에 alignitems: center 값에 아래 처럼 오류가 뜹니다. 어떻게 해결하면 될까요?? ERROR ReferenceError: Property 'alignItems' doesn't exist, js engine: hermes
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
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 서비스 만들기
안녕하세요. 강의를 보면서 NextAuth 없이 fetch 을 커스텀 함수로 구현 후 서버 액션에서만 호출하는 방식으로 구현해보고 싶어서 진행하고있습니다. 로그아웃 기능을 구현 중 토큰이 만료되었을때(API 호출 시 401 오류 발생으로) 쿠키를 제거하는 로직을 추가하였는데, 서버 액션에서만 가능하다는 오류가 발생합니다. 수동으로 로그아웃시에는 정상적으로 토큰이 제거되고, 정상적으로 로그인 페이지로 이동됩니다.. 정확한 상황은 페이지 진입 시 토큰 만료된 경우 middleware 에는 토큰이 있기때문에 페이지에 진입되고, API 호출 시 401 오류가 발생하고 쿠키 삭제 후 로그인 페이지로 리다이렉트되는데, 이때 middleware 상에는 토큰이 존재합니다.. 보통 자동 로그아웃 시 middleware 에서 쿠키 만료기간을 확인하고 제거하는 방식을 사용하는지, 저와 같이 해도 정상적으로 동작되어야하는건지 어떻게 접근해야될지 모르겠습니다 ㅠㅠ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강의 1-5를 진행하다 처음부터 진행이되지 않아 여러 방법을 시도해보고 있는데요 이런 오류가 발생하는데 해결 부탁드립니다 C:\Users\younm>npm run android npm error code ENOENT npm error syscall open npm error path C:\Users\younm\package.json npm error errno -4058 npm 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 enoent npm 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)
3-8 강의 1:04 에서, QueryClient 의 retry 옵션을 false 로 설정하신 특별한 이유가 있으신가요? 왜 이렇게 설정한지 궁금합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. 지금 강의 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)
안녕하세요 강사님 아래 같이 오류가 발생하는데 해결방법이 있을까요..? 감사합니다
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
구글링해서 찾은 방법과 GPT에서 찾은 방법으로는 해결이 안되고 있어요. brew update를 해도 안되고 watchman으로 하는 해결방법도 안됩니다. Gpt는 파일이 많아서 제한 수를 늘리는 해결방안을 주는데 그것도 안되고 있습니다! 어떻게 해야할까요? 참고로 처음에 강사님이 말씀하신 버전대로 깔아서 셋팅했을 때 저 오류가 계속 떠서 이번에는 다 최신 버전으로 바꿔서 해보았는데도 똑같은 오류가 발생합니다.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
회원가입과 로그인 기능에서 이메일 형식과 비밀번호 최소 길이 등에 대한 유효성 검사를 추가해 주실 수 있는지 궁금합니다. 현재 학습 중인데, 이 부분에 대한 자료를 추가로 올려주시면 감사드리겠습니다.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
npm run dev 접속이 안되는데 무슨 오류인지 모르겠습니다 전체 코드 따라했는데 이렇게 뜹니다 layout? middleware? 이쪽 같아서 계속 건드려보다가 안되서 질문 남깁니다
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의를 듣고 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(); }
