아래처럼 소스도 똑같이 작성하면서 따라왔는데, 화면처럼 나오면서 막힙니다. 이후 코드를 따라서 작성해도 따라갈 수가 없어요...*{ box-sizing: border-box; margin: 0px; } .background { width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox { width: 800px; height: 544px; background-image: url("../images/outerbox.png"); } .wrapper { display: flex; flex-direction: row; padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; background-color: bisque; } .wrapper__left__header { width: 100%; height: 30px; background-color: aqua; } .wrapper__left__body { width: 100%; height: 100%; background-color: steelblue; } .wrapper__right { width: 524px; height: 472px; background-color: violet; }

react19.1.0react-native0.81.5expo~54.0.23버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다.---12. CSS와의 차이점, 비슷한 점4분 넘어서 블러뷰 적용하는 부분에서 생기는 문제 입니다. 원인은 BlurView때문에 생기는 문제 같고 웹으로 띄우면 별 문제 없는데 안드 앱에서는 문제가 되고 있습니다. 어떻게 해결하는게 좋을까요?

최신 버전에서는 navigate 동작이 바뀐거같네요 "react": "19.1.0", "react-native": "0.81.5", "expo": "~54.0.33", "expo-router": "~6.0.23", 사용하면서 강의 듣는데..router.push는A -> B -> C -> C -> B -> B -> C -> B일 때 뒤로가기 하면 정확하게 역순으로 B -> C -> B -> B -> C -> C -> B -> A 로 동작하는데router.navigate는A -> B -> C -> C -> B -> B -> C -> B 일때B -> C -> B-> C -> B -> A 처럼바로 연달아서 같은 라우터를 연속 클릭햇을 때에만 뒤로가기 할 때 중복이 제거되거 되는 것 처럼 동작하는 것 같아요activity 폴더에 적용한 코드들입니다index.tsximport NotFound from "@/app/+not-found"; import { usePathname, useRouter } from "expo-router"; import { Text, TouchableOpacity, View } from "react-native"; export default function Index() { const router = useRouter(); const pathname = usePathname(); if ( ![ "/activity", "/activity/follows", "/activity/replies", "/activity/mentions", "/activity/reposts", "/activity/verified", ].includes(pathname) ) { return <NotFound />; } return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center", }} > <View> <TouchableOpacity onPress={() => router.push(`/activity`)}> <Text style={{ color: pathname === "/activity" ? "red" : "black" }}> All </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/follows`)}> <Text style={{ color: pathname === "/activity/follows" ? "red" : "black", }} > Follows </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/replies`)}> <Text style={{ color: pathname === "/activity/replies" ? "red" : "black", }} > Replies </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/mentions`)}> <Text style={{ color: pathname === "/activity/mentions" ? "red" : "black", }} > Mentions </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/reposts`)}> <Text style={{ color: pathname === "/activity/reposts" ? "red" : "black", }} > Reposts </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/verified`)}> <Text style={{ color: pathname === "/activity/verified" ? "red" : "black", }} > Verified </Text> </TouchableOpacity> </View> </View> ); }  _layout.tsximport { Slot } from "expo-router"; export default Slot;  [tabs].tsxexport { default } from "."; 3분 강의로 2시간이 사라진.....ㅠㅠ

안녕하세요 🙂토스트 버전은 "react-native-toast-message": "^2.3.3",입니다. 저는 모달 위에 토스트가 뜨지 않고, 모달이 꺼지면 그 뒤에 토스트가 보입니다..!찾아보니 ios와 aos는 모달 구현 방식에서 차이가 있다고 하더라구요..ㅠㅠ맞다면 혹시 ios에서는 어떤 방식으로 모달위에 토스트를 띄우는지 알 수 있을까요??참고로 모달 내부 마지막요소에 Toast 컴포넌트를 추가했는데도 모달이 꺼지고나서야 보이네요..!해결 했습니다..! fetch 이후에 뜨는 쪽만 제대로 돼있고, fetch 전에 띄우는 게 잘못 돼있어서 안떠보이는 거였습니다..;;ㅎㅎ 아래 질문만.. 답변 해주시면 감사하겠습니다.ㅎㅎ🙏 그리고 게시글 포스팅 이후에 자동으로 게시글로 이동하는데, 토스트 누르면 게시글로 이동하게 하는 기능이 굳이 필요한 건지도 궁금합니다! 감사합니다.

onEndReached()가 바로 호출 되지 않습니다.생각 해보면.. 이 함수는 스크롤이 됐을 때만 호출 해야 맞지 않나요..? following쪽도 useEffect 쪽을 삭제 하고 나서는 데이터를 바로 불러 오지 못하는데.. "useEffect 제거 후 onEndreached()가 바로 실행된다." 이 부분 이해가 잘 안돼서 설명 부탁드리기 전에 한번 찾아봤습니다.대략 왜 바로 실행 된다고 하셨는지는 이해가 되긴 했는데, 저같은 경우는 좀 예외인 것 같아서 질문 남깁니다!지금 제 flash-list 버전은 아래와 같습니다!"@shopify/flash-list": "2.0.2",알아보니 v2에서는 estimatedItemSize를 제공하지 않고.. 해당 설정이 없어서 저같은 경우 onEndReached()가 바로 실행 되지 않았던 것 같습니다. 의존 된 데이터도 빈배열로 정의 돼있으니 더 아무 것도 실행 하지 않았던 것 같습니다.이런 경우 초기엔 useEffect로 직접 불러오나요?혹시 위에 버전 이슈 말고 제가 놓친 부분이 있다면 말씀 부탁드리겠습니다..!(home)/index.tsximport { Text, View, TouchableOpacity, StyleSheet, useColorScheme, ScrollView, } from "react-native"; import { usePathname } from "expo-router"; import { useState, useCallback } from "react"; import Post, { Post as PostType } from "../../../components/Post"; import { FlashList } from "@shopify/flash-list"; export default function Index() { const colorScheme = useColorScheme(); const path = usePathname(); const [posts, setPosts] = useState<PostType[]>([]); const onEndReached = useCallback(() => { console.log("posts1", posts.length); const lastId = posts.at(-1)?.id; if (!lastId) return; fetch(`/posts?cursor=${lastId}`) .then((res) => res.json()) .then((data) => { if (data.posts.length > 0) { setPosts((prev) => [...prev, ...data.posts]); } }) .catch(console.error); }, [posts, path]); return ( <View style={[ styles.container, colorScheme === "dark" ? styles.containerDark : styles.containerLight, ]} > <FlashList data={posts} renderItem={({ item }) => <Post item={item} />} onEndReached={onEndReached} onEndReachedThreshold={2} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, containerLight: { backgroundColor: "white", }, containerDark: { backgroundColor: "#101010", }, textLight: { color: "black", }, textDark: { color: "white", }, });

Expo 프레임워크를 활용해서 푸쉬 알림을 설정할때 두 가지 방법이 있다는 것을 확인할 수 있었습니다.  서버에서 expo push service를 거쳐서 ios - APNs, android-Firebase 연결expo push service를 사용하지 않고 서버에서 직접 Ios-APNs, android-FireBase연결 이 두 방법이 있고 공식문서에서도 두 방법에 대해서 안내해주는 레퍼를 확인할 수 있었습니다.당연히 1번이 구현 난이도가 더욱 쉽고 빠르게 적용할 수 있는 방법입니다. 하지만 현재 앱이 창업 팀을 꾸려서 실 서비스를 하려고 하는 입장인데, expo-push-service에 의존하는게 어떤지에 대해서 의문점이 있습니다.실무의 경우 App 단을 react native로 운영하고 있을떄 두 가지 선택지에서 초기 창업시에 어떤 것을 선택하고 무엇이 장기적인 입장에서 옳은 방향일까요?

"ios": { "infoPlist": { "ITSAppUsesNonExemptEncryption": false, "NSLocationWhenInUseUsageDescription": "이 앱은 사용자의 위치를 기반으로 기능을 제공하기 위해 위치 정보가 필요합니다.(Allow $(PRODUCT_NAME) to use your location.)" } },app.json에서 요 부분 추가 하시고 npm run ios 로 빌드 다시 해보시면 될거에요.만약에 안되시면,rm -rf ios 명령어로 ios 파일 삭제 후 다시 빌드 해보시면 잘 될겁니다!

궁금해서 Gemini에게 물어봤는데요..!tabBarLabel이 {null}로 반환하는 것과 {""} 빈문자열 넣는 법.이 두가지 차이점을 물어보다가 아래 tabBarShowLabel 속성이 있다는 걸 알게됐고,요 속성은 아예 레이아웃 처리가 되지 않는 다는 걸 알게됐습니다.부모 <Tabs />에 한번만 쓰면 하위에 다 적용되는 구조입니다.tabBarShowLabel: false,일단 저는 이 속성 사용해보고있는데,좋은 것 같아용 ㅎㅎ제로초님은 이걸 사용하지 않으시던데,혹시나 요거 사용하면 안되는거면 댓글 달아주세용ㅎㅎ

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM  이미 다른 분이 비슷한 질문을 하신 것 같지만, 해당 답변에서 궁금증이 잘 해결되지 않아 다시 질문 드립니다.  강의에서 [14:04] 즈음에 return super.onError(err, handler); 코드를 지우고 나서,[17:44] 즈음에서 그 자리에 다시 return handler.reject(e); 코드를 추가하셨는데, 이렇게 하신 이유가 궁금합니다.저는 그냥 super.onError 함수를 그대로 두어도 될 것 같은 느낌이 듭니다. super.onError 함수랑 handler.reject 함수가 어떤 차이를 가지는 걸까요?

안녕하세요 코드팩토리님. 해당 섹션과 상관이 없는 질문이지만, 강사님께서 앱을 개발하실 때 관리자 페이지(상품 수정, 문의 내역 열람 및 답변 등)를 어떻게 구현하시는지 궁금합니다. 제 생각에는 앱에 관리자 기능을 포함하는 경우, ROLE을 통해 사용자/관리자 여부 구분이 가능하더라도, 보안에 취약하고 코드가 늘어남에 따라 리소스양이 방대해져서 좋지 않을 것 같습니다. 그래서 앱에 포함되지 않는 관리자용 웹 페이지를 따로 만드는 것이 괜찮을 것 같은데, 강사님께서 어떻게 생각하시는지 궁금합니다. 강사님은 주로 어떠한 방식으로 구현하셨을까요?

npm ls react 19.1.0npm ls react-native 0.81.5npm ls expo 54.0.27버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다.에뮬레이터에 location도 설정했는데 왜 마크표시를 누르면 아래 에러가 발생하는걸까요.. 빌드 지우고 다시 설치하고도 해봤습니다. LOG getMyLocation granted ERROR [Error: Uncaught (in promise, id: 1) Error: Current location is unavailable. Make sure that location services are enabled] Code: construct.js 2 | var setPrototypeOf = require("./setPrototypeOf.js"); 3 | function _construct(t, e, r) { > 4 | if (isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); | ^ 5 | var o = [null]; 6 | o.push.apply(o, e); 7 | var p = new (t.bind.apply(t, o))(); Call Stack construct (<native>) apply (<native>) _construct (node_modules/@babel/runtime/helpers/construct.js:4:65) Wrapper (node_modules/@babel/runtime/helpers/wrapNativeSuper.js:15:23) construct (<native>) _callSuper (node_modules/@babel/runtime/helpers/callSuper.js:5:108) constructor (node_modules/expo-modules-core/src/errors/CodedError.ts:11:5) 

하이브리드앱 api는 어디서 볼 수 있나요?

.

하이브리드앱 과제 진행 중입니다과제01에 " project/mobile 경로에 app 폴더를 생성하고, project/mobile/app 경로에 숙제가이드에 포함된 _layout.tsx, index.tsx 파일을 복사해 주세요." 라고 되어 있는데 숙제가이드가 안 보여서 문의드립니다.노션에서는 "레퍼런스 코드는 모든 과정이 업데이트 후 최종 공개됩니다" 라고 되어있는데 그럼 아직 업데이트가 안 돼서 _layout.tsx, index.tsx 파일을 못 보는 건가요? 아니면 강의에서 진행했던 것처럼 _layout.tsx, index.tsx 두 파일을 수정하면 되나요?

저는 강의 수강 후 개인 앱을 만들고 있습니다.EAS preview 빌드 후 해당 빌드 내용을 Orbit을 통해 에뮬레이터에서는 로그인 부라우저가 뜨고 다음 화면까지 이동하는 프로세스가 잘 동작하는 것 까지 확인했습니다. 그런데 제 실제 디바이스에서 구동해보면 카카오 로그인 버튼을 누르면 설정해놓은 Loading spining만 뜨다가 화면이 넘어가지질 않습니다.로그도 못보고 있어서 해결을 못하고 있는데 혹시 이런 경우 관련 해결팁이 있을까요 ?저는 이 화면으로 넘어가고 싶은데 안되네요 ㅠㅠ.. 

안녕하세요 강의를 수강중인데 조건문, 반복문 식을 짜려고 하는데 식을 짜는게 너무 어렵습니다 원래 처음엔 다 그런건가요?

제로초님 안녕하세요 expo 프로젝트의 폴더 구조에 대해서 고민이 있습니다.!!현재 src/app 폴더에서 페이지들을 관리하고 있고각 페이지 내부에서만 사용하는 하위 컴포넌트들은 src/app/settings/_components/AccountSettingsSection.tsx와 같이 _components 폴더 하위에 배치하고, named export를 통해 라우트로 잡히지 않게 하고 있습니다. 문제는 없지만 프로젝트를 실행시키면 WARN Route "./settings/_components/AccountSettingsSection/AccountSettingsSection.tsx" is missing the required default export. Ensure a React component is exported as default.라는 경고 메시지가 app/ 내부에서 named export 한 모든 하위 컴포넌트를 대상으로 출력됩니다. Next.js처럼 _components 내부의 하위 컴포넌트들은 완전히 무시하도록 하고 싶은데 아무리 찾아봐도 무시할 방법이 없는 거 같습니다 ㅠ 제로초님께서는 어떤 방법으로 페이지 내부 하위 컴포넌트들을 배치하시는지 궁금합니다..!! 관리하기 용이한 폴더 구조가 있다면 추천해주실 수 있으신가요??

강의 내용과는 별개로, 개인적으로 공부를 더 하고 싶은 부분이 있어 도움을 요청드립니다.현재 출퇴근 시간에 활용할 목적으로 실습보다는 내용이나 이론이 탄탄한 개발 서적을 찾고 있습니다. 예를 들면, JS Deep Dive처럼 언어의 원리나 깊은 내용을 다루는 책을 선호합니다.강의 영상이나 소리 대신 책으로 글을 읽으며 내용을 훑어보고, "이런 기능도 있구나, 이럴 땐 이렇게 하는구나" 하며 지식을 확장하는 용도로 활용하고 싶습니다.혹시 추천해주실 만한 서적이 있을까요?

React/Next.js 프로젝트에서 Tailwind를 많이 사용하는 추세인데, 이와 매우 유사한 React Native 의 Natviewind 라는게 있더군요. Nativewind를 사용하면 기존 Tailwind에서 처럼 className으로 빠르게 스타일링할 수 있고 웹과 모바일 간 일관된 스타일 코드를 유지할 수 있는 장점이 있는 것 같습니다. React Native 기초 강의이므로 기본 React Native CSS 사용을 통해 구현하는 방식을 보여주신 것인지 궁금합니다.

.