묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
[3-8] React Query 도입(2) - 로그인 연동하기
[3-8] React Query 도입(2) - 로그인 연동하기 아침에도 질문올리고 또 올리네요 ㅠ거의 하루종일 이 부분 학습하고 회원가입 로그인 했는데어떠한 오류도 없고 회원가입, 로그인이 안되서 질문 남깁니다.강의 파일 비교해봐도 특별히 오타가 없는거 같은데요혹시 깃주소 올리면 봐주시나요?
-
미해결처음 배우는 리액트 네이티브
expo 사용하지 않고 앱 실행 시, 데이터 불러오기
useEffect(() => { const getData = async () => { try { const loadedData = await AsyncStorage.getItem('tasks'); setTasks(JSON.parse(loadedData || '{}')); } catch (e) {} }; getData(); // getData 함수 호출 }, []);
-
미해결배달앱 클론코딩 [with React Native]
네이버맵 사용자 위치 추적
안녕하세요네이버맵 연동 시 아래 사진과 같은 기능을 연동하려고 합니다method 확인 시setLocationTrackingMode <- 해당 method 인 것 같은데.. 연동 방식을 잘 모르겠습니다. 도움 부탁드립니다. 고맙습니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
[3-7] 백엔드 서버 실행하기 에서 에러로 폴더 생성이 안되는경우
[3-7] 백엔드 서버 실행하기 에서 에러로 폴더 생성이 안되는경우 인데요unable to connect to server : connection timeout expired 이렇게 뜨고 폴더 생성이 안되는데요기존 설치되었던 pgAdmin이 이상이 있나싶어 다시 설치하려고 하는데요어떤걸 설치해야할지 모르겠습니다.저는 윈도우 86-64인데요 버전이 너무 많아서요수업 잘 듣고 있는데 여기서 막히네요 ㅠㅠ 터미널에서 서버를 실행하니src/image/image.controller.ts:14:25 - error TS2307: Cannot find module 'src/@common/constants' or its corresponding type declarations.14 import { numbers } from 'src/@common/constants';~~~~~~~~~~~~~~~~~~~~~~~Found 1 error(s).이런 오류가 뜨네요 어떻게 해야할까요? 깃파일에 오타가 있습니다
-
미해결따라하며 배우는 리액트 네이티브 기초
StyleSheet를 적용시키면 글자가 안 보입니다.
처음에 학습할 때 진행했던 파일에서는 정상적으로 작동되는데, 새로운 파일을 만들어서 적용시킬 때에는 글자가 안 보입니다. style={styles.container} 부분을 지우면 글자가 보이고, 다시 되돌리면 안 보이는 상황입니다 ㅠㅠ. 어느 부분이 잘못됐는지 알 수 있을까요?import { Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native' import React from 'react' const MainScreen = () => { return ( <SafeAreaView style={styles.container}> <StatusBar barStyle={'default'} /> <Text>Todo App</Text> <View> <Text>할 일</Text> </View> <View /> <View> <Text>완료된 일</Text> </View> </SafeAreaView> ) } export default MainScreen const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS === 'android' ? 20 : 10, backgroundColor: '#f8f8fa' } })
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
ios 실행 이후 ➜ explicit dependency.. 뜨고 멈추는 경우 해결책 공유합니다.
xcode 15.3node 21.1.0프로젝트를 latest로 설치하면 문제가 없는데, 강의와 일치시키려고 0.72.6으로 설치하면 https://github.com/facebook/react-native/issues/39743위와 같은 에러가 발생했습니다.---xcode에서 직접 빌드 시키니, flipperKit에서 에러가 발생했습니다.---이럴 경우 해결 방법입니다.https://github.com/facebook/react-native/issues/43335저처럼 시간 쏟는 분들이 계실까봐 공유합니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
사용하시는 vscode 테마가 무엇이죠?
사용하시는 vscode 테마가 무엇이죠?
-
미해결배달앱 클론코딩 [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은 인텔이 아니라 설정 방법 다르다고 알려주셨는데 혹시 따로 정리해두신 글이 있을까요?