묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
현재위치 문제
현재위치 강의를 보고 이렇게 강의 처럼 서울에 뜨긴하는데 왜 서울로 뜨는건가요?? 저는 서울의 거주중이 아닌데..
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
drawer를 적용하고 나서 오류가 뜹니다...
ERROR Error: [Reanimated] Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#failed-to-create-a-worklet for more details., js engine: hermes at DrawerViewBase (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.matzip&modulesOnly=false&runModule=true:167363:22) at RNGestureHandlerRootView at GestureHandlerRootView (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.matzip&modulesOnly=false&runModule=true:164680:21) at RNCSafeAreaProvider at SafeAreaProvider (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.matzip&modulesOnly=false&runModule=true:134394:24).....이러한 오류가 계속 뜨네요 해결방법을 혹시 알고계신지요ㅠ
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
회원가입 버튼을 눌러도 로그는 들어오는데 반응이 없어서요
어디서 에러를 살펴볼수있을까요? DB에도 들어가질 않습니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
display flex 및 link가 제대로 작동 안합니다...ㅠ
안녕하세요! 두 가지 질문이 있어서 글 남깁니다. display flex가 특정 id에 적용이 안됩니다 ㅠㅠapp.js에서 id=header인 부분에 css를 적용시켰는데 딱 header 부분만 적용이 안됩니다. 코드는 아래와 같습니다. app.js 코드import logo from './logo.svg'; import './App.css'; import MainPageComponent from "./main/index.js" import React, { Component } from 'react'; import {Link, Switch, Route, useHistory} from 'react-router-dom' import UploadPage from './upload/index.js'; import ProductPage from './product/index.js'; import { Button } from 'antd'; import {DownloadOutlined} from '@ant-design/icons' function App() { const history = useHistory(); return ( <div> <div id="header"> <div id="header-area"> <Link to="/"> <img src="/images/icons/logo.png" /> </Link> <Button size="large" onClick={function(){ history.push('/upload'); }} icon={<DownloadOutlined />} > 상품 업로드 </Button> </div> </div> <div id="body"> <Switch> <Route exact={true} path="/"> <MainPageComponent /> </Route> <Route exact={true} path="/products/:id"> <ProductPage /> </Route> <Route exact={true} path="/upload"> <UploadPage /> </Route> </Switch> </div> <div id="footer"></div> </div> ); } export default App; app.css* { margin: 0; padding: 0; line-height: normal; } html, body, #root, #root > div { height: 100%; }; #header { height: 64px; /*가운데 정렬하는 방법*/ display: flex; justify-content: center; border-bottom: 1px solid gray; } #header-area { width: 1024px; height: 100%; display: flex; align-items: center; justify-content: space-between; } #header-area img { width: 128px; height: 36px; } #body { height: 100vh; width: 1024px; margin: 0 auto; /*가운데 정렬하는 방법 중 하나*/ padding: 24px; } #footer { height: 200px; background-color: rgb(230,230,230); }이렇게 했을 때 아래와 같이 header만 적용이 안됩니다...(header-area는 css가 잘 적용이 되네요) Link 제대로 작동 안됨Link 태그를 통해 상품 상세페이지로 넘어가는 코드를 구현했는데 잘 안되는 부분이 있습니다 ㅠㅠ 원래라면 상품 카드를 눌렀을 때 자동으로 상품 상세페이지로 넘어가면서 해당 페이지 내용이 나타나야하는데 저는 카드를 누르면 url 주소만 바뀌고 제가 수동으로 새로고침을 해야 해당 페이지로 넘어갑니다...(그랩마켓 로고를 눌렀을 때 메인페이지로 돌아가는 것도 마찬가지입니다) 위 코드에서 잘못된 부분이 어떤거길래 이렇게 되는걸까요...? 감사합니다!
-
미해결배달앱 클론코딩 [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
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[8-2] 카카오 로그인 구현하기 with WebVIew
안녕하세요.강의를 들으면서 카카오 로그인부터 부분부터 구현하고 있는 수강생입니다. 카카오 로그인을 진행하는데 ID와 PW를 입력하고 들어가면 Admin Settings Issue (KOE101)이라는 에러 창이 나타납니다. 해당 에러는 확인해 보면 'App Key'를 잘못 등록했을 때 발생하는 것이라고 확인하고 다시 확인해 봤지만 계속 같은 에러만 발생하는 상황입니다. 해결 방법 질문 드립니다.ㅠㅠ
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (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;