안녕하세요, 33. 강의 로그인 연동 중 에러가 발생하여 질문드립니다..! 코드 작성 이후 회원가입 시연을 시도하였는데, pgAdmin4에 데이터가 쌓이지 않고 터미널에 다음과 같은 에러가 발생하였습니다.  iOS Bundled 788ms node_modules/expo-router/entry.js (1383 modules)λ Bundled 449ms node_modules/expo-router/node/render.js (1084 modules)Web node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓▓░░░░░ 69.8% (666/797)λ node_modules/expo-router/node/render.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 98.7% (1077/1084)Web Bundled 1009ms node_modules/expo-router/entry.js (797 modules)Web node_modules/expo-router/entry.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)λ WARN "shadow*" style props are deprecated. Use "boxShadow". λ Bundled 24ms node_modules/expo-router/node/render.js (1 module)Web Bundled 191ms node_modules/expo-router/entry.js (1 module) 해당 문제 해결 방법을 알려주시면 정말 감사하겠습니다!

https://github.com/znehraks/react-native-basic/blob/main/app/post/%5Bid%5D.tsx이 코드인데, Android Emulator에서 KeyboardAwareScrollView가 정상동작하지 않습니다.import AuthRoute from '@/components/AuthRoute'; import FeedItem from '@/components/FeedItem'; import InputField from '@/components/InputField'; import { colors } from '@/constants'; import useGetPost from '@/hooks/queries/useGetPost'; import { useLocalSearchParams } from 'expo-router'; import { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; export default function PostDetailScreen() { const { id } = useLocalSearchParams(); const { data: post, isPending, isError } = useGetPost(Number(id)); if (isPending || isError) { return <></>; } return ( <AuthRoute> <SafeAreaView style={styles.container}> <KeyboardAwareScrollView contentContainerStyle={styles.awareScrollViewContainer}> <ScrollView contentContainerStyle={styles.scrollViewContainer}> <View style={{ marginTop: 12 }}> <FeedItem post={post} isDetail /> <Text style={styles.commentCount}>댓글 {post.commentCount}개</Text> </View> </ScrollView> <View style={styles.commentInputContainer}> <InputField rightChild={ <Pressable style={styles.inputButtonContainer}> <Text style={styles.inputButtonText}>등록</Text> </Pressable> } /> </View> </KeyboardAwareScrollView> </SafeAreaView> </AuthRoute> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.WHITE, }, awareScrollViewContainer: { flex: 1, backgroundColor: colors.GRAY_200, }, scrollViewContainer: { backgroundColor: colors.GRAY_200, }, commentCount: { marginTop: 12, backgroundColor: colors.WHITE, paddingVertical: 12, paddingHorizontal: 16, fontSize: 16, fontWeight: 'bold', }, commentInputContainer: { width: '100%', borderTopColor: colors.GRAY_200, borderTopWidth: StyleSheet.hairlineWidth, backgroundColor: colors.WHITE, padding: 16, bottom: 0, position: 'absolute', }, inputButtonContainer: { backgroundColor: colors.ORANGE_600, padding: 8, borderRadius: 5, }, inputButtonText: { color: colors.WHITE, fontWeight: 'bold', }, });

안녕하세요. 먼저, Next.js 를 입문한지 얼마 되지 않아 질문이 서툴 수 있는 점 양해 부탁드립니다..!현재 msw 세팅을 완료 했고, Auth.js는 공식문서를 참고하여 5버전과 동일하게 auth.ts 파일을 아래와 같이 작성하였습니다.// auth.ts import NextAuth from "next-auth"; import Credentials from "next-auth/providers/credentials"; export const { handlers, signIn, signOut, auth } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ Credentials({ authorize: async (credentials) => { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", body: JSON.stringify({ username: credentials.username, password: credentials.password, }), headers: { "Content-Type": "application/json" }, }, ); if (!response.ok) { return null; } const user = await response.json(); console.log("로그인 정보", user); return { id: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], });// @modal/(.)/i/flow/login/page.tsx const onLogin = async () => { try { await signIn("credentials", { username: id, password, redirect: false, }); router.replace("/home"); } catch (err) { console.error(err); setMessage("아이디와 비밀번호가 일치하지 않습니다."); } };문제는 authorize 함수 내 콘솔이 찍히지 않는 것으로 보아, 해당 함수가 아예 실행되지 않는 것 같습니다.회원가입하지 않은 아이디와 비밀번호를 입력해도 로그인이 되고 /home 으로 이동합니다. home으로 이동 후 session 응답 값은 null이고 쿠키에도 auth 토큰이 저장되지 않습니다.그리고 터미널에는 첫번째 이미지 처럼 에러 메세지가 뜨고, 브라우저 콘솔에는 두번째 이미지와 같은 메세지가 뜹니다. // handlers.ts http.post(`${baseUrl}/api/login`, () => { console.log("로그인"); return HttpResponse.json(User[1], { headers: { "Set-Cookie": "connect.sid=msw-cookie; HttpOnly; Path=/", }, }); }),현재는 MSW가 요청을 제대로 가로채지 못하고 있는 것 같다는 의심이 드는데, 어디를 우선적으로 점검해야 할지 잘 모르겠습니다..초보라 부족한 점이 많지만, 방향을 잡을 수 있도록 힌트나 조언 주시면 정말 감사하겠습니다 ㅠㅠ

수업 시작과 동시에 수업 자료를 다운 받으라고 하는데, 해당 회차 강의에 수업 자료 링크가 없어서 여쭤봅니다 ㅠ

강의에 쓰신 노션 자료는 따로 안주시나요?? 강의 자료에 todo list 만 있네요? 이게 다인가요?

강의 [1-5] VScode에서 시뮬레이터를 활성화 하는 부분이 있던데 이때 원도우에서 개발 하면 Xcod가 실행이 되지 않아 ios 시뮬레이터를 활성화하지 못하던데 이러면 ios 환경 개발을 못하는건가요 아직 제가 초반 부분만 봐서 그런지 이해를 못 하겠습니다. 혹시나 해서 여줘봅니다.(info Opening the app on iOS...Error: Error: Command failed with exit code 1: xcodebuild -list -json'xcodebuild'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ���ġ ������ �ƴմϴ�. at getProjectInfo (C:\Users\사용자\NTMap\node_modules\@react-native-community\cli-platform-ios\build\tools\getProjectInfo.js:29:11) at Object.runIOS [as func] (C:\Users\사용자\NTMap\node_modules\@react-native-community\cli-platform-ios\build\commands\runIOS\index.js:88:58) at Command.handleAction (C:\Userㄴ\사용자\NTMap\node_modules\@react-native-community\cli\build\index.js:111:23) at Command.listener [as actionHandler] (C:\Users\사용자\NTMap\nodemodules\commander\lib\command.js:482:17) at C:\Users\사용자\NTMap\node_modules\commander\lib\command.js:1283:65 at Command._chainOrCall (C:\Users\사용자\NTMap\node_modules\commander\lib\command.js:1177:12) at Command._parseCommand (C:\Users\사용자\NTMap\node_modules\commander\lib\command.js:1283:27) at C:\Users\사용자\NTMap\node_modules\commander\lib\command.js:1081:27 at Command._chainOrCall (C:\Users\사용자\NTMap\node_modules\commander\lib\command.js:1177:12) at Command._dispatchSubcommand (C:\Users\사용자\NTMap\node_modules\commander\lib\command.js:1077:23)) 

https://github.com/minpppal/react-native-avartar에러는 안뜹니다.윈도우 환경입니다."react-native": "0.79.4",node : v22.16.0 화면에 아무것도 안떠요.웹으로 열면 잘뜹니다. (아래 사진은 웹)

안녕하세요 제로초님, 로그인 관련해서 어려움이 있어서 질문드립니다. 현재 사용하고 있는 기술 스택은 다음과 같습니다.프론트 : next.js/백엔드 : express 로그인을 구현했고 백엔드에서 토큰을 만들어서 refreshToken 은 httpOnly cookie 에,accessToken 은 응답 바디에 넣어서 보내주도록 만들었습니다. 라이브러리 사용하지 않고, next.js 에서 로그인 api 호출하고 token 은 전역으로 관리하고, 토큰 만료시 토큰 재발급하고, 새로고침 시에도 로그인이 유지되도록(httponly 쿠키로) fetchWrapper 을 따로 만들었습니다. -> fetch 은 axios 와 달리 interceptor 같은거 못사용하니까요 하지만 이는 클라이언트 컴포넌트에서만 가능하고, 서버에서는 토큰 만료시 재시도 로직이 불가능하다는 것을 알게되었습니다.  코드도 지저분해지는 것같고.. 그래서 다른 해결책이 있나해서 이 강의의 로그인 부분을 보고있습니다. 근데 auth,js 는 env 에 jwt secret 키를 넣어야하는걸 보니 클라이언트에서 토큰을 관리하는 것 같더라구요 제 생각은 auth.js 는 백엔드 서버에서 쿠키를 관리하는 방식과 함께 사용하기에는 맞지 않다는 느낌을 들었습니다.  그래서 next.js 에서 로그인 및 권한 관리를 쉽게 사용하려면 결국 auth.js 를 사용해야만 하는 것인지.... 궁금합니다. 그렇게된다면 백엔드에서 토큰 만드는 로직을 없애는 것이 맞는지 궁금합니다. 감사합니다. 

왜 39강까지지만 push하구 그 이후 회차들은 push안했나요? 강의 수강회차별로 소스 싱크맞추어서 학습하면 도움이 많이 될텐데 강의별로 확인해셔서 소스 동기화 요청드립니다. 80강이면 80강 까자끝난 소스가 올라오면 되겠죠 ? 79강에서 80강 갔는데 ui가 바뀌어서 어떻게 환경을 잡아야할지 당황스럽습니다.  

80강 3분 08초에서 > 3분 09초로 넘어갈때 메모UI로 어떻게 바뀐건가요? 강의교안에 수정해야 될게 있으면 추가해주세요 / 이런사소한것도 신경안쓰고 강의를 올리십니까 ? 리액을 익히는게 목적인데 환경 잡느라 시간 다 날립니다. 추가영상 촬영해서 올려주시고 교안도 수정해주세요 

78 삭제 강의 이후 79 타이틀 수정 으로 넘어 갈떄 home.jsx UI가 바뀌는데 그거에 대해 설명이 없네요 . 강의교안에 home.jsx 파일 올려주시고 / 영상에도 home.jsx 변경 하는거 추가해서 촬영 부탁드립니다.

공식 사이트에 가니 npm tailwindcss init -p명령어가 사라졌는데 버전이 올라가서 그런건가요?

다들 비슷하시군요. ㅋㅋ 지도 띄우는 부분까지 와서 ios 는 경우겨우 의존성 처리해서 구동시켰는데 이번엔 안드로이드가 안되는군요.참고로 라이브러리버전은 다음과 같습니다.강의 내용은 맘에 드는데, 버전 문제 등으로 너무 진행이 뎌뎌서 이만 포기할까 합니다.. 너무 시간이 뺏기네요이거 안되면 ..그냥 플투터로 넘어갈까 합니다..이래저래 버전문제 처리해서 구동시켰는데 앱 실행하자마자 꺼지네요.wrapper.propertiesdistributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists distributionUrl=https\://services.gradle.org/distributions/gradle-8.1.1-all.zip networkTimeout=10000 validateDistributionUrl=true zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/distsbuild.gradlebuildscript { ext { buildToolsVersion = "34.0.0" minSdkVersion = 24 compileSdkVersion = 34 targetSdkVersion = 34 ndkVersion = "25.2.9519653" // 또는 사용 중인 NDK 버전 kotlinVersion = "1.9.10" } repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle:8.1.0") classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion") classpath("com.facebook.react:react-native-gradle-plugin") } } allprojects { repositories { mavenCentral() google() } tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach { kotlinOptions { jvmTarget = "17" } } tasks.withType(JavaCompile).configureEach { options.release = 17 } } subprojects { afterEvaluate { project -> if (project.plugins.hasPlugin("com.android.library") || project.plugins.hasPlugin("com.android.application")) { project.android { compileSdkVersion rootProject.ext.compileSdkVersion buildToolsVersion rootProject.ext.buildToolsVersion defaultConfig { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion ndkVersion rootProject.ext.ndkVersion } compileOptions { sourceCompatibility JavaVersion.VERSION_17 targetCompatibility JavaVersion.VERSION_17 } // ✅ Kotlin 적용 프로젝트에서만 실행 if (project.plugins.hasPlugin("kotlin-android")) { kotlinOptions { jvmTarget = "17" } kotlin { jvmToolchain(17) } } } } } } "dependencies": { "@react-native-community/geolocation": "^3.1.0", "@react-native-community/slider": "^4.5.0", "@react-native-masked-view/masked-view": "^0.3.0", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/drawer": "^6.6.6", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "@tanstack/react-query": "^5.8.7", "axios": "^1.6.2", "patch-package": "^8.0.0", "postinstall-postinstall": "^2.1.0", "react": "18.2.0", "react-native": "^0.72.0", "react-native-config": "^1.5.1", "react-native-date-picker": "^4.3.5", "react-native-encrypted-storage": "^4.0.3", "react-native-gesture-handler": "2.12.0", "react-native-image-crop-picker": "^0.40.2", "react-native-maps": "1.15.0", "react-native-permissions": "^4.0.1", "react-native-reanimated": "3.5.4", "react-native-safe-area-context": "^4.7.4", "react-native-screens": "3.29.0", "react-native-toast-message": "^2.2.0", "react-native-vector-icons": "^10.0.3", "zustand": "^4.5.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/plugin-transform-private-methods": "^7.27.1", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-native-vector-icons": "^6.4.18", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "babel-plugin-module-resolver": "^5.0.0", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.9", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" }

강사님 안녕하세요. 강의 잘 듣고 있습니다!강사님께서는 스타일링을 하실때 리액트 네이티브 기본 styleSheet를 사용 해서 개발하시는데,현재 강의에서 개발하는 토이프로젝트 규모의 앱이 아니라, 실제 서비스용 앱을 개발하실때에도 기본 styleSheet를 사용해서 개발하시는지 아니면 다른 외부 라이브러리를 사용해서 개발하시는지 궁금합니다!next.js 나 react 에서는 생산성이나 기능적인 부분때문에 다양한 라이브러리를 사용하는 경우가 많은데, 리액트 네이티브에서는 기본 스타일만으로 충분한지 조언들 듣고 싶습니다. 감사합니다!

아바타 hat이나 hand의 요소 이미지는 제공하지 않나요?

20.update-object받으니 컴포넌트의 기억저장서 부터이고 21조건부 랜터링부터 ~ 24이벤트전파까지의 소스  브랜치가 없네요

안녕하세요 Next app router 관련해서 질문드립니다.현재 사이드프로젝트에서 route handler를 적극활용하고 있는데요.제가 인프라나 백엔드 관련 지식이 없다보니 좀 헷갈리는게 있습니다. 현재 저희 서비스에서 특정 API는 클라이언트 컴포넌트에서 route handler로 API 호출 -> route handler에서 외부 백엔드 API 호출이런 형태로 사용되고 있는데요, 이때 실제로 route handler 서버가 아래의 사진 중 어느 형태로 운용되는 것인가요? 즉, Next 프로젝트를 배포했을 때 각 유저마다 route handler 서버가 할당되는 것인가요? 아니면 모든 유저의 요청을 오직 하나의 route handler서버에서 대응하는 것인가요?     아니면 이게 배포 환경에 따라 달라지는것인가요?

무한로딩 되면서 접속이 안되요 ㅠㅠ

초기 설치 시 취약점 발생```npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array insteadnpm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supportednpm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema insteadnpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated superagent@8.1.2: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.netadded 795 packages, and audited 796 packages in 7s122 packages are looking for funding run npm fund for details18 vulnerabilities (4 low, 5 moderate, 9 high)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun npm audit for details.```이후 ```npm audit fix``` 실행 후 두 번째 취약점 발생```# npm audit reportmulter 1.4.4-lts.1 - 2.0.0Severity: highMulter vulnerable to Denial of Service via unhandled exception - https://github.com/advisories/GHSA-g5hg-p3ph-g8qgfix available via npm audit fix --forceWill install @nestjs/platform-express@8.2.3, which is a breaking changenode_modules/multer @nestjs/platform-express >=8.2.4 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of multer node_modules/@nestjs/platform-express @nestjs/core >=9.0.0-next.1 Depends on vulnerable versions of @nestjs/platform-express node_modules/@nestjs/core @nestjs/serve-static 2.0.0-next.1 - 2.0.0 || >=3.0.0 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of path-to-regexp node_modules/@nestjs/serve-static @nestjs/testing >=9.0.0-next.1 Depends on vulnerable versions of @nestjs/core Depends on vulnerable versions of @nestjs/platform-express node_modules/@nestjs/testingpath-to-regexp 0.2.0 - 1.8.0Severity: highpath-to-regexp outputs backtracking regular expressions - https://github.com/advisories/GHSA-9wv6-86v2-598jfix available via npm audit fix --forceWill install @nestjs/serve-static@5.0.3, which is a breaking changenode_modules/@nestjs/serve-static/node_modules/path-to-regexp6 high severity vulnerabilitiesTo address all issues (including breaking changes), run: npm audit fix --force```취약점 6개 발생 이후 안사라지길래 npm audit fix --force 진행해도 6개 그대로 나오는 현상 발생현재 node 23.7, npm 10.9.2 사용중인데 gpt한테 물어보니 nest js 버전 어쩌구 하던데 서버는 잘 몰라서 건들지를 못하겠네요. 어떻게 해야 할까요?  ❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) 

<리스트> <레코드1/> <레코드2/></리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가?각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ