묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
cocoapod error
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. npx react-native를 통해 프로젝트를 다운로드 하는데 ✖ Installing CocoaPodserrorerror Installing Cocoapods failed. This doesn't affect project initialization and you can safely proceed. However, you will need to install Cocoapods manually when running iOS, follow additional steps in "Run instructions for iOS" section.Error: An error occured while trying to install CocoaPods, which is required by this template.Please try again manually: sudo gem install cocoapods.CocoaPods documentation: https://cocoapods.org/ 다음과 같은 에러가 발생했습니다.>> sudo gem install cocoapods Password: ERROR: Error installing cocoapods: The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with `gem install drb -v 2.0.6` and then running the current command again drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210수동으로 설치했는데 안 돼서 ruby 버전을 봤는데>> ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin24]루비를 2.7 버전 이상으로 만들어주기 위해 rbenv를 다운받고rbenv install -l 3.1.6 3.2.6 3.3.6 jruby-9.4.9.0 mruby-3.3.0 picoruby-3.0.0 truffleruby-24.1.1 truffleruby+graalvm-24.1.1rbenv install 3.3.6 ruby-build: using openssl@3 from homebrew ==> Downloading ruby-3.3.6.tar.gz... -> curl -q -fL -o ruby-3.3.6.tar.gz https://cache.ruby-lang.org/pub/ruby/3.3/ruby-3.3.6.tar.gz % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 21.1M 100 21.1M 0 0 2434k 0 0:00:08 0:00:08 --:--:-- 2470k ==> Installing ruby-3.3.6... ruby-build: using libyaml from homebrew ruby-build: using gmp from homebrew -> ./configure "--prefix=$HOME/.rbenv/versions/3.3.6" --with-openssl-dir=/usr/local/opt/openssl@3 --enable-shared --with-libyaml-dir=/usr/local/opt/libyaml --with-gmp-dir=/usr/local/opt/gmp --with-ext=openssl,psych,+ -> make -j 8 *** Following extensions are not compiled: openssl: Could not be configured. It will not be installed. /private/var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/openssl/extconf.rb:122: OpenSSL library could not be found. You might want to use --with-openssl-dir=<dir> option to specify the prefix where OpenSSL is installed. Check /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/openssl/mkmf.log for more details. psych: Could not be configured. It will not be installed. Check /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/psych/mkmf.log for more details. BUILD FAILED (macOS 15.1.1 on arm64 using ruby-build 20241105) You can inspect the build directory at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep See the full build log at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.log이렇게 에러가 발생합니다 ..이틀째 해결방법을 찾는데 계속 막혀서 글 올립니다 감사합니다 ㅜㅜ
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
BUILD FAILED (macOS 15.0.1 on arm64 using ruby-build 20241105)
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.Macbook Ari M1 / MacOS 15.0.1rbenv [루비버전] rbenv install 3.2.2rbenv: /Users/teng/.rbenv/versions/3.2.2 already existscontinue with installation? (y/N) yruby-build: using openssl@3 from homebrew==> Downloading ruby-3.2.2.tar.gz...-> curl -q -fL -o ruby-3.2.2.tar.gz https://cache.ruby-lang.org/pub/ruby/3.2/ruby-3.2.2.tar.gz % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed100 19.5M 100 19.5M 0 0 16.5M 0 0:00:01 0:00:01 --:--:-- 16.5M==> Installing ruby-3.2.2...ruby-build: using readline from homebrewruby-build: using libyaml from homebrewruby-build: using gmp from homebrew-> ./configure "--prefix=$HOME/.rbenv/versions/3.2.2" --with-openssl-dir=/usr/local/opt/openssl@3 --enable-shared --with-readline-dir=/usr/local/opt/readline --with-libyaml-dir=/usr/local/opt/libyaml --with-gmp-dir=/usr/local/opt/gmp --with-ext=openssl,psych,+-> make -j 8 BUILD FAILED (macOS 15.0.1 on arm64 using ruby-build 20241105) You can inspect the build directory at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241123200520.32443.l96uOOSee the full build log at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241123200520.32443.log 이렇게 오류가 발생합니다. 선생님.2.7.6을 다운로드 했는데 deprecated 됐다고 나오고, 그래서 이 버전으로도 해봤는데 안 되더라구요... 거의 몇시간을 찾는데 관련 글도 안 나옵니다 ㅜㅜ
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
CodePush 기능에 관하여
안녕하세요 강사님. 강의 잘 보고 있습니다. 궁금한 점이 있어 질문남깁니다.마이크로소프트에서 25년 3월 이후로 앱센터 서버 지원을 안하면서 코드푸시 기능이 독자적으로 구축하는 standalone버전으로 본인 로컬이나, 자체 백 서버에서 독자적으로 구축해 코드푸시 기능을 사용할 수 있도록 소스코드를 공개했습니다. 이에 CodePush기능에 관해 2가지 궁금한 점이 있습니다.1. 공식개발문서를 보면, CodePush기능이 Reactnative 0.71버전까지라 나와있는 것 같아서 현재 RN 0.71버전으로 프로젝트를 재생성해 프로젝트를 하고 있는데, 버전이 신규버전이어도 상관없는 걸까요? 강사님께서 올려주신 github레포의 코드를 보니 Reactnative 버전이 0.72.6버전으로 나와있는데, 구현해주신 CodePush 강의를 보고 질문드립니다.2. 혹시 StandAlone 버전의 CodePush기능 강의를 만들어주실수 있을까요? 강사님 덕분에 많은 것을 보고 배워서 잘 배우고 싶어서 standalone버전 강의도 보고 싶습니다!
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
[3-8] 로그아웃 관련 문의 드립니다
function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: async () => { await axiosInstance.post('/auth/logout'); // 로그아웃 요청을 서버에 먼저 보냄 removeHeader('Authorization'); await removeEncryptStorage(storageKeys.REFRESH_TOKEN); queryClient.resetQueries({queryKey: [queryKeys.AUTH]}); }, ...mutationOptions }); }안녕하세요 강사님 강사님의 리액트 네이티브 강의를 보면서직접 자신만의 리액트 네이티브 프로젝트도 직접 다뤄보면서 하고 있는 학생입니다.https://github.com/Dongrang072/carPoolTeamProject-server이게 현재 제가 작성하고 있는 로컬 서버의 코드이고 https://github.com/Dongrang072/carpoolTeamProject이게 프론트의 코드입니다기존의 로그아웃 코드가 잘 작동하지 않아서, 코드를 이런식으로 고치고 난 후에 실행했는데 로그아웃으로 네비게이터가 authStack에 관련된 화면을 다시 보여주고 난 후에 이후 로그인까지는 의도적으로 되지만 로그인을 다시 실행하면 이전에 스토리지가 다 지워지지 않았는지 계정을 바꿔서 로그인 할 경우 전에 있던 계정으로 로그인이 되는 현상이 발생하고 있습니다.분명 헤더와 스토리지를 지움으로서 accessToken과 refreshToken 둘 다 지운걸로 생각했는데 이런 일이 생기는 이유가 궁금합니다. 로그아웃 엔드포인트 호출까지 진행되고 다시 화면이 랜더링 되어서 저는 괜찮았다고 생각했는데 이후 storage가 다 지워지지 않는 것이 원인인것 같습니다
-
미해결[2024] 비전공자도 가능한 React Native 앱 개발 마스터클래스
섹션7. 4강 5분 57초부터 api.json
말씀하신 것을 어떻게 해야 할지 모르겠습니다.api.json 파일을 생성했는데, 이곳에 어떤 데이터를 넣으면 될까요??아래 링크 주신 것들을 하나하나 넣어봤는데, 되지는 않았습니다. ㅠㅠ
-
해결됨[2024] 비전공자도 가능한 React Native 앱 개발 마스터클래스
섹션5. 날씨 앱 expo 버전
확실히 expo 버전으로 프로젝트를 생성하면, 영상처럼 진행이 되지 않습니다 ㅠㅠ 프로젝트 설치 및 실행 과정은 다음과 같습니다.기종: Androidnpx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기강의와 달리, expo로 빌드하셨다면npx expo install expo-location를 설치해주신 다음에 useEffect 함수 부분을 다음과 같이 변경해주면 됩니다.(Expo는 자체 위치 서비스 API를 제공하므로, @react-native-community/geolocation 대신 expo-location을 사용해야 합니다.)useEffect(() => { const getLocation = async () => { try { // 위치 권한 요청 let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { setError('위치 권한이 거부되었습니다'); setLoading(false); return; } // 현재 위치 가져오기 let location = await Location.getCurrentPositionAsync({}); const { latitude, longitude } = location.coords; fetchWeather(latitude, longitude); } catch (err) { setError(err.message); setLoading(false); } }; getLocation(); }, []);다음으로 OpenWeatherMap API는 기본적으로 켈빈 온도를 반환합니다. 따라서 섭씨로 변환하는 코드를 추가해야 합니다.각자 가져오신 API 값 뒤에 &units=metirc 를 추가해주시면 됩니다. 전체 코드는 다음과 같습니다.import { StatusBar } from 'expo-status-bar'; import { useEffect, useState } from 'react'; import { ActivityIndicator, Text, View } from 'react-native'; import styled from 'styled-components/native'; import * as Location from 'expo-location'; const Container = styled.View` align-items: center; margin-top: 40px; background-color: #222222; flex: 1; `; const MainTemp = styled.Text` font-size: 80px; color: white; `; const Addition = styled.View` background-color: #aeaeae; width: 150px; height: 150px; margin: 15px; align-items: center; justify-content: center; border-radius: 15px; `; const App = () => { const [weatherData, setWeatherData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const getLocation = async () => { try { // 위치 권한 요청 let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { setError('위치 권한이 거부되었습니다'); setLoading(false); return; } let location = await Location.getCurrentPositionAsync({}); const { latitude, longitude } = location.coords; fetchWeather(latitude, longitude); } catch (err) { setError(err.message); setLoading(false); } }; getLocation(); }, []); const fetchWeather = async (latitude, longitude) => { try { const response = await fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=<<개인 API값>>&units=metric` ); // <<>>는 지우셔야 합니다. if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); setWeatherData(data); } catch (error) { setError(error.message); } finally { setLoading(false); } }; if (loading) { return ( <Container> <ActivityIndicator size="large" color="#ffffff" /> </Container> ); } if (error) { return ( <Container> <Text style={{ color: 'white', fontSize: 20 }} >{`Error: ${error}`}</Text> </Container> ); } if (!weatherData) { return ( <Container> <Text style={{ color: 'white', fontSize: 20 }}>No data available</Text> </Container> ); } const { main: { temp, feels_like, humidity, temp_max, temp_min }, wind: { speed }, weather, } = weatherData; return ( <Container> <StatusBar /> <Text style={{ fontSize: 20, marginTop: 40, color: 'white' }}> {weatherData.name} </Text> <MainTemp>{Math.round(temp)}℃</MainTemp> <Text style={{ fontSize: 24, color: 'white' }}>{weather[0].main}</Text> <View style={{ flexDirection: 'row' }}> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 체감 온도 </Text> <Text style={{ color: 'white', fontSize: 18 }}> {Math.round(feels_like)}℃ </Text> </Addition> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 습도 </Text> <Text style={{ color: 'white', fontSize: 18 }}>{humidity}%</Text> </Addition> </View> <View style={{ flexDirection: 'row' }}> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 최고/최저 온도 </Text> <Text style={{ color: 'white', fontSize: 18 }}> {Math.round(temp_max)}℃/{Math.round(temp_min)}℃ </Text> </Addition> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 풍속 </Text> <Text style={{ color: 'white', fontSize: 18 }}>{speed} m/s</Text> </Addition> </View> <View></View> </Container> ); }; export default App;
-
해결됨[2024] 비전공자도 가능한 React Native 앱 개발 마스터클래스
섹션4. 번역기 앱 expo 버전?!
계산기 앱 개발과 마찬가지로, 다음과 같은 프로젝트 설치 및 실행을 진행하였습니다.<기종 : Android>npx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기이전 강의(레이아웃 구성하기)의 중간(7:23)에 나오는 텍스트 창을 클릭하면 UI가 따라 올라가는 것을 방지하기 위한 설정방법이 제 것에서는 나타나지 않았습니다. 검색 창에 windowsoftinputmode 또는 AndroidManifest를 검색해도 나타나지 않았습니다.(아무래도, 제가 설치를 잘못해서 나타났거나 expo로 빌드했기에 나타나지 않는 것 같습니다. VSCode는 기존에 사용했던 터라 해당되지 않는 것 같습니다.) 이를 해결하기 위해,Picker를 감싸고 있는 View를 Wrapper라고 이름을 변경한 후에, postion: absolute 속성을 부여했습니다. +) 텍스트 입력 글자가 꽤 길어지면, 줄바꿈이 되지 않고 글자가 잘려나가는 현상이 있습니다. 이를 해결하는 방법으로는 multiline={true}를 추가해주면 됩니다.코드는 아래와 같습니다.import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { Text, TextInput, View, Dimensions } from 'react-native'; import Translator from 'react-native-translator'; import styled from 'styled-components/native'; import { Picker } from '@react-native-picker/picker'; const Container = styled.View` background-color: #181818; flex: 1; padding-top: 20px; `; const Wrapper = styled.View` position: absolute; top: 40px; left: 0; right: 0; padding-horizontal: 10px; `; const InputView = styled.View` background-color: #606060; height: 250px; justify-content: left; align-items: start; padding: 10px; border-radius: 10px; margin-bottom: 80px; `; const ResultView = styled(InputView)` background-color: #0084ff; margin-bottom: 10px; `; const App = () => { const [value, setValue] = useState(''); const [result, setResult] = useState(''); const [fromLang, setFromLang] = useState('en'); const [toLang, setToLang] = useState('ko'); return ( <Container> <StatusBar style="light" /> <Translator from={fromLang} to={toLang} value={value} onTranslated={(t) => setResult(t)} /> <Wrapper> <Picker style={{ marginBottom: 10, backgroundColor: '#606060' }} selectedValue={fromLang} onValueChange={(itemValue) => setFromLang(itemValue)} > <Picker.Item label="한국어" value="ko" /> </Picker> <InputView> <TextInput style={{ fontSize: 24, color: 'white' }} value={value} onChangeText={(t) => setValue(t)} multiline={true} placeholder="번역할 텍스트 입력" /> </InputView> <Picker style={{ marginBottom: 10, backgroundColor: '#0084ff' }} selectedValue={toLang} onValueChange={(itemValue) => setToLang(itemValue)} > <Picker.Item label="영어" value="en" /> </Picker> <ResultView> <Text style={{ fontSize: 24, color: 'white' }}>{result}</Text> </ResultView> </Wrapper> </Container> ); }; export default App; ps) 간혹 글자를 입력하면 즉각 번역되지 않고, 번역되는 아래쪽 Picker를 클릭한 후에야 동작하긴 합니다. 이를 해결하기 위해서는 useEffect를 사용하면 해결되지만 강의에서는 다루지 않아 코드에 반영하지 않았습니다. GPT가 잘 알려주니까 궁금하신 분들은 해보시면 좋을 것 같습니다~ ps) 업데이트 하시면서, 영상이 잘못배치된 것 같습니다~ 번역앱 원리와 이해 부분에 코인에 관한 영상이 재생됩니다. 코인 관련, 날씨앱에서는 이상이 없었습니다~ 좋은 강의 감사합니다~!! 덕분에 많은 도움이 되고 있습니다.
-
해결됨[2024] 비전공자도 가능한 React Native 앱 개발 마스터클래스
계산기 앱 착오를 거친 수정버전
제가 설치를 이상하게 했는지, 잘 되지 않아 저는 프로젝트 생성을 다음과 같은 절차로 진행했습니다.npx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기위와 같은 절차를 거쳐, 복붙으로도 진행해봤을 때의 문제점은 안드로이드 기준으로 기호들이 나타나지 않는다는 점이었습니다. 무지성으로 복붙한 것이 문제였는데요. 문제는 margin 값들의 값이 컸기 때문이었습니다. 혹시 저 같이 잘 안 되시는 분들이 있을까 하여, 좀 헤맸던 기록으로 남깁니다~ ps. 아래 별도로 올려주신 코드 중에 const [result, setResult] = useState('') 에서 useState('0')으로 변경이 필요합니다. 그리고 알려주신 코드를 복붙해서 했을 때 제대로 나오지 않아, GPT의 도움을 받아 수정해보았습니다.import React, { useState } from 'react'; import { Text, View } from 'react-native'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import Entypo from 'react-native-vector-icons/Entypo'; import FontAwesome6 from 'react-native-vector-icons/FontAwesome6'; import styled from 'styled-components/native'; import { evaluate } from 'mathjs'; const NumberButton = styled.TouchableOpacity` background-color: #b6b6b6; width: 65px; height: 65px; border-radius: 35px; margin: 8px; align-items: center; justify-content: center; `; const OperatorButton = styled(NumberButton)` background-color: #0084ff; `; const NumberText = styled.Text` font-size: 30px; color: white; `; const ResultText = styled.Text` font-size: 65px; padding: 20px; margin-top: 50px; color: white; text-align: right; `; const App = () => { const [input, setInput] = useState(''); const [result, setResult] = useState('0'); const handlePress = (value) => { const newInput = input + value; setInput(newInput); setResult(newInput); // 입력값을 바로 결과창에 표시 }; const handleOperation = (op) => { if (input && !['+', '-', '*', '/'].includes(input.slice(-1))) { const newInput = input + op; setInput(newInput); setResult(newInput); // 연산자도 바로 결과창에 표시 } }; const calculate = () => { try { const calculatedResult = evaluate(input).toString(); setResult(calculatedResult); setInput(calculatedResult); // 계산 결과를 새로운 입력값으로 설정 } catch (e) { setResult('Error'); setInput(''); } }; const clear = () => { setInput(''); setResult('0'); }; return ( <View style={{ flex: 1, backgroundColor: '#181818' }}> <ResultText>{result}</ResultText> <View style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 20 }}> <View style={{ flexDirection: 'row', justifyContent: 'center' }}> <View style={{ paddingRight: 20 }}> <View style={{ flexDirection: 'row', flexWrap: 'wrap', width: 250 }} > {[...Array(10).keys()].reverse().map((num) => ( <NumberButton key={num} onPress={() => handlePress(num.toString())} > <NumberText>{num}</NumberText> </NumberButton> ))} <NumberButton onPress={clear}> <MaterialIcons name="restart-alt" size={30} color="white" /> </NumberButton> <NumberButton onPress={() => handlePress('.')}> <Entypo name="dot-single" size={30} color="white" /> </NumberButton> </View> </View> <View style={{ marginTop: -81 }}> <OperatorButton onPress={calculate}> <MaterialCommunityIcons name="equal" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('+')}> <Entypo name="plus" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('-')}> <Entypo name="minus" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('*')}> <Entypo name="cross" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('/')}> <FontAwesome6 name="divide" size={30} color="white" /> </OperatorButton> </View> </View> </View> </View> ); }; export default App;
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
안녕하세요? 그랩선생님, 수고가 많으십니다.다름이 아니라 강의 [컴포넌트 사용하기] 강의를 진행하던 중 2가지 에러가 발생하여 질문을 하게 되었습니다.첫번째 에러는 아래 사진으로 첨부합니다. 그리고 두번째 에러는 실제 소스 파일 폴더에 가서 App.js 파일을 선택 후 엔터(실행)하니 아래 사진과 같은 에러가 발생하였습니다. --> 이 두가지 에러를 어떻게 하면 해결 할 수 있는지 상세한 설명과 자세한 답변 부탁드립니다.감사합니다.
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
강사님 안녕하세요 질문 있습니다.
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 강사님 안녕하세요.지금 mac m3환경에서 개발중입니다.react-native 버젼 : 0.72.6 현재 [2-5] Drawer Navigation을 수강중인데요,아이폰은 빌드 성공했는데 안드로이드에서 계속 빌드가 실패하고 있습니다.gpt에게 한번 질문을 해보니 버전을 올리라고하더라구요.그럼 기존에 맞춰놓은 것들이 깨질까봐 걱정되어서 질문드립니다.어떻게 하면좋을까요? 터미널: info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor /Users/rengoku/Documents/projects/Matzip/front/node_modules/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NodesManager.java:440: error: switch rules are not supported in -source 11 case "opacity" -> { ^ (use -source 14 or higher to enable switch rules) /Users/rengoku/Documents/projects/Matzip/front/node_modules/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/layoutReanimation/AnimationsManager.java:356: error: pattern matching in instanceof is not supported in -source 11 if (props.get(Snapshot.TRANSFORM_MATRIX) instanceof ReadableNativeArray matrixArray) { ^ (use -source 16 or higher to enable pattern matching in instanceof) 2 errors FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-reanimated:compileDebugJavaWithJavac'. > Compilation failed; see the compiler error output for details. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 3s info Run CLI with --verbose flag for more details. 버전 정보입니다."dependencies": { "@react-native-masked-view/masked-view": "^0.3.2", "@react-navigation/drawer": "^7.0.5", "@react-navigation/native": "^7.0.3", "@react-navigation/stack": "^7.0.3", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.21.2", "react-native-reanimated": "^3.16.1", "react-native-safe-area-context": "^4.14.0", "react-native-screens": "^4.1.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" }
-
미해결핸즈온 리액트 네이티브
ImagPickerScreen을 만드는 과정에서 문제가 발생하여 글을 남깁니다.
iOS에서 사진의 주소값을 ph://와 같은 주소를 반환하는데 해당 주소를 처리할 수 없다고 뜨는데 어떻게하면 좋을까요?오류문은 다음과 같습니다.No suitable URL request handler found for ph://17370BD6-D19B-4C06-9180-03BB64CF2AD2/L0/001-[RCTNetworking networkTaskWithRequest:completionBlock:] RCTNetworking.mm:706-[RCTImageLoader _loadURLRequest:progressBlock:completionBlock:]__139-[RCTImageLoader loadImageOrDataWithURLRequest:size:scale:resizeMode:priority:attribution:progressBlock:partialLoadBlock:completionBlock:]block_invoke.159dispatchcall_block_and_releasedispatchclient_calloutdispatchlane_serial_draindispatchlane_invokedispatchroot_queue_drain_deferred_wlhdispatchworkloop_worker_threadpthreadwqthreadstart_wqthread안드로이드 쪽에서는 사진이 정상적으로 목록이 조회되는 것을 알 수 있었습니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
[3-8]회원가입/로그인 오류
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.이거 무슨 오류일까요ㅜㅜ
-
미해결따라하며 배우는 리액트 네이티브 기초
Execution failed for task ':app:checkDebugDuplicateClasses'. 에러 해결
강의에서 <android:exported="false"> 부분 이후 안드로이드 실행시 Execution failed for task ':app:checkDebugDuplicateClasses'. 오류가 나면 gradle.properties 파일에 아래 부분을 추가해보세요android.useAndroidX=trueandroid.enableJetifier=true
-
미해결따라하며 배우는 리액트 네이티브 기초
선생님 이다음 remote push 부분 강의가 없습니다.
선생님 이다음 remote push 부분 강의가 없습니다. 누락된걸까요?
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
[해결 완료] npm run start:dev 오류
database 연결 정보는 본인 정보로 작성...!!@Module({ imports: [ TypeOrmModule.forRoot({ username: 'root', password: '1234', database: 'matzip-server', }), ], controllers: [AppController], providers: [AppService], })
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
회원가입 로그인 시 아무 반응이 없어요.
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.서버도 켰고 코드에 문제도 없어보이는데 회원가입해도 DB에 아무런 값이 안들어가네요네트워크에러 어떻게 해결해야하나요..
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
[4-0] 로그인하고 아무 반응이 없어요/axios.ts
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.axios.ts에서 BaseURL 바꿔도 로그인이 안됩니다...
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
[4-0]구글 지도 계속 오류에요..
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.아래 두가지 오류가 계속 반복됩니다. 윈도우입니다. 그리고 영상에서 로그인을 하고 지도를 보는데 로그인 아이디 비번은 그냥 아무거나 하면 되나용?
-
미해결배달앱 클론코딩 [with React Native]
wifi 환경에서 axios 통신이 로컬서버에서 안됩니다.
안녕하세요 강사님 강사님의 리액트 네이티브 강의를 보면서직접 자신만의 리액트 네이티브 프로젝트도 직접 다뤄보면서 하고 있는 학생입니다.https://github.com/Dongrang072/carPoolTeamProject-server이게 로컬 서버의 코드이고 https://github.com/Dongrang072/carpoolTeamProject이게 프론트의 코드입니다 axios 통신에 현재 문제가 있습니다.동일한 코드인데도 wi-fi로 인터넷이 연결되는 노트북의 환경에서는 http:10.0.0.2로 접속이 안되고,로그캣을 보니 두 요청이 확연하게 달랐는데모든 api를 axios로 요청 시에 와이파이 환경에서만 되질 않았습니다 이건 랜선에서 연결된 pc에서 로컬 서버와 통신 시 요청에서 성공했을 때의 로그캣 로그이고 이건 와이파이 환경의 노트북에서 로컬 서버와 통신했을 시에 생기는 로그캣 로그입니다 혹시나 해서 프로젝트 루트 폴더의 androidManifestxml의 파일에 누락된게 있나 봤는데 <manifest xmlns:android="http://schemas.android.com/apk/res/android"> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/> <application android:usesCleartextTraffic="true" android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme" > <!-- Google Maps API Key --> <meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/GOOGLE_MAPS_API_KEY"/> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> </manifest> 이상은 없는 것 같습니다....혹시 방화벽의 문제인가요? 노트북으로 실행시에 직접 ipConfig로 내부 ip(ip4)를 이용해서 api를 호출해봤는데도 여전히 network 오류가 뜹니다 LOG Verification code response: <HTML> <HEAD> <TITLE>GiGA WiFi home</TITLE> <LINK REL="shortcut icon" HREF="icon.ico" TYPE="image/x-icon"> <LINK REL="icon" HREF="icon.ico" TYPE="image/x-icon"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language='JavaScript' type='text/javascript' src='/script/jquery.js?version=Aug252023180743'></script> <script language='JavaScript' type='text/javascript' src='/script/jquery-migrate-1.2.1.min.js?version=Aug252023180743'></script> <script language='JavaScript' type='text/javascript' src='/script/mcr_common_new.js?version=Aug252023180743'></script> <script language='JavaScript' type='text/javascript' src='/script/mcr_common.js?version=Aug252023180743'></script> <script language='JavaScript' type='text/javascript' src='/script/mcr_common_kt.js?version=Aug252023180743'></script> <script language='JavaScript' type='text/javascript' src='/script/mcr_jq_util.js?version=Aug252023180743'></script> <style type="text/css"> <!-- a { font-style:normal; font-weight:normal; text-decoration:none; } body { margin-left: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; background-color: #ffffff; } .table { border-top-width: 2px; border-top-style: solid; border-top-color: #333333; } .font100 { FONT-FAMILY: "돋움", "arial"; FONT-SIZE: 14px; LINE-HEIGHT: 14pt; COLOR: #000000 } .font101 { FONT-FAMILY: "돋움", "arial"; FONT-SIZE: 12px; LINE-HEIGHT: 12pt; COLOR: #666666 } --> </style> <script language="JavaScript" type="text/javascript" src="/script/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="/script/captcha.js?version=Aug252023180743"></script> <script type="text/javascript" src="/lang/b28n.js"></script> <script type="text/javascript"> Butterlate.setTextDomain("main"); redirectTopWindow(); var UserPrivilege = getUserPrivilege(); var Privilege = parseInt(UserPrivilege, 10); function redirectTopWindow(){ if( top != self ){ var URL = "http://" + window.location.host; top.location.replace(URL); } } var captcha; function CheckAll() { if("8899" == window.location.port){ if( captcha.validate( $("input[name='captchatext']").val() ) == true ){ if(document.Login.UserID.value == "") { alert("사용자ID를 확인해 주세요."); document.Login.UserID.focus(); return false; } if(document.Login.Password.value == "") { alert("비밀번호를 확인해 주세요."); document.Login.Passw직접적으로 front내의 src 파일의 api/auth.ts 내의 이메일 post 관련 함수를 const sendVerificationCode = async (email: string): Promise<string> => { try { console.log('Sending verification code request:', email); const response = await axiosInstance.post("http://10.0.0.2/mail/send-code", { email: email.trim() // 이메일을 서버에 전달 }); console.log('Verification code response:', response.data); return response.data; // 반환된 인증 코드 반환 } catch (error: any) { console.error('Verification code error:', { email, error: error.message, response: error.response?.data }); throw new Error( error.response?.data?.message || '인증 코드 전송에 실패했습니다.' ); } }; http://10.0.0.2를 명시했더니 res data를 console.log로 찍으니 이렇게 나왔습니다 json으로 받아야 하는데 왜 res가 html 형식으로 받아진건지 모르겠습니다 덤으로 smtp로 설정했던이메일 인증 코드는 실제 이메일에 오지 않은 상태입니다. html 로그 관련은 인프런에서 질문 글에 1만자 이하로 제한되어있어서 어느정도 삭제했습니다
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
useQuery 데이터 사용법 질문
안녕하세요 문득 궁금해서 질문드립니다.리액트쿼리 공식문서를보면const { isPending, error, data } = useQuery({ queryKey: ['repoData'], queryFn: () => fetch('https://api.github.com/repos/TanStack/query').then((res) => res.json(), ), }) if (isPending) return 'Loading...' if (error) return 'An error has occurred: ' + error.message 이렇게 항상 값이 있다는 가정하에 데이터를 사용하게 하는데MapHomeScreen이나 MapLegend 등에선const {categories} = getProfileQuery.data || {};이런식으로 하시더라구요 실제로 저는 MapHomeScreen 스크린에서 마커가 클릭후에 나타나는 현상이 있어서const {data: markers = [], isPending, error} = useGetMarkers(); if (isPending || error) return <></>;이렇게 데이터가 로딩또는 에러가 아닐때 다음 구문으로 넘어가게 하니 마커가 잘 나타났습니다제가 궁금한건 if (isPending || error) return <></>;처리를 해줄때와 안해줘도 될 때가 따로 있는것인지 그게 궁금합니다~