❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) eas 빌드가 엄청 오래걸려서 검색해보니 몇시간 걸릴수도 있다고 해서..eas build --platform android --local로컬 빌드를 하라고 하던데 로컬 빌드 할려면 설정이 필요한가요?    

해당 강의 수강중에 정환님께서 진행해주신 부분 그대로 똑같이 따라했는데 화면에서는 아예 아무것도 보이지않는.. 출력이 안됩니다..ㅠㅠ 무슨 문제일까요??예상은 api를 저장하는 auth.ts 부분부터 뭔가 잘못된거같은데 이유를 모르겠습니다.(그리고, 예외사항으로 import 부분의 빨간밑줄오류나 코드에서 오타가 아닌 빨간밑줄오류는 왜 생기는걸까요??ㅠ) 현재 진행중인 코드를 한번에 알아보기 쉽게 Github에 바로 올렸습니다.링크 : https://github.com/Skyllerrr안에 Repository의 첫 번째 프로젝트(onebite-SNS)입니다.

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요) 개발을 진행하면서, 사용자마다 서로 다른 핸드폰을 가지고 있고, 디바이스 별 화면 크기가 다릅니다. 이에 대한 반응형 UI대응은 어떻게 대응하는 것이 좋을까요?

안녕하세요 6.11 회원가입시 프로필 정보 자동 생성하기 강의중18:17 분 쯤에아래처럼 useProfileData(session?.user.id) -> useEffect 훅을 선언하는데처음에는 session?.user.id이 값이 없는데 useProfileData 훅을 먼저 부르는게 맞나요?저는 useEffect -> useProfileData 이 순서가 맞다고 생각해서요 원본export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); const { data: profile, isLoading: isProfileLoading, isPending, } = useProfileData(session?.user.id); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; } 내 생각 export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); const { data: profile, isLoading: isProfileLoading, isPending, } = useProfileData(session?.user.id); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; }

안녕하세요 6.8 Zustand를 이용해 세션 관리하기4:52초에 타입 선언 부분에 타입 문의가 있어서요!아래처럼 차이가 뭔지 잘 모르겟네요 강사님은 as 타입선언으로 자주 쓰시던데 ai 물어보니 initailState: State 이 형식이 명시적 타입 선언 이라 더 엄격해서 추천한다고 하던데 as로 타입 단언 하는 이유가 있으신가요? const initailState: State = { isLoaded: false, session: null, }; const initailState = { isLoaded: false, session: null, } as State;

안녕하세요 강사님 강의들 잘 보고 있습니다.2026년에 구입했던 "한입 리액트 실전 라이브러리 키트 - Zustand, Tanstack Query, TailwindCSS" 강의 다시 보게 되면서 "한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편" 강의도 구매해서 보고 싶어 졌는데 예전에 받았던 할인 쿠폰이 만료 처리 되어 사용할 수가 없네요. 너무 늦은 시점에 요청 드려 염치가 없지만 혹시 쿠폰 재발급이 가능한지 문의 드립니다. 감사합니다.수고하세요. 

useMutation 적용후,새로운 아이템을 추가하면,아이템은 추가 되지만 안에 컨텐츠 내용은 안나오고, 삭제도 안되네요?어디를 놓친걸까요??  

안녕하세요5.12 캐시 정규화하기 부분에 궁금한 부분이 있어 질문 남겨봅니다!이 캐시 정규화는 리스트 페이지와 상세 페이지의 데이터가 같을 경우에만 사용 가능한 패턴인가요? 만약 상세 페이지에서 백엔드가 내려주는 데이터가 리스트 페이지와 비슷하지만 몇 개의 필드가 다르게 내려온다면 사용할 수 없는 패턴인가요?

( 해당 섹션 수강하던 2026-04-03 기준 )npx shadcn@latest init 명령어 입력하면 2가지 선택지를 제공해줘요.Select a component library 라고 떠요선택지에 Radix, Base 있는데 Radix가 흔히 아는 Shadcn/ui 라고 합니다.Which preset would you like to use?Nova (아이콘 Lucide, 폰트 Geist)Vega (아이콘 Lucide, 폰트 Inter)Maia (아이콘 Hugeicons, 폰트 Figtree)Lyra (아이콘 Phosphor, 폰트 JetBrains Mono)Mira (아이콘 Hugeicons, 폰트 Inter)Luma (아이콘 Lucide, 폰트 Inter)강의에선 7:16 참고 하시면 base color 고르라는 선택지가 나왔고, 강사님께선 Neutral 고르셨습니다. 저는 저게 안나와서 gemini 에게 물어봤고 이와 같은 답변을 얻어서 진행했습니다. 혹시나 참고가 될까싶어 작성합니다.

2 퀴즈  강의에서 설명된 Create React App(CRA)과 Bit의 비교 중, Bit의 특징으로 언급된 것은 무엇인가요?  이거 오타 아닌가요? Bit -> Vite?

session.tsimport type { Session } from "@supabase/supabase-js"; import { create } from "zustand"; import { combine, devtools } from "zustand/middleware"; type State = { isLoaded: boolean; session: Session | null; }; const initialState = { isLoaded: false, session: null, } as State; const useSessionStore = create( devtools( combine(initialState, (set) => ({ actions: { setSession: (session: Session | null) => { set({ session, isLoaded: true }); }, }, })), { name: "sessionStore", }, ), ); export const useSession = () => { const session = useSessionStore((store) => store.session); return session; }; export const useIsSessionLoaded = () => { const isSessionLoaded = useSessionStore((store) => store.isLoaded); return isSessionLoaded; }; export const useSetSession = () => { const setSession = useSessionStore((store) => store.actions.setSession); return setSession; }; App.tsximport { Button } from "@/components/ui/button"; import RootRoute from "./root-route"; import supabase from "@/lib/supabase"; import { useEffect } from "react"; import { useSetSession } from "@/store/session"; export default function App() { const setSession = useSetSession(); useEffect(() => { //console.log("111"); supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); return <RootRoute />; } 코드는 강의와 동일하게 잘따라간 것 같은데개발자 도구 에서 session이랑 isLoaded가 안보입니다.새로고침을 해도, 탭을 껏다 켜도, 리액트를 껏다 켜도,제미나이한테 물어봐도 이게 해결이 안됩니다..... +추가App.tsximport { Button } from "@/components/ui/button"; import RootRoute from "./root-route"; import supabase from "@/lib/supabase"; import { useEffect } from "react"; import { useIsSessionLoaded, useSession, useSetSession } from "@/store/session"; export default function App() { const setSession = useSetSession(); const session = useSession(); const isLoaded = useIsSessionLoaded(); useEffect(() => { //console.log("111"); supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); useEffect(() => { console.log("현재 세션 상태:", { session, isLoaded }); }, [session, isLoaded]); // 값이 바뀔 때마다 실행됨 return <RootRoute />; } 이렇게 하고 새로고침하면 콘솔에는 찍히긴 합니다 단순한 리덕스 툴킷 버그인지콘솔에 찍히니까 넘어가도 상관없는지 모르겠습니다. 

강의 잘 듣고있습니다. tailwindcss@v4로 변경되고 이후론 사용을 안해봐서 이번 강의가 매우 도움이 되고있습니다. 섹션2 모든 챕터 수강 이후 퀴즈를 푸는데 문제 1개가 강의에 사용되는 버전인 v4가 아닌 v3에 대한 내용이 있는 것 같아서 Q&A 올렸습니다.공식문서 - docs - getting started - upgrade guide에서도 확인 가능합니다. 강의 감사합니다.

안녕하세요.next.js 강의에서도 zustand나 tanstack query 같은 리액트 라이브러리들을 다뤄주시나요?해당 강의도 도서 관련 프로젝트 실습을 하는 것 같은데 인증이나 무한스크롤, 낙관적 업데이트를 다루는 지 궁금합니다!

shadcn에서 radix ui와 base ui 차이는 뭔가요? 그리고 어떤 걸 선택해야 할까요?

제목과 같이updateTodo 함수 생성시 화살표 함수 사용 안하는 이유궁긍합니다! ai 질문하니 스타일 차이라던데 혹시 다른이유가 있을까요? this 관점에 차이가 있다고는 하는데 현재 프로젝트에서는 딱히 의미가 없을거 같아 문의 드립니다!

투두 삭제할 때 mutation 부분 코드를 강의와 똑같이// use-delete-todo-mutation.ts export function useDeleteTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteTodo, onSuccess: (deletedTodo) => { queryClient.setQueryData<Todo[]>(QUERY_KEYS.todo.list, (prevTodos) => { if (!prevTodos) return []; return prevTodos.filter((prevTodo) => prevTodo.id !== deletedTodo.id); }); }, }); } 이렇게 치면 바로 삭제가 안 되고 새로고침해야 적용이되는데 export function useDeleteTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteTodo, onSuccess: (_data, deletedId) => { queryClient.setQueryData<Todo[]>(QUERY_KEYS.todo.list, (prevTodos) => { if (!prevTodos) return []; return prevTodos.filter((prevTodo) => prevTodo.id !== deletedId); }); }, }); }이렇게 작성하면 바로 삭제 적용이 됩니다. 무슨 차이가 있는 걸까요?? 그리고 강의에 왜 처음 코드는 바로 삭제 반영이 안 되는 건지 궁금합니다 ㅜㅜ!

낙관적 업데이트시 매개변수인 updatedTodo 관련 질문이 있습니다.onMutate 에서 제공되는 매개변수는mutate 함수의 인수로부터 제공된다고 하셨는데(15:11)즉, 현재 케이스에서는 id와 isDone만 인수로 제공되었으니 매개변수인 updateTodo에서는 content는 제외되어 있어야 하지 않나 생각을 했었는데요.onMutate 함수 내부에서 다음과 같이 캐시 업데이트한 후({...pervTodo, ...updatedTodo}) 에도 목록에서 content 값이 사라지지 않고 유지중인 점이 궁금합니다.

라우트 가드 학습 중 궁금한 점이 생겨서 질문드립니다!import { useSession } from "@/store/session"; import { Navigate, Outlet } from "react-router"; export default function MemberOnlyLayout() { const session = useSession(); if (!session) return <Navigate to={"/sign-in"} replace={true} />; return <Outlet />; }라우트 가드에서는 인증 정보 유무만 검사하고, 인증 정보 만료 여부는 별도로 확인하지 않나요?만약 그렇다면 인증 정보가 만료된 상황에서의 처리 방법이 궁금합니다! 고민해봤을 때 인터셉터 등 별도 로직으로 구현해 다음과 같이 처리할 것 같습니다접근한 페이지에서 인증이 필요한 요청 처리가 있다면 refreshToken을 이용해 accessToken을 재발급 한 뒤 요청을 재시도한다 refreshToken도 만료되었다면 요청을 취소하고 로그인 페이지로 리디렉션 한다 그런데 이렇게 처리하면 refreshToken도 만료된 사용자는 인증 정보가 있으므로 요청 페이지로 이동한다짧은 순간이나마 데이터가 없는 빈 화면이나 깨진 UI를 본다로그인 페이지로 리디렉션되며 혼란을 겪는다그래서 라우트 가드에서 만료된 경우 접근을 막아야 되지 않을까 생각해봤는데 매번 토큰 유효성 검증을 수행하면 성능 저하가 발생할 것 같다는 생각을 했습니다 어떻게 처리하면 좋을지 의견을 여쭤보고 싶습니다!

안녕하세요! 항상 강의 잘 듣고있습니다 :)강의에서 onAuthStateChange를 사용해서 사용자 로그인 시 세션 데이터가 변경되며 업데이트된 세션이 매개변수로 전달되고, 업데이트된 세션을 스토어에 보관했었습니다supabase를 사용하지 않는다면 세션 데이터 변경을 어떻게 감지하고, 스토어에 보관 해야될지 고민해봤는데 세션 데이터를 사용하는 곳에서 직접 저장 / 수정하는 방법 혹은 강의에서 배웠던 persist와 subscribeWithSelector를 활용한 방법도 있을 것 같은데 명확한 방법이 떠오르지 않아 강의 내용과는 조금 방향성이 다르지만 질문드리게 되었습니다! 

id를 전부 string으로 변경했음에도 계속 오류가 발생해서 ai한테 도움을 요청했더니 create-todo.ts에 header값을 붙이라고 하더라고요!그래서 해당 파일 코드에 headers: { 'Content-Type': 'application/json',}를 붙여줬더니 정삭작동하는 걸 확인할 수 있엇습니다. 왜 이 헤더를 붙여줘야 하는 건가요?import { API_URL } from '@/lib/constants'; import type { Todo } from '@/types'; export async function createTodo(content: string) { const response = await fetch(`${API_URL}/todos`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ content, isDone: false }), }); if (!response.ok) throw new Error('Create Todo Failed'); const data: Todo = await response.json(); return data; }