묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 배우는 리액트 네이티브
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;
-
미해결배달앱 클론코딩 [with React Native]
EncryptedStorage에 저장되는 값을 확인하고 싶습니다.
로그인 유지가 되지 않는 것 같아서 storage의 저장하는 되는 값을 확인하고 싶습니다.재로딩 시 로그인이 끊기는 현상이 있어 accessToken과 refreshToken을 확인하고 싶습니다. const onSubmit = useCallback(async () => { if (loading) { return; } if (!email || !email.trim()) { return Alert.alert('알림', '이메일을 입력해주세요.'); } if (!password || !password.trim()) { return Alert.alert('알림', '비밀번호를 입력해주세요.'); } try { setLoading(true); const response = await axios.post(`${Config.API_URL}/login`, { email, password, }); Alert.alert('알림', '로그인 되었습니다.'); dispatch( userSlice.actions.setUser({ name: response.data.data.name, email: response.data.data.email, accessToken: response.data.data.accessToken, }), ); await EncryptedStorage.setItem( 'refreshToken', response.data.data.refreshToken, ); } catch (error) { const errorResponse = (error as AxiosError).response; if (errorResponse) { Alert.alert('알림', errorResponse.data.message); } } finally { setLoading(false); } }, [loading, dispatch, email, password]);로그인은 정상적으로 되었고 오더페이지로 넘어 간 상태입니다 "react-native-encrypted-storage": "^4.0.3",의심되는 부분은 강의에서 설치한 버전 차이가 있는데 "4.0.2" 버전으로 설치 시 에러가 있어서 "4.0.3" 버전을 사용중입니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
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 에서 문제가 생긴거 같습니다. ㅠㅠ
-
미해결배달앱 클론코딩 [with React Native]
"RNSScreenStackHeaderConfig" was not found in the UIManager
이러한 에러가 발생합니다.. 계속 리로드 해봐도 같은 증상이 나옵니다..
-
미해결
react-native cli 에서 카카오맵 사용하는 방법이 궁금합니다.
react-native cli를 처음 사용해보고 있습니다. 구글맵같은 경우는 구글맵 플러그인? 라이브러리? 가 있어 편하게 사용했는데요 카카오지도를 사용해야하는데 카카오지도는 웹뷰방식말고 리액트네이티브 로직 안에서 불러오는 방법이 있을까요??
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요! useParams에서 막혀서 질문 남깁니다 ㅠㅠ
우선 웹라이브러리 파트의 Link태그 적용 강의에서 후반부에 useParams 를 사용하게 되는데, 이부분부터 무언가 오류가 발생하네요.. 1. 메인화면 들어갔을때 오류화면 2. 상품클릭했을때 콘솔로그 상품을 클릭했을때 변경된 주소까지는잘 적용 되고, useParams 를 사용하기 전까지는 정상 작동 했는데, product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다 이전에 소스에서는 문제가 안생겼군요 ㅠㅠ import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; 오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다... react-router-dom 설치 할때 버전을 확인 못하고 그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데, package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데 오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ
-
미해결배달앱 클론코딩 [with React Native]
npm run android 시 빌드 에러
빌드 할때 에러로 진행이 어렵네요 ㅠ 도와주세요