묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
createPointTransactionOfLoading 에러
포트원 결제까지는 되는데 createPointTransactionOfLoading 에러가 나옵니다.Request failed with status code 404
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
Isar 마지막 업데이트는 2년전입니다.
Isar 을 pub.dev에서 찾아보면 2년전 업데이트가 되었습니다. 실무에서는 Isar를 무엇으로 대체하고 있는지 알려주세요.고맙습니다.
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
FlutterSecureStorage 질문
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM 안녕하세요 강사님. 플러터 중급강의 듣고 있는 중인데, final storage = FlutterSecureStorage();storage인스턴스를 data.dart파일에 만들어서 다른 파일에서는 data.dart를 import해서 사용하시잖아요. 그런데 초급강의를 들을때 파일 전체에서 사용하려는 인스턴스를 만들때는 get.it에 등록해서 사용하는걸로 배웠었는데 이렇게 전역변수로 설정해놓고 다른파일에서 불러와서 사용이 가능한거면 왜 굳이 get.it에 등록을 해야하는건지 이유를 잘 모르겠어서 질문드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
11강 23:35부터 막혀서 질문 드려요.
아래처럼 소스도 똑같이 작성하면서 따라왔는데, 화면처럼 나오면서 막힙니다. 이후 코드를 따라서 작성해도 따라갈 수가 없어요...*{ 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; }
-
미해결React Native with Expo: 제로초에게 제대로 배우기
expo-blur 사용하면서 생긴 버그입니다.
react19.1.0react-native0.81.5expo~54.0.23버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다.---12. CSS와의 차이점, 비슷한 점4분 넘어서 블러뷰 적용하는 부분에서 생기는 문제 입니다. 원인은 BlurView때문에 생기는 문제 같고 웹으로 띄우면 별 문제 없는데 안드 앱에서는 문제가 되고 있습니다. 어떻게 해결하는게 좋을까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
router.navigate 동작이 달라졌을까요?
최신 버전에서는 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 with Expo: 제로초에게 제대로 배우기
Toast 기능
안녕하세요 🙂토스트 버전은 "react-native-toast-message": "^2.3.3",입니다. 저는 모달 위에 토스트가 뜨지 않고, 모달이 꺼지면 그 뒤에 토스트가 보입니다..!찾아보니 ios와 aos는 모달 구현 방식에서 차이가 있다고 하더라구요..ㅠㅠ맞다면 혹시 ios에서는 어떤 방식으로 모달위에 토스트를 띄우는지 알 수 있을까요??참고로 모달 내부 마지막요소에 Toast 컴포넌트를 추가했는데도 모달이 꺼지고나서야 보이네요..!해결 했습니다..! fetch 이후에 뜨는 쪽만 제대로 돼있고, fetch 전에 띄우는 게 잘못 돼있어서 안떠보이는 거였습니다..;;ㅎㅎ 아래 질문만.. 답변 해주시면 감사하겠습니다.ㅎㅎ🙏 그리고 게시글 포스팅 이후에 자동으로 게시글로 이동하는데, 토스트 누르면 게시글로 이동하게 하는 기능이 굳이 필요한 건지도 궁금합니다! 감사합니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
onEndReached 함수가 바로 호출 되지 않는 이슈
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", }, });
-
미해결React Native with Expo: 제로초에게 제대로 배우기
expo push service에 관한 질문
Expo 프레임워크를 활용해서 푸쉬 알림을 설정할때 두 가지 방법이 있다는 것을 확인할 수 있었습니다. 서버에서 expo push service를 거쳐서 ios - APNs, android-Firebase 연결expo push service를 사용하지 않고 서버에서 직접 Ios-APNs, android-FireBase연결 이 두 방법이 있고 공식문서에서도 두 방법에 대해서 안내해주는 레퍼를 확인할 수 있었습니다.당연히 1번이 구현 난이도가 더욱 쉽고 빠르게 적용할 수 있는 방법입니다. 하지만 현재 앱이 창업 팀을 꾸려서 실 서비스를 하려고 하는 입장인데, expo-push-service에 의존하는게 어떤지에 대해서 의문점이 있습니다.실무의 경우 App 단을 react native로 운영하고 있을떄 두 가지 선택지에서 초기 창업시에 어떤 것을 선택하고 무엇이 장기적인 입장에서 옳은 방향일까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
ios에서 개발중이신 분들은
"ios": { "infoPlist": { "ITSAppUsesNonExemptEncryption": false, "NSLocationWhenInUseUsageDescription": "이 앱은 사용자의 위치를 기반으로 기능을 제공하기 위해 위치 정보가 필요합니다.(Allow $(PRODUCT_NAME) to use your location.)" } },app.json에서 요 부분 추가 하시고 npm run ios 로 빌드 다시 해보시면 될거에요.만약에 안되시면,rm -rf ios 명령어로 ios 파일 삭제 후 다시 빌드 해보시면 잘 될겁니다!
-
미해결React Native with Expo: 제로초에게 제대로 배우기
[질문아님] tabBarLabel 대신 tabBarShowLabel
궁금해서 Gemini에게 물어봤는데요..!tabBarLabel이 {null}로 반환하는 것과 {""} 빈문자열 넣는 법.이 두가지 차이점을 물어보다가 아래 tabBarShowLabel 속성이 있다는 걸 알게됐고,요 속성은 아예 레이아웃 처리가 되지 않는 다는 걸 알게됐습니다.부모 <Tabs />에 한번만 쓰면 하위에 다 적용되는 구조입니다.tabBarShowLabel: false,일단 저는 이 속성 사용해보고있는데,좋은 것 같아용 ㅎㅎ제로초님은 이걸 사용하지 않으시던데,혹시나 요거 사용하면 안되는거면 댓글 달아주세용ㅎㅎ
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
Dio onError Interceptor 만드는 부분에 질문이 있습니다.
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM 이미 다른 분이 비슷한 질문을 하신 것 같지만, 해당 답변에서 궁금증이 잘 해결되지 않아 다시 질문 드립니다. 강의에서 [14:04] 즈음에 return super.onError(err, handler); 코드를 지우고 나서,[17:44] 즈음에서 그 자리에 다시 return handler.reject(e); 코드를 추가하셨는데, 이렇게 하신 이유가 궁금합니다.저는 그냥 super.onError 함수를 그대로 두어도 될 것 같은 느낌이 듭니다. super.onError 함수랑 handler.reject 함수가 어떤 차이를 가지는 걸까요?
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
관리자 기능에 대한 질문
안녕하세요 코드팩토리님. 해당 섹션과 상관이 없는 질문이지만, 강사님께서 앱을 개발하실 때 관리자 페이지(상품 수정, 문의 내역 열람 및 답변 등)를 어떻게 구현하시는지 궁금합니다. 제 생각에는 앱에 관리자 기능을 포함하는 경우, ROLE을 통해 사용자/관리자 여부 구분이 가능하더라도, 보안에 취약하고 코드가 늘어남에 따라 리소스양이 방대해져서 좋지 않을 것 같습니다. 그래서 앱에 포함되지 않는 관리자용 웹 페이지를 따로 만드는 것이 괜찮을 것 같은데, 강사님께서 어떻게 생각하시는지 궁금합니다. 강사님은 주로 어떠한 방식으로 구현하셨을까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
Location.getCurrentPositionAsync({}); 에러
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 주소
하이브리드앱 api는 어디서 볼 수 있나요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
.
.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
하이브리드앱 과제 레퍼런스 코드
하이브리드앱 과제 진행 중입니다과제01에 " project/mobile 경로에 app 폴더를 생성하고, project/mobile/app 경로에 숙제가이드에 포함된 _layout.tsx, index.tsx 파일을 복사해 주세요." 라고 되어 있는데 숙제가이드가 안 보여서 문의드립니다.노션에서는 "레퍼런스 코드는 모든 과정이 업데이트 후 최종 공개됩니다" 라고 되어있는데 그럼 아직 업데이트가 안 돼서 _layout.tsx, index.tsx 파일을 못 보는 건가요? 아니면 강의에서 진행했던 것처럼 _layout.tsx, index.tsx 두 파일을 수정하면 되나요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
EAS preview 빌드 후 Device에서 카카오 로그인 브라우저가 안켜짐
저는 강의 수강 후 개인 앱을 만들고 있습니다.EAS preview 빌드 후 해당 빌드 내용을 Orbit을 통해 에뮬레이터에서는 로그인 부라우저가 뜨고 다음 화면까지 이동하는 프로세스가 잘 동작하는 것 까지 확인했습니다. 그런데 제 실제 디바이스에서 구동해보면 카카오 로그인 버튼을 누르면 설정해놓은 Loading spining만 뜨다가 화면이 넘어가지질 않습니다.로그도 못보고 있어서 해결을 못하고 있는데 혹시 이런 경우 관련 해결팁이 있을까요 ?저는 이 화면으로 넘어가고 싶은데 안되네요 ㅠㅠ..
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
조건문, 반복문 너무 어려움
안녕하세요 강의를 수강중인데 조건문, 반복문 식을 짜려고 하는데 식을 짜는게 너무 어렵습니다 원래 처음엔 다 그런건가요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
폴더 구조 관련 질문
제로초님 안녕하세요 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 내부의 하위 컴포넌트들은 완전히 무시하도록 하고 싶은데 아무리 찾아봐도 무시할 방법이 없는 거 같습니다 ㅠ 제로초님께서는 어떤 방법으로 페이지 내부 하위 컴포넌트들을 배치하시는지 궁금합니다..!! 관리하기 용이한 폴더 구조가 있다면 추천해주실 수 있으신가요??