강의 잘 따라가다가 로그인까지 성공했는데 20강부터 갑자기 add,activity,user탭을 눌러도 전환이 안돼요.. home이랑 search만 전환이 됩니다. 에러도 안떠서 어디부터 잘못된건지 감이 안 오는데 어떤 파일을 확인해야 할까요?app/(tabs)_layout.tsx 입니다import { Ionicons } from "@expo/vector-icons"; import { type BottomTabBarButtonProps } from "@react-navigation/bottom-tabs"; import { Tabs, useRouter } from "expo-router"; import { useContext, useRef, useState } from "react"; import { Animated, Modal, Pressable, Text, TouchableOpacity, View } from "react-native"; import { AuthContext } from "../_layout"; export default function TabLayout(){ const router=useRouter(); const [isLoginModalOpen,setIsLoginModalOpen]=useState(false); const {user}=useContext(AuthContext); const isLoggedIn = !!user; const openLoginModal=()=>{ setIsLoginModalOpen(true); }; const closeLoginModal=()=>{ setIsLoginModalOpen(false); }; const toLoginPage= ()=>{ setIsLoginModalOpen(false); router.push("/login"); } const AnimatedTabBarButton=({ children, onPress, style, ...restProps }: BottomTabBarButtonProps)=>{ const scaleValue=useRef(new Animated.Value(1)).current; const handlePressOut=()=>{ Animated.sequence([ Animated.spring(scaleValue,{ toValue:1.2, useNativeDriver:true, speed:200, }), Animated.spring(scaleValue,{ toValue:1, useNativeDriver:true, speed:200, }), ]).start(); } return ( <Pressable onPress={onPress} onPressOut={handlePressOut} style={[{ flex: 1, justifyContent: "center", alignItems: "center" }, style]} android_ripple={{ borderless: false, radius: 0 }} > <Animated.View style={{ transform: [{ scale: scaleValue }] }}> {children} </Animated.View> </Pressable> ); } return ( <> <Tabs backBehavior="history" screenOptions={{ headerShown:false, tabBarButton: (props)=><AnimatedTabBarButton {...props}/>, }} > <Tabs.Screen name="(home)" options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="home" size={24} color={focused ? "black":"gray"}/> ), }} /> <Tabs.Screen name="search" options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="search" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="add" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } } }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="add" size={24} color={focused ? "black":"gray"}/> ), }} /> <Tabs.Screen name="activity" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } }, }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="heart-outline" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="[username]" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } }, }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="person-outline" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="(post)/[username]/post/[postID]" options={{ href:null, }} /> </Tabs> <Modal visible={isLoginModalOpen} transparent={true} animationType="slide" > <View style={{ flex:1, justifyContent:"flex-end", backgroundColor:"rgba(0,0,0,0.5)" }}> <View style={{backgroundColor:"white",padding:20}}> <Pressable onPress={toLoginPage}> <Text>Login Modal</Text> </Pressable> <TouchableOpacity onPress={closeLoginModal}> <Ionicons name="close" size={24} color='#555'/> </TouchableOpacity> </View> </View> </Modal> </> ); }

ios환경에서 어떻게 해야되는 지 알려주시면 감사하겠습니다.

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

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

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

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

안녕하세요 제로초님 강의 잘 보고 있습니다.카카오 로그인을 구현하는 중에 문제가 생겨 어찌해서 해결했는데 해결된 이유가 궁금해서 질문드립니다! 1. 에러로그TypeError: queryString.stringify is not a function 이라는 에러가 나서 찾아보니 query-string 버전 충돌이 있는 것 같아 query-string을 @7.1.3 버전으로 설치하니 해결이 되었습니다.pnpm-locl.yml을 보니 query-string을 아래와 같이 두 버전을 같이 쓰고 있었습니다.  query-string@7.1.3: dependencies: decode-uri-component: 0.2.2 filter-obj: 1.1.0 split-on-first: 1.1.0 strict-uri-encode: 2.0.0 query-string@9.2.0: dependencies: decode-uri-component: 0.4.1 filter-obj: 5.1.0 split-on-first: 3.0.0  2. 사용하고 있는 패키지들1) @react-native-kakao/core@react-native-kakao/core@2.4.0(expo@53.0.10(@babel/core@7.27.4)(@expo/metro-runtime@5.0.4(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0)))(react-native-webview@13.13.5(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0)': dependencies: crypto-js: 4.2.0 query-string: 9.2.0 react: 19.0.02) @react-navigation '@react-navigation/core@7.10.0(react@19.0.0)': dependencies: '@react-navigation/routers': 7.4.0 escape-string-regexp: 4.0.0 nanoid: 3.3.11 query-string: 7.1.3 위의 에러로그에서와 같이 tab layout에 접근하려 할 때 react-navigation의 getPathFromState.js에서 query-string의 import에서 문제가 발생하는 것 같았는데 정확히 어떤 문제인지 잘 모르겠네요.. lockfile과 node_modules를 삭제해도 동일하게 query-string은 두가지 버전으로 설치되었고 만약 package.json에 query-string을 7버전으로 명시적으로 설치하지 않으면 탭 레이아웃의 모든 페이지들에서 저 오류가 납니다.일단 query-string 패키지 설치를 해서 오류를 해결하긴 했지만 정확한 이유를 모르겠어서 질문드립니다 ! 아래는 GPT에게 질문시 답변한 내용입니다.GPT 답변 내용query-string@9.x는 ESM-only라서 CommonJS 방식의 import (import * as queryString) 시 undefined가 반환됨React Navigation 내부의 getPathFromState.ts에서 queryString.stringify(...) 호출 시 에러 발생의존성 충돌로 인해 런타임 크래시가 발생하는 것으로 보임 ❓질문드리고 싶은 점이러한 충돌을 예방하기 위한 공식적인 방법은 무엇인가요? (예: pnpm.overrides로 강제 버전 고정)혹시 다른 라이브러리에서도 이와 같은 ESM-CJS 충돌을 방지하기 위한 일반적인 best practice가 있을까요?// package.json"dependencies": { "@expo/vector-icons": "^14.1.0", "@react-native-async-storage/async-storage": "2.1.2", "@react-native-kakao/core": "^2.4.0", "@react-native-kakao/user": "^2.4.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/elements": "^2.3.8", "@react-navigation/native": "^7.1.6", "@rneui/themed": "4.0.0-rc.8", "@supabase/supabase-js": "^2.49.9", "expo": "~53.0.9", "expo-blur": "~14.1.4", "expo-build-properties": "~0.14.6", "expo-constants": "~17.1.6", "expo-dev-client": "~5.1.8", "expo-font": "~13.3.1", "expo-haptics": "~14.1.4", "expo-image": "~2.1.7", "expo-linking": "~7.1.5", "expo-router": "~5.0.6", "expo-splash-screen": "~0.30.8", "expo-status-bar": "~2.2.3", "expo-symbols": "~0.4.4", "expo-system-ui": "~5.0.7", "expo-web-browser": "~14.1.6", "query-string": "^7.1.3", "react": "19.0.0", "react-dom": "19.0.0", "react-native": "0.79.2", "react-native-gesture-handler": "~2.24.0", "react-native-reanimated": "~3.17.4", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", "react-native-url-polyfill": "^2.0.0", "react-native-web": "~0.20.0", "react-native-webview": "13.13.5", "zustand": "^5.0.5" },

CH5-1에서 언급해주신 특정 IP만 접속 가능한 화이트리스트, 블랙리스트 기능 혹시 강의 예정 있으실까요?? 막상 언급하시니 궁금해서요...

help 에서도 영어만 선택할 수 있게 나오고, 한국어 설정이 안보이네요. 어떻게 해결해야할까요

안녕하세요.강의 내용과 다르게 author 데이터가 안나와서 콘솔로그 찍어서 확인해보니, properties.Author.people 항목에 name이 없네요. 다른 데이터는 조회되고 있는데 왜 안나오는지 도저히 답을 찾을 수 없네요.공식문서 봐도 응답형식 같은게 바뀐건 아닌것 같아보입니다.AI Assistant에 여러번 질문해봐도 명확한 해결책을 찾지 못했습니다.이 부분때문에 진도를 나가기 쉽지 않은 상황인데 빠른 답변 부탁드립니다.

yarn serve로 production 빌드시에Cannot find module /lecture-1/node_modules/serve/bin/serve.js'에러가 발생합니다.https://github.com/performance-lecture/lecture-1여기서 해당 패키지 clone 하고yarn으로 serve 실행시에 이같은 에러가 발생하는 것 같은데요.이거 해결 방법이 있을까요? 

버전npm ls react 19.0.0npm ls react-native 0.79.2npm ls expo 53.0.9안녕하세요 다크모드 UI를 깃허브에서 복사했는데 전까지 잘 되던app/(tabs)/_layout.tsx 에서 post 탭을 안보이게 하는 코드가 제대로 작동하지 않습니다.기기에서도 (post)/[us... 경로의 탭이 보이고 있습니다.그 뒤로 제 예전 코드로 다시 돌려봐도 탭이 사라지지 않고 계속 보이는데, 어디서부터 꼬인건지 감이 안잡힙니다ㅠ 문제가 발생한 걸로 추측되는 코드입니다.<Tabs.Screen name="(post)/[username]/post/[postID]" options={{ href: null, }} />

프라이빗 컴포넌트로 잡은 것과 그냥 컴포넌트로 잡은 것의 차이가 없지 않나요?컴포넌트를 예로 강의를 찍어 주셨는데 폴더만 더 늘어나고 좋은 예는 아닌듯합니다.프라이빗 폴더가 어떨 때 왜 필요한지를 알려주는게 더 교육적일 것 같아 글 남깁니다.컴포넌트 자체가 재사용성을 갖는 것이기에 내부 구성요소만 표기하는 프라이빗은 큰 의미가 없을 것 가은데요. 컴포넌트 외 폴더라고 해도 와닿지는 않습니다. 어차피 컴포넌트로 사용하면 uri 에도 잡히지 않고 말이죠. 전체적으로 폴더 구조만 더 복잡해지는 것 같아요

처음에 제로초님 따라한다고 pnpm build --platform android --profile development 로 한 번 실행을 했습니다. 이 때 go 를 설치하라는 말이 안나와서 '뭔가 이상하다' 했는데요. 이후에는 pnpm run android 로 켜면 development 로 켜집니다. 신기한 건 s 를 누르면 expo go 모드로는 잘 넘어가요. 그런데 Expo Go 앱이 보이지 않아 빌드를 선택해볼 수 가 없습니다..

안녕하세요, 강의 잘 수강하고 있습니다다만 강의랑 자료랑 달라서 물어보고 싶어서 글을 남깁니다.  1.ch3 압축파일에 강의와는 다르게 압축파일에는 search 클래스가 없습니다. ch4 알집파일 todo.d.ts파일에 아래와 같이 writer를 추가하는 게 맞는 건지 궁금합니다.interface TodoModify { tno: number, title: string, writer: string dueDate: string | null, complete: boolean }

안녕하세요~ 강의 잘 보고 있습니다! vanilla-extract 적용해보려고 하는데 패키지 설치하고 config설정까지 했는데 해당 에러가 나서 질문드립니다. next.config.ts파일과 globalTheme.css.ts, layout.ts중에 문제가 있을까요?? 파일 이름도 문제가 없고 코드 그대로 사용했는데도 해당 에러가 나서 next15에서 vanilla-extract 적용을 할 수 없는건지 궁금해서 여쭤봅니다.. 감사합니다// package.json// next.config.tsimport type { NextConfig } from "next"; const { createVanillaExtractPlugin // eslint-disable-next-line @typescript-eslint/no-require-imports } = require('@vanilla-extract/next-plugin'); const withVanillaExtract = createVanillaExtractPlugin(); const nextConfig: NextConfig = { /* config options here */ experimental: { serverActions: { bodySizeLimit: '10mb', // Set the body size limit for server actions } }, async rewrites() { return [ { source: '/upload/:slug', destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination }, ] }, }; module.exports = withVanillaExtract(nextConfig); // globalTheme.css.tsimport {assignVars, createGlobalTheme, createGlobalThemeContract, globalStyle} from "@vanilla-extract/css"; export const global = createGlobalThemeContract({ background: { color: 'bg-color' }, foreground: { color: 'fg-color' }, }) const whiteGlobalTheme = { background: { color: 'rgb(255, 255, 255)' }, foreground: { color: 'rgb(0, 0, 0)' }, } const darkGlobalTheme = { background: { color: 'rgb(0, 0, 0)' }, foreground: { color: 'rgb(255, 255, 255)' }, } createGlobalTheme(':root', global, whiteGlobalTheme); // 실제 적용 globalStyle(':root', { '@media': { '(prefers-color-scheme: dark)': { vars: assignVars(global, darkGlobalTheme), } } }) globalStyle('*', { boxSizing: 'border-box', padding: 0, margin: 0, }) globalStyle('html', { '@media': { '(prefers-color-scheme: dark)': { colorScheme: 'dark', } } }); globalStyle('html, body', { maxWidth: '100dvw', overflowX: 'hidden', }) globalStyle('body', { color: global.foreground.color }) globalStyle('a', { color: 'inherit', textDecoration: 'none', }) // layout.tsximport type {Metadata} from 'next' import {Inter} from 'next/font/google' import './globalTheme.css'; import {MSWProvider} from "@/app/_component/MSWComponent"; import AuthSession from "@/app/_component/AuthSession"; if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production' && process.env.MSW_ENABLED !== 'false') { const {server} = require('@/mocks/http') server.listen() } const inter = Inter({subsets: ['latin']}) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } type Props = { children: React.ReactNode, }; export default function RootLayout({children}: Props) { return ( <html lang="en"> <body className={inter.className}> <MSWProvider> <AuthSession> {children} </AuthSession> </MSWProvider> </body> </html> ) }

 커밋을 하고 나서 sure all&commit changes를 누르면 저렇게 화면이 분활되고 아무것도 작성이 안되는 상태가 되는데 어떤 이유인지 잘 모르겠습니다...   

강의 영상에서 getPostMetadata 메서드 내부에서 getCoverImage 메서드를 선언하여 커버 이미지를 다루고 있는데, 저는 이 함수가 내부에 선언된 이유를 두 가지로 이해했습니다.캡슐화 및 스코프 제한: 외부에서 사용할 필요가 없는 함수이므로 내부에 선언해 함수의 범위를 명확히 제한가독성 향상: 커버 처리 로직을 분리하여 주 함수의 가독성을 개선  그런데 영상을 보면서 든 궁금증이 한 가지 있습니다. 현재 코드에서는 getCoverImage에 page.cover를 매개변수로 전달하고 있는데, getPostMetadata 내부에서만 사용되는 함수라면, 클로저를 이용해 page에 직접 접근하는 방식이 더 자연스럽지 않나요?function getPostMetadata(page: PageObjectResponse): Post { const getCoverImage = () => { if (!page.cover) return ''; switch (page.cover.type) { case 'external': return page.cover.external.url; case 'file': return page.cover.file.url; default: return ''; } }; return { coverImage: getCoverImage(), // ... }; }이렇게 하면 page.cover를 매개변수로 전달하지 않아도 되어 더 간결하고, 함수 내부에서도 page에 자유롭게 접근하여 처리할 수 있다고 생각합니다. 물론 정답은 없겠지만클로저를 활용하여 외부 스코프에 직접 접근하는 방식명확하게 매개변수를 전달하여 의도를 분리하는 방식이 두 가지 방식 중 위 상황에서는 어떤 방식이 더 바람직한지, 혹은 상황에 따라 어떤 기준으로 선택해야 하는지 궁금합니다!

package.json 파일에맨밑 "type": "module"를 삽입하고 npm run start 를 하면강의에는 esm과 js모듈을 같이 사용할 수 없기 때문에 오류난다 하셨는데 정상적으로 작동하는 현상이 발생합니다     

인텔레리제이 세팅환경도 알려주세요