월 15,400원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결핸즈온 리액트 네이티브
Top Tab 사용 관련 질문입니다!
안녕하세요,사진 앱 외에 제가 원하는 앱을 구현하기 위해 강의를 많이 참고하고 있습니다!하단탭을 사용하는 것까지는 강의와 동일합니다만, 홈 화면에서만 상단탭을 사용하려고 하고 있습니다.React Navigation의 Material Top Tab Navigator를 사용했고, 그 과정에서 StatusBar 배경색이 회색으로 변경되어버렸습니다 ㅠㅠ... 아무리 배경 색을 바꾸어도 변경이 되지 않고 있는 상황입니다. (Android는 된 것으로 알고 있는데, iOS에서 계속해서 회색 배경으로 보입니다)그리고 상단탭 하단의 리스트는 FlatList를 사용하였는데, 데이터 양이 적을 때에도 남은 배경색이 회색으로 보입니다 ㅠㅠ처음에는 상단탭 아래쪽 화면(BoatListScreen) 부분에 flex:1을 줘서 배경색을 늘려보았지만, 그렇게 하니 상단탭 아래에 있는 ScrollView(시흥 등 버튼이 있는)에 적용했던 높이값이 이상해져서 세로로 늘어나게 되어버리는 현상이 발생합니다.HomeScreen 에서 TopTab을 바로 불러오게 했는데 이게 문제인걸까요? ㅠㅠ강의 내용과는 좀 다른 부분이긴 하지만 한번 질문드려봅니다..!!
- 미해결핸즈온 리액트 네이티브
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); } };
- 미해결핸즈온 리액트 네이티브
input에서 올라가는 화면 영역
안녕하세요,7.13 강의 따라가다가 ScrollView로 올라가는 form 영역을 감싸는 부분에서 궁금증이 생겼습니다. 저는 UI를 조금 다르게 가져가고 있고 회원가입 항목도 좀 더 추가한 상태입니다. 그래서 회원가입 폼이 좀 길어서 첨부된 이비지에서 이메일 부분이 노치에 걸려 잘리게 됩니다. 그래서 form 전체 화면이 올라가는 게 아니라 반 정도만 올라가게 하고 싶은데 이렇게 하려면 어떻게 해야할까요? (키보드가 올라와있을 때 폼은 이메일/비밀번호/비밀번호 확인만 보이는 정도로)
- 해결됨핸즈온 리액트 네이티브
실물 기기로 개발 시 안드로이드 스튜디오는 필요가 없는건가요?
안녕하세요, 개발환경 구성할 때 안드로이드 스튜디오를 같이 설치를 했는데요.만약 실물 기기를 이용하여 개발을 할 때는 안드로이드 스튜디오를 따로 설치해주지 않아도 상관이 없는걸까요?
- 해결됨핸즈온 리액트 네이티브
unable to resolve module 에러
수업중에 만들었던 컴포넌트를 팀원들에게 사용하라고 깃허브에 올렸는데 이런 에러가 발생했습니다. 수업과는 상관 없는 질문이라 죄송합니다. 항상 강의 잘 듣고있습니다. 컴포넌트 내용은 똑같습니다.
- 해결됨핸즈온 리액트 네이티브
8.4 질문
8.4 까지 진행했을 때 firebase 초기화 관련해서 이런 경고가 뜹니다You are initializing Firebase Auth for React Native without providingAsyncStorage. Auth state will default to memory persistence and will notpersist between sessions. In order to persist auth state, install the package"@react-native-async-storage/async-storage" and provide it toinitializeAuth: 그리고 getAuthErrorMessages로 받아온 메세지를 출력하면 항상 default 값만 출력됩니다https://github.com/JIWONKIMS/photo
- 미해결핸즈온 리액트 네이티브
6-11 강의 nanoid 관련 에러 도와주세요
https://github.com/JIWONKIMS/ReactNative/blob/master/src/components/InputFAB.js Error: ENOENT: no such file or directory,\rn-todo\node_modules\nanoid\url-alphabet\package.json'이런 오류가 뜹니다. (추가)npm install nanoid 후 이런 문구가 뜹니다.
- 해결됨핸즈온 리액트 네이티브
TODO list 섹션 질문
expo 실행해서 이메일과 패스워드 부분에 글자를 입력할 때 글자 입력하면 바로 키보드가 닫혀버립니다. 영상에 첨부되어있는 깃허브 링크 들어가서 비교해 보는데도 어디서 틀린건지 찾을 수가 없어서 질문올립니다
- 해결됨핸즈온 리액트 네이티브
2.1 오류 질문
2.1 프로젝트 준비하기에서cd git이 아니라 cd .git으로 했고 거기서 npx create-expo-app rn-calc를 해서 생성했습니다 code .으로 실행 하니까 이런식으로 나왔는데 영상에서는 expo-shared 라는 파일이 assets위에 있었는데 제 프로젝트에는 없습니다. 맥 환경과 윈도우 환경에 따른 차이일까요?rn-calc 프로젝트에서 npm start를 했을 때 QR코드가 뜬 뒤에 이런 에러가 나왔습니다 그 이후로 my-first-rn이나 rn-calc에서 npm start를 하면 이런 화면만 계속 나오고 폰을 흔들어봐도 응답이 없습니다.
- 해결됨핸즈온 리액트 네이티브
안드로이드 스튜디오 오류
1장부터 난관이네요 ㅠ구글 플레이 스토어 같은 어플 다운 받는 플렛폼이 없습니다. 완전 초기상태이구요영상 대로 했습니다 expo 다운 받아야 다음 영상으로 넘어갈 탠데 어떻게 해야하나요 크롬 켜면 화면이 엄청 깨져서 진행을 못하고있습니다
- 미해결핸즈온 리액트 네이티브
에뮬레이터가 안켜지는데 없이 강의를 진행해도 되나요?
에뮬레이터가 안켜지는데 에뮬레이터없이 강의를 진행해도될까요? expo go 어플을 통해서 휴대폰과 연결은 되어있습니다. 현재 리액트네이티브 페이지에서 설명하는 버전을 설치하고 실행을 해봤고 강의내용과같은 버전에서 실행을 해봤으나 에뮬레이터가 실행되다가 꺼지거나 Android Emulator closed unexpectedly 이런문구가 뜨던가, 실행이 되어있다가 npx expo 를 실행해서 안드로이드를 연결하려고 하면 꺼지고 있습니다. 문제점을 검색해봤을때 저장공간이 부족할때도 있다고 하던데 2GB정도만 있어도 괜찮다고하여 문제는 아닌것같고, 환경변수를 찾아보았지만 sdk manager의 주소와 일치하였습니다, 또 system image를 확인해서 강의내용과 똑같이 설치했음을 확인했습니다. 이 과정을 버전을 다를때 두번다 체크했습니다.
- 미해결핸즈온 리액트 네이티브
expo프로젝트 생성후 연결하는과정
주소가 다르다, 로그인을 해야한다 등등 여러가지 해결방법을 찾아 해보았지만 여전히 문제가 해결되고 있지 않아서 질문드립니다.주소가 다르다해서 ip주소 끝자리를 다시맞춰보는 방법을 해보았고, expo에서 가입한 아이디로 로그인을 하는방법도 해보았으며 현재상태는처음엔 Uncaught Error: .java.net.SocketTimeoutException: failed to connect to /192.168.233.120(port(8081) from /192.168.233.122(port 50322) after 1000 ms이런식으로 ip주소의 끝자리만 다르게 문제가 발생하였지만 이후엔 연결표시만 계속 뜨고있습니다.무슨문제인지 정확히 해결방법을 모르겠어서 질문드립니다.
- 미해결핸즈온 리액트 네이티브
firebase이용 관련 앱 종료
안녕하세요 rn-photo 강의를 듣고있는 학생입니다.8.2 ~8.3 강의에서 firebase를 등록하고 SignInScreen.js파일에서 const onSubmit = async () => { Keyboard.dismiss(); if (!form.disabled && !form.isLoding) { dispatch({ type: AuthFormTypes.TOGGLE_LOADING }); try { const user = await signIn(form); console.log(user); } catch (e) { const message = getAuthErrorMesseages(e.code); Alert.alert('로그인 실패', message); } dispatch({ type: AuthFormTypes.TOGGLE_LOADING }); } }; 위 코드 중 signIn함수를 사용할때 계속 앱이 종료되버립니다.원인을 알수없어서 질문 드립니다.아래는 저의 깃허브 주소입니다.https://github.com/yunhyeonji/Hands-on-ReactNative
- 미해결핸즈온 리액트 네이티브
안녕하세요 에뮬레이터
가상머신 에뮬레이터로 수업을 따라가고 있는데 , 에뮬레이터가 코드변경이 바로적용될때가 있고 또 코드변경했을때 적용이 안될때도 있는데 어떤게 문제일까요??
- 미해결핸즈온 리액트 네이티브
nanoid 생성 에러
안녕하세요? nanoid를 생성할 때 에러가 발생합니다.import "react-native-get-random-values"; import { nanoid } from "nanoid";를 이용하여 nanoid를 생성할 때 1번째 까지는 정상적으로 생성되나 2번째부터const id = nanoid();위의 생성 부분에서 ERROR TypeError: undefined is not a function, js engine: hermes 에러가 발생합니다.대신 나노id를 non-secure로 생성하면 계속해서 생성해도 문제 없이 생성됩니다. 버전은 아래와 같습니다만 react-native-get-random-values는 1.9.0 버전으로변경해도 동일한 문제가 발생합니다.버전 정보 "dependencies": { "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "expo": "~48.0.15", "expo-status-bar": "~1.4.4", "expo-updates": "~0.16.4", "nanoid": "^4.0.2", "prop-types": "^15.8.1", "react": "18.2.0", "react-native": "0.71.8", "react-native-get-random-values": "~1.8.0", "react-native-safe-area-context": "4.5.0", "react-native-screens": "~3.20.0" },이 문제가 반드시 짚고 넘어가야하는 부분인가요? 별로 중요하지 않으면 그냥 비보안 모드나 uuid를 사용하는걸로 넘어가고싶은데 답변 부탁드립니다.감사합니다.
- 미해결핸즈온 리액트 네이티브
9.4 왜 DisplayName이 한글자밖에 안찍힐까요?
프로필 수정하는 부분에서DisplayName을 넣어서 바꿔보면 맨첫 한글자만 가져오게 되는데 setDisplayName이 말을 안듣는 것인지...뭐가 문제인건지 모르겠네요... 코드 확인한번만 해주시면 감사하겠습니다.import { StyleSheet, Text, View, Button, Pressable, TextInput, Keyboard, Alert } from 'react-native'; import PropTypes from 'prop-types'; import { useNavigation } from '@react-navigation/native'; import { useUserState } from '../contexts/UserContext'; import FastImage from '../components/FastImage'; import { MaterialCommunityIcons } from '@expo/vector-icons'; import { GRAY, WHITE } from '../colors'; import HeaderRight from './../components/HeaderRight'; import { useCallback, useEffect, useLayoutEffect, useState } from 'react'; import { updateUserInfo } from '../api/auth'; import SafeInputView from '../components/SafeInputView'; const UpdateProfileScreen = () => { const navigation = useNavigation(); const [user, setUser] = useUserState(); const [displayName, setDisplayName] = useState(user.displayName); const [disabled, setDisabled] = useState(true); const [isLoading, setIsLoading] = useState(false); const onSubmit = useCallback(async () => { Keyboard.dismiss(); if (!disabled) { setIsLoading(true); try { const userInfo = { displayName }; console.log(userInfo); await updateUserInfo(userInfo); setUser((prev) => ({ ...prev, ...userInfo })); // navigation.goBack(); setIsLoading(false); } catch (error) { Alert.alert('사용자 수정 실패', error.message); setIsLoading(false); } } }, [disabled, displayName, navigation, setUser]); useEffect(() => { setDisabled(!displayName || isLoading); console.log('current', displayName); }, [displayName, isLoading]); useLayoutEffect(() => { navigation.setOptions({ headerRight: () => <HeaderRight onPress={onSubmit} disabled={disabled} />, }); }, [navigation, disabled]); return ( <SafeInputView> <View style={styles.container}> <View> <View> <FastImage source={{ uri: user.photoURL }} style={styles.photo}></FastImage> <Pressable onPress={() => {}} style={styles.imageButton}> <MaterialCommunityIcons name="image" size={20} color={WHITE} /> </Pressable> </View> <TextInput value={displayName} onChangeText={(text) => setDisplayName(text.trim())} style={styles.input} placeholder="NickName" textAlign="center" maxLength={10} returnKeyType="done" autoCapitalize="none" autoCorrect={false} textContentType="none" /> </View> </View> </SafeInputView> ); };
- 해결됨핸즈온 리액트 네이티브
nanoid가 안먹는거 같네요
안녕하세요 nanoid 가 계속 문제를 일으킵니다.아무래도, import 'react-native-get-random-values';이랑 호환이안되는지, 첫번째 글까지는 작성이 되는데 두번째부터는 위와 같이 에러가 뜹니다.뭔가 버전이 안맞는건지 모르겠네요..
- 미해결핸즈온 리액트 네이티브
propTypes
propTypes는 어느순간부터 안쓰이는건가요 안쓸때는 에러가 안나는데쓰니까 에러가 나네요...
- 미해결핸즈온 리액트 네이티브
10.4 글작성하기 화면 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.강의의 내용을 벗어나는 질문 혹은 관련 없는 질문에 대해서는 답변하지 않습니다. (ex. 자바스크립트, 강의에서 사용하지 않는 라이브러리, 강의 내용과 다르게 진행한 프로젝트에 대한 질문)<질문 남기기 전에 스스로 해결하는 연습을 해보세요>- 스스로 문제를 해결하는 연습은 여러분의 실력향상에 큰 영향을 미칩니다. 1. 차분하게 여러분 코드의 오타 여부를 확인해 주세요. 2. 발생한 문제를 구글에서 검색해서 확인해 보세요. <잘 해결이 안 될 때에는, 질문을 남겨주세요>1. 코드에 질문이 있다면 코드를 깃헙(https://github.com/)에 올리고 주소 링크를 남겨주세요. 2. 문제 발생 상황 등, 내용을 자세히 작성해주세요. 안녕하세요 또한번 질문 드립니다.사진 4개를 선택하고 난후 오른쪽 체크버튼을 누르면 위에 보시는바와 같이 에러가 뜹니다 어떻게 해결해야 하나요???깃헙주소입니다.https://github.com/JunseongKim0105/final-project.git