월 14,300원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결배달앱 클론코딩 [with React Native]
xcode 빌드 시 Command PhaseScriptExecution failed with a nonzero exit code 에러가 나옵니다
안녕하세요 제로초님 안드로이드는 시뮬레이터에서 돌아가는 것 보고 iOS도 해보고 있는 중입니다.그런데 계속 Command PhaseScriptExecution failed with a nonzero exit code 나오면서 빌드가 실패하네요 https://github.com/facebook/react-native/issues/36762https://stackoverflow.com/questions/75975043/xcode-error-phasescriptexecution-failed-with-a-nonzero-exit-code 위의 게시물들을 참고해서 수정도 해봤고 node_modules를 지우고 다시 설치도 해봤습니다. pod deintegrate와 캐시를 지운 후에 다시 pod install도 해줬습니다. 그래도 지속적으로 문제가 해결되지 않았습니다. 지금 애플 디벨로퍼에서 인증서들은 모두 발급 받고 Xcode에도 제 계정이 연결되어 있습니다. 하나 걸리는 건 react-native 버전이 0.74.0 인데 이 부분이 문제가 될 수도 있을까요?"react-native": "0.74.0" 혼자 해결해 보려고 했는데 도저히 답이 나오지 않아서 질문 드립니다. 늘 질문 받아주셔서 감사합니다
- 미해결배달앱 클론코딩 [with React Native]
그래들 설정 부분이 궁금합니다.
강의 내용과 실제 파이어베이스 페이지에 가보니 설정하는 부분이 달라져서 아래와 같이 넣는게 맞을 것 같다고 생각해서 넣었는데 맞는지 모르겠네요아래는 파이어베이스에서 설정하라고 하는 부분이고.아래는 소스에서 적용한 부분입니다.build.gradle 부분에서buildscript { ..... dependencies { classpath("com.android.tools.build:gradle") classpath("com.facebook.react:react-native-gradle-plugin") classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") // 추가부분 classpath('com.google.gms.google-services' version '4.4.1' apply false) } } .... app/build.gradle부분에서dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") // 추가된 부분 implementation('com.android.application') // 추가된 부분 implementation('com.google.gms.google-services') // 추가된 부분 implementation platform('com.google.firebase:firebase-bom:33.0.0') // 추가된 부분 implementation 'com.google.firebase:firebase-analytics' if (hermesEnabled.toBoolean()) { implementation("com.facebook.react:hermes-android") } else { implementation jscFlavor } } ... // 추가 apply plugin: 'com.google.gms.google-services'
- 미해결배달앱 클론코딩 [with React Native]
.env는 iOS에서는 따로 설정할 부분이 없는걸까요?
안드로이드와 아이폰 기기의 주소가 달라서 .env파일에서ANDROID_API_URL=http://10.0.2.2:3105 IOS_API_URL=http://localhost:3105이런식으로 사용을 할려고 합니다.그리고 SignUp 파일에서 아래와 같이 플랫폼에 맞게 주소를 불러오게 하려고 하는데 const response = await axios.post( Platform.OS === 'ios' ? `${Config.IOS_API_URL}/user` : `${Config.ANDROID_API_URL}/user`, { email, name, password, }, );iOS는 설정할 부분에 대한 설명이 따로 없어서 테스트를 하는데 .env를 사용하지 않고 바로 주소를 입력했을때는 정상적으로 호출이 되는데 .env를 사용하면 undefined로 나옵니다.검색을 해 보니https://velog.io/@attosisss_/ios-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95이런식으로 하면 될 것 같은데. 잘못 손을대면 문제가 커질것 같아서 조금 고민이기는 합니다.위 링크대로 xCode를 수정하면 문제가 없는지 궁금합니다.
- 미해결배달앱 클론코딩 [with React Native]
API 연결이 안됩니다.
.env 설정을 아래 3가지로 해 보고, 이것도 안되서 실제 아이피로 해 봤는데도 애뮬레이터 아래 undefined라는 오류 메시지만 뜨네요; API_URL = http://192.168.0.255:3105 API_URL = http://10.0.2.2:3105 ; API_URL = http://localhost:3105 SignUp.tsx 는 아래와 같이 되어 있습니다.try { setLoading(true); const response = await axios.post(`${Config.API_URL}/user`, { email, name, password, }); console.log(response); Alert.alert('알림', '회원가입이 완료되었습니다.'); } catch (error) { const errorResponse = (error as AxiosError).response; console.error(errorResponse); if (errorResponse) { Alert.alert('알림', errorResponse.data.message); } } finally { setLoading(false); }해당 패키지도 모두 설치하고, 서버도 재시작하고 했는데도 안되네요.포트스맨으로 http://localhost:3105로 post 요청을 해 보면 아래와 같은 오류가 뜹니다.TypeError: Cannot read properties of undefined (reading 'toLowerCase') at /Users/xxx/React-Project/React-Native/back/app.js:104:27 at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5) at next (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/route.js:137:13) at Route.dispatch (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/route.js:112:3) at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5) at /Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:281:22 at Function.process_params (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:341:12) at next (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/index.js:275:10) at urlencodedParser (/Users/xxx/React-Project/React-Native/back/node_modules/body-parser/lib/types/urlencoded.js:100:7) at Layer.handle [as handle_request] (/Users/xxx/React-Project/React-Native/back/node_modules/express/lib/router/layer.js:95:5) POST /user 500 7.179 ms - 2
- 미해결배달앱 클론코딩 [with React Native]
FastImage의 source속성 질문
FastImage의 source속성의 uri값으로 넣는 주소 API는 API.md엔 나와있지 않던데 이것도 백엔드 서버로 GET요청을 보내는 것이고 그에 따라 백엔드 서버가 해당 요청이 왔을 때 이미지를 보내주는 API를 직접 구현해야 하는게 맞죠?
- 미해결배달앱 클론코딩 [with React Native]
프로젝트를 만드는데 templateerror라는 메시지가 나옵니다.
안녕하세요.프로젝트를 새로 만들 때npx react-native MyProjectApp 으로 실행을 하면 아래와 같이 templatererror가 나옵니다.⠦ Downloading templateerror Installing pods failed. This doesn't affect project initialization and you can safely proceed. However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section. ✖ Downloading template info 💡 To enable automatic CocoaPods installation when building for iOS you can create react-native.config.js with automaticPodsInstallation field. For more details, see https://github.com/react-native-community/cli/blob/main/docs/projects.md#projectiosautomaticpodsinstallation Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd "/Users/xxx/React-Native/MyProjectApp" && npx react-native run-android Run instructions for iOS: • cd "/Users/xxx/React-Native/MyProjectApp/ios" • Install Cocoapods • bundle install # you need to run this only once in your project. • bundle exec pod install • cd .. • npx react-native run-ios - or - • Open MyProjectApp/ios/MyProjectApp.xcodeproj in Xcode or run "xed -b ios" • Hit the Run button Run instructions for macOS: • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions. 코코아팟도 설치가 되어있어서pod --version 을 하면1.15.2라고 버전이 나옵니다.해당 프로젝트로 들어가서 npx pod-install을 실행하면 이상하게 MyProjectApp 과 같은 레벨의 경로에서 FoodDeliveryApp 이라는 폴더가 생성이 되고, 그 안에는 apps와 repos라는 폴더가 생성이 됩니다.안에는 아무것도 내용이 없어요.프로젝트를 만들고 xcode로 빌드하고, 클린하고, 안드로이드 스튜디오에서 열고 삭제하고 인텔리에서 프로젝트를 열고 지우고 하는것을 여러번 반복했었는데파일들이 깨끗하게 지워지지 않아서 기존에 만들었던 프로젝트가 생성이 되는지는 모르겠네요..그리고 해당 경로로 들어가면 아무런 파일도 생성이 안되어 있습니다.
- 미해결배달앱 클론코딩 [with React Native]
프로젝트 생성시 원하는 도매인으로 변경하는것고, 안드로이드를 자바로 시작할려면 어떻게 해야할까요?
강의를 보면서 Git 자료를 함께 참조해서 학습중입니다. README 파일을 보면 아래와 같이 프로젝트를 생성하게 되는데npx react-native init FoodDeliveryApp 안드로이드의 경로를 보면 android > app > src > main > java 하위 경로를 보면 com.fooddeliveryapp 이라고 생성이 되는데만약 회사의 도메인으로 생성을 원할경우 mycompany.co.kr 로 생성을 할려면 어떤식으로 생성을 해야하는지 문의드립니다.아니면 npx react-native init mycompany로 프로젝트를 생성한 후에 위의 안드로이드 경로를 com에서 co.kr로 변경해서kr.co.mycompany 로 프로젝트 경로를 임의로 변경을 해도 문제가 없을까요? 검색을 해서 정리를 해 본 내용으로는1. npx react-native init mycompany로 프로젝트를 만들고2. android에서 java 하위의 구조를 kr.co.mycompany로 변경3. 하위 파일의 소스중 패키지 경로를 kr.co.mycompany로 변경4. android/app안의 build.gradle 부분의 namespace와 applicationId를 변경.5. 터미널로 android 경로 안으로 들어가서 ./gradlew clean6. iOS의 경우에는 Xcode의 General부분에서 Bundle Identifier 부분 변경이렇게 하면 된다고 하는데 혹시 잘못된 부분이나 빠진 부분이 있을까요??(안드로이드는 변경할 파일들이 좀 있는데 iOS는 간단하네요) 참.. 그리고 하나 더 궁금한게 npx react-native init FoodDeliveryApp으로 프로젝트를 만들면 기본적으로 안드로이드는 코틀린 프로그램으로 되던데 이것을 자바로 만드는 방법이 따로 있을까요?
- 미해결배달앱 클론코딩 [with React Native]
버전 업그레이드 관련
안녕하세요 RN 버전이 0.74.x 까지 나왔던데...0.72.x 버전에서 업그레이드 하지않아도 문제가 없는지 문의드립니다.고맙습니다.
- 미해결배달앱 클론코딩 [with React Native]
readme
수업에서 보여주시는 리드미를 어디들어가야 하나요? 첫시작 으로 시작하는 거 입니다 ㅠㅠ 아래의주소로https://github.com/ZeroCho/react-native-naver-map들어가니 리드미가 달라서 어디 들어가야하는지 모르겠어요
- 미해결배달앱 클론코딩 [with React Native]
네이버맵 클러스터링 기능
안녕하세요네이버맵 클러스터링 기능 연동 방법 문의드립니다.
- 미해결배달앱 클론코딩 [with React Native]
This can also happen if there are multiple copies of '@react-navigation' packages installed.
Render Error Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'? This can also happen if there are multiple copies of '@react-navigation' packages installed.이 에러가 발생해서 쭉 찾아봤는데요 처음에는 버전 충돌이 일어나는줄 알았으나 package.json 상에서 설치된 버전은 하나 뿐이라 아닌거로 확인했고 쭉 찾아보니 공식문서에서 https://reactnavigation.org/docs/navigation-container/ 이런 식으로 묶어주면 된다고해서 해보니 에러가 사라졌습니다!
- 미해결배달앱 클론코딩 [with React Native]
React Native 0.73 버전에서의 Flipper 대신 다른 디버거 사용에 대해서
안녕하세요 강사님. 리액트 네이티브 0.73 버전을 사용하고 있는데요.flipper가 현재 Podfile 에서 0.201.0 버전으로 나옵니다. 근데 도저히 flipper에서 연결이 되지 않아서 찾아보던 중에리액트 네이티브 0.73 부터 새로운 디버거의 사용이 가능하다고 하는데 이걸 사용해도 괜찮을까요? https://github.com/react-native-community/discussions-and-proposals/discussions/733
- 미해결배달앱 클론코딩 [with React Native]
네이버맵 사용자 위치 추적
안녕하세요네이버맵 연동 시 아래 사진과 같은 기능을 연동하려고 합니다method 확인 시setLocationTrackingMode <- 해당 method 인 것 같은데.. 연동 방식을 잘 모르겠습니다. 도움 부탁드립니다. 고맙습니다.
- 미해결배달앱 클론코딩 [with React Native]
NMAP 에서 onMapClick이벤트가 발생하도록 코드적으로 touch를 발생시킬 수 있는지 궁금합니다!
안녕하세요 nmap 예제에서 클릭시 onMapClick 함수가 호출되어 위도 , 경도를 받을 수 있었는데요.. 혹시 <NaverMapView> 컴포넌트에 코드적으로 touch를 발생시킬 수 있는지 궁금합니다.. 감사합니다!
- 미해결배달앱 클론코딩 [with React Native]
[iOS] Dbug vs release
안녕하세요. 강의를 보고 앱을 개발하고 이제 배포전 QA단계까지 왔습니다!QA를 하기위해서 Xcode에서 Edit Schemes -> Run에서 디버그 모드랑 릴리즈 모드로 선택을해서 빌드를 할 수가 있는데...디버그모드로 빌드를 하면 제가 수정한 코드가 잘 반영이 되어있는데 릴리즈 모드로 빌드를 하면 변한게 없습니다! 뭐가 다른 설정이 또 필요한 부분이 있나요? 혹시몰라서 깃 커밋과 푸시는 다 한 상태로 진행도 해보고 캐시도 삭 날려도 보고 했습니다.
- 미해결배달앱 클론코딩 [with React Native]
백엔드 질문
앱 어플에 대한 백엔드 서버는 그냥 웹과 동일하게 NestJS같은 것으로 만들면 되나요?
- 해결됨배달앱 클론코딩 [with React Native]
keyboardavoidingView 관련 질문 입니다.
안녕하세요 아래 코드의 bottomSheet 내부에 채팅 창을 넣고자 합니다.. 그리고 카톡에서 키보드가 올라오면 보던 내용이 키보드를 피해 올라가는 것을 구현하고자 하고 있습니다. 아래 코드에서 BottomSheet 내부를 KeyboardAvodingView로 감싸주었을 떄는 내부 scroll이 동작을 안 하였습니다.. FlatList만 KeyboardAvoidingView를 사용하였을 때는 .. FlatList의 내용이 가린채로 키보드가 올라왔습니다..KeyboardAwareScrollview또한 내부 스크롤이 동작안하고 있었습니다.. 혹시 아래처럼 bottomSheet를 사용해 내부 요소들을 보여줄 때 보던 내용이 키보드가 올라와도 보여질 수 있도록 자동으로 밀려올라가는(스크롤되는,,) 방법이 없을까요?감사합니다.. import React, { useCallback, useRef, useMemo } from "react"; import { StyleSheet, View, Text, Button, KeyboardAvoidingView } from "react-native"; import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet"; import { FlatList, ScrollView, TextInput } from "react-native-gesture-handler"; import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; const BottomExample = () => { // hooks const sheetRef = useRef<BottomSheet>(null); // variables const data = useMemo( () => Array(50) .fill(0) .map((_, index) => `index-${index}`), [] ); const snapPoints = useMemo(() => ["25%", "50%", "100%"], []); // callbacks const handleSheetChange = useCallback((index: any) => { console.log("handleSheetChange", index); }, []); const handleSnapPress = useCallback((index: any) => { sheetRef.current?.snapToIndex(index); }, []); const handleClosePress = useCallback(() => { sheetRef.current?.close(); }, []); // render const renderItem = useCallback( ( {item} : { item : string } ) => ( <View style={styles.itemContainer}> <Text>{item}</Text> </View> ), [] ); return ( <View style={styles.container}> <Button title="Snap To 90%" onPress={() => handleSnapPress(2)} /> <Button title="Snap To 50%" onPress={() => handleSnapPress(1)} /> <Button title="Snap To 25%" onPress={() => handleSnapPress(0)} /> <Button title="Close" onPress={() => handleClosePress()} /> <BottomSheet ref={sheetRef} snapPoints={snapPoints} onChange={handleSheetChange} > <FlatList data={data} keyExtractor={(i) => i} renderItem={renderItem} contentContainerStyle={styles.contentContainer} /> < style ={{ backgroundColor : "blue"}}>all good all fine</TextInput> </BottomSheet> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 200, }, contentContainer: { backgroundColor: "white", }, itemContainer: { padding: 6, margin: 6, backgroundColor: "#eee", }, }); export default BottomExample;
- 미해결배달앱 클론코딩 [with React Native]
flipper공식 홈페이지 Windows 운영체제 파일과 Linux파일이 동일 함
flipper 다운로드 오류로 질문드립니다.설치를 진행하려는 도중에 위와 같은 문제가 발생했습니다. 공식홈페이지에서 다운로드 진행 후 압축푸는 과정에서 오류 발생처음보는 확장자여서 google 검색 후 cmd창에 명령어로 압축해제폴더명은 package로 실행파일이 없음.공식홈페이지 다시 확인하니 압축파일이 Linux와 Windows가 동일함 이런 상황이 발생하여 저는 해당 다운로드파일이 Linux버전이라고 인식하고 있는 상태입니다. 그래서 혹시 별도로 flipper를 다운받을 수 있는 경로가 있을까요?
- 해결됨배달앱 클론코딩 [with React Native]
네비게이터 질문
네비게이터 여러 종류를 같이 쓸 수 있다고 했는데 여기 강좌에선 조건문으로 나눠서 화면 상으론 따로 나오게 썼잖아요, 조건문 없이 그냥 탭 네비게이션과 스택 네비게이션을 형제 요소로 넣어 한 화면에 다 집어넣을 수도 있는 것인가요?
- 미해결배달앱 클론코딩 [with React Native]
맥북 m1 환경설정 방법
안드로이드 스튜디오 맥북 m1은 인텔이 아니라 설정 방법 다르다고 알려주셨는데 혹시 따로 정리해두신 글이 있을까요?