이후의 커리큘럼 문의

안녕하세요 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), 인라인 타입 등의 문법에 대한 기본 지식이 필요합니다. 강의 소개 및 상세 페이지에서 타입스크립트 선수강을 필수로 안내드린 것도 이런 이유에서입니다. 타입스크립트 기초를 먼저 학습하신 뒤에 다시 보시면 훨씬 자연스럽게 이해되실거예요!

실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.

안녕하세요 foryousa님 이정환입니다.강의와 동일하게 설정을 진행해 주셨다면, 아마 Live Server를 다시 종료하고 가동하거나, 크롬을 완전히 종료했다가 다시 가동하면 문제가 해결될 확률이 높습니다. 그래도 안된다면 Live Server 확장 프로그램이 잘 가동중인지 확인이 필요할 것 같습니다. 강의 화면과 유사하게 VSCode와 크롬 창을 배치하신 다음 캡쳐해서 올려주시면 살펴보겠습니다.

소셜 로그인 구현하기 관련하여 질문이 있습니다!

안녕하세요 rladygks1210님 이정환입니다.카카오 정책이 그렇다면 그런 방법 밖에는 없을 것 같습니다 ㅠㅠ제가 알기로는 사업자가 없어도 전환시켜주는 사례가 있다고 알고 있는데 참고해보시면 좋을 것 같습니다.https://mini-min-dev.tistory.com/121 아니면 이메일 주소를 필수 수집하지 않는 쪽으로 기능을 구현해보시는것도 좋을 것 같아요!!

ui 파일 질문드립니다.

안녕하세요 이정환입니다.아주 심플하게 말씀드리자면! @/components/ui 폴더 아래에 원하는 컴포넌트가 없는 경우에만 제한적으로 radix-ui의 컴포넌트를 활용합니다.shadcn/ui의 모든 컴포넌트들은 radix-ui의 컴포넌트들을 래핑한 형태(확장한 형태)로 만들어져 있는데요, 간혹 shadcn/ui에 만들어져 있지 않은 radix-ui의 컴포넌트들이 존재합니다. 따라서 이런 경우 @/components/ui 폴더에 보관된 shadcn/ui의 컴포넌트 대신 radix-ui 의 컴포넌트를 바로 사용하게 됩니다.

tanstack query devtools에서 질문있습니다!

안녕하세요 goog님 이정환입니다.결론부터 말씀드리면 개별 아이템의 캐시 [todo, detail, id]가 disabled 상태로 설정되어 있기 때문입니다. 이처럼 disabled된 캐시는 stale 여부를 판단하지 않기 때문에 자동으로 stale 상태로 전환되지 않습니다.

댓글 삭제 시 isPending 질문

안녕하세요 gmldnjs0402님 이정환입니다.넵 해당 컴포넌트에서는 지금 당장 isPending을 사용할 필요는 없습니다. 그러나 나중에 사용자 경험을 개선하고 싶을 때 유용하게 활용할 수 있습니다. 예를 들어 isPending이 true인 동안 버튼을 비활성화하거나, 로딩 스피너를 보여주는 등의 처리를 할 수 있거든요.강의에서 isPending을 함께 구조분해할당한 이유는, useTransition이 반환하는 값의 구조를 보여드리기 위함이었습니다. 실제로 사용하지 않더라도 "이런 값이 함께 제공된다"는 걸 알아두시면 나중에 필요할 때 바로 활용하실 수 있으니까요!그러니 지금은 isPending을 사용하지 않더라도 전혀 문제없고, 필요한 시점이 오면 그때 활용하시면 됩니다 😀