있으면 url 좀 알려주세요.

autoexport default function Weekday() { return ( <Suspense fallback={<WeekdayBannerLoading />}> <WeekdayMiniBanner /> </Suspense> ); }export default function WeekdayMiniBanner() { const { banners } = use(getBanners( params )); if (banners.length === 0) return null; return ( <div className={cn('wrapper')}> <WeekdaySwiper data={banners} /> </div> ); }이런 식으로 코드를 짰는데요. 해당 페이지를 새로고침하면 초기엔 컨텐츠영역 아무것도 노출되지않다가 잠깐 fallback ui가 노출되고 fetch가 완료되면 컨텐츠를 노출시킵니다. suspense는 promise가 pending 중일 때 promise를 catch해서 fallback ui 를 노출시키는걸로 알고 있는데 왜 새로고침 시 페이지 초기로드단계에선 빈화면이 노출되는지 궁금합니다... 아님 제가 잘못 설계한 걸까요..?? 리액트 공식문서 suspense 예시 코드에선 버튼 누르자마자 바로 fallback ui를 노출시키는데 말이죠... 참고로 WeekdaySwiper 내부는 react swiper로 구성되어있습니다! (클라이언트 컴포넌트)

brew install watchman 설치 후 가이드가 변경이 되었는지 Create a development build부분이 생겼는데 이부분도 미리 설치하면 되는걸까요?

아래 코드와 같이 template.tsx에서 서버fetch 후 사용처인 클라이언트 컴포넌트로 props 넘겨주도록 세팅해놓았습니다.   //template.tsx 자식 컴포넌트 export default async function Sidebar() { const { isSucceed, body } = await getUserGetInfo(params); return ( <SidebarLayout> <GiftIcon isNewGift={!!body?.info.new_gift} /> 'use client' export default function GiftIcon({ isNewGift }: { isNewGift: boolean }) { const { onClose } = useModal('SIDEBAR'); return ( <Link className={isNewGift ? cn(st['active']) : ''} /// <Icon type="Present" title="선물함" w={25} h={25} />  이 상태에서 next 페이지 이동 시 서버fetch는 리렌더링 되는것을 확인했는데이상하게 클라이언트는 리렌더링이 되지 않습니다. 즉 서버 응답값은 상태가 바뀌어도 클라이언트 상태값은 바뀌지 않더라구요... 왜 이런걸까요ㅠㅠㅠ

저는 처음에 과제를 할때 setTotal을 직접 prop으로 내렸는데 handleTotal 을 만들어서 함수로 내려준 이유가 있을까요??차이점과 장단점에 대해서가 궁금합니다. import Counter from "./Counter"; import React, { useState } from "react"; function Main() { const [Total, setTotal] = useState(0); return ( <main> <h2>Main Component</h2> <h1>{Total}</h1> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> </main> ); } export default Main;

안녕하세요, 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의 요소 이미지는 제공하지 않나요?