묻고 답해요

useGetMe 함수 관련 질문

해결됨

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

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) useGetMe 함수 만드실 때, useQuery 옵션으로 onSuccess, onError 사용 안하시고, useEffect로 사이드 이펙트를 처리하시는 이유가 궁금합니다!

• javascript
• react
• react-native
• typescript
• react-query

폰트 적용 관련 오류

해결됨

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

한번씩 폰트 적용이 안되는데 새로고침을 하면 적용이 됩니다. 혹시 관련해서 해결 방법이 정리된게 있을까 해서 글 올려봅니다!

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

싸이월드: Background 이미지 반복

해결됨

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

싸이월드 백그라운드를 만드는 중인데 이미지가 이렇게 반복되는건 어떻게 고치나요? AI로 고치려고 해도 안고쳐지네요.. 감사합니다

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

getStatusBarHeight () 화면UI적용

미해결

따라하며 배우는 리액트 네이티브 기초

getStatusBarHeight의 값이 콘솔에 찍히는데 그 값이 화면에 적용되지 않습니다. import { View, StyleSheet, StatusBar, Image, Text, TouchableOpacity, Animated, Platform, } from 'react-native'; import {getStatusBarHeight} from 'react-native-status-bar-height'; import React, {useEffect, useRef} from 'react'; import {SafeAreaView} from 'react-native-safe-area-context'; import Ionic from 'react-native-vector-icons/Ionicons'; const Status = ({route, navigation}) => { const {name, image} = route.params; const statusBarHeight = getStatusBarHeight(); const topMargin = Platform.OS === 'ios' ? statusBarHeight : 0; console.log('statusBarHeight', statusBarHeight); console.log('topMargin', topMargin); // Animated.Value(0)의 값을 직접 변경하면 안되기 때문에 useRef를 사용 const progress = useRef(new Animated.Value(0)).current; const progressAnimation = progress.interpolate({ inputRange: [0, 5], outputRange: ['0%', '100%'], }); useEffect(() => { Animated.timing(progress, { toValue: 5, duration: 5000, useNativeDriver: false, }).start(); }); useEffect(() => { let timer = setTimeout(() => { navigation.goBack(); }, 5000); return () => { clearTimeout(timer); }; }); return ( <SafeAreaView style={styles.statusContainer}> <StatusBar barStyle="light-content" backgroundColor="black" /> <View style={[styles.topGreyLineContatiner, {top: 18 + topMargin}]}> <Animated.View style={{ backgroundColor: 'white', height: '100%', width: progressAnimation, }} /> </View> <View style={[styles.headerContainer, {top: 12 + topMargin}]}> {* ... /*} </View> <Image style={styles.storyImage} source={image} /> </SafeAreaView> ); }; export default Status; const styles = StyleSheet.create({ statusContainer: { backgroundColor: 'black', height: '100%', justifyContent: 'center', }, topGreyLineContatiner: { height: 3, width: '95%', borderWidth: 1, backgroundColor: 'grey', position: 'absolute', }, headerContainer: { padding: 15, flexDirection: 'row', alignItems: 'center', position: 'absolute', top: 12, left: 0, width: '90%', }, headerImageContainer: { width: 30, height: 30, justifyContent: 'center', alignItems: 'center', }, //.... }); console.log('statusBarHeight', statusBarHeight); console.log('topMargin', topMargin); 이렇게 했을경우 statusBarHeight 20 , topMargin 20값이 모두 정상적으로 디버깅 툴에 출력됩니다. 그러나 화면상에 ui에 적용되지 않아요. 일부로 const 에 넣어서 사용해봤고, margintTop과 top이 같이 있을경우 가끔 문제가 된다는 글을 봐서 아예 top에 값을 따로 추가하는 방식도 해보았습니다. 그리고 마지막으로 예제 코드를 그대로 가져와서 사용해보았지만 여전히 화면에서 적용이 되지 않습니다. 값이 찍히는 걸 보면 getStatusBarHeight가 동작하긴 하는건데 화면상에서 적용이 안되는 이유가 뭔지 알 수 있을까요?

• react
• react-native
• expo

koreanjson 문제

해결됨

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

안녕하세요 수업따라고 하고 있는중에,인터넷이 잘 연결되어 있는데 koreanjson.com 이 웹브라우저에서 열리지 않습니다.

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

yarn add @react-navigation/native 설치 후 환경 에러

해결됨

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

yarn add @react-navigation/native 설치 이후 부터 java 버전이 다르다고 나와서 몇일째 진도를 못나가고 있습니다. 제발 도와주세요... Task :react-native-safe-area-context:compileDebugKotlin 'compileDebugJavaWithJavac' task (current target is 11) and 'compileDebugKotlin' task (current target is 17) jvm target compatibility should be set to the same Java version.

• react-native
• typescript
• nestjs
• react-query
• zustand

koreanjson.com 사이트가 안열려요..

해결됨

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

강의 수강중인데 koreanjson.com 참고사이트가 사이트에 연결할 수 없음이라고 뜨네요 다른 방법이 있을까요?

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

app/_layout.tsx에서 useEffect 구간 의미

해결됨

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

혹시 app/_layout.tsx 파일에서 아래 부분 의미가 뭘까요...? useEffect(() => { if (loaded) { SplashScreen.hideAsync(); } }, [loaded]); if (!loaded) { return null; }

• javascript
• react
• react-native
• typescript
• react-query

TypeError: Cannot read property 'bubblingEventTypes' of null

미해결

react-native 프로젝트 개발중인데, android studio 애뮬레이터에서 expo go로 실행시켰을 때는 제대로 동작하는데 eas build를 통해 apk 파일로 만들어서 실제 기기 혹은 android studio 애뮬레이터에서 다운 받아서 실행만 하면 TypeError: Cannot read property 'bubblingEventTypes' of null 에러가 뜹니다. stack overflow나 github 커뮤니티에 있는 방법들 모두 해봤는데 소용이 없었습니다. 제발 도움주시면 감사하겠습니다. 더 필요한 정보 있으시면 제공해드리겠습니다. "dependencies": { "@gorhom/bottom-sheet": "^5.1.1", "@react-native-async-storage/async-storage": "1.23.1", "@react-navigation/bottom-tabs": "^7.2.1", "@react-navigation/native": "^7.0.15", "@react-navigation/stack": "^7.1.2", "@supabase/supabase-js": "^2.49.1", "@tanstack/react-query": "^5.40.0", "base64-arraybuffer": "^1.0.2", "buffer": "^6.0.3", "expo": "^52.0.41", "expo-auth-session": "^6.0.3", "expo-clipboard": "~7.0.1", "expo-constants": "^17.0.8", "expo-image-picker": "^16.0.6", "expo-linking": "^7.0.5", "expo-location": "^18.0.8", "expo-status-bar": "~2.0.1", "expo-updates": "~0.27.4", "npm": "^11.1.0", "react": "18.3.1", "react-hook-form": "^7.54.2", "react-native": "0.76.7", "react-native-geocoding": "^0.5.0", "react-native-gesture-handler": "^2.20.2", "react-native-get-random-values": "^1.11.0", "react-native-image-zoom-viewer": "^3.0.1", "react-native-maps": "^1.18.0", "react-native-reanimated": "^3.16.7", "react-native-url-polyfill": "^2.0.0", "zustand": "^5.0.3" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/plugin-transform-class-properties": "^7.25.9", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@types/react": "~18.3.12", "@types/react-native-vector-icons": "^6.4.18", "metro-react-native-babel-preset": "^0.77.0", "react-native-dotenv": "^3.4.11", "typescript": "^5.3.3" }, "private": true } android studio 로그캣에서 아래와 같이 뜨고 앱이 꺼집니다. com.facebook.react.common.JavascriptException: TypeError: Cannot read property 'bubblingEventTypes' of null This error is located at: in RNSScreen in Unknown in Suspender in Suspense in Freeze in DelayedFreeze in InnerScreen in Unknown in MaybeScreen in RNSScreenContainer in ScreenContainer in MaybeScreenContainer in RCTView in Unknown in CardStack in RNCSafeAreaProvider in SafeAreaProvider in SafeAreaProviderCompat in RNGestureHandlerRootView in GestureHandlerRootView in StackView in PreventRemoveProvider in NavigationContent in Unknown in StackNavigator in AuthNavigator in ThemeProvider in EnsureSingleNavigator in BaseNavigationContainer in NavigationContainerInner in _QueryClientProvider in RNGestureHandlerRootView in GestureHandlerRootView in RCTView in Unknown in App in RCTView in Unknown in AppContainer, stack:

• react-native
• react-native-maps
• expo

4-0 googlemap 관련 트러블슈팅

해결됨

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

-안드로이드 환경에서 작업했습니다 강의 깃허브의 package.json를 그대로 복붙해서 같은 버전의 라이브러리들을 설치해줘도 "execution failed for task ':react-native-maps:compiledebugjavawithjavac'. " 의 빌드 에러가 떠서 해결 과정 공유드려요. 해당 라이브러리 깃허브 접속 후 issue 탭 클릭 open 혹은 close 상태 모두 다 해당 react-native 버전 검색 (저는 0.72.6 이라 입력했어요) 발생한 에러와 같은 메세지 글 찾으면서 추천해주는 버전 찾기 package.json에 해당 버전 입력 node.modules 삭제 후 재설치 -> 프로젝트 재가동 저 같은 경우엔 아래와 같은 버전으로 지도 띄웠습니다. (^있으면 지워야 함.) "react-native-maps": "1.15.3",

• react-native
• typescript
• nestjs
• react-query
• zustand

3-8 React-query의 node_modules 에러

미해결

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

안녕하세요. 3-8 강의에서 25분까지 수강했는데요, 이 그림과 같은 에러가 뜨더라고요. 어찌저찌 에러메시지 따라 아래와 같이 해서 우선 해결했는데요, @babel~~ 어쩌고 package설치 babel.config.js에 아래와 같이 설정 plugins: [ 'react-native-reanimated/plugin', ['@babel/plugin-transform-private-methods', {loose: true}], ], 이 에러는 왜 발생한건가요? 해결하긴했는데 왜 발생한건지에 대한것도 알고 싶어 여쭤봅니다.

• react-native
• typescript
• nestjs
• react-query
• zustand

404에러 문의드립니다

해결됨

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

버튼눌러서 게시글 조회하면 404에러뜨는데 뭐가 문제인지 알 수 있을까요?

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

tailwindcss 오류관련 문의 드립니다 ㅠㅠ

해결됨

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

버젼이 달라서인지.. CNA 했을 때 tailwind.config.js 파일이 없었습니다. 강의에서는 원래부터 존재하던데.. 그래서 어떻게어떻게 추가를 했는데. Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration. 라는 에러가 끝나지를 않네요 ㅠ GPT한테 열심히 물어봤는데 도저히 해결이 안돼서 문의드립니다. 밑은 제가 설정해둔 코드입니다. tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx,html,css}", // 필요한 파일들 포함 "./app/**/*.{js,ts,jsx,tsx}", // Next.js의 `app` 폴더 추가 "./components/**/*.{js,ts,jsx,tsx}", // 컴포넌트 폴더 추가 ], theme: { extend: { colors: { 철수가좋아하는색깔: "#3498db", // 나만의 부트스트랩 만들기 영희가좋아하는색깔: "green", }, }, }, plugins: [], }; postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; globals.css /* @import "tailwindcss"; */ @tailwind base; @tailwind components; @tailwind utilities; 로 해도 안되고, @import "tailwindcss"; 도 안됩니다...

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

저도 tailwind.config.js 가 없네요..

해결됨

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

이거 관련해서 한번 정리해주시면 좋을거같습니다. ㅠㅠ 인터넷에서 찾아보고 gpt한테도 물어봤는데 해결방법을 못찾겠네요.

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

숙제 문의드립니다

해결됨

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

require 왜 오류가 나는지 알 수 있을까요?

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

homework에 관한 강의는없나용?

해결됨

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

homework에 관한 강의는없나용?

• react
• react-native
• 하이브리드-앱
• graphql
• next.js

profile 화면에서 내가 쓴 글이 나타나지 않습니다.

미해결

핸즈온 리액트 네이티브

프로필 화면에서 내가 쓴 글을 표시하게 했을 때 리스트가 뜨지않는 현상이 생겨서 질문드립니다. 콘솔의 정보에서 옵션값까지는 들어오는데 그 후에 어디가 잘못된건지 궁금해서 질문드립니다!

• react-native

글 저장시 파일 저장위치 관련 질문드립니다!

해결됨

핸즈온 리액트 네이티브

post를 저장할 시 photoUris 위치가 안드로이드는 photoUris ["file:///storage/emulated/0/Download/s-34.jpeg", "file:///storage/emulated/0/Download/s-33.jpeg"] 이렇게 콘솔에 찍히고 아이폰은 photoUris ["file:///var/mobile/Media/DCIM/107APPLE/IMG_7585.JPG", "file:///var/mobile/Media/DCIM/107APPLE/IMG_7584.JPG" 이렇게 찍혀서 api/storage 의 uploadPhoto 에 있는 if (uri.startsWith('http')) 이 조건을 충족시키지 못해서 진행이 안되는거 같아서 질문드립니다.

• react-native

npx expo start하면 왜 실행이안될까요?

해결됨

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

안녕하세요 도저히 해결이 안되서 질문남깁니다. 일단 맥북이구요. 안드로이드 기기를 키려고 a를 누르면 쭉 메시지가 나오다가 CommandError: No Android connected device found, and no emulators could be started automatically. Please connect a device or create an emulator ( https://docs.expo.dev/workflow/android-studio-emulator ). Then follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options . If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory. 이렇게 빨갛게 에러가 나면서 실행이 안됩니다. 지피티로도 해결이 안되서 질문 남겨봅니다.

• javascript
• react
• node.js
• react-native
• typescript

구글 지도 API 관련 오류로 질문드립니다!

해결됨

핸즈온 리액트 네이티브

화면의 LOCATION 에 서울을 검색할 시 아래와 같은 오류가 로그에 나타납니다. (NOBRIDGE) LOG GooglePlacesAutocomplete Fail : This API project is not authorized to use this API. Places API 도 ENABLE 했고 API 키도 받아서 등록했고 제한 사항도 전부 해제해봤는데 계속 위와 같은 오류가 발생해서 질문드립니다ㅠ 깃허브주소: https://github.com/dvrakry/rn-photo

• react-native