묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결배달앱 클론코딩 [with React Native]
NMAP 에서 onMapClick이벤트가 발생하도록 코드적으로 touch를 발생시킬 수 있는지 궁금합니다!
안녕하세요 nmap 예제에서 클릭시 onMapClick 함수가 호출되어 위도 , 경도를 받을 수 있었는데요.. 혹시 <NaverMapView> 컴포넌트에 코드적으로 touch를 발생시킬 수 있는지 궁금합니다.. 감사합니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
프로젝트 설치 npx
npx react-native@latest init MatzipApp npx: 541개의 패키지를 19.389초만에 설치했습니다. Unexpected token ? 프로젝트 ruby 버전을 변경하고 프로젝트 npx 설치하는데 해당 오류로 인해 프로젝트 폴더가 생기지 않네요 혹시 해결법이 어떤것일까요?검색해봐도 나오질 않네요
-
미해결핸즈온 리액트 네이티브
Top Tab 사용 관련 질문입니다!
안녕하세요,사진 앱 외에 제가 원하는 앱을 구현하기 위해 강의를 많이 참고하고 있습니다!하단탭을 사용하는 것까지는 강의와 동일합니다만, 홈 화면에서만 상단탭을 사용하려고 하고 있습니다.React Navigation의 Material Top Tab Navigator를 사용했고, 그 과정에서 StatusBar 배경색이 회색으로 변경되어버렸습니다 ㅠㅠ... 아무리 배경 색을 바꾸어도 변경이 되지 않고 있는 상황입니다. (Android는 된 것으로 알고 있는데, iOS에서 계속해서 회색 배경으로 보입니다)그리고 상단탭 하단의 리스트는 FlatList를 사용하였는데, 데이터 양이 적을 때에도 남은 배경색이 회색으로 보입니다 ㅠㅠ처음에는 상단탭 아래쪽 화면(BoatListScreen) 부분에 flex:1을 줘서 배경색을 늘려보았지만, 그렇게 하니 상단탭 아래에 있는 ScrollView(시흥 등 버튼이 있는)에 적용했던 높이값이 이상해져서 세로로 늘어나게 되어버리는 현상이 발생합니다.HomeScreen 에서 TopTab을 바로 불러오게 했는데 이게 문제인걸까요? ㅠㅠ강의 내용과는 좀 다른 부분이긴 하지만 한번 질문드려봅니다..!!
-
미해결배달앱 클론코딩 [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;
-
미해결핸즈온 리액트 네이티브
8.17 프로필 사진 캐싱 관련 질문
안녕하세요,8.17 코드를 그대로 따라갔는데 마지막에 앱을 새로고침하면 이미지가 아예 안 뜹니다. (첨부 이미지 참고) 에러 메세지도 따로 없고, 그냥 이미지가 뜨지 않습니다.source.uri에는 firebase 스토리지에 올린 기본 프로필 이미지 링크가 들어있는 것을 확인했습니다. 코드는 github 까지 비교해가며 봤는데 동일합니다. 혹시 몰라 FastImage.js 및 ProfileScreen.js 코드 전문 첨부합니다. 무엇이 문제일까요..?ㅠ 그동안 라이브러리가 업데이트 된걸까요? FastImage.jsimport { Image } from 'react-native'; import PropTypes from 'prop-types'; import { useEffect, useState } from 'react'; import * as Crypto from 'expo-crypto'; import * as FileSystem from 'expo-file-system'; const FastImage = ({ source, ...props }) => { const [uri, setUri] = useState(source.uri); useEffect(() => { (async () => { try { console.log('source.uri', source.uri); const hashed = await Crypto.digestStringAsync( Crypto.CryptoDigestAlgorithm.SHA256, source.uri ); // Hash the URL const fileSystemUri = `${FileSystem.cacheDirectory}${hashed}`; // Create a file path const metadata = await FileSystem.getInfoAsync(fileSystemUri); // Check if the file exists if (!metadata.exists) { await FileSystem.downloadAsync(source.uri, fileSystemUri); // Download the file } setUri(fileSystemUri); // Set the file path } catch (error) { setUri(source.uri); } })(); }, [source.uri]); return <Image source={{ uri }} {...props} />; }; FastImage.propTypes = { source: PropTypes.object.isRequired, }; export default FastImage; ProfileScreen.jsimport { StyleSheet, Text, View, Pressable } from 'react-native'; import PropTypes from 'prop-types'; import { useUserState } from '../context/UserContext'; import { signOut } from '../api/auth'; import { GRAY, WHITE } from '../colors'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { MaterialIcons } from '@expo/vector-icons'; import { MaterialCommunityIcons } from '@expo/vector-icons'; import FastImage from '../components/FastImage'; const ProfileScreen = () => { const [user, setUser] = useUserState(); // [user, setUser] const { top } = useSafeAreaInsets(); return ( <View style={[styles.container, { paddingTop: top }]}> <View style={styles.settingButton}> <Pressable onPress={async () => { await signOut(); setUser({}); }} hitSlop={10} > <MaterialIcons name="logout" size={24} color={GRAY.DEFAULT} /> </Pressable> </View> <View style={styles.profile}> <View style={[ styles.photo, user.photoURL || { backgroundColor: GRAY.DEFAULT }, ]} > <FastImage source={{ uri: user.photoURL }} style={styles.photo} /> <Pressable style={styles.editButton} onPress={() => {}}> <MaterialCommunityIcons name="pencil" size={20} color={WHITE} /> </Pressable> </View> <Text style={styles.nickname}>{user.displayName || '닉네임'}</Text> <Text style={styles.email}>{user.email}</Text> </View> <View style={styles.listContainer}> <Text style={styles.listText}>설정 리스트?</Text> </View> </View> ); }; ProfileScreen.propTypes = {}; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: WHITE, }, settingButton: { alignItems: 'flex-end', paddingHorizontal: 20, }, profile: { justifyContent: 'center', alignItems: 'center', borderBottomWidth: 0.5, borderBottomColor: GRAY.DEFAULT, paddingVertical: 20, }, photo: { width: 100, height: 100, borderRadius: 50, }, editButton: { position: 'absolute', bottom: 0, right: 0, width: 30, height: 30, borderRadius: 15, backgroundColor: GRAY.DARK, justifyContent: 'center', alignItems: 'center', }, nickname: { fontSize: 24, fontWeight: '600', marginTop: 20, }, email: { fontSize: 15, // fontWeight: '600', color: GRAY.DARK, marginTop: 5, }, listContainer: { flex: 1, alignItems: 'center', }, listText: { fontSize: 20, fontWeight: '600', marginVertical: 20, marginHorizontal: 20, }, }); export default ProfileScreen;
-
미해결핸즈온 리액트 네이티브
FirebaseError: auth/already-initialized
안녕하세요, 8강 끝부분을 따라가고 있는 중입니다. 프로젝트에서 npm start 해놓고 expo go 어플로 실시간으로 확인하면서 작업을 진행 중인데요, 새로고침 할 때(r눌러서)는 괜찮은데, VS Code에서 저장을 해서 자동으로 리랜더링 될때마다 아래와 같은 에러 메세지가 콘솔 창에 나타납니다.[FirebaseError: Firebase: Error (auth/already-initialized).] 특별히 뭐가 안되거나 하는건 아닌데... r 눌러서 아예 앱을 새로고침하면 뜨지않습니다. 어디선가 중복으로 초기화하고있다는 뜻일까요? firebase.js 파일 코드 첨부합니다! 추가로 보여드려야 하는 다른 코드가 있다면 말씀 부탁드립니다. screen 부분은 제가 다르게 가져가고 있는데 이 외에 기능부분에 대한 것들은 강의와 동일하게 진행 중입니다. firebase.jsimport { initializeApp } from 'firebase/app'; import { firebaseConfig } from '../../env'; import { getReactNativePersistence, initializeAuth } from 'firebase/auth'; import AsyncStorage from '@react-native-async-storage/async-storage'; export const initFirebase = () => { // Initialize Firebase try { const app = initializeApp(firebaseConfig); initializeAuth(app, { persistence: getReactNativePersistence(AsyncStorage), }); return app; } catch (e) { // eslint-disable-next-line no-console console.error(e); } };
-
미해결배달앱 클론코딩 [with React Native]
flipper공식 홈페이지 Windows 운영체제 파일과 Linux파일이 동일 함
flipper 다운로드 오류로 질문드립니다.설치를 진행하려는 도중에 위와 같은 문제가 발생했습니다. 공식홈페이지에서 다운로드 진행 후 압축푸는 과정에서 오류 발생처음보는 확장자여서 google 검색 후 cmd창에 명령어로 압축해제폴더명은 package로 실행파일이 없음.공식홈페이지 다시 확인하니 압축파일이 Linux와 Windows가 동일함 이런 상황이 발생하여 저는 해당 다운로드파일이 Linux버전이라고 인식하고 있는 상태입니다. 그래서 혹시 별도로 flipper를 다운받을 수 있는 경로가 있을까요?
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
환경변수 및 SOURCE관련 질문
좋은 강의 잘 듣고, 하나하나 따라하고 있는 코린이 입니다.다름이 아니라 환경변수는 왜 설정해줘야하는 지 궁금합니다.그리고 bash_profile관련해서 source bash_profile을 해주셨는데, 그 과정이 왜 필요한 지 어떤 것들이 일어나고 있는 지 궁금합니다.
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
글로벌로 설치한다는 게 무슨 말인가요? (-g)
npm install -g react-native-cli 에서 -g는 글로벌로 설치한다고 하셨는데,글로벌로 설치한다는 게 뭇느 말인가요?그런-g를 사용하지 않으면 어떤 일이 벌어지나요?
-
해결됨배달앱 클론코딩 [with React Native]
네비게이터 질문
네비게이터 여러 종류를 같이 쓸 수 있다고 했는데 여기 강좌에선 조건문으로 나눠서 화면 상으론 따로 나오게 썼잖아요, 조건문 없이 그냥 탭 네비게이션과 스택 네비게이션을 형제 요소로 넣어 한 화면에 다 집어넣을 수도 있는 것인가요?
-
미해결배달앱 클론코딩 [with React Native]
맥북 m1 환경설정 방법
안드로이드 스튜디오 맥북 m1은 인텔이 아니라 설정 방법 다르다고 알려주셨는데 혹시 따로 정리해두신 글이 있을까요?
-
미해결핸즈온 리액트 네이티브
input에서 올라가는 화면 영역
안녕하세요,7.13 강의 따라가다가 ScrollView로 올라가는 form 영역을 감싸는 부분에서 궁금증이 생겼습니다. 저는 UI를 조금 다르게 가져가고 있고 회원가입 항목도 좀 더 추가한 상태입니다. 그래서 회원가입 폼이 좀 길어서 첨부된 이비지에서 이메일 부분이 노치에 걸려 잘리게 됩니다. 그래서 form 전체 화면이 올라가는 게 아니라 반 정도만 올라가게 하고 싶은데 이렇게 하려면 어떻게 해야할까요? (키보드가 올라와있을 때 폼은 이메일/비밀번호/비밀번호 확인만 보이는 정도로)
-
미해결배달앱 클론코딩 [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]
고도, 속도 측정
안녕하세요러닝, 등산 등 활동 시 변경되는 고도, 속도를 측정할 수 있는 방법이 있는지 문의드립니다.
-
미해결배달앱 클론코딩 [with React Native]
Complete 화면에서 bottom tab bar를 숨길 수 있을까요?
안녕하세요! 제로초님!좋은 강의 감사합니다.제로초님의 강의를 듣고 개인 프로젝트를 진행하고 있던 중 궁금한 점이 있어 질문 드립니다 현재 Complete 구조에 해당하는 화면에서 하단 탭을 안보이게 하고 싶은데, 해결을 하지 못하여 질문을 드립니다. [ 공부한 내용]공식 문서에서는 특정 스크린에서 하단 탭을 숨기고 싶다면 구조를 변경하라고 말하고 있는데, 제가 원하는 방법은 아니어서 다른 방법을 찾아보았습니다.https://reactnavigation.org/docs/hiding-tabbar-in-screens tabBarvisible을 사용하면 tab안에 있는 stack에서 하단 탭을 안보이게 할 수 있다는 블로그도 많이 확인하였지만 공식문서에서 tabBarvisible을 더이상 지원하지 않는다고 하여 사용하지 않았습니다.https://reactnavigation.org/docs/upgrading-from-5.x 아래 블로그에서 React.useLayoutEffect를 사용해 컴포넌트에 접근하였을 때 화면 이름과 navigation.setOptions를 활용하여 하단 탭을 안보이게 하는 방법이 있다고 하여 적용해 보았으나 제 프로젝트에서는 동작하지 않았습니다.https://velog.io/@yejinleee/ReactNative-%EC%8A%A4%ED%83%9D%EB%82%B4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98%EC%97%90%EC%84%9C-%ED%83%AD-%EB%B0%94-%EC%88%A8%EA%B8%B0%EA%B8%B0 혹시 Complete 화면에서 하단 바를 안보이게 하는 방법이 있을까요? 항상 좋은 답변을 해주셔서 감사합니다 : )
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Link 적용하기 관련 문의드립니다.
Link 수업 듣는 중에 아래 질문과 같이 동일한 문제가 발생했는데요(상품 클릭 시, 링크 변경은 되는데 페이지 이동이 안되는 현상)https://www.inflearn.com/questions/645148/link-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B4%80%EB%A0%A8%EC%A7%88%EB%AC%B8 질문 확인하고<React.StrictMode> 을 제거하기 전에는 상품카드를 클릭했을때 url만 변경되고 페이지가 새로고침되지 않았습니다.<React.StrictMode> 제거해야지만 클릭시 url변경 + 페이지 새로고침까지 되었습니다강의와 동일하게 작성하였는데 왜 <React.StrictMode> 제거 후 문제가 해결된걸까요?