묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결React Native with Expo: 제로초에게 제대로 배우기
router.navigate동작이 달라요 ㅠ
<View> <TouchableOpacity onPress={() => router.navigate(`/activity`)}> <Text style={{ color: pathname === '/activity' ? 'red' : 'black' }}> All </Text> </TouchableOpacity> </View> <View> <TouchableOpacity onPress={() => router.navigate(`/activity/follows`)}> <Text style={{ color: pathname === '/activity/follows' ? 'red' : 'black', }} > Follows </Text> </TouchableOpacity> </View>일단 코드는 '/activity', '/activity/follows' 만 붙였습니다만, 다른 TouchableOpacity에도 router.navigate를 붙여서 동작을 확인해봤는데 저는 router.push와 같은 동작만 하네요...강의와 최대한 같은 상황으로 경로를 눌러봐도 push 처럼 동작합니다. 터미널에서 r을 눌러서 재시작도 해보고, npm run android도 다시 해봐도 똑같네요.어디를 살펴봐야 router.navigate가 제대로 동작할까요? npm ls react: 19.0.0npm ls react-native: 0.79.5npm ls expo: ~53.0.16
-
미해결따라하며 배우는 리액트 네이티브 기초
21강 11분 59초 버그
emptylisttext 이거 빈칸으로 놔두고 똑같이 했는데 레퍼런스오류 style이 존재하지 않는다 이거 뜨는데 왜 안될까요
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
EAS 빌드 완료 후 푸시 알림 테스트 실제 기기가 필요한가요?
안녕하세요 강사님 양질의 강의 재밌게 잘 수강중입니다! 푸시 알림 테스트 개발 단계까지 왔는데 IOS는 애플 개발자 멤버십에 가입을 해야해 과금이 부담되어 건너뛰었습니다.안드로이드 환경에서라도 테스트 해보고 싶어서 강의 따라가면서 빌드는 성공했습니다! 실제 안드로이드 기기는 가지고 있지 않아서 코드 에디터 상에서 npx expo start 명령어 후에 development build 모드인것도 확인하고 android 에뮬레이터에서 바로 앱이 실행이 되었습니다 이런 에러화면도 띄워지고 콘솔창에 실제 기기를 사용해 주세요 라는 에러가 잡혀서 실제 기기를 사용해야 하나 하고 깔끔히 포기하려 합니다실제 기기를 사용해야하는건지 또 다른 방법이 있는지 팁 부탁드려도 될까요? 강의에서는 에뮬레이터가 아닌 다른 걸 띄우신거 같은데 알려주시면 감사하겠습니다...!!❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요)
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
안드로이드 안켜집니다.
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 안녕하세요 강사님강의를 따라서 실행해보고 있는데,현재 ios는 시뮬레이터가 켜지지만, 안드로이드는 켜지지 않는 상황입니다.npx react-native doctor를 사용하여 뭐가 문제인지 확인했는데 해당 스크린샷처럼 나왔습니다환경변수도 공식문서처럼 다 했습니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
ios 배포 - Distribute App 에러
Distribute App 버튼 클릭 시, 다음과 같은 에러가 표시됩니다 Upload Symbols FailedThe archive did not include a dSYM for the hermes.framework with the UUIDs 현재 React Native 버전으로 강의를 진행하다 보면 환경변수에서 Android 버전 관련 에러가 떠서, GitHub에서 pull 받아서 진행했는데 혹시 그게 원인일까요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
유저 포인트 관련해서 질문 드립니다
유저의 상품을 다른 사용자가 구매할 시 '거래 후 잔액'과 '포인트'의 값이 일치해야 되는 게 아닌지 궁금합니다!
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
안드로이드에서 react-native-image-crop-picker의 설정 옵션에 대한 문제
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 안드로이드 환경에서 프로필 사진 수정 강의를 수강중에 계속 에러가 발생해서 진행하지 못했는데제가 문제원인을 추론해봤습니다. 우선 문제가 발생한 부분은 AddLocationScreen에서는 여러가지 사진을 등록해도 괜찮지만 프로필 사진은 단 한장만 등록해야하기 때문에useImagePicker 훅에 single과 multiple mode를 설정하는 과정에서 발생했습니다 .강의의 모든 코드를 따라서 적고 프로필 수정을 하기위해 actionSheet에서 [앨범에서 사진선택]을 누르면권한을 확인해 달라는 Toast오류 메시지가 발생했습니다. 하지만 AddLocation화면에서 이미 권한을 허용해 줬기 때문에 권한으로 인한 문제는 아니라 파악했고 useImagePicker 훅의 handleChangeImage 함수에서 에러 로그를 찍어본 결과 java.lang.IllegalArgumentException: Max items must be higher than 1이러한 로그를 확인 할 수 있었습니다 . 그래서 추측한 결과는강사님 코드에서 ImageCropPicker.openPicker({ mediaType: 'photo', multiple: true, includeBase64: true, maxFiles: mode === 'multiple' ? 5 : 1, })이 부분이 multiple은 true로 되어있지만, singlemode로 들어올 경우 maxFiles가 1로 설정되기 때문에 두 옵션이 충돌이 발생하는걸로 추측됩니다 . 그래서 저는 아래와 같이 일단 수정해서 문제를 해결했습니다.const handleChangeImage = () => { ImageCropPicker.openPicker({ mediaType: 'photo', multiple: mode === 'multiple', includeBase64: true, ...(mode === 'multiple' && { maxFiles: 5 }), }) .then(images => { const imageArray = Array.isArray(images) ? images : [images]; const formData = getFormDataImages('images', imageArray); uploadImages.mutate(formData, { onSuccess: data => mode === 'multiple' ? addImageUris(data) : replaceImageUri(data), onSettled: () => onSettled && onSettled(), }); }) .catch(error => { if (error.code !== 'E_PICKER_CANCELLED') { console.log('[error]', error); Toast.show({ type: 'error', text1: '권한을 허용했는지 확인해주세요.', position: 'bottom', }); } }); };multiple옵션은 mode==='multiple' 코드를 통해 mode의 값에 따라 true / false로 주어지게 하였고maxFiles 옵션또한 mode가 multiple인 경우에만 maxFiles:5라는 옵션이 주어지게 하였습니다.아마 multiple옵션이 false로 주어지면 maxFiles가 자동으로 1로 설정되어서 발생하는 충돌문제 였던 것 같습니다.강의 들으시는 분들에게 도움이 되었으면 합니다 .
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[8-12] ios 연동 시, 라이브러리 버전 에러 질문
현재 기준 react-native-apple-authentication 버전을 2.4.1로 설치하면 Gradle 에러가 발생합니다.강의에서는 2.3.0 버전을 사용하는 것 같은데, 혹시 해당 버전이 강의에서 사용된 버전이 맞는지 궁금합니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
푸시 토큰 만료 시간?
최신 버전 쓰고 있어요expo push token이 만료시간이 따로 있나요? 지금은 프로젝트에서 하루에 한번씩 앱 시작할때마다 토큰 갱신하고 있는데 이렇게 할 필요가 있는지 궁금해요
-
미해결React Native with Expo: 제로초에게 제대로 배우기
router 질문있습니다.
현재 expo 제일 최신버전인 53.0.20 버전으로 강의를 듣고있습니다.강사님처럼 const router= useRouter() 말고import {router} from 'expo-router' 에서router.push 이런거도 동일하게 동작하나요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
` /home -> / ` 아니라 ` /index -> / ` 아닌가요?
7.중첩 라우터와 그룹폴더의 활용 / 영상 시작 0:30 질문: ### /home -> / ### 이 아니라 ### /index -> / ### 아닌가요?이 부분 설명에서 /home 은 실제 home 디렉토리를 찾습니다.상위 경로에 _layout.tsx, index.tsx 가 있으면 상위 경로 index.tsx 로 이동하니까index.tsx 파일이 설명에 부합하는거 같아서 질문드립니다.### /index -> / ###
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
npx create-react-app
npx create-react-app myproject 입력하니까 무한로딩만 되고 설치가 안 돼서 yarn create react-app myproject으로 했는데도 안 되더라구요 다른 방법이 있을까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[4-6] 안드로이드 커스텀 맵 적용 안됨
MapHomeScreen.tsx 파일에서 MapView에 googleMapId를 추가했는데, ios에는 적용되지만 안드로이드에서는 적용이 되지 않습니다 별도로 설정해줘야하는 부분이 있을까요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
fetchTravelproductsIPicked 관련 질문 드립니다
해당 API 요청 시사진처럼 $regex 오류 때문에 data를 받아오지 못하고 있습니다.백엔드 문제일까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
8월 공개 예정인 강의들은 언제즈음 올라올까요
기다리고 있어요 엉엉
-
미해결React Native with Expo: 제로초에게 제대로 배우기
apk 파일 추출 관련 문의 드립니다.
만들어보고 있는 앱을 실 기기에 설치해서 테스트 해볼 일이 있어 apk 파일을 추출하려 합니다.백엔드 url이 http 라 app.json android 내에 useClearTextTraffic true 도 추가해주었습니다. "usesCleartextTraffic": trueeas.json 내 build 에 release 를 추가하였고, "release": { "android": { "buildType": "apk" } }eas build --platform android --profile release 명령어를 통해 빌드 했습니다.생성된 apk 를 실 기기에 설치 후 실행 했을 때 api 호출을 통해 데이터를 받아와서 뿌려주는 부분에 데이터가 하나도 나오고 있지 않습니다.설치 된 development build 를 에뮬레이터에서 실행해보아도 마찬가지로 데이터가 하나도 나오지 않고, catch 부분에서 에러도 콘솔에 찍히지 않고 있습니다.ㅠㅠnpm run android 실행 후 s > a 입력해서 expo go 환경에서 확인해봤을 땐 데이터도 잘 받아와지는데혹시 어느 부분을 확인해봐야할까요? npm ls react├─┬ @expo/vector-icons@14.1.0│ └── react@19.0.0 deduped├─┬ @react-native-community/datetimepicker@8.4.1│ └── react@19.0.0 deduped├─┬ @react-native-kakao/core@2.4.0│ └── react@19.0.0 deduped├─┬ @react-native-kakao/user@2.4.0│ └── react@19.0.0 deduped├─┬ @react-navigation/bottom-tabs@7.4.6│ └── react@19.0.0 deduped├─┬ @react-navigation/drawer@7.5.7│ ├─┬ react-native-drawer-layout@4.1.12│ │ └── react@19.0.0 deduped│ ├── react@19.0.0 deduped│ └─┬ use-latest-callback@0.2.4│ └── react@19.0.0 deduped├─┬ @react-navigation/elements@2.6.3│ ├── react@19.0.0 deduped│ └─┬ use-sync-external-store@1.5.0│ └── react@19.0.0 deduped├─┬ @react-navigation/native@7.1.17│ ├─┬ @react-navigation/core@7.12.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ expo-blur@14.1.5│ └── react@19.0.0 deduped├─┬ expo-font@13.3.2│ └── react@19.0.0 deduped├─┬ expo-image@2.4.0│ └── react@19.0.0 deduped├─┬ expo-linear-gradient@14.1.5│ └── react@19.0.0 deduped├─┬ expo-linking@7.1.7│ └── react@19.0.0 deduped├─┬ expo-router@5.1.4│ ├─┬ @radix-ui/react-slot@1.2.0│ │ ├─┬ @radix-ui/react-compose-refs@1.1.2│ │ │ └── react@19.0.0 deduped│ │ └── react@19.0.0 deduped│ ├─┬ @react-navigation/native-stack@7.3.25│ │ └── react@19.0.0 deduped│ └─┬ react-native-is-edge-to-edge@1.2.1│ └── react@19.0.0 deduped├─┬ expo-status-bar@2.2.3│ ├─┬ react-native-edge-to-edge@1.6.0│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ expo@53.0.20│ ├─┬ expo-asset@11.1.7│ │ └── react@19.0.0 deduped│ ├─┬ expo-keep-awake@14.1.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-dom@19.0.0│ └── react@19.0.0 deduped├─┬ react-native-gesture-handler@2.24.0│ └── react@19.0.0 deduped├─┬ react-native-gifted-charts@1.4.63│ ├─┬ gifted-charts-core@0.1.65│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-reanimated@3.17.5│ ├─┬ react-native-is-edge-to-edge@1.1.7│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-safe-area-context@5.4.0│ └── react@19.0.0 deduped├─┬ react-native-screens@4.11.1│ ├─┬ react-freeze@1.0.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-svg@15.11.2│ └── react@19.0.0 deduped├─┬ react-native-web@0.20.0│ └── react@19.0.0 deduped├─┬ react-native-webview@13.13.5│ └── react@19.0.0 deduped├─┬ react-native@0.79.5│ ├─┬ @react-native/virtualized-lists@0.79.5│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped└── react@19.0.0 npm ls react-native├─┬ @expo/vector-icons@14.1.0│ └── react-native@0.79.5 deduped├─┬ @react-native-async-storage/async-storage@2.1.2│ └── react-native@0.79.5 deduped├─┬ @react-native-community/datetimepicker@8.4.1│ └── react-native@0.79.5 deduped├─┬ @react-native-kakao/core@2.4.0│ └── react-native@0.79.5 deduped├─┬ @react-native-kakao/user@2.4.0│ └── react-native@0.79.5 deduped├─┬ @react-navigation/bottom-tabs@7.4.6│ └── react-native@0.79.5 deduped├─┬ @react-navigation/drawer@7.5.7│ ├─┬ react-native-drawer-layout@4.1.12│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ @react-navigation/elements@2.6.3│ └── react-native@0.79.5 deduped├─┬ @react-navigation/native@7.1.17│ └── react-native@0.79.5 deduped├─┬ expo-apple-authentication@7.2.4│ └── react-native@0.79.5 deduped├─┬ expo-blur@14.1.5│ └── react-native@0.79.5 deduped├─┬ expo-constants@17.1.7│ └── react-native@0.79.5 deduped├─┬ expo-image@2.4.0│ └── react-native@0.79.5 deduped├─┬ expo-linear-gradient@14.1.5│ └── react-native@0.79.5 deduped├─┬ expo-linking@7.1.7│ └── react-native@0.79.5 deduped├─┬ expo-router@5.1.4│ ├─┬ @expo/metro-runtime@5.0.4│ │ └── react-native@0.79.5 deduped│ ├─┬ @react-navigation/native-stack@7.3.25│ │ └── react-native@0.79.5 deduped│ └─┬ react-native-is-edge-to-edge@1.2.1│ └── react-native@0.79.5 deduped├─┬ expo-status-bar@2.2.3│ ├─┬ react-native-edge-to-edge@1.6.0│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ expo-symbols@0.4.5│ └── react-native@0.79.5 deduped├─┬ expo-system-ui@5.0.10│ └── react-native@0.79.5 deduped├─┬ expo-web-browser@14.2.0│ └── react-native@0.79.5 deduped├─┬ expo@53.0.20│ ├─┬ expo-asset@11.1.7│ │ └── react-native@0.79.5 deduped│ ├─┬ expo-file-system@18.1.11│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-gesture-handler@2.24.0│ └── react-native@0.79.5 deduped├─┬ react-native-gifted-charts@1.4.63│ ├─┬ gifted-charts-core@0.1.65│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-reanimated@3.17.5│ ├─┬ react-native-is-edge-to-edge@1.1.7│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-safe-area-context@5.4.0│ └── react-native@0.79.5 deduped├─┬ react-native-screens@4.11.1│ └── react-native@0.79.5 deduped├─┬ react-native-svg@15.11.2│ └── react-native@0.79.5 deduped├─┬ react-native-webview@13.13.5│ └── react-native@0.79.5 deduped└─┬ react-native@0.79.5└─┬ @react-native/virtualized-lists@0.79.5└── react-native@0.79.5 deduped npm ls expo├─┬ @react-native-community/datetimepicker@8.4.1│ └── expo@53.0.20 deduped├─┬ @react-native-kakao/core@2.4.0│ └── expo@53.0.20 deduped├─┬ expo-apple-authentication@7.2.4│ └── expo@53.0.20 deduped├─┬ expo-blur@14.1.5│ └── expo@53.0.20 deduped├─┬ expo-build-properties@0.14.8│ └── expo@53.0.20 deduped├─┬ expo-constants@17.1.7│ └── expo@53.0.20 deduped├─┬ expo-dev-client@5.2.4│ ├─┬ expo-dev-launcher@5.1.16│ │ └── expo@53.0.20 deduped│ ├─┬ expo-dev-menu-interface@1.10.0│ │ └── expo@53.0.20 deduped│ ├─┬ expo-dev-menu@6.1.14│ │ └── expo@53.0.20 deduped│ ├─┬ expo-manifests@0.16.6│ │ └── expo@53.0.20 deduped│ ├─┬ expo-updates-interface@1.1.0│ │ └── expo@53.0.20 deduped│ └── expo@53.0.20 deduped├─┬ expo-font@13.3.2│ └── expo@53.0.20 deduped├─┬ expo-haptics@14.1.4│ └── expo@53.0.20 deduped├─┬ expo-image@2.4.0│ └── expo@53.0.20 deduped├─┬ expo-linear-gradient@14.1.5│ └── expo@53.0.20 deduped├─┬ expo-router@5.1.4│ └── expo@53.0.20 deduped├─┬ expo-splash-screen@0.30.10│ └── expo@53.0.20 deduped├─┬ expo-symbols@0.4.5│ └── expo@53.0.20 deduped├─┬ expo-system-ui@5.0.10│ └── expo@53.0.20 deduped├─┬ expo-web-browser@14.2.0│ └── expo@53.0.20 deduped└─┬ expo@53.0.20├─┬ expo-asset@11.1.7│ └── expo@53.0.20 deduped├─┬ expo-file-system@18.1.11│ └── expo@53.0.20 deduped└─┬ expo-keep-awake@14.1.4└── expo@53.0.20 deduped
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의에서 사용하는 api 접속 불가
안녕하세요~강의에서 사용하는 api 2개 다 접속이 안되네요1번은 외부 서버라 안될수 있는데,2번은 서버가 죽은 건가요? koreanjson.comhttp://main-example.codebootcamp.co.kr/graphql
-
미해결아바타 커뮤니티앱 만들기 (React Native Expo)
윈도우 환경입니다.
import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import { FormProvider, useForm } from "react-hook-form"; import { StyleSheet } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; type FormValues = { title: string; description: string; }; export default function PostWriteScreen() { const postForm = useForm<FormValues>({ defaultValues: { title: "", description: "", }, }); return ( <FormProvider {...postForm}> <KeyboardAwareScrollView contentContainerStyle={styles.container}> <TitleInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> </KeyboardAwareScrollView> </FormProvider> ); } const styles = StyleSheet.create({ container: { margin: 16, gap: 16 }, }); KeyboardAwareScrollView를 써도 여전히 키보드가 입력창을 가리는데 이유가 뭔지 잘 모르겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 커리큘럼에 대해 질문이 있습니다.
안녕하세요 강의를 구매 후 듣다가 일이 생겨서 오랜만에 다시 공부하려고 하는데 커리큘럼을 다시 보니 처음에 html, css 강의 순서대로 나오다가 js가 나오고 또 섹션04부분에서 다시 css가 나오고 또 js가 나오더라구요 그래서 이 부분이 헷갈리는데 그냥 처음부터 순서대로 강의를 들으면 될까요?
-
미해결따라하며 배우는 리액트 네이티브 기초
svg질문
안녕하세요 react-navie 강의중 18강 보고 있는데요 svg 잘 설치 되어있고, 이미지도 잘 넣었는데 저는 이미지 스타일 편집하는게 안보이고 svg 파일 클릭을 하면 svg 파일 모양만 보이고 있어서 svg 테스트시 화면에 이미지 너무 크게 보입니다. 툴에서 어떻게 설정하면 svg 스타일이 보일까요?