월 14,300원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결배달앱 클론코딩 [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은 인텔이 아니라 설정 방법 다르다고 알려주셨는데 혹시 따로 정리해두신 글이 있을까요?
- 미해결배달앱 클론코딩 [with React Native]
axios 관련 질문
안녕하세요 제로초님 강의 잘듣고 있습니다. dataForm 요청관련해서 이슈가 생겨 질문드리게 되었습니다.(현재 axios ^1.6.7 버전을 사용중입니다.) 아래와같이 resized된 이미지를 formData에 담고 요청을 보냈습니다.axios는 이렇게 되어있고 instance안에는 interceptor로 token만 갈아껴주는 로직이 들어있어서 formData에는 따로 영향을 주는 코드는 없습니다. headers, transformRequest가 없이 시도했는데 되지 않아 넣어서 해봤는데도 되지 않습니다. 서버는 nestjs를 사용중이고 아래와같이 되어 있습니다.그런데 콘솔을 찍어보면 이렇게 빈 리스트가 나옵니다. 나와서 서버의 이슈인가 해서 postman으로 요청을 해보니 이미지가 정상적으로 캐치되는 것을 확인 할 수 있었습니다. 분명 axios 설정에서 이슈가 있는거 같은데 잘모르겠어서 질문드립니다. 혹시 제가 놓친것이 있을까요? 감사합니다
- 미해결배달앱 클론코딩 [with React Native]
패키지 설치 터미널 질문
flipper 라이브러리 설치 시에는 파워쉘에서 npm i 로 설치하고, 리액트 네이티브 라이브러리 설치 시에는 에디터의 터미널에서 설치하셨는데 뭔 차이인가요?
- 해결됨배달앱 클론코딩 [with React Native]
android환경에서 usePermissions 훅 사용시 에러납니다..ㅜㅜ
usePermissions훅 사용시 에러가 납니다. android환경입니다. 코드랑 에러 올리겠습니다.구글에 먼저 검색해도 잘 모르겠어서 질문드립니다.import {useEffect} from 'react'; import {Alert, Linking, Platform} from 'react-native'; import {check, PERMISSIONS, request, RESULTS} from 'react-native-permissions'; function usePermissions() { // 권한 관련 useEffect(() => { if (Platform.OS === 'android') { //정확한 위치권한 check(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION) .then(result => { console.log('check location', result); if (result === RESULTS.DENIED) { return request(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION); } else if (result === RESULTS.BLOCKED) { Alert.alert( '이 앱은 위치 권한 허용이 필요합니다.', '앱 설정 화면을 열어서 항상 허용으로 바꿔주세요.', //밑에 배열은 버튼을 의미한다. [ { text: '네', //Linking.openSettings는 핸드폰 설정을 열어준다. onPress: () => Linking.openSettings(), }, { text: '아니오', onPress: () => console.log('No Pressed'), style: 'cancel', }, ], ); } }) .catch(console.error); } else if (Platform.OS === 'ios') { check(PERMISSIONS.IOS.LOCATION_ALWAYS) .then(result => { if (result === RESULTS.BLOCKED || result === RESULTS.DENIED) { Alert.alert( '이 앱은 백그라운드 위치 권한 허용이 필요합니다.', '앱 설정 화면을 열어서 항상 허용으로 바꿔주세요.', [ { text: '네', onPress: () => Linking.openSettings(), }, { text: '아니오', onPress: () => console.log('No Pressed'), style: 'cancel', }, ], ); } }) .catch(console.error); } if (Platform.OS === 'android') { //카메라 권한 check(PERMISSIONS.ANDROID.CAMERA) .then(result => { if (result === RESULTS.DENIED || result === RESULTS.GRANTED) { return request(PERMISSIONS.ANDROID.CAMERA); } else { console.log(result); throw new Error('카메라 지원 안 함'); } }) .catch(console.error); } else { check(PERMISSIONS.IOS.CAMERA) .then(result => { if ( result === RESULTS.DENIED || result === RESULTS.LIMITED || result === RESULTS.GRANTED ) { return request(PERMISSIONS.IOS.CAMERA); } else { console.log(result); throw new Error('카메라 지원 안 함'); } }) .catch(console.error); } }, []); } export default usePermissions; 에러메세지 텍스트입니다.Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNPermissions' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes at AppInner (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.mh.fooddeliveryapp&modulesOnly=false&runModule=true:131130:86) at Provider (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.mh.fooddeliveryapp&modulesOnly=false&runModule=true:130801:22) at App at RCTView at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.mh.fooddeliveryapp&modulesOnly=false&runModule=true:59410:43) at RCTView at View (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.mh.fooddeliveryapp&modulesOnly=false&runModule=true:59410:43) at AppContainer (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.mh.fooddeliveryapp&modulesOnly=false&runModule=true:59254:36) at FoodDeliveryApp(RootComponent) (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.mh.fooddeliveryapp&modulesOnly=false&runModule=true:107936:28) ERROR TypeError: Cannot read property 'check' of undefinedThis error is located at: in AppInner (created by App) in Provider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in FoodDeliveryApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'check' of undefinedThis error is located at: in AppInner (created by App) in Provider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in FoodDeliveryApp(RootComponent), js engine: hermes
- 미해결배달앱 클론코딩 [with React Native]
고도, 속도 측정
안녕하세요러닝, 등산 등 활동 시 변경되는 고도, 속도를 측정할 수 있는 방법이 있는지 문의드립니다.