레이아웃 표시를 했을때, 위치는 잡히는 것 같지만 시각적으로 전혀 보이지 않아요. 마치 뒤에 가려진 것 처럼요 // InputForm.js import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native' import React from 'react' const InputForm = () => { return ( <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.addFormContainer}> <TextInput style={styles.inputField} placeholder="할 일을 작성해주세요." /> <Pressable style={styles.addButton}> <Text style={styles.addButtonText} >+</Text> </Pressable> </KeyboardAvoidingView> ) } export default InputForm const styles = StyleSheet.create({ addFormContainer: { flexDirection: 'row', marginTop: 'auto', marginBottom: 30, paddingHorizontal: 20, backgroundColor: '#f7f8fa' }, inputField: { flex: 1, height: 42, padding: 5, marginRight: 25, borderRadius: 4, borderColor: 'rgba(0, 0, 0, 0.2)', borderWidth: 1, color: '#000000', fontSize: 15, textAlignVertical: 'center' }, addButton: { justifyContent: 'center', alignItems: 'center', width: 42, height: 42, borderRadius: 4, backgroundColor: 'rgba(0,0,0,0.7)', shadowColor: '#000000', shadowOpacity: 0.14, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } }, addButtonText: { color: 'white', fontSize: 25 }, }) // MainScreen.js import { SafeAreaView, StyleSheet, Text, View, StatusBar, Platform } from 'react-native' import React from 'react' import InputForm from '../components/InputForm' const MainScreen = () => { return ( <View> <SafeAreaView style={styles.container}> <StatusBar barStyle={'default'} /> <Text style={styles.pageTitle}>ToDo App</Text> <View style={styles.listView}> <Text style={styles.listTitle}>할 일</Text> </View> <View style={styles.separator} /> <View style={styles.listView}> <Text style={styles.listTitle}>완료된 일</Text> </View> <InputForm /> </SafeAreaView> </View> ) } export default MainScreen const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS = 'android' ? 20 : 0, backgroundColor: '#f7f8fa' }, pageTitle: { marginBottom: 35, paddingHorizontal: 15, fontSize: 54, fontWeight: '600', }, separator: { marginHorizontal: 10, marginTop: 25, marginBottom: 10, borderBottomWidth: 1, borderBottomColor: 'rgba(0,0,0,0.2)' }, listView: { flex: 1, }, listTitle: { marginBottom: 25, paddingHorizontal: 15, fontSize: 41, fontWeight: '500', } }) // App.js import { StyleSheet, Text, View } from 'react-native'; import MainScreen from './screens/MainScreen'; export default function App() { return ( <View style={styles.container}> <MainScreen /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'flex-start', justifyContent: 'center', }, });   // package.json { "name": "awesomeproject", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "^51.0.27", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.5" }, "devDependencies": { "@babel/core": "^7.24.0" }, "private": true }  

deviceHeight > 700 ? .. : ..강사님께서 700을 분기점으로 잡으셨는데요.혹시 700인 이유가 있는걸까요? 아니면 700이라는 수치는 의미가 없고, 분기가 가능하다는 걸 가르쳐주시려는 의도인건가요? 

프로젝트를 실행했는데 강의와 달리 App.tsx 파일이 없습니다. 다운그레이드를 해서 실행해야 할까요? 만약 그렇다면 버전을 알려주시면 감사하겠습니다.  

(반갑습니당!!이제 막 개발이뭔지 맛보고있는 개린이입니다ㅋㅋ 학습동기는 주업무는 웹개발이지만 어플만들어보고싶어서이구요...)질문:강의 초반 수강중입니다. 초반에 redux가 많은 개발자들이 사용하고 있는 라이브러리라 그걸 먼저 사용할줄 알아야 한다라고 이해했는데용 최근 주변 프론트 개발자로 일하는 지인이 zustant를 추천해서 사실 사이드프로젝트에서 zustant를 사용할 수 있으면 해볼 예정이었는데요. 듣는중에 힙한게 zustant에 해당하는건가 싶어서욬ㅋㅋㅋㅋㅋredux먼저 배우고 숙련도가 어느정도 올라간후에 zustant를 사용해봐야할까요?? 많은 사람들이 쓰고있는것이 어찌보면 기본이니까 기본부터 시작해야하는 것인가 하는 생각이 들어서 질문드려봅니다

안녕하세요 강사님. 리액트를 배울때, 컴포넌트 내에서 object를 초기화하면 성능 문제가 생길 수 있다고 배웠습니다. 근데, [2-4] 네비게이션 타이핑 강의(1:29)를 보면, function AuthStackNavigator() {const Stack = createStackNavigator();return (~~)} 와 같이, 컴포넌트 내부에 Stack이 선언되어 있습니다.이러면 화면이 재랜더링 될 때 마다, Stack이 선언되어 성능문제가 생기는건 아닌가요?

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 로그아웃 클릭 후 로그인 및 회원가입 버튼누르면 아래처럼 로그아웃안된것처럼 나오며  아래처럼 Warning로그가나오는데 혹시 이게문제인가요??구글찾아봐도 해결이안되서 게시판에 글 올립니다 ㅠㅠ  

"[1-2] 맥-IOS 환경 설정"을 보고 있습니다.  저는 node를 설치하지 않고, nvm만 설치해서 사용하고 있는데요. 강사님께서는 brew install node 이후에 nvm을 설치하시네요. 저는 이렇게 하면 글로벌 node가 있고, nvm도 있는거라 혹시 꼬일까봐 node 설치 없이 nvm만 설치했는데요. 강사님 의견도 궁금합니다.

서버랑 피그마 파일도 직접 제작하신건가요? 강사님 정말 대단하시네요. 강사님 처럼 되려면 어떻게 해야 하나요? (어떻게 셋 다 잘하나요?)

마커찍을때 위경도 가져오는걸로 알고있는데, 그때 지올로케이션 사용했엇거든요 라이브러리 근데 화면 내려갈때나 다른앱 사용할떄 백그라운드 환경으로 변하잖아요 근데 내가 그떄동안 걷고있으면 걷고있던길을 색으로 칠하고 싶다면 백그라운드에서도 해당 위도 경도를 받아와야하는데 즉 백그라인드에서 데이터 받을수있는 부분 강의에있나요 ?

import {useEffect} from 'react'; import {useMutation, useQuery} from '@tanstack/react-query'; import {queryClient} from 'containers/TanstackQueryContainer.tsx'; import {getAccessToken, logout, postLogin, postSignup, socialLogin} from 'apis'; import {UseMutationCustomOptions} from 'types/mutations/common.ts'; import { numbers, removeEncryptStorage, removeHeader, setEncryptStorage, setHeader, } from 'utils'; import {queryKeys, storageKeys} from 'constants/storageKeys/keys.ts'; function useSignup(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: postSignup, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useLogin(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: postLogin, onSuccess: data => { // 토큰 저장. const accessToken = data.result.accessToken; const refreshToken = data.result.refreshToken; setEncryptStorage(storageKeys.ACCESS_TOKEN, accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, refreshToken); setHeader('Authorization', accessToken); }, onSettled: () => { queryClient.refetchQueries({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], }); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useSocialIdTokenLogin(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: socialLogin, onSuccess: ({result}) => { setHeader('Authorization', result.accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, result.refreshToken); }, onSettled: () => { queryClient.refetchQueries({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], }); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useGetRefreshToken() { const {data, error, isSuccess, isError, isPending} = useQuery({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], queryFn: getAccessToken, staleTime: numbers.ACCESS_TOKEN_REFRESH_TIME, refetchInterval: numbers.ACCESS_TOKEN_REFRESH_TIME, refetchOnReconnect: true, refetchIntervalInBackground: true, }); useEffect(() => { if (isSuccess) { setHeader('Authorization', `Bearer ${data?.result.accessToken}`); setEncryptStorage(storageKeys.ACCESS_TOKEN, data.result.accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, data.result.refreshToken); console.log(isSuccess, '성공'); } }, [isSuccess]); useEffect(() => { if (isError) { removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); } }, [isError]); return {isSuccess, isError, error, data, isPending}; } function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: logout, onSuccess: () => { removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); queryClient.resetQueries({queryKey: [queryKeys.AUTH, 'getAccessToken']}); queryClient.clear(); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useAuth() { const signUpMutation = useSignup(); const loginMutation = useLogin(); const socialIdTokenMutation = useSocialIdTokenLogin(); const getNewAccessToken = useGetRefreshToken(); const logoutMutation = useLogout(); const isLogin = getNewAccessToken.isSuccess; const isLoginLoading = getNewAccessToken.isPending; return { signUpMutation, loginMutation, socialIdTokenMutation, isLogin, logoutMutation, isLoginLoading, getNewAccessToken, }; } export default useAuth; // RootNavigator.tsx import FeedTabNavigator from '../tab/FeedTabNavigator.tsx'; import AuthStackNavigator from '../stack/AuthStackNavigator.tsx'; import {useEffect} from 'react'; import SplashScreen from 'react-native-splash-screen'; import useAuth from '../../hooks/queries/AuthScreen/useAuth.ts'; export default function RootNavigator() { const {isLogin, getNewAccessToken} = useAuth(); console.log(isLogin); useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); }, []); return <>{isLogin ? <FeedTabNavigator /> : <AuthStackNavigator />}</>; } 안녕하세요, 강사님, 강사님 강의를 전체 모두 듣고, 비슷한 느낌으로 풀스택으로 앱개발을 진행하고있습니다.강사님 강의처럼 쿼리를 활용하여 로그인 기능을 구현하고 싶어 useLogout훅에 onSettled를 넣었을 때는 강사님처럼 동일한 이상증상이 발생했고, 이를 해결하기 위해 강사님께서는onSuccess부분에queryClient.resetQueries({queryKey: [queryKeys.AUTH]});이 부분을 넣어주셔서 해결을하셨는데, 저는 해당 부분을 넣어도, 로그아웃이 되었다가, 바로 refreshToken으로 accessToken을 재발급받아, 로그인이 되지 않는 현상이 일어나고있습니다. clear()나 이런 것들을 활용했지만, 제대로 로그아웃이 동작하지 않아. 어떻게 해결할 수 있을지 의견을 구하고자 질문을 남깁니다.

강사님 안녕하세요 !데스크탑을 껐다가 키면 환경변수 설정이 바뀌는 것 같습니다...!아래와 같이 오류가 나오는 상황입니다.› Opening on Android...Failed to resolve the Android SDK path. ANDROID_HOME is set to a non-existing path: %LOCALAPPDATA%\Android\SdkFailed to resolve the Android SDK path. ANDROID_HOME is set to a non-existing path: %LOCALAPPDATA%\Android\SdkError: 'adb'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ� ��ġ ������ �ƴմϴ�.환경변수를 삭제하고, 재부팅하면 문제가 해결되는 것처럼 보이는데, 다음 날 데스크탑을 또 켜면 똑같은 오류가 발생합니다 ㅠㅠ 이를 방지할 해결방법이 있을까요...?감사합니다 :)

안녕하세요, 강사님윈도우 데스크탑에서 expo login을 하고, npm start로 실행한 후 iOS 실물 기기에서 expo 프로젝트를 열려고 하는데 열리지가 않습니다..! 어떤 부분을 확인하면 되는지 알 수 있을까요?감사합니다 :)

강사님, 최근에 강사님 강의를 듣고, 실제 프로젝트를 진행하면서 앱 배포 관련해서 이런저런 공부를 하고 있는데 궁금한 점이 생겨 질문드립니다.XCode 에서 BundleIdentifier을 com.xxx.xxxx 이런식으로 제공해주고 있는데. 해당 부분을 URL Scheme으로 활용하여 네이버 로그인을 개발 중에 있습니다. 이 부분을, 그럼@implementation AppDelegate - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options { if([RNKakaoLogins isKakaoTalkLoginUrl:url]) { return [RNKakaoLogins handleOpenUrl: url]; } if ([url.scheme isEqualToString:@"{{ CUSTOM URL SCHEME }}"]) { return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options]; } return NO; } CUSTOM URL SCHEME을 BundleIdentifier로 사용해도 괜찮은지 여부와, 해당 값을 환경변수 처리 없이, 공개적으로 적용해도 되는지 아래와 같이 입니다. if ([url.scheme isEqualToString:@"com.matzip"]) { return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options]; } return NO; } 혹시 만약에 되지 않는다면 AppDelegate.mm에서 환경변수를 처리하는 방법과, 소셜 로그인시 필요한 URL Scheme은 보통 현업에서 어떠한 식으로 선정하여 처리하는지 궁금하여 질문드립니다.

안녕하세요, 강사님, 강사님 강의를 들으며, 개인적인 프로젝트를 RN으로 진행중에 비슷한 상황이 발생하여 질문을 남겨봅니다.아이콘같은 경우도, 이전에 잘 동작하다가 빌드 후, 에러가 발생하면 빌드 페이즈에 추가로 파일을 넣어서 해결하였습니다.이번에 제가 추가한 폰트도, 이전에 잘 동작하다가, 해당 브랜치를 develop에 머지한 후, 새로 다른 브랜치를 만들어 작업중인데, 이전에 잘 동작했지만 동작하지 않습니다.빌드 페이즈에 들어가있는걸 확인했는데 잘 동작하지 않는 경우는 어떻게 해결할지 의견을 구하고자 질문을 남깁니다.

구글링을 통해 no-console: warn 규칙을 작성하였습니다. npx eslint .을 터미널에 실행하면 규칙에 따라 warning이 뜹니다.그런데, 강사님의 화면에서 vscode에 App.js파일에 바로 밑줄이 그어지는 것과는 달리 저는 그런 작용이 없어서 질문드립니다...Extension에서 ESLint도 설치했는 데 왜 이럴까요?? ㅠㅠ

안녕하세요, 강사님 강의처럼 Signing & Capabilites부분에서 +버튼을 누르면 Signinwith apple 부분이 보이지 않습니다. 이 부분은 어떻게 해결해야하나요?

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!안녕하세요.vs code 터미널에서 안드로이드 시뮬레이터를 켜기위해$ npx react-native run-android를 실행하면 error Failed to install the app. Make sure you have an Android emulator running or a device connected.디바이스가 연결되어있는지 확인하라고 뜨고 Android Studio 를 켜서 virtual deivce manager 에서 디바이스를 연결해놓고 하면 잘되는데 원래 Android Studio에서 디바이스를 연결해놓고 $ npx react-native run-android 를 실행하는게 맞는건가해서요.

계속 에러를 해결해보려했지만 어디부분이 잘못된건지 알고싶어 글 남깁니다처음에 프로젝트를 생성하고 나서 안드로이드는 실행되지만 해당 프로젝트 화면은 나오지않아 npx react-native run-android로 다시 실행하면 사진과 같은 에러가 발생합니다.Gradle , JDK와 관련된 에러같은데 삭제를 시도해보고 다시 설치해봣지만해결되지 않네요 ㅠ어디 부분이 문제인지 몰라 일단 몇개 사진 첨부합니다.!zshrc

맛집 파일 업로드 하려고 하면 unable to import file 이라고 뜨네요.

양질의 강의 잘 듣고있습니다.queryKey: [queryKeys.POST, queryKeys.GET_POSTS],쿼리키에 다음과 같이 굳이 POST를 넣어주는 이유가 그룹화 하기위함인가요? 나중에 서비스가 커질 경우 어떤 항목의 get_posts인지 구분이 힘들어질수 있어서 그런것인지 궁금합니다.만일 그렇다면 useMutateDeletePost()에서 queryClient.invalidateQueries({queryKey: [queryKeys.POST]});로 처리하면 POST관련 모든 캐시가 지워지는건가요?