winterlood

안녕하세요 jungo님 이정환입니다.결론부터 말씀드리면 Next.js 강의에서는 Zustand나 Tanstack Query에 대해 다루지 않습니다.대신 Next.js에서 제공하는 핵심 기능(데이터캐시, 풀 라우트 캐시, 리퀘스트 메모이제이션, 서버 컴포넌트 등)들을 다루는데에 더 집중하고 있습니다.

next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?

안녕하세요 ukekeke님 이정환입니다.우선 저는 프론트엔드 개발자로 퍼블리셔의 생태에 대해서는 잘 모릅니다 ㅠㅠ 따라서 회사에서 퍼블리셔분들께 정확히 어느 정도의 수준을 요구하는지 잘 모르겠습니다.다만 추천드리고 싶은 부분은 최근 많은 퍼블리셔 분들께서 경쟁력 강화를 위해 프론트엔드 개발도 함께 병행하시는 경우가 있다고 들었습니다. 이에 강의를 수강하고 계신김에 전체를 다 학습해보시는 건 어떨까 제안드립니다!

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

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

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

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

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

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

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

안녕하세요 으악님 이정환입니다.혹시 deleteTodo 함수의 반환값이 다음과 같이 잘 설정이 되어 있는 상황일까요?<pre><code>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;
}</code></pre>강의에서 안내드린 것 처럼 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의 유무만 확인하는 역할로 두는 것이 효율적입니다. 각각의 역할이 분리되어 있다고 이해해 주시면 됩니다!

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

안녕하세요 seb vesta님 이정환입니다.Supabase가 아닌 별도의 백엔드 서버를 활용하신다면 보통은 쿠키를 사용하게 됩니다. 쿠키를 이용해 인증 정보를 관리하는 내용은 아래의 잘 정리된 아티클을 참고하시면 좋을 것 같습니다!<a target="_blank" rel="noopener noreferrer nofollow" href="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">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</a>쿠키를 사용하고 싶지 않으시다면 Supabase가 하던 작업 "로컬스토리지에 토큰을 보관하고, 꺼내 사용한다"를 그대로 구현하시면 되는데요 시나리오만 설명해드리자면 다음과 같습니다.<ol><li>로그인 API 요청 성공시 백엔드 서버에서 Access Token, Refresh Token 응답</li><li>두 토큰 모두 로컬스토리지와 Zustand 스토어에 보관 (간혹 Refresh 만 보관하는 경우도 있습니다) </li><li>API 요청시 Zustand 스토어에 보관된 Access Token 첨부</li><li>Acecss Token 만료로 인해 백엔드 서버에서 400(Bad Request) 응답할 경우&nbsp;<ul><li>Refresh Token을 사용해 Access Token을 갱신하는 API 요청</li><li>응답받은 Access Token을 2번과 동일하게 로컬스토리지와 Zustand 스토어에 보관(갱신)</li></ul></li></ol>

winterlood

Posts