안녕하세요 강사님 좋은 강의 잘 듣고 있습니다! useSuspenseQuery를 사용 중에 고민이 생겨서 질문 드립니다. 제가 구현하고 있는 프로젝트의 대부분 API는 인증이 필요합니다. refresh token 은 http only 쿠키로 관리하고, access token 은 쿠키에 저장하고, 요청 헤더에 넣어 인증을 하고 있습니다. useSuspenseQuery 를 사용하는 페이지에서 SSR 단계에 401 에러가 발생합니다. 이후 CSR 전환 시에는 정상적으로 데이터를 불러와 화면은 최종적으로 렌더링됩니다. 해당 페이지를 dynamic import 로 CSR 강제하면 401이 발생하지 않습니다. 제가 추정한 원인은 클라이언트 컴포넌트 내부라도 초기 렌더링 시 SSR 패스에서 useSuspenseQuery 가 실행되어 서버에서 API 요청이 발생. 이때 공통 axios 인스턴스가 클라이언트 전용 방식으로 쿠키를 읽어 헤더에 토큰을 주입하도록 구현되어 있어, 서버 환경에서는 토큰을 읽지 못해 401이 발생하는 것으로 판단했습니다. 해결을 위해 시도한 방법 prefetchQuery + useSuspenseQuery 조합으로, prefetchQuery 단계에서 next/headers 를 통해 서버 환경에서 토큰을 읽어 주입하면 401이 사라졌습니다. 다만, 모든 useSuspenseQuery 호출 지점마다 prefetchQuery 를 추가하는 것은 과도하다고 느껴 대안을 모색 중입니다. 질문 사항 왜 SSR에서 실행되나요? 클라이언트 컴포넌트 내부에서 호출하는데도 useSuspenseQuery 가 SSR 렌더링 단계에서 동작하는 메커니즘을 정확히 이해하고 싶습니다. useSuspenseQuery 의 단점/주의점 강의에서는 주 사용을 권장해 주셨는데, 모든 데이터 관리에 useQuery 대신 useSuspenseQuery 사용하는게 좋은건지 실제 서비스에서 고려해야 할 단점이나 주의사항이 궁금합니다. 401을 피하는 권장 패턴 제 환경처럼 서버에서 토큰을 읽지 못해 401이 나는 경우, 제가 시도한 방법 인 prefetchQuery 적용 외에 권장되는 표준 패턴이 있을까요? prefetchQuery 를 여러 곳에서 사용할 때의 리스크 여러 페이지/쿼리에서 prefetchQuery 를 널리 적용하면 TTFB 지연, 직렬화된 캐시의 HTML 페이로드 증가, 중복 호출 등의 문제가 커질 수 있을까요? 그렇다면 적절한 적용 기준이나 완화 전략이 궁금합니다. 그리고 어떤 기준으로 prefetchQuery 를 적용하면 좋을지도 궁금합니다. 문서와 블로그, GPT 등을 찾아봤지만 명확히 정리하기 어렵고, 제가 질문을 드릴 수 있는 최고 전문가라고 생각하여 의견을 여쭙니다. 긴글 읽어주셔서 감사합니다! 아래 에러가 발생하는 예시 코드 첨부 드립니다. (APage를 CSR로 강제하면 에러 미발생) import Spinner from "@/components/common/spinner/Spinner"; import A from "@/components/pages/A"; import { Suspense } from "react"; import { ErrorBoundary } from "react-error-boundary"; interface APageProps { params: { id: string; }; } export default async function APage({ params, }: APageProps) { const { id } = params; const parsedId = parseInt(id); return ( <ErrorBoundary fallback={<div>에러가 발생했습니다</div>}> <Suspense fallback={<Spinner fullscreen />}> <A id={parsedId} /> </Suspense> </ErrorBoundary> ); } "use client"; import { useGetAList } from "@/api/A/queries/useGetAList"; interface AProps { id: number; } export default function A ({ id }: AProps) { const { data: probiomeList } = useGetAList(id); // 생략 import { queryKeys } from "@/constants/queryKeys"; import { UseSuspenseQueryCustomOptions } from "@/types"; import { useSuspenseQuery } from "@tanstack/react-query"; import { getAList } from "../A"; import { AList } from "@/types/A"; export function useGetAList( id: number, queryOptions?: UseSuspenseQueryCustomOptions<AList> ) { return useSuspenseQuery({ queryFn: () => getAList(id), queryKey: [ queryKeys.A.BASE, queryKeys.A.GET_A_LIST, id, ], ...queryOptions, }); }
안녕하세요 선생님, 혹시 전체 강의를 수강하진 않았지만 이 부분이 가능할것으로 생각들어 강의 결제하였는데, 궁금해서 문의드려요 lovable이나 replit으로 만든 웹을 안드로이드 앱으로 만들려면 어떻게 해야되는건가요? 이거에 대한 강의나 관련내용이 있을까요??저 그 방법이 있는거 같아서 결제했는데, 알려주실수 있나요?강의에 포함안되어 있다면 통상적으로 어떤식으로 만드는 궁금합니다.
첫번쨰 dag 실행시 링크로 가쟈오는 csv 파일이 xml 파일로 읽어드리면서 에러로 띄우네요?? 도커에서 csv 파일을 읽을떄 에러메세지를 xml로 리턴하는거같은데 우선 csv 파일자체를 넣어서 하드코딩했습니다. 혹시 도커로 사용시 외부 파일받아올때 보안적인 부분에서 해제해야되는경우가있나요?
💡 질문하기 전에 먼저 확인해보세요! 답변을 기다리는 동안, 아래 항목들을 먼저 확인해보시면 문제가 해결될 수도 있어요. 강의 내용 다시 보기: 혹시 놓친 부분이 없는지 해당 챕터의 강의를 한 번 더 돌려보셨나요? 오타 및 들여쓰기 확인: 파이썬은 특히 들여쓰기에 민감해요. 코드에 오타나 잘못된 들여쓰기는 없는지 꼼꼼히 확인해주세요. 에러 메시지 검색: 빨간색 에러 메시지가 떴다면, 메시지 전체를 복사해서 구글에 그대로 붙여넣기 해보세요. 전 세계 개발자들이 비슷한 문제를 겪고 해결책을 공유해두었을 확률이 높습니다. Q&A 게시판 검색: 혹시 다른 분이 먼저 비슷한 질문을 올렸는지 게시판을 한번 살펴보는 것도 좋은 방법이에요.
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
remark-gfm 설치 이후 모든 css 가 망가지고 글자와 이미지만 렌더링 되는데 뭐가 문제일까요? global css 에서 import 한것도 아니고 영상과 같이 Plugin 으로 했어요. next-mdx-remote 깃헙 보니까 업데이트도 1년 지났고 버그 로그 많던데 그거 때문이려나요? https://github.com/hashicorp/next-mdx-remote next 공식문서에서도 next-mdx-remote 는 더이상 없고 next-mdx-remote-client 만 있던데 그거 쓰면 되는걸까요?
62. 검색 엔진 최적화(SEO)에서 보면 상세페이지의 메타데이터 설정하는 부분에서 이전시간에 적용한 인터셉트/패러렐 라우트 때문인지 모달 형태로 뜨면 book/[id]에 설정한 메타 태그가 적용되지 않고, 최상위 (with-searchbar) 부분에 적용한 부분이 뜹니다. 하지만 새로고침해서 최초 접속 상태로 상세페이지에 접근하면 book/[id]에 설정한 meta태그랑 오픈그래프가 보입니다! 이게 의도하신 부분 맞을까요? 어차피 링크로 공유할때는 맨 처음 접속하는 것과 마찬가지니까 크게 상관 없는 부분일까요!? 강의 잘 수강하고 있습니다! 감사합니다.
