inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

HeaderRight 버튼이 작동하지 않습니다.

해결됨

핸즈온 리액트 네이티브

후반부에 많은 질문을 드려서 너무 죄송합니다ㅠ 사진과 글을 작성 후 오른쪽 헤더 버튼을 누르면 헤더버튼이 작동하지 않습니다. ( headerRight: () => <HeaderRight disabled={disabled} onPress={onSubmit} />, )정확히는 onPress={onSubmit}이 작동하지 않습니다 useLayoutEffect 안에 log도 찍어봤는데 onSubmitEditing 으로 작동시엔 log가 찍히는데 onSubmitEditing 을 없앤 후 버튼 클릭시 아무 반응이 없어서 질문드립니다.

  • react-native
dvdve 댓글 2 좋아요 0 조회수 112

사진이 나오지 않는 문제로 질문드립니다.

해결됨

핸즈온 리액트 네이티브

WriteTextScreen에 사진이 나타나지 않아서 질문드립니다. cosole.log에는 selectPhotosScreen에서 params로 보낸 photoUris 가 아래처럼 잘 전달되어 오는데 console.log('photoUris', photoUris); NOBRIDGE) LOG photoUris ["file:///storage/emulated/0/Download/s-35.jpeg", "file:///storage/emulated/0/Download/s-34.jpeg"] 화면에서는 사진이 나오지 않는 상태라 질문드립니다. 깃허브 주소

  • react-native
dvdve 댓글 2 좋아요 0 조회수 132

style 에러

해결됨

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

안녕하세요 강사님 코드를 따라치면서 학습을 하고 있는데 <View style={styles.fixed}> 이 style 부분에 No overload matches this call. Overload 1 of 2, '(props: ViewProps): View', gave the following error. Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'. Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'. Types of property 'position' are incompatible. Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'. Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error. Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'. Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'. Types of property 'position' are incompatible. Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.ts(2769) ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>' ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>' ( property ) style ?: StyleProp < ViewStyle > View Problem (Alt+F8) 이런 에러가 뜨는데 제가 어느 부분에서 잘못했는지, 왜 이런 에러가 발생했는지 모르겠습니다.... 전체 코드는 아래와 같습니다. import CustomButton from '@/components/CustomButton'; import InputFiled from '@/components/InputFiled'; import { colors } from '@/constants'; import { StyleSheet, View } from 'react-native'; export default function LoginScreen() { return ( <> <View style={styles.container}> <InputFiled label="이메일" placeholder="이메일을 입력해주세요" ></InputFiled> <InputFiled label="비민번호" placeholder="비밀번호를 입력해주세요" ></InputFiled> </View> <View style={styles.fixed}> <CustomButton label="로그인하기"></CustomButton> </View> </> ); } const styles = { container: { flex: 1, margin: 16, gap: 16, }, fixed: { position: 'absolute', bottom: 0, width: '100%', borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.GRAY_300, paddingTop: 12, paddingHorizontal: 16, }, };

  • javascript
  • react
  • react-native
  • typescript
  • react-query
cmj021002 댓글 1 좋아요 0 조회수 125

defaultProps 관련 문의 드립니당

해결됨

핸즈온 리액트 네이티브

아래처럼 defaultProps 가 곧 사라진다는 경고가 뜨는데요 (NOBRIDGE) ERROR Warning: HeaderRight: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. in HeaderRight (created by SceneView) in RNSScreenStackHeaderSubview (created by ScreenStackHeaderRightView) in ScreenStackHeaderRightView (created by SceneView) in RNSScreenStackHeaderConfig (created by ScreenStackHeaderConfig) in ScreenStackHeaderConfig in RNSScreen (created by Animated(Anonymous)) in Animated(Anonymous) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze in InnerScreen (created by Screen) in Screen in ScreenStackItem (created by SceneView) in SceneView (created by NativeStackView) in RNSScreenStack (created by ScreenStack) in Unknown (created by ScreenStack) in ScreenStack (created by NativeStackView) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaProviderCompat) in SafeAreaProviderCompat (created by NativeStackView) in NativeStackView (created by NativeStackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by NativeStackNavigator) in NativeStackNavigator (created by MainStack) in MainStack (created by Navigation) in ThemeProvider in EnsureSingleNavigator in BaseNavigationContainer in NavigationContainerInner (created by Navigation) in Navigation (created by App) in UserProvider (created by App) in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent) 어떻게 해결해야 하는지 궁금해서 질문 남깁니다!

  • react-native
dvdve 댓글 2 좋아요 0 조회수 275

tailwind.config.js 설치가 안됐어요 ㅠ

해결됨

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

Next.js 버전때문인지 tailwind.config.js가 설치가 안되고 posts.config.mjs가 설치가 됐는데 이게 맞나요 ,,?

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

안드로이드 구글 로그인 에러

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

iOS로 구글 로그인하는거는 잘됩니다! 근데 aos로 로그인하면 이런 에러가 떠요,,, 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

  • javascript
  • react
  • node.js
  • react-native
  • typescript
김라영 댓글 4 좋아요 0 조회수 462

'register' value관련 에러

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

이 에러는 무슨 에러인가요? 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

  • javascript
  • react
  • node.js
  • react-native
  • typescript
김라영 댓글 2 좋아요 0 조회수 90

6-7 깃허브 코드 질문

미해결

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

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. ( 일부만 자르거나 일부만 복사하지말아주세요 .) 윈도우 / 안드로이드 입니다. 강의를 본 후, 즐겨찾기와 검색쪽에서 피드를 클릭하면은 오류가 발생합니다. 깃허브 6-7의 front부분과 전체 동일합니다. 아직 구현이 덜 된건지 아니면 제가 놓친부분이 있는지 궁금합니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 1 좋아요 0 조회수 149

실제 폰에서 테스트 (아이폰/안드로이드)

미해결

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

실제로 폰에서 직접 테스트 해보고 싶은데 어떻게 하면 해볼수 있을까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
팀 리미티드개발 공식 계정 댓글 1 좋아요 0 조회수 437

Automatic batching에 관해 궁금한 점이 있습니다.

해결됨

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

개발하면서 제가 불필요한 렌더링을 줄이기 위한 기법이 아니라, 리액트를 사용하게 되면 자연스럽게 얻을 수 있는 성능 최적화 효과라고 보면 되나요?

  • react
  • next.js
  • 기술면접
  • react-usememo
김다훈 댓글 1 좋아요 0 조회수 127

MMKV 사용시 에뮬레이터에서 실행이 불가능한 이슈

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

이런식으로 실제 앱에서만 사용이 가능하다고 뜹니다ㅠ 찾아보니까 디버깅을 끄라는데 개발자 도구를 켜봐도(ctrl+m /cmd+m켜서 들어가는,,) Debugging을 끄는 부분이 안보여요,,, + Debug JS Remotely라는 부분을 끄라고 구글링을 하니까 나오는데 이 부분이 아예 개발자도구에서 안보입니다.. 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

  • javascript
  • react
  • node.js
  • react-native
  • typescript
김라영 댓글 4 좋아요 0 조회수 285

rsc payload에 관한 질문이 있습니다.

해결됨

한 입 크기로 잘라먹는 Next.js

최대한 자료를 찾아봐서 이해해보려고 했는데, 너무 헷갈려서 도움을 구하고자 질문을 올립니다. 강의에서 search page에는 페이지 이동 시 javascript bundle로써 전달 될 client component가 없기 때문에 그냥 rsc payload만 전달되는 것이라고 하셨는데, searchpage만 보면 client component가 없는 것이 맞지만, (with-searchbar)폴더 안에 layout으로 Searchbar component를 포함시킨 것은 어떻게 되는 것인지 궁금합니다. Searchbar component가 client component이므로 search page에서 직접적으로 import를 하지는 않았지만, 레이아웃으로써 사용되었기에 어쨌든 search page안에 client component가 포함되는 것은 아닌가요? 이해가 명확하게 되지 않아 질문조차 조금 난해하게 쓴 것 같아서 죄송합니다! 감사합니다.

  • react
  • typescript
  • next.js
khhan1990 댓글 2 좋아요 0 조회수 210

accessToken 저장 방식에 대해 질문 드립니다.

해결됨

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

zustand에 저장과 cookie 저장에 대해 보안적으로는 cookie가 더 안전하다고 들었습니다. xss 공격에는 HttpOnly를 통해 해결할 수 있지만 반환된 accessToken을 js로 접근하지 못하다 보니 저장을 할 수 없는 문제가 있지만 secure을 통해 https에서만 요청가게 할 수 있으며, sameSite를 통해 csrf의 공격에 방어할 수 있다 해서 secure, sameSite를 사용해 accessToken을 쿠키에 저장하는게 더 좋은 방법이라 생각 했는데 어떤 방식을 주로 사용하나요?

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

앱권한설정 화면이후 api작동 (아이폰)

미해결

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

안녕하세요. 새로 올려주신 강의를 흥미롭게 듣고 있습니다. 저는 아이폰을 이용해서 테스트 중인데, 안드로이드와는 좀 다른 움직임이 있어서 질의드립니다. 권한 설정화면 Link되면 저희가 구성한 하이브리드 앱이 웹뷰로 더 이상 연결되지 않는것처럼 보입니다. 이 부분 어떻게 해결할수 있을까요? 그리고 권한 설정화면으로 이동하여 권한을 수정한 후 제거하고 ( 해당 화면은 권한을 설정한다고 해서 사라지거나 하지 않습니다 ) expo로 돌아오면 active가 들어와야 하는데 그렇지 않습니다. 코드에 setInterval을 줬으니 뭔가 주기적으로 수행하지 않을까 싶어서 로그를 줘봤으나 전혀 구동하지 않았습니다. 여러가지 테스트를 해보았는데, 앱권한 설정페이지로 이동하는 쿼리인 openDeviceSystemForSettingSet을 호출하면 앱의 권한 화면이 Link되고, 그러면서 기존의 하이브리드 앱이 웹뷰로 연결되지 않는것 같습니다. 제 코드가 잘못되었나 싶어서 setInterval을 없애고 fetch의 순서를 바꿔봤습니다. openDeviceSystemForSettingSet을 맨뒤에 배치해봤을때는 모든 결과가 잘 들어왔습니다. 그러나 6-2와 같이 openDeviceSystemForSettingSet를 먼저 호출하고 이후에 fetchDeviceLocationforPermissionSet이나 fetchDeviceSystemForAppStateSet의 fetch를 수행하려 하면 작동하지 않습니다. 인공지능에게 문의하니 상태 구독을 하라고 하여 아래와 같이 구독을 mobile의 index.tsx에 추가하였습니다. React.useEffect(() => { const subscription = AppState.addEventListener("change", (nextAppState) => { if (nextAppState === "active") { console.log("✅ 앱이 다시 활성화됨. WebView에 메시지 전송!"); webviewRef.current?.postMessage("APP_ACTIVE"); } }); 그리고 page.tsx에는 app이 active가 되면 이를 받아올수 있도록 함수를 구성하고 그 안에서 fetchDeviceLocationforPermissionSet이나 fetchDeviceSystemForAppStateSet를 받아오도록 변경했습니다. useEffect(() => { const handleMessage = (event) => { if (event.data === "APP_ACTIVE") { console.log( "🔄 WebView에서 APP_ACTIVE 메시지 수신! fetchApp 다시 실행" ); checkPermissions(); } }; window.addEventListener("message", handleMessage); return () => { window.removeEventListener("message", handleMessage); }; }, []); const checkPermissions = async () => { try { console.log("📡 위치 권한 상태 확인 요청"); const result = await fetchApp({ query: "fetchDeviceLocationforPermissionSet", }); const status = result.data.fetchDeviceLocationforPermissionSet.status; webviewlog(` 위치 권한 상태: ${status}`); const appStateResult = await fetchApp({ query: "fetchDeviceSystemForAppStateSet", }); const isForeground = appStateResult.data.fetchDeviceSystemForAppStateSet.isForeground; webviewlog(` 앱 활성화 상태: ${isForeground}`); } catch (error) { console.error(" fetch 요청 실패:", error); } }; 이렇게 하니 앱이 활성화되면 이벤트 리스너를 통해 결과가 전달되어져 오기는 합니다. 강의에서 해주셨던 setInterval설정이 훨씬 간편하지라 아이폰에서 구성하려면 어떻게 해야할지 어떤 이유로 이렇게 되는지 궁금하여 질의드립니다. 2. 그리고, 원두님이 안드로이드를 통해 보여주신 것과 같이 허용함을 다시 묻지 않는데 이런 설정을 별도로 추가해야 하는걸까요? 제가 뭔가 누락한 건지 모르겠습니다. 원두님은 관련코드를 구성하지 않으셔도 사용에 대한 질의가 나타나는데, 저의 경우는 권한 설정기능이 바로 띄워집니다. 일반적인 앱들을 사용하다보면 권한 허용 질의 이후(모달창??)에 허용을 누르고 , 권한설정을 한 후 지도로 들어가고 그렇게 구성되는데 그런 구성이 누락되어 , 웹뷰 연동이 안되는것일까

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
이지은 댓글 1 좋아요 0 조회수 127

질문은 아니고? 부탁?

해결됨

한 입 크기로 잘라먹는 Next.js

개발 20년차, 원론적으로 제대로 구조를 배워보고 싶어 영상강의를 듣는데, 정말 오랜만에 제대로 된 강의를 듣는것 같군요. 정말 강의 퀄리티 좋습니다. 잡설이 길었는데~~ 다름이 아니라, 현재 강이 백엔드API 서버를 NEST.JS 프레임웍을 이용해서 개발하신것 같은데, 다음번 강의는 NEST.JS 어떤 지요? 기다리겠습니다. ㅎ

  • react
  • typescript
  • next.js
Jae Yeong Lee 댓글 1 좋아요 0 조회수 270

after는 훅인가요?

미해결

Next + React Query로 SNS 서비스 만들기

6:08에 랜더링 이후에 작업을 하기 위해서 after 라는 훅이 추가되었다구 해주시는데 기본적으로 훅 네이밍은 use~~로 시작하는게 권장사항이라고 알고있어서용 물론 훅도 그냥 함수긴한데 개념적인 차이가 조금 있다고 생각해서 질문 드립니다!

  • next.js
이재진 댓글 2 좋아요 0 조회수 113

네비게이팅 섹션 강의에서?

해결됨

한 입 크기로 잘라먹는 Next.js

onclick이벤트 처리는 SCR이라 상단에 'use client";라고 정의해줘야 하는게 아닌지요? 자동으로 CSR로 처리되나요?

  • react
  • typescript
  • next.js
Jae Yeong Lee 댓글 2 좋아요 0 조회수 114

이미지 목록을 받아오는 부분에서 IOS 에서 문제가 발생합니다.

해결됨

핸즈온 리액트 네이티브

안드로이드의 경우 정상적으로 사진이 받아와 지는데 IOS에서는 아래와 같은 경고와 함께 오류가 발생합니다. https://github.com/expo/expo/issues/28772 이러한 동일한 오류가 많이 발생하는거 같은데 해결 방법을 모르겠어서 질문드립니다ㅠ 깃허브 주소는 https://github.com/dvrakry/rn-photo 입니다 감사합니다!

  • react-native
dvdve 댓글 2 좋아요 0 조회수 159

안드로이드 기기에서 헤더 부분이 작동이 안됩니다.

해결됨

핸즈온 리액트 네이티브

안드로이드 와 IOS 기기 둘다 사용하면서 강의를 진행중에있는데요. IOS 기기에서는 헤더 왼쪽 오른쪽 부분 모두 정상적으로 작동을 하는데 안드로이드 기기에서는 헤더 부분 모두 작동을 하지 않아서 질문드립니다. IOS: Iphone 11 prop Android : Galaxy 7 모델 사용중입니다. 깃주소는 https://github.com/dvrakry/rn-photo 입니다.

  • react-native
dvdve 댓글 2 좋아요 0 조회수 114

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

미해결

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com 에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwindcss
  • zustand
  • vercel
tngus5232 댓글 2 좋아요 1 조회수 155

인기 태그

인프런 TOP Writers

주간 인기글