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()나 이런 것들을 활용했지만, 제대로 로그아웃이 동작하지 않아. 어떻게 해결할 수 있을지 의견을 구하고자 질문을 남깁니다.

안녕하세요 선생님 ㅎchannel쪽 진행하고 있었는데 앨범 밑에 PlayListCarousel이 크기가 이상하게 나오네여 ㅠㅠ 코드를 다똑같이 써도 안되서 질문드립니다! channel/[id]/page.tsximport HeaderBgChanger from "@/components/HeaderBgChanger"; import PagePadding from "@/components/PagePadding"; import PlayListCarousel from "@/components/PlayListCarousel"; import SongCardRowExpand from "@/components/SongCardRowExpand"; import DarkButton from "@/components/elements/DarkButton"; import WhiteButton from "@/components/elements/WhiteButton"; import { getChannelById } from "@/lib/dummyData"; import { getRandomElementFromArray } from "@/lib/utils"; import { permanentRedirect } from "next/navigation"; import React from "react"; import { FiMusic, FiShuffle } from "react-icons/fi"; interface ChannelPageProps { params: { id: string; }; } const page = async (props: ChannelPageProps) => { const channel = await getChannelById(Number(props.params.id)); if (!channel) permanentRedirect("/"); const imageSrc = getRandomElementFromArray(channel.songList)?.imageSrc; return ( <PagePadding> <HeaderBgChanger imageSrc={imageSrc} /> <div className="mt-[150px]"></div> <section> <div className=" text-[28px] font-bold">{channel.name}</div> <article className="mt-4 lg:hidden"> <div> <DarkButton className={"w-[230px] flex justify-center"} label={"구독중 99만"} /> </div> <div className="flex flex-row gap-4 mt-4"> <WhiteButton label={"셔플"} icon={<FiShuffle size={16}></FiShuffle>} /> <WhiteButton label={"뮤직 스테이션"} icon={<FiMusic size={16} />} /> </div> </article> <div className="hidden lg:flex flex-row items-center gap-4 text-[14px] mt-4"> <WhiteButton label={"셔플"} icon={<FiShuffle size={16}></FiShuffle>} /> <WhiteButton label={"뮤직 스테이션"} icon={<FiMusic size={16} />} /> <DarkButton className={"w-[230px] flex justify-center"} label={"구독중 99만"} /> </div> </section> <section className="mt-[80px]"> <div className=" text-[28px] font-bold">노래</div> <div className="mt-[20px]"> <ul className="flex flex-col gap-2"> {channel.songList.map((song, key) => { return <SongCardRowExpand song={song} key={key} />; })} </ul> </div> </section> <section className="mt-[80px]"> <div className=" text-[28px] font-bold">앨범</div> <PlayListCarousel playlistArray={channel.playlistArray} /> </section> <section className="mt-[80px]"></section> </PagePadding> ); }; export default page;PlayListCarousel.tsximport { Playlist } from "@/types"; import React from "react"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; import PlayListCard from "./PlayListCard"; interface PlayListCarouselProps { title?: string; subTitle?: string; Thumbnail?: React.ReactNode; playlistArray?: Playlist[]; } const PlayListCarousel: React.FC<PlayListCarouselProps> = ({ title, subTitle, Thumbnail, playlistArray, }) => { return ( <div className="w-full"> <Carousel> <div className="flex flex-row justify-between items-end my-2"> <article className="flex flex-row gap-3"> {Thumbnail} <div className="flex flex-col justify-center"> <div> {subTitle && ( <div className=" text-neutral-500">{subTitle}</div> )} </div> <div className="text-[34px] font-bold leading-[34px] "> {title} </div> </div> </article> <div className="relative left-[-45px]"> <div className="absolute bottom-[20px]"> <CarouselPrevious className="right-2" /> <CarouselNext className=" left-2" /> </div> </div> </div> <CarouselContent className="mt-4"> {playlistArray?.map((playlist, index) => { return ( <CarouselItem key={index} className="basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5" > <PlayListCard playlist={playlist} /> </CarouselItem> ); })} </CarouselContent> </Carousel> </div> ); }; export default PlayListCarousel;

강사님, 최근에 강사님 강의를 듣고, 실제 프로젝트를 진행하면서 앱 배포 관련해서 이런저런 공부를 하고 있는데 궁금한 점이 생겨 질문드립니다.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에 머지한 후, 새로 다른 브랜치를 만들어 작업중인데, 이전에 잘 동작했지만 동작하지 않습니다.빌드 페이즈에 들어가있는걸 확인했는데 잘 동작하지 않는 경우는 어떻게 해결할지 의견을 구하고자 질문을 남깁니다.

안녕하세요, 강사님 강의처럼 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관련 모든 캐시가 지워지는건가요?

안녕하세요. map 에서 marker 가 깜빡거리는 문제가 있어서 질문드립니다. (map home 에서 아무 동작도 하지 않고 있는 상태, marker 가 지속적으로 깜빡거림)동영상을 업로드할 수 없어서 동영상 촬영후 깜빡거리기 전후를 캡쳐했습니다. 안드로이드에서만 발생하고, virtual device 와 실제 기기에서 모두 발생하고 있습니다. 혹시 계속해서 마커를 새로 조회해오거나, 제 실수로 리렌더링이 무한히 되는게 아닌가 싶어서, CustomMarker 컴포넌트랑, marker 조회하는 api 에 로그 추가해봤지만 한번 호출되고 그 후에는 함수가 실행되지 않는것으로 확인했습니다. 추가로 이 문제가 아이폰 simulator 에서는 발생하지 않고 있습니다. 혹시 제가 더 확인해 볼만한 포인트가 있을까요,,,? 같은 문제를 겪으신 분이 혹시 계실까요,,

안녕하세요.강의 내용에 대한 질문은 아니고, 코드 스타일에 대한 질문입니다.함수 정의하실 때 어쩔 때는 function 키워드 사용하시고 어쩔때는 arrow function 사용하시는데 특별한 기준이 있으신가요?아니면 그냥 그때그때 생각나는거로 쓰시는건가요?아니면 this scope 고려해서 상황에 따라 선택하시는건가요?특별한 기준이 혹시 있는건지 궁금합니다.

안녕하세요.[5-3] 장소 등록하기(4) - 주소 조회 with Google API 강의에서 질문이 있습니다.useGetAddress() hook 에서 get 요청 API 에 API Key 를 그대로 넣는데, 혹시 API key 가 노출될 위험이 없는 걸까요?보통 웹 환경이었으면 클라이언트가 서버로 LatLng 를 넘겨서 요청하면, 서버에서 API Key 로 address 얻어서 클라이언트 사이드로 넘겨주었을것 같은데, 모바일은 이렇게 프리(?)하게 사용해도 보안상 큰 문제가 없는지 궁금합니다! (특히 Production 환경에 배포하는 코드에서도 문제가 없을지 궁금합니다.)모바일 환경에서의 개발은 이 강의로 처음 하는거라 프로덕션 레벨까지 올렸을 때 어떻게 대응하는지에 대해 궁금한 점이 종종 생기는것같습니다.

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!안녕하세요 강사님!현재 15분 38초를 진행하고 있는데 카카오를 로그인하면 무한로딩되면서 홈화면에는 안넘어가고 있습니다. 일단 access_token은 잘넘어오는데 백엔드에서 [Nest] 77076 - 2024. 07. 09. 오후 2:32:09 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '/uploads/index.html'Error: ENOENT: no such file or directory, stat '/uploads/index.html' 라고 오류가 나옵니다. kakakoLoginMuattion부분 코드는 깃헙보면서 오타는 없는지 확인했습니다

1.3 NextJS 설치 편에서다크모드 설정하는 부분에서 문의드립니다.<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange > {children} </ThemeProvider>설정 후, 영상에서는 dark, light로 수정하면 반영되는것을 확인할 수 있는데 제 코드에서는Warning: Extra attributes from the server: class,style그리고Warning: Prop className did not match. Server: "__className_aaf875 vsc-initialized" Client: "__className_aaf875"라는 워닝이 발생하여 자동적으로 반영되지 않는 것을 확인했습니다.해당 이슈를 수정할 수 있는 방법이 있을까요 ?

강사님 좋은 강의 잘 듣고 있습니다!포스트맨으로 요청을 보내도 정상적으로 응답이오고, psql로 연결이 되었다고 나오고 테이블도 조회가 되는데 pm2 log를 보면 Unable to connect to the database. 라고 에러 메시지가 나옵니다.열심히 해결해보려고 했는데 이유를 모르겠어서 질문합니다..

안녕하세요 ! 강의를 따라하고있다가문득 생각이 들었는데요.channel / [id] 이렇게 동적 페이지가 나오게 되면 정적 배포를 하게 될땐 어떤 방식으로 하시게 되나요 ?

안녕하세요 ! 강의따라서 zustand 라는 상태관리 지금 사용해보고있는데요 강사님은 현업에서 백엔드와 같이 작업하시면서 zustand 사용하고 계시나요 ?? 만약 사용하고 계신다면 제한사항이나 불편한것들이 있었나요 ??

예시 코드 따라하는데 재생버튼이 계속 안 나오고 로딩바만 돌아가서 state를 찍어보니까 buffer랑 time 값이 저렇게 빈 값으로 나옵니다. 그런데 isLoading으로 로딩스피너 구현하는 걸 제거하고 바로 play, pause버튼 나오게 하면 노래 자체는 재생이 됩니다만 여전히 buffered와 time 부분 값은 빈 값으로 찍힙니다ㅜㅜ 무엇이 문제일까 모르겠습니다... 코드는 몇번이고 똑같은 걸 검토했는데...

제목과 같이 componets 들에 Sidebar , Header 등은 tsx 로 하지않고 jsx 로 하신 이유가 있나요 ?? ㅎ

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!안녕하세요 npx react-native doctor을 했을 때 이런 에러가 뜨는데 어떻게 해결할 수 있을까요?ㅠTypeError: Cannot read properties of undefined (reading 'X_OK') at Object.getDiagnostics (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/tools/healthchecks/gradle.js:42:57) at /Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:116:29 at Array.map (<anonymous>) at iterateOverHealthChecks (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:106:51) at Array.map (<anonymous>) at iterateOverCategories (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:139:70) at Object.doctorCommand [as func] (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli-doctor/build/commands/doctor.js:140:41) at async Command.handleAction (/Users/name/Desktop/Test/TestProject/node_modules/@react-native-community/cli/build/index.js:116:9)