inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

무료 Apple ID로 실기기 테스트 가능한가요?

미해결

맛집 지도앱 만들기 (React Native & NestJS)

React Native 프로젝트를 실제 아이폰 기기에서 빌드 하려고 하는데, 아래와 같은 오류가 발생했습니다. error Signing for "AwesomeProject" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'AwesomeProject' from project 'AwesomeProject') error Failed to build ios project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'AwesomeProject.xcworkspace'. 이 경우, Apple Developer Program(유료 계정) 에 가입해야만 실제 기기에서 앱을 빌드하고 테스트할 수 있는 건가요? 무료 Apple ID 계정 으로는 실기기 테스트가 불가능한지 궁금합니다. ❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 )

  • react-native
효니 댓글 2 좋아요 0 조회수 140

사진 촬영 후 갤러리 저장 시 권한 문제

미해결

React Native with Expo: 제로초에게 제대로 배우기

안녕하세요, 제로초님! 강의 잘 듣고 있습니다. 다름이 아니라 ImagePicker 로 카메라 사진 촬영 후 MediaLibrary 를 사용해서 갤러리에 저장할 때, 다음과 같은 에러가 발생합니다. 확인해보니 AUDIO 권한이 선언되지 않았다고 하는데, 아래와 같이 app.json 의 plugin 에 권한을 추가해도 동일한 에러가 발생합니다. { "expo": { // ... "plugins": [ // ... [ "expo-media-library", { "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.", "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.", "isAccessMediaLocationEnabled": true, "granularPermissions": ["audio", "photo"] } ] ], // ... } } 제로초님이 올려주신 코드를 그대로 복사 & 붙여넣기 해봐도 같은 문제가 발생하는데, 혹시 제가 놓친 부분이 있을까요...? 강의에서 다룬 부분의 코드와 package.json 첨부하겠습니다. import { FontAwesome, Ionicons } from '@expo/vector-icons'; import * as ImagePicker from 'expo-image-picker'; import * as Location from 'expo-location'; import * as MediaLibrary from 'expo-media-library'; import { useRouter } from 'expo-router'; import React, { useState } from 'react'; import { Alert, FlatList, Image, Linking, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; // ... export default function Modal() { // ... const canAddThread = (threads.at(-1)?.text.trim().length ?? 0) > 0 || (threads.at(-1)?.imageUris.length ?? 0) > 0; const canPost = threads.every( thread => thread.text.trim().length > 0 || thread.imageUris.length > 0, ); const removeThread = (id: string) => { setThreads(prevThreads => prevThreads.filter(thread => thread.id !== id), ); }; const pickImage = async (id: string) => { let { status } = await ImagePicker.requestMediaLibraryPermissionsAsync(); if (status !== 'granted') { Alert.alert( 'Permission not granted', 'Please grant camera roll permission to use this feature', [ { text: 'Open settings', onPress: () => { Linking.openSettings(); }, }, { text: 'Cancel', }, ], ); return; } let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images', 'livePhotos', 'videos'], allowsMultipleSelection: true, selectionLimit: 5, }); console.log('image result:', result); if (result.canceled) return; setThreads(prevThreads => prevThreads.map(thread => thread.id === id ? { ...thread, imageUris: thread.imageUris.concat( result.assets?.map(asset => asset.uri) ?? [], ), } : thread, ), ); }; const takePhoto = async (id: string) => { let { status } = await ImagePicker.requestCameraPermissionsAsync(); if (status !== 'granted') { Alert.alert( 'Permission not granted', 'Please grant camera permission to use this feature', [ { text: 'Open settings', onPress: () => { Linking.openSettings(); }, }, { text: 'Cancel', }, ], ); return; } let result = await ImagePicker.launchCameraAsync({ mediaTypes: ['images', 'livePhotos', 'videos'], allowsMultipleSelection: true, selectionLimit: 5, }); console.log('camera result:', result); // MediaLibrary 권한 요청 및 사진 저장 status = (await MediaLibrary.requestPermissionsAsync()).status; if (status === 'granted' && result.assets?.[0].uri) { await MediaLibrary.saveToLibraryAsync(result.assets[0].uri); } if (result.canceled) return; setThreads(prevThreads => prevThreads.map(thread => thread.id === id ? { ...thread, imageUris: thread.imageUris.concat( result.assets?.map(asset => asset.uri) ?? [], ), } : thread, ), ); }; const removeImageFromThread = (id: string, uriToRemove: string) => { setThreads(prevThreads => prevThreads.map(thread => thread.id === id ? { ...thread, imageUris: thread.imageUris.filter( uri => uri !== uriToRemove, ), } : thread, ), ); }; // ... } { "name": "expo-threads-clone", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "lint": "expo lint" }, "dependencies": { "@expo/vector-icons": "^15.0.2", "@react-navigation/bottom-tabs": "^7.4.0", "@react-navigation/elements": "^2.6.3", "@react-navigation/native": "^7.1.8", "expo": "~54.0.12", "expo-blur": "~15.0.7", "expo-constants": "~18.0.9", "expo-dev-client": "~6.0.13", "expo-font": "~14.0.8", "expo-haptics": "~15.0.7", "expo-image": "~3.0.8", "expo-image-picker": "~17.0.8", "expo-linking": "~8.0.8", "expo-location": "~19.0.7", "expo-media-library": "~18.2.0", "expo-router": "~6.0.10", "expo-splash-screen": "~31.0.10", "expo-status-bar": "~3.0.8", "expo-symbols": "~1.0.7", "expo-system-ui": "~6.0.7", "expo-web-browser": "~15.0.8", "react": "19.1.0", "react-dom": "19.1.0", "react-native": "0.81.4", "react-native-gesture-handler": "~2.28.0", "react-native-reanimated": "~4.1.1", "react-native-safe-area-context": "~5.6.0", "react-native-screens": "~4.16.0", "react-native-web": "~0.21.0", "react-native-worklets": "0.5.1" }, "devDependencies": { "@types/react": "~19.1.0", "typescript": "~5.9.2", "eslint": "^9.25.0", "eslint-config-expo": "~10.0.0" }, "private": true }

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
Sckroll 댓글 1 좋아요 0 조회수 122

ios 실기기 연결

미해결

맛집 지도앱 만들기 (React Native & NestJS)

ios 실기기를 연결해도 맥 환경이 아니면 테스트가 불가능한가요?!.. ❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 )

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
doseong :) 댓글 2 좋아요 0 조회수 107

혹시 필요한 라이브러리들을 미리 전부 설치해도 되나요?

미해결

React Native with Expo: 제로초에게 제대로 배우기

필요한 라이브러리를 미리 설치해둬도 되나요? expo에서 'eas build --platform android --profile development' 해당 명령어를 사용해서 빌드할 때마다 시간이 너무 오래걸려요ㅜㅜ 하나 설치하면 계속 그런 라이브러리 없다고 해서 계속 다시 빌드해야해서ㅜㅜ 혹시 강의에 사용한 라이브러리 리스트가 있다면 제공해주실 수 있나요?? 무료를 사용하면 1시간도 기다리라고 해서요...ㅜㅜ

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이수민 댓글 2 좋아요 1 조회수 83

flex를 grid 처럼 만들기 질문드립니다.

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

css 04-2-2 반응형과 grid 조합 - 플렉스박스와 그리드 비교 수업 12분 15초 내용을 감싸는 div를 만들어서 어떻게 해야 grid 와 같이 만들 수가 있는 건지 궁금합니다.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
robotics 댓글 2 좋아요 0 조회수 130

앱실행시 네이버맵 [401] 에러

미해결

배달앱 클론코딩 [with React Native]

안녕하세요. 실행하는 게 목표입니다. 네이버 세팅하는 영상과 글을 보고 세팅을 했는데 실행한 앱에서 밑의 하단ㄴ에 [NaverMapSdk] Authorization failed: [401] Unauthorized client 라는 에러가 반복해서 뜹니다. client_id 오류라고 하네요. 제가 시도해본 것들. 삭제후 처음부타 다시 세팅 claude-code의 도움을 받아 방화벽 끄고 앱 실행 네 이버 console에서 application 삭제, 재생성 반복. claude-code의 도움을 받아 문제가 무엇인지 찾으려했지만 세팅은 잘 돼있다고 함. github에 올리신 food-delivery-app/rn72 경로에서 영상과 글대로 세팅 후에 서버 실행하고 회원가입, 로그인까지 잘 돌아가는데 네이버지도에서만 에러가 뜹니다. 실행해보는 것이 목표입니다. 감사합니다. [제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

  • react-native
batch sarm 댓글 2 좋아요 0 조회수 1135

npm run ios에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

npm run ios > matzip@0.0.1 ios > react-native run-ios info A dev server is already running for this project on port 8081. info Found Xcode workspace "matzip.xcworkspace" info Found booted 재돌이의 iPhone info Building (using "xcodebuild -workspace matzip.xcworkspace -configuration Debug -scheme matzip -destination id=00008110-00141C6C2E06401E") info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx 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 error Signing for "matzip" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'matzip' from project 'matzip') error Failed to build ios project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app , by opening 'matzip.xcworkspace'. yoojaeseok@yujaeseog-ui-MacBookAir matzip %

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
유재석 댓글 1 좋아요 0 조회수 112

코드 수정 시 ios 시뮬레이터에서 자동반영이 안 되는데 왜그럴까요?

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) 코드 수정 시 안드로이드 시뮬레이터는 자동 반영이 되는데, ios 시뮬레이터는 자동으로 반영이 안 됩니다.. 그리고 r 버튼 눌러서 reload app 하려하면 No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB. 이렇게 나오네요.. 연결은 된 것 같은데 왜 그럴까요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
재오 댓글 1 좋아요 0 조회수 123

그랩님,[꼭] 답변 부탁드립니다.

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

*먼저 이 질문의 글을 그랩님께서 보신다면, [꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다. https://inf.run/FB4N9 링크부터 본 뒤 답변을 그 게시물에 해 주신 후 이 질문 글 아래에도 답변 을 부탁 드립니다. 그랩님, 좋은 강의 잘 듣고 있습니다. 다름이 아니라, 아래 질문글에서 단 하나도 수정한 것 없이 몇일 뒤 재부팅만 해주었는데요, VS CODE에서 실행을 해주면 아래와 같이 에러도 줄어들어들었습니다. 그리고 위 그림에서 축구공을 누르면 '상품 상세 페이지'가 아무리 기다려도 뜨지 않고 오른쪽에 에러 가 발생 합니다. 에러 발생 스샷 아래 첨부 합니다. ( 참고로 이전에는 상품 상세 페이지의 상품 정보를 받고 있습니다...가 에러 없이 내용을 잘 불러왔었습니다 . 그런데 왜 지금은 아무리 기다려도 내용을 불러오지 못하는 이유를 모르겠습니다. ) 오른쪽에 에러를 해결하여 상품 정보를 받고 있습니다... 내용이 불러오게 하려면 어떻게 해야 하나요 ? ------------------------------------------------------------------------------------------------- 또한 79강 강의 2분 56초 부터 3분 32초 보면, POSTMAN 테스트 를 하는 부분이 나오는데, 여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서 그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런 건가요? 어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 , http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요? 마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러 를 해결 할 수 있을지에 대해 자세한 답변 부탁 드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 1 좋아요 0 조회수 94

Axios Network error...

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) 윈도우 컴에서 코드 실행시키고 아이폰에서 expo app으로 실습하고 있는데 db에도 들어가지 않습니다. 뭐가 문제인지 모르겠어요

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
yeongseo 댓글 2 좋아요 0 조회수 184

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 1 좋아요 0 조회수 79

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 ) 10월 삭제 예정인 강의는 이유를 알 수 있을까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강민호 댓글 1 좋아요 0 조회수 130

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 2 좋아요 0 조회수 112

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 2 좋아요 0 조회수 179

강의는 52버전인데 expo가 현재 54버전이에요

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) OS는 윈도우 사용중이고 expo go 앱을 설치해서 실행하려고 보니 iOS 앱은 52버전으로 사용할 수가 없어서 프로젝트를 54로 올려서 쓰라는데, 에뮬레이터말고 실 iOS에서 사용하려면 해당 프로젝트 어떻게 업데이트 해야하는지 방법 알 수 있을까요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
ina9377 댓글 1 좋아요 0 조회수 371

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

미해결

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 ) 캘린더에서 게시글을 선택을 하면 navigation.navigate('Feed', { screen: 'FeedDetail', params: { id: postId }, initial: false, }); 이렇게 Feed 스택을 통해서 Feed 상세 스크린트로 이동하잖아요. 그래서 클릭할 때보면 캘린더 위에 Feed 목록 그 위에 Detail이 쌓이는 것을 확인하였습니다. 다만 게시글 상세에서 뒤로가기 했을 때 의도한 경로는 캘린더의 다시 그 상태로 남아아할텐데 그렇지 않고 목록으로 가서 어떻게 해야하는지 궁금합니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
현자타임 댓글 1 좋아요 0 조회수 76

[TIP] SafeAreaView 사용할 때마다 자꾸 ios에서 위아래가 빵꾸 나시는 분들 필독

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

SafeAreaView는 2025년 8월에 deprecated되었다고 합니다.. 그래서 다른 방법을 찾다가 해결법을 찾아서 블로그에 정리해두었습니다. 저는 iPhone 16 Pro 시뮬레이터를 돌리기 때문에 다른 곳에서도 반영이 되는지는 잘 모르겠습니다. https://velog.io/@kuck523/SafeAreaView-%EC%97%86%EC%9D%B4-useSafeAreaInsets%EC%9C%BC%EB%A1%9C-ios-%EB%85%B8%EC%B9%98-%EB%8C%80%EC%9D%91%ED%95%98%EA%B8%B0

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
댓글 2 좋아요 0 조회수 296

키보드 이슈 관련 해결 질문

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

윈도우+안드로이드 환경에서 KeyboardAwareScrollView가 동작하지 않아 React Native 문서를 보고 KeyboardAvoidingView component를 사용하려고 시도 했습니다. import Button from "@/components/CustomButton"; import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import { useCreatePost } from "@/hooks/queries/useCreatePost"; import useKeyboardOffset from "@/hooks/useKeyboardOffset"; import { ImageUri } from "@/types"; import { zodResolver } from "@hookform/resolvers/zod"; import { useNavigation } from "expo-router"; import { useEffect } from "react"; import { FormProvider, useForm } from "react-hook-form"; import { KeyboardAvoidingView, ScrollView, StyleSheet } from "react-native"; import z from "zod"; export default function PostWriteScreen() { // ... const { isKeyboardShown, keyboardVerticalOffsetValue } = useKeyboardOffset(); // ... useEffect(() => { navigation.setOptions({ headerRight: () => ( <Button label="Save" size="medium" variant="standard" onPress={postForm.handleSubmit(onSubmit)} /> ), }); }); // ... return ( <FormProvider {...postForm}> <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={keyboardVerticalOffsetValue} enabled={isKeyboardShown} style={{ flex: 1 }} > <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer} > <TitleInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> </ScrollView> </KeyboardAvoidingView> </FormProvider> ); } const styles = StyleSheet.create({ container: { flex: 1, }, contentContainer: { flexGrow: 1, padding: 16, gap: 16, }, }); import { useEffect, useState } from "react"; import { Keyboard } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; export default function useKeyboardOffset() { const [isKeyboardShown, setIsKeyboardShown] = useState<boolean>(false); const insets = useSafeAreaInsets(); const verticalInsets = insets.top + insets.bottom; const keyboardVerticalOffsetValue = (Keyboard.metrics()?.height || 0) + verticalInsets + 50; useEffect(() => { const showSubscription = Keyboard.addListener("keyboardDidShow", () => { setIsKeyboardShown(true); }); const hideSubscription = Keyboard.addListener("keyboardDidHide", () => { setIsKeyboardShown(false); }); return () => { showSubscription.remove(); hideSubscription.remove(); }; }, []); return { isKeyboardShown, keyboardVerticalOffsetValue }; } 단순히 Keyboard 문서를 확인하니 event listener 부분이 있어 그걸 참고하여 metric().height 만큼 offset을 주고 비슷하게 동작은 하도록 작성했습니다. 추가적으로, 아랫 부분이 조금 짤려서 임의로 50을 추가했습니다. 이미 비슷한 질문이 올라 왔길래 '안드로이드 KeyboardAwareScrollView 이슈 수정 & 키보드 상태 커스텀 훅 만들기' 강의 확인하고 훅으로만 분리했는데 강의 중 상세 코드는 다르기도 하고 iOS 환경에서는 테스트를 할 수가 없어서 이런 식으로 짜도 되는지, 그리고 위에서 언급한 50에 해당하는 공간이 왜 필요한지 질문 드립니다.

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
yeong 댓글 1 좋아요 0 조회수 105

강의속 PanResponder.create 부분의 코드가 GitHub 코드와 다름

미해결

React Native with Expo: 제로초에게 제대로 배우기

강의 중에는 PanResponder.create에 들어가는 객체의 속성으로 onStartShouldSetPanResponder를 소개하지만, 작동이 안되서 Github 코드를 살펴보니 onMoveShouldSetPanResponder로 해야 함 const panResponderRef = useRef( PanResponder.create({ onStartShouldSetPanResponder: () => true, // Pan 작업에 반응하도록 설정 onPanResponderMove: (event, gestureState) => { ... 수정 후 const panResponderRef = useRef( PanResponder.create({ onMoveShouldSetPanResponder: () => true, // Pan 작업에 반응하도록 설정 onPanResponderMove: (event, gestureState) => { ...

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
jasinis102 댓글 1 좋아요 2 조회수 91

인기 태그

인프런 TOP Writers

주간 인기글