묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결배달앱 클론코딩 [with React Native]
macOS - Ventura 13.2 에서 RN 0.71 생성 시 ruby 2.7.6 설치
안녕하세요macOS Ventura 13.2 PC에 react-native init TestApp 실행 시 ruby 2.7.6 버전이 설치되어 있어야 한다고 확인했습니다.현재 제 PC 기준 설치할 수 있는 ruby 버전은 위와 같습니다.방법이 있는지 문의드립니다.고맙습니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
setProducts 질문
위 사진처럼 setProducts 밑에 console.log를 해봤는데한번 출력될 줄 알았는데 왜 두 번 출력되는 건가요?
-
미해결배달앱 클론코딩 [with React Native]
build.gradle 에 react.gradle 없는 문제
안녕하세요~최초 npx react-native init 프로젝트명 커맨드로 프로젝트를 만들면 build.gradle 파일에는 아래의 react.gradle 이 존재하지 않습니다.apply from: "../../node_modules/react-native/react.gradle"이부분은 향후에도 지원하지 않고 deprecated 된다고 하네요.그래서 https://github.com/facebook/react-native/blob/main/template/android/app/build.gradle 여기 공식 github 에도 나와있지만 이제부턴 apply plugin: "com.facebook.react" 를 쓴다고 하고 프로젝트 init하면 default도 그렇게 되어 있습니다. 그런데 문제는!이러한 build.gradle 환경에서 android 빌드해보면 아래와 같은 에러가 발생합니다.bundleDebugJsAndAssets 를 :app 에서 찾을 수 없다고 나오는데 어떻게 해결하면 될까요? info Starting JS server...info Installing the app...5 actionable tasks: 5 up-to-dateFAILURE: Build failed with an exception.* What went wrong:Could not determine the dependencies of task ':app:generateBundledResourcesHashDebug'.> Task with path 'bundleDebugJsAndAssets' not found in project ':app'.* 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.orgBUILD FAILED in 4serror Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* What went wrong:Could not determine the dependencies of task ':app:generateBundledResourcesHashDebug'.> Task with path 'bundleDebugJsAndAssets' not found in project ':app'. 아래와 같은 이슈인거 같은데 known 이슈로 지금 디버깅 중인걸까요?https://github.com/microsoft/react-native-code-push/issues/2418
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품업로드 화면 구현 시 이미지 업로드 시점 관련
안녕하세요. 수업 잘 듣고 있습니다!수업관련 질문은 아니지만 일반적인 구현방법도 이런가해서 문의 남겨봅니다^^이미지 업로드 화면에서업로드 할 사진을 선택하면 서버측으로 먼저 이미지를 전송하는 방식으로 구현하셨는데 이미지 선택 시에는 로컬(클라이언트PC)의 이미지로 보여주고 [상품 등록하기] 버튼을 눌렀을 때 서버로 업로드 하면서 DB에 등록하는 것이 어떨까해서요.이미지를 계속 변경하면 서버에 업로드가 되는 듯 하여...문의한번 해봅니다^^ 다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결처음 배우는 리액트 네이티브
styled-components 에러
스타일드 컴포넌트를 설치했는데 이렇게 에러가 뜨는데 어떤 에러일까요?깃 주소 : https://github.com/jjunseokk/react-native
-
미해결처음 배우는 리액트 네이티브
OS 네이트브 코드를 개발하면서 UI 를 리액트 네이티브로
안드로이드 NDK와 같은 스마트폰 OS 네이트브 코드를 개발하면서 UI 를 리액트 네이티브로 구현할 수 있는지 궁금합니다.저는 gstreamer 파이프라인을 구현한 앱을 만들고 싶습니다. 또 opencv 도 사용하고요, 딥러닝 라이브러리도 사용하고 싶습니다. 이런 부분은 아마도 안드로이드 NDK 와 같은 걸 써야 할 것 같습니다. 아이폰은 잘 모르지만 아마 iOS 에도 NDK 비슷한 것이 있을 것 같습니다. 이렇게 플랫폼에 종속된 기술을 각 플랫폼 별로 구현해야 하는 것은 피할 수 없을 것 같습니다. 그러나 UI 부분은 리액트 네이티브로 원소스로 구현하고 싶습니다.이런 식의 구현을 할 수 있는지, 할 수 있다면 어떤 참고 자료가 있을지 궁금합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
length 오류
콘솔 결과와 error가 같이 출력됩니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
react-router-dom link클릭시 이동이 안되는 오류
안녕하세요 강사님해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다)다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785#여기는 Link태그 해당 수업코드 파일입니다!
-
해결됨처음 배우는 리액트 네이티브
styled component를 사용하면 터집니다 ㅠㅠ
styled components 삭제하고 재설치 및 json파일 도확인했는데 버전 호환성 문제 떄문인지 계속 터집니다 styled 관련된 코드를 지우면 정상작동합니다 원인이 무었일까요>? ㅠㅠ
-
미해결따라하며 배우는 리액트 네이티브 기초
adb kill-server 후 adb start-server 해도 실행이 안되네요..
안드로이드 에뮬레이터를 실행하려고하는데 에러가 나서첨엔 adb 명령어도 안되서 brew install android-platform-tools 명령어로 설치한담에 위 제목같이 명령어 실행후 다시 해봤는데도 안되네요.어떻게 해야 에뮬레이터가 실행 될까요? ㅠㅠ-> 아예 지우고 2강 전부터 다시 만들어서 실행하니 되는거같네요 ㅠㅠ
-
미해결배달앱 클론코딩 [with React Native]
잘못된 클라이언트 ID를 지정
1.ios/FoodDeliveryApp/Info.plist 입력<key>NMFClientId</key> <string>콘솔에서 복사한 클라이언트 아이디</string>2.Xcode의 앱-general-Bundle Identifier과 네이버 콘솔 번들 ID 동일 (잘못입력했을까봐 복사붙여넣어서도 시도해보았습니다)3. pod install --repo-update npx pod-installXcode에서 shift+cmd+k로 build clean위 사항들을 모두 시도해보았는데 ios에서만 아래 얼럿창이 발생합니다. (android는 정상동작) 오탈자 및 확인할 수 있는 사항 모두 확인하였는데 해결이 잘 안되어 질문드립니다.
-
미해결배달앱 클론코딩 [with React Native]
redux state에 push
리액트에 state값을 변경할때 직접 수정하면 감지하지 못한다고 알고 있었는데 (ex. state.count = 10) push 같은 행위는 상관 없는 걸까요? 아니면 애초에 잘못된 정보 였을까요?
-
해결됨배달앱 클론코딩 [with React Native]
로그인 페이지 내 useCallback 사용 이유
안녕하세요, RN보다는 React에 가까운 질문 같긴하지만 궁금한 점이 있어서요.제로조님께서 로그인 페이지 내에서 onSubmit 함수나 onChangeEmail, onChangePassword 함수에 useCallback을 사용하셨는데 이유가 있을까요??useCallback이 재랜더링 시 불필요하게 계속 호출되는 것을 막는 것으로 알고 있는데, 해당 페이지 내에서는 재랜더링 되는 것이 없어서 불필요한 것이 아닌가 싶어서요. 물론 useCallback없이 써도 되는 것은 알지만, 해당 부분에서 제로조님께서 useCallback을 사용하시는 이유가 궁금합니다! 감사합니다!
-
미해결배달앱 클론코딩 [with React Native]
안드로이드 앱을 실행하면 바로꺼집니다.
안녕하세요 강사님지금 리액트 내비게이션 만들기를 하고 있습니다.지금 App.tsx를 교체를 했는데 앱을 실행했을 때 바로 종료가 됩니다.gif 사진을 달아놨습니다. import * as React from 'react'; import {NavigationContainer, ParamListBase} from '@react-navigation/native'; import { createNativeStackNavigator, NativeStackScreenProps, } from '@react-navigation/native-stack'; import {Text, TouchableHighlight, View} from 'react-native'; import {useCallback} from 'react'; type RootStackParamList = { Home: undefined; Details: undefined; }; type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>; type DetailsScreenProps = NativeStackScreenProps<ParamListBase, 'Details'>; function HomeScreen({navigation}: HomeScreenProps) { const onClick = useCallback(() => { navigation.navigate('Details'); }, [navigation]); return ( <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <TouchableHighlight onPress={onClick}> <Text>Home Screen</Text> </TouchableHighlight> </View> ); } function DetailsScreen({navigation}: DetailsScreenProps) { const onClick = useCallback(() => { navigation.navigate('Home'); }, [navigation]); return ( <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <TouchableHighlight onPress={onClick}> <Text>Details Screen</Text> </TouchableHighlight> </View> ); } const Stack = createNativeStackNavigator<RootStackParamList>(); function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} options={{title: 'Overview'}} /> <Stack.Screen name="Details"> {props => <DetailsScreen {...props} />} </Stack.Screen> </Stack.Navigator> </NavigationContainer> ); } export default App;
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 no environment
postman에서 우측 상단의 no environment를 클릭해도다른 항목이 나오지 않습니다.
-
미해결배달앱 클론코딩 [with React Native]
icon font 사이즈 조정방법
headerTitle은 위쪽tabBarLabelStyle 은 아래쪽 fontSize 조정가능하십니다.
-
미해결배달앱 클론코딩 [with React Native]
Type '({ navigation }: HomeScreenProps) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined'. 에러
(property) component: ScreenComponentType<ParamListBase, "Home">React component to render for this screen.Type '({ navigation }: HomeScreenProps) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined'. Type '({ navigation }: HomeScreenProps) => Element' is not assignable to type 'FunctionComponent<{}>'. Types of parameters '__0' and 'props' are incompatible. Type '{}' is missing the following properties from type 'HomeScreenProps': navigation, routets(2322)types.d.ts(327, 5): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & RouteConfig<ParamListBase, "Home", StackNavigationState<ParamListBase>, NativeStackNavigationOptions, NativeStackNavigationEventMap>'git에 있는 코드를 복사해 붙여넣기 하였는데 이러한 에러가 나옵니다... 혹시 어떻게 하면 될까요?
-
미해결배달앱 클론코딩 [with React Native]
비디오 재생 질문입니다.
혹시 mp4 형태의 비디오 파일은 어떻게 접근할 수 있을까요?? filePath 는 출력이 되는데, {uri: filePath} 형태로 지정해도 파일을 읽지 못합니다...비디오 재생용 라이브러리는 react-native-video 사용하고 있습니다.
-
미해결배달앱 클론코딩 [with React Native]
이건 강의내용 외 질문인데, ftp 나 sftp 프로토콜을 통하여 서버에 파일을 업로드 하게 될 경우는 웹과 앱의 동작 방식이 다른지 여쭤보고 싶습니다.
웹 프론트엔드 같은 경우는, 서버에 별도 배포과정을 거쳐 API 호출 방식과 유사하게 처리할 수 있는것 같던데, 앱애서는 이러한 배포방식을 사용할 수 없어, 어떻게 처리해야 하는지 감을 잡지 못하겠어 여쭤봅니다..감사합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
다른건 다되는데 typeerror 가 뜹니다..
1.<pre>TypeError: Cannot read properties of undefined (reading 'create')const express = require("express"); const cors = require("cors"); const { application } = require("express"); const app = express(); const port = 8080; const models = require("./models"); app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { const query = req.query; console.log("QUERY:", query); res.send({ products: [ { id: 1, name: "농구공", price: 100000, seller: "조던", imgUrl: "images/products/basketball1.jpeg", }, { id: 2, name: "축구공", price: 50000, seller: "메시", imgUrl: "images/products/soccerball1.jpg", }, { id: 3, name: "키보드", price: 10000, seller: "그랩", imgUrl: "images/products/keyboard1.jpg", }, ], }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller } = body; models.Product.create({ name, description, price, seller, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.send("상품 업로드에 문제가 생겼습니다."); }); }); app.get("/products/:id/events/:eventId", (req, res) => { const params = req.params; const { id } = params; res.send(); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공"); }) .catch((err) => { console.error(err); console.log("DB 연결 에러 ㅠ "); process.exit(); }); }); 그 전까진 다 실행 잘되고 테이블도 잘 만들어졌는데 postman 에 send 를 누르면 이렇게 나옵니다body 안에는 잘 들어가는데 create 에서 문제가 생긴거 같습니다. ㅠㅠ