shadcn에서 radix ui와 base ui 차이는 뭔가요?

안녕하세요 jungo님 이정환입니다.Base UI는 Radix UI 보다 더 작은 수준의 컴포넌트들을 제공합니다. 따라서 커스터마이징을 더 자유롭게 하시길 원한다면 Base UI를 더 많이 선택하시곤 합니다. 그러나 기본적으로 제공되는 기능이 Radix UI에 비해서는 부족하기에 저는 가급적 Radix UI를 추천드리고 있습니다 😃

updateTodo 함수 생성시 화살표 함수 사용 안하는 이유

안녕하세요 이민진님 이정환입니다.네 단순한 스타일 차이일 뿐 큰 의미는 없습니다 😀

4.11 바로 투두 삭제가 안됨 질문

안녕하세요 보내주신 코드 잘 확인해봤습니다.확인해보니 json-server의 버전이 과거의 버전으로 설치되어 있더군요 npm uninstall json-server로 제거하신 다음, npm i json-server로 최신 버전을 설치해 다시 사용해주시면 정상적으로 작동하게 될 겁니다 😀

4.11 바로 투두 삭제가 안됨 질문

안녕하세요 으악님 이정환입니다.혹시 deleteTodo 함수의 반환값이 다음과 같이 잘 설정이 되어 있는 상황일까요?import { API_URL } from "@/lib/constants"; import type { Todo } from "@/types"; export async function deleteTodo(id: string) { const response = await fetch(`${API_URL}/todos/${id}`, { method: "DELETE", }); if (!response.ok) throw new Error("Delete Todo Failed"); const data: Todo = await response.json(); return data; }강의에서 안내드린 것 처럼 deleteTodo 함수가 삭제된 아이템을 반환하지 않을 경우 onSuccess 함수에 매개변수로 삭제된 아이템이 제공되지 않을 수 있습니다. 이 부분을 확인해보셔야 할 듯 싶습니다.

매개변수 updatedTodo 관련 질문

문제가 해결되셨다니 다행입니다! 😀

이후의 커리큘럼 문의

안녕하세요 jungo님 이정환입니다.가급적이면 React -> TS -> 실전 프로젝트 순서를 가장 권장드립니다. 실전 프로젝트 강의는 리액트로 진행되기에 그 이후에 Next.js를 학습하셔도 전혀 상관 없습니다 😀다만 해당 강의는 타입스크립트를 이미 잘 알고 계실 분들을 대상으로 제작되었기에 타입스크립트 코드를 작성하는 부분에서 어려움이 있을 수 있습니다. 타입스크립트 강의는 10시간으로 비교적 제 강의중 가장 짧은 편이니 빠르게 습득하시고 넘어가시는걸 추천드립니다!아! 근데 Node.js 백엔드 개발자셨다면 타입스크립트는 이미 잘 알고 계실지도 모르겠네요 그렇다면 React -> 실전 프로젝트 커리큘럼도 좋을 것 같습니다 👍

인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!

안녕하세요 이정환입니다.토큰 만료에 대한 처리가 라우트 가드에서 이루어지지 않아 걱정되셨을 수 있는데요 결론부터 말씀드리면 라우트 가드에서 직접 토큰 만료를 확인할 필요는 없습니다.그 이유는 다음과 같습니다. 1. 토큰이 만료되면 Supabase 클라이언트가 자동으로 토큰 리프레싱을 시도해 토큰을 갱신합니다2. 갱신에 성공하면 새로운 세션으로 자동 업데이트되므로 사용자는 아무런 영향 없이 계속 서비스를 이용할 수 있습니다3. 갱신에 실패하면 SessionProvider 컴포넌트의 onAuthStateChange 이벤트 핸들러에 의해 자동으로 session이 null로 업데이트되어 로그아웃 처리됩니다 4. session이 null이 되면 라우트 가드의 if (!session) 조건에 의해 자동으로 로그인 페이지로 리다이렉트됩니다 따라서 토큰의 만료 감지는 라우트 가드가 아닌 Supabase 클라이언트와 onAuthStateChange가 담당하고, 라우트 가드는 그 결과인 session의 유무만 확인하는 역할로 두는 것이 효율적입니다. 각각의 역할이 분리되어 있다고 이해해 주시면 됩니다!

supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!

안녕하세요 seb vesta님 이정환입니다.Supabase가 아닌 별도의 백엔드 서버를 활용하신다면 보통은 쿠키를 사용하게 됩니다. 쿠키를 이용해 인증 정보를 관리하는 내용은 아래의 잘 정리된 아티클을 참고하시면 좋을 것 같습니다!https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-JWTjson-web-token-%EB%9E%80-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC#cookie_%EC%9D%B8%EC%A6%9D쿠키를 사용하고 싶지 않으시다면 Supabase가 하던 작업 "로컬스토리지에 토큰을 보관하고, 꺼내 사용한다"를 그대로 구현하시면 되는데요 시나리오만 설명해드리자면 다음과 같습니다.로그인 API 요청 성공시 백엔드 서버에서 Access Token, Refresh Token 응답두 토큰 모두 로컬스토리지와 Zustand 스토어에 보관 (간혹 Refresh 만 보관하는 경우도 있습니다) API 요청시 Zustand 스토어에 보관된 Access Token 첨부Acecss Token 만료로 인해 백엔드 서버에서 400(Bad Request) 응답할 경우 Refresh Token을 사용해 Access Token을 갱신하는 API 요청응답받은 Access Token을 2번과 동일하게 로컬스토리지와 Zustand 스토어에 보관(갱신)

4.6 id를 string으로 변경시 오류

안녕하세요 으악님 이정환입니다.아마 json-server의 버전 차이때문에 발생하는 문제로 보입니다. 보통 json-server로 실행된 백엔드 서버는 클라이언트측에서 굳이 Content-Type을 설정하지 않아도 자동으로 처리해주는게 일반적인데, 현재 사용하고 계신 json-server의 버전에서는 이런 기능이 제공되지 않는것으로 보입니다.혹시 강의와 동일하게 npx json-server server/db.json으로 json-server를 실행하고 계신 상황인지 체크가 필요할 것 같습니다.

리액트 타입스크립트 관련 질문있습니다.

안녕하세요 이진섭님 이정환입니다.Props의 타입을 정의할 때 postId :{postId : number} 과 (postId : number) 의 차이가 뭔지 모르겠다고 질문 주셨는데요 아마 다음 두 케이스를 말씀하신 것 같습니다.// 케이스 1 function AComp (props : {id: number}){ ... } // 케이스 2 type Props = { ... } function BComp (props : Props){...} 두 케이스 모두 동작은 완전히 동일합니다. props의 타입이 { postId: number} 객체라는 것을 명시하는 건 똑같고, 타입을 인라인으로 쓰느냐 별도로 분리하느냐의 차이일 뿐입니다.케이스 1은 간단한 컴포넌트에서 빠르게 작성할 때 편리하고, 케이스 2는 Props가 복잡하거나 여러 곳에서 재사용할 때 코드를 더 깔끔하게 관리할 수 있다는 장점이 있습니다. 어떤 방식을 쓰든 결과는 같으니 편하신 쪽으로 사용하시면 됩니다. 다만 이 부분을 정확하게 이해하시려면 타입스크립트의 타입 별칭(Type Alias), 인라인 타입 등의 문법에 대한 기본 지식이 필요합니다. 강의 소개 및 상세 페이지에서 타입스크립트 선수강을 필수로 안내드린 것도 이런 이유에서입니다. 타입스크립트 기초를 먼저 학습하신 뒤에 다시 보시면 훨씬 자연스럽게 이해되실거예요!