안녕하세요.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); }); }, }); }이렇게 작성하면 바로 삭제 적용이 됩니다. 무슨 차이가 있는 걸까요?? 그리고 강의에 왜 처음 코드는 바로 삭제 반영이 안 되는 건지 궁금합니다 ㅜㅜ!

라우트 가드 학습 중 궁금한 점이 생겨서 질문드립니다!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; }

타입스크립트 강의를 따로 안들어서 그런데 컴포넌트 별로 props를 넘길때 언제는 구조분해할당으로 넘기고 언제는 그냥 타입만 선언해서 넘기던데 따로 판단하는 기준이 있을까요? CommentEditor 컴포넌트 props 넘길때 {postId}:{postId : number} 과(postId : number) 의 차이가 명확히 그려지지가 않습니다.

[실습] 80강. 테스팅과 MSW: 서버 없이도 완벽하게 동작하는 프론트엔드 유닛 테스트 내용이 없어요.vitest 테스트 환경과 설명이 추가되었으면 좋겠네요

안녕하세요! 강사님이 얘기해주신 부분에서 구현을 다했고, 추가로 구글로그인도 적용시켰습니다!이후에, 카카오 로그인 관련해서 적용하려고 앱설정 및 AI 도움을 받아 하려했는데, 구현 부분에서 막혔습니다.잘못된 요청 (KOE205)onebite-log 서비스 설정에 오류가 있어, 이용할 수 없습니다.서비스 관리자의 확인이 필요합니다.서비스 관리자라면 아래를 확인해보세요.왜 에러가 발생하나요?접기설정하지 않은 카카오 로그인 동의 항목을 포함해 인가 코드를 요청했습니다.설정하지 않은 동의 항목: account_email어떻게 해결할 수 있나요?접기앱 관리 페이지의 [카카오 로그인] > [동의항목]에서 동의 항목 설정을 변경하거나, 설정하지 않은 동의 항목을 제외하고 재요청합니다.이걸 해결하기 위해선 동의항목에 가서 비즈앱으로 전환하는 방법 밖에 없는 지 궁금하여 문의드립니다!

import axios from "axios"; import { Heart } from "lucide-react"; import { useEffect, useState, useTransition } from "react"; interface Posts { id: number; isLike: boolean; } export default function App() { const [posts, setPosts] = useState<Posts[]>([]); const [isPending, startTransition] = useTransition(); useEffect(() => { startTransition(async () => { const { data } = await axios.get("http://localhost:3000/posts"); setPosts(data); }); }, []); if (isPending) return <h3>loading..</h3>; return ( <> {/* fill: 'none', stroke: 'currentColor' */} {/* fill: 'rgb(255,0,0)', stroke: 'rgb(255,0,0)' */} {posts.map((post) => { <Heart key={post.id} fill={post.isLike ? "rgb(255,0,0)" : "none"} stroke={post.isLike ? "rgb(255,0,0)" : "currentColor"} />; })} </> ); }   posts에 값이 설정되지 않는데요. 이런 경우가 처음이라 다른 예제는 이런 적이 없었습니다.몇 시간에 해보는데 뭐가 잘못되었는지 잘 모르겠네요.

안녕하세요! ui 관련해서 궁금한 것이 있어 질문드립니다.Popover와 같이 radix-ui 와 @/components/ui (shadcn/ui ..?) 있는 컴포넌트의 경우, 어떤 것을 사용하는지에 대한 기준이 있을까요?? PopoverClose 는 @radix-ui 에서 받아오는데, 어떤 것은 @/components/ui 에서 가져와서 사용하고 그래서 혹시나 기준이 있나 궁금해서 질문드립니다!

[todo,list]는 stale이 되는데평탄화한 캐시는 왜 fresh를 유지하는지 이해가 안됩니다😅

const { mutate: deleteComment, isPending: isDeleteCommentPending } = useDeleteComment({ onError: (error) => toast.error("댓글 삭제에 실패했습니다", { position: "top-center" }), });여기서 isPending을 쓸만한 곳이 없는거 같은데 굳이 필요한 이유가 있을까요?

이해가 잘 안돼서요ㅜㅜ조회가 완료되기전 업데이트를 하는 경우 DB에 저장되는 값과 화면에 노출되는 값이 다를수가 있다는 얘기일까요?업데이트를 한다는건 화면에 데이터가 노출된다는건데 이 얘기는 캐시에 담겨져있는 데이터를 먼저 노출시킨다는 얘기일까요?

isPending과 isLoading 차이점을 잘 모르겠습니다.각각 언제 쓰는지 활용처도 궁금합니다!

React Developer Tools 다운받고확장프로그램 관리에서 설정도 했는데F12 개발자도구에서 components 탭이 안보이는데 설정하는 방법이 있을까요?

안녕하세요 정환님 !!!정환님 강의를 듣다가 state관리쪽에 개념이 갑자기 섞여서 질문을 하게되었어요 저는 현재 다음과 같은 방향으로 이해를 하고있어요한 페이지내에서 여러 컴포넌트를 사용할때 간단한 자식 구조에서는 props를 사용한다.한 페이지내에서 여러 컴포넌트를 사용할때 3~4 혹은 그이상으로 자식관계가 걸쳐있는 상태에서는 conntext API를 사용한다.로그인과 같이 특정 페이지가 아니라 여러 페이지에서 관리가 필요한 state는 zustand처럼 전역 라이브러리를 사용한다. 제가 이해한 방향이 맞을까요??

안녕하세요 강의 잘 듣고 있습니다정환님 강의 하셨을 때랑 지금 공식 문서 설치 방법이 달라진 것 같은데 지금 공식문서대로 진행해도 tsconfig.app.json파일과 tsconfig.json파일에 경로 별칭 옵션이 적용이 되는건가요?아니면 강의 보고 그대로 세팅하면 될까요https://ui.shadcn.com/docs/installation/vite

안녕하세요, 디스코드 초대장이 올바르지 않다고 합니다.혹시 디스코드 채널을 닫으신걸까요?