Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14) 강의쿠폰 더 없을까요 ㅠㅠ 너무 늦게알았네요 ㅠㅠ

안녕하세요.현업자로서 RN expo에 대한 강사님의 생각이 궁금합니다. RN 공식 페이지에서 expo 와 같은 프레임 워크 사용을 권장하는 뉘앙스로 설명을 시작하는데 ,(You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo.)  만약 강사님이 완전 새로운 앱 개발에 착수하신다면, expo 를 사용하실것 같으신가요? 아니면 native cli 로 시작하실것 같으신가요?  

윈도우 안드로이드 보고있는데잘 되다가 stack Navigation 공식문서보고 인스톨하고 코드추가 한 후에yarn start 하고 a 하면[CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders.[CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders.FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':react-native-screens'. > [CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org 라고 나옵니다

The authenticity of host 'github.com (20.200.245.247)' can't be established.ED25519 key fingerprint is SHA256:+DiY3wvvV위와같은 문구가 뜨고 안되네요. ㅠㅠ

isLoggedIn이 false일 때는 Auth네비게이터를 보여주고 이 때는 별 다른 오류가 발생하지 않습니다.하지만 isLoggedIn을 true로 변경 한 후, Drawer 네비게이터를 보여줄 때는 위와 같은 오류가 계속 발생합니다.어디서 타입 에러가 발생하는건지 도저히 모르겠어서 질문을 남깁니다... cf) babel 파일 수정, 캐시 삭제 후 재실행, 안드로이드 에뮬레이터 cold boot 다 시도해봤는데 동일한 문제가 계속 발생합니다.import {createDrawerNavigator} from '@react-navigation/drawer'; import React from 'react'; import MapHomeScreen from '../../screens/MapHomeScreen'; import FeedHomeScreen from '../../screens/FeedHomeScreen'; import CalendarHomeScreen from '../../screens/CalendarHomeScreen'; const Drawer = createDrawerNavigator(); const MainDrawerNavigator = () => { return ( <Drawer.Navigator> <Drawer.Screen name="MapHome" component={MapHomeScreen} /> <Drawer.Screen name="FeedHome" component={FeedHomeScreen} /> <Drawer.Screen name="CalendarHome" component={CalendarHomeScreen} /> </Drawer.Navigator> ); }; export default MainDrawerNavigator; import React from 'react'; import {View, Text} from 'react-native'; interface MapHomeScreenProps {} const MapHomeScreen = ({}: MapHomeScreenProps) => { return ( <View> <Text>MapHomeScreen</Text> </View> ); }; export default MapHomeScreen;

MAC에서 작성한 코드를 윈도우 환경에서 돌려도 문제가 없을까요??서로 환경이 다른 곳에서 작성된 코드들이 문제없이 작동하는지 궁금합니다.

Chapter 7 (섹션 8) 가장 첫 번째 강의는 보이는데 이후부터는 강의 영상이 나오지가 않네요

강사님이 알려주신 방식을 듣고 다양한 이미지 처리 방식을 공부하기 위하여 Presigned URL 방식을 구현중에 있습니다. Nest.js 백엔드에 요청을 통해 발급받은 S3 url 주소에 RN환경에서 PUT 요청으로 이미지를 업로드하고 있습니다. 이 떄, 일반적인 form-data 형식은 들어가지지 않는 것 같은데, binary 형태는 매우 잘 들어가집니다.현업에서도 presigned-url을 활용할 떄 binary 형태로만 전달을 해야하나요, 아니면 다른 방식이 있는지 알고 싶어 식견을 구하고자, 질문드립니다!!또, RN에서 Binary 형태를 만드는 방법이 쉽지 않아보여, 어떻게 하는게 좋은 방식인지 알고싶습니다!

윈도우 amd 안드로이드 환경입니다react-native doctor를 했을땐 이상이 없는데npm start 했을 때  Gradle could not start your build. Could not create service of type ChecksumService using BuildSessionScopeServices.createChecksumService(). java.io.FileNotFoundException: C:\Users\project\MatzipApp\android.gradle\8.0.1\checksums\checksums.lock (�׼����� �źεǾ����ϴ�) 이런 오류가 자꾸 뜹니다  

 윈도우, 안드로이드 환경입니다.import React from 'react'; import {Pressable, StyleSheet, Text} from 'react-native'; interface CustomButtonProps{ label: string; variant?: 'filled' | 'outlined'; size?: 'large' | 'medium'; } function CustomButton({ label, variant='filled', size='large', }: CustomButtonProps) { return ( <Pressable style={[styles.container, styles[variant], styles[size]]}> <Text style={[styles.text, styles['${variant}Text']]}>{label}</Text> </Pressable> ) } const styles = StyleSheet.create({ container:{ borderRadius: 3, justifyContent:'center', }, filled: { backgroundColor:'#C63B64' }, outlined: { borderColor:'C63B64', borderWidth: 1, }, large: { width: '100%', paddingVertical: 15, alignItems: 'center', justifyContent: 'center', }, medium: { width: '50%', paddingVertical: 12, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 16, fontWeight: '700', }, filledText: { color: 'white', }, outlinedText: { color: '#C63B64', }, }); export default CustomButton;styles['${variant}Text' ]이 부분이 에러가 발생하는데 왜그런 것인가요?에러메세지는 다음과 같습니다.[{"resource": "/c:/Users/dcgn6ec/MatzipApp/front/src/components/CustomButton.tsx","owner": "typescript","code": "7053","severity": 8,"message": "Element implicitly has an 'any' type because expression of type '\"${variant}Text\"' can't be used to index type '{ container: { borderRadius: number; justifyContent: \"center\"; }; filled: { backgroundColor: string; }; outlined: { borderColor: string; borderWidth: number; }; large: { width: \"100%\"; paddingVertical: number; alignItems: \"center\"; justifyContent: \"center\"; }; medium: { ...; }; text: { ...; }; filledText: { ...; }; ...'.\n Property '${variant}Text' does not exist on type '{ container: { borderRadius: number; justifyContent: \"center\"; }; filled: { backgroundColor: string; }; outlined: { borderColor: string; borderWidth: number; }; large: { width: \"100%\"; paddingVertical: number; alignItems: \"center\"; justifyContent: \"center\"; }; medium: { ...; }; text: { ...; }; filledText: { ...; }; ...'.","source": "ts","startLineNumber": 18,"startColumn": 36,"endLineNumber": 18,"endColumn": 60}]  

import { IoPlaySkipBackSharp, IoPlaySkipForwardSharp } from "react-icons/io5"; import { PlayerSlider } from "../ui/PlayerSlider"; import { useAudio } from "react-use"; import { AiOutlinePause } from "react-icons/ai"; import { usePlayerState } from "@/hooks/usePlayerState"; import { ClipLoader } from "react-spinners"; import { RiPlayFill } from "react-icons/ri"; export default function PlayerContent() { const { activeSong } = usePlayerState(); const [audio, state, controls, ref] = useAudio({ src: activeSong?.src ?? "", autoPlay: true, }); const isLoading = activeSong?.src && state.buffered?.length === 0; console.log("로딩상태:", isLoading); const onClickPreBtn = () => {}; const onClickStartBtn = () => { controls.play(); console.log("start일때 로딩상태:", isLoading); }; const onClickPauseBtn = () => { controls.pause(); console.log("pause일때 로딩상태:", isLoading); }; const onClickNextBtn = () => {}; return ( <div className="w-full h-full relative"> <div className="absolute top-[-16px] w-full"> <PlayerSlider className="w-full" defaultValue={[0]} value={[state.time]} onValueChange={(value) => { controls.seek(value); }} /> </div> {audio} <section className="flex flex-row justify-between items-center w-full h-full px-2 lg:px-6"> <div className="flex flex-row items-center h-full gap-1 lg:gap-8"> <IoPlaySkipBackSharp size={40} className="cursor-pointer" onClick={onClickPreBtn} /> {isLoading ? ( <ClipLoader color="#FFF" /> ) : state.playing ? ( <AiOutlinePause size={40} className="cursor-pointer" onClick={onClickPauseBtn} /> ) : ( <RiPlayFill size={40} className="cursor-pointer" onClick={onClickStartBtn} /> )} <IoPlaySkipForwardSharp size={40} className="cursor-pointer" onClick={onClickNextBtn} /> </div> <article></article> <div></div> </section> </div> ); } playerContent.tsx 파일인데무한로딩이 계속 생겨서 UI만 뱅글뱅글 돌아가네요.. 그리고 thumb도 조절이 안되요.. 어디가 잘못된지 모르겠네요 1시간째 찾고있는데 ㅠㅠ 저는 모든 파일을 jsx가 아닌 tsx로 해서 어딘가에 문제가 있는것 같은데 못찾겠습니다.  

각 페이지마다 loading과 error.tsx를 각각 주고 있는데 그냥root에 loading.tsx error.tsx를 하나만 둬서 공유하는 방식은 안되나요? 각 페이지마다 따로 둔 이유가 뭔가요? 현업에서도 layout은 보통 page마다 다르게 두나요?이전에는 프로젝트에서 그냥 root에 위치한 하나의 layout만 써와서.. 강의 잘 보고있습니다. 선생님!

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

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

안녕하세요 강사님. 리액트를 배울때, 컴포넌트 내에서 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()나 이런 것들을 활용했지만, 제대로 로그아웃이 동작하지 않아. 어떻게 해결할 수 있을지 의견을 구하고자 질문을 남깁니다.