안녕하세요 강사님 좋은 강의 잘 듣고 있습니다!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, }); }

현재 react.js는 수강한상태이고 타입스크립트는 수강안한 상태입니다.급하게 회사에서 next.js를 배우라고해서 인강을들어아햐는데 타입스크립트 모르고 react.js만 알아도 수강하는데 아무지장없을까요?

더보기 버튼 클릭 시 페이지 이동 (page=1 -> page=2) + 무한스크롤 구현 기능 구현이 필요해서 아래와 같이 구현해보았는데 어쩔땐 되고 어쩔땐 안되더라구요...만약 데이터를 10개씩 불러올 경우 10개 -> 20개 -> 30개 -> 40개 이러다 갑자기 다시 10개가 됩니다...원래 useInfiniteQuery 무한스크롤 구현 시 페이지이동하면서 기존 데이터를 보존하는 방법이 불가능한건지 아님 제가 코드를 잘못짠건지 궁금합니다...  const useInfiniteQuery = (params: Params) => { const searchParams = useSearchParams() const page = searchParams.get('page') return useInfiniteQuery({ queryKey: [CONTENTS_KEY, params], queryFn: ({ pageParam }) => { return getContentsApiClient({ ...params, ...outLinkParams(), page: Number(pageParam) }) }, getNextPageParam: (lastPage, _, lastPageParam) => { // 마지막 page라면 hasNextPage가 false const lastPageNumber = Math.ceil(lastPage.totalCount / (params.size || 10)) if (lastPageNumber === lastPageParam) { return undefined } return Number(lastPageParam) + 1 }, initialPageParam: Number(page) || 1, placeholderData: keepPreviousData, }) }  //더보기 버튼 // 클릭 시 페이지 이동 function AddMore({ fetchNextPage, totalPages }: { fetchNextPage: () => void; totalPages: number }) { const searchParams = useSearchParams() const pathname = usePathname() const params = new URLSearchParams(searchParams.toString()) const pageNo = Number(searchParams.get('page') || 1) params.set('page', (pageNo + 1).toString()) if (totalPages === pageNo) return null return ( <div className={cn('wrap')}> <Link className={cn('link')} href={`${pathname}?${params.toString()}`} onClick={fetchNextPage} scroll={false} > <span className={cn('label')}>더보기</span> </Link> </div> ) } 강의 잘 듣고있습니다. 감사합니다! 참고로 백엔드는 문제가 없습니다.

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!   코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다!

안녕하세요. 강의 잘 보고 있습니다.웹 페이지 중 List영역의 검색창에 단어를 입럭할 때 마다 getAnalyzed() 함수가 호출되는 이유가 궁금합니다.저의 부족한 실력으로나마 추측을 했을 때, 검색창에 해당하는<input>태그에 입력이 발생할 때 마다 search라는 내부 state의 값이 바뀌게 되어 랜더링이 다시 진행되고, 이에따라 getAnalyzed()가 실행되는 것 같습니다.답변 기다리겠습니다. 감사합니다!

https://developers.tosspayments.com/ 언어별 코드 예제를 복사 붙여넣기만 하면 연동 끝 이라고 방식이 변경된것 같습니다.확인 부탁드립니다.

참 신기하게도 tailwindcss 공식문서에 나온대로 그대로~~~ 했는데 아이러니 하게도<h2 className="text-8xl font-bold underline">hello world</h2>해당 코드에서 font-bold랑 underlilne은 잘만 적용되는데 text-8xl만 적용이 안되네요 왜 이러는건지 전 이해가 안되네요 따로 styled-component에서 globalStyle을 적용해서 작업중이라서 예상은 되는데 어떻게 수정해도 답이 안보이네요

remark-gfm 설치 이후 모든 css 가 망가지고 글자와 이미지만 렌더링 되는데 뭐가 문제일까요? global css 에서 import 한것도 아니고 영상과 같이 Plugin 으로 했어요.next-mdx-remote 깃헙 보니까 업데이트도 1년 지났고 버그 로그 많던데 그거 때문이려나요? https://github.com/hashicorp/next-mdx-remotenext 공식문서에서도 next-mdx-remote 는 더이상 없고 next-mdx-remote-client 만 있던데 그거 쓰면 되는걸까요? 

전부 다 따라하면서 배우고 있습니다!다만, 마크업 파트 에서 이렇게 글자 색으로 인해 가독성이 떨어지는데 마크업 파트 속성을 바꿀 방법은 없을까요?

안녕하세요, 선생님. 아직 디스코드에 Next.js 블로그 결과물 공유하면 실용적인 블로그 소스코드 받을 수 있는 이벤트 진행하고 있나요?

현재 강의 수업노트에 첨부된 ISR 공식 문서 링크에 접속하면 SSR 관련 문서로 표시되고 있습니다.문서 링크가 아래로 변경된 것으로 보입니다.https://nextjs.org/docs/pages/guides/incremental-static-regeneration

최신 버전 쓰고 있어요expo push token이 만료시간이 따로 있나요? 지금은 프로젝트에서 하루에 한번씩 앱 시작할때마다 토큰 갱신하고 있는데 이렇게 할 필요가 있는지 궁금해요

현재 expo 제일 최신버전인 53.0.20 버전으로 강의를 듣고있습니다.강사님처럼 const router= useRouter() 말고import {router} from 'expo-router' 에서router.push 이런거도 동일하게 동작하나요?

안녕하세요 강의 잘듣고있습니다 선생님 다름이 아니라 제 화변 볼때보다 선생님 화면볼때가 뭔가 눈이 편안하고 폰트도 눈에 잘들어오는 느낌인데 어떤 테마와 폰트인지 여쭤봐도될까요...

강사님처럼 메인 탭으로 열리지 않고, 좌측 하단에 작게 열리고 작게 열린 부분에서 마우스 우측 클릭해도 이전 버전으로 돌아가는 메뉴가 안 뜹니다.

Request failed with status code 404 AxiosError: Request failed with status code 404 at settle (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:1702:12) at XMLHttpRequest.onloadend (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:338:66) at Axios.request (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:832:41)저의 경우는, client에서 npm install http-proxy-middleware@2 로 다운로그레이드를 한 뒤 해결되었습니다. @3 버전이 깔렸는데 cra와 이게 호환성 이슈가 있는 것 같습니다.

1000L * 60 * 30 해야 30분아닌가요 1초 * 60 -> 1분1분 * 30 -> 30분

62. 검색 엔진 최적화(SEO)에서 보면상세페이지의 메타데이터 설정하는 부분에서이전시간에 적용한 인터셉트/패러렐 라우트 때문인지모달 형태로 뜨면 book/[id]에 설정한 메타 태그가 적용되지 않고, 최상위 (with-searchbar) 부분에 적용한 부분이 뜹니다.하지만 새로고침해서 최초 접속 상태로 상세페이지에 접근하면 book/[id]에 설정한 meta태그랑 오픈그래프가 보입니다!이게 의도하신 부분 맞을까요? 어차피 링크로 공유할때는 맨 처음 접속하는 것과 마찬가지니까 크게 상관 없는 부분일까요!?강의 잘 수강하고 있습니다! 감사합니다. 

해설 강의를 보다가 궁금한 점이 생겨 글 남겨봅니다. <button key={btn.id} className={cx("button", { active: activeStates[btn.id], disabled: btn.isDisabled, highlight: btn.id === 2, })} onClick={() => handleToggle(btn.id, btn.isDisabled)} // disabled={btn.isDisabled} <- 따로 안쓰신 특별한 이유가 있는걸까? > {btn.icon} {btn.label} </button> // 토글 함수 const handleToggle = (id: number, isDisabled: boolean) => { if (isDisabled) return; setActiveStates((active) => ({ ...active, [id]: !active[id], })); };disabled처리를 해도 스타일과 상태값이 변경되는 문제로 토글함수에 값을 전달해서 isDisabled가 true이면 return되게 작성하셨는데 button에 disabled 속성을 사용하지 않으시고 따로 isDisabled를 전달해 매개변수로 받아 처리하신 이유가 있나요?

안녕하세요 강사님. 강의자료 소스코드 메소드 각각에 대한 세부적인 설명은 자세히 없는 것 같아 질문드립니다. 혹시 틀리거나 부족한 부분이 있다면 설명 부탁드립니다!https://gist.githubusercontent.com/allieus/6134497ba5e0f0aa541a18b700fe9a0e/raw/212aff65dd66095455b2bc87564470f4ba8a5219/IPv4AddressIntegerField.py1. to_python, get_prep_value, from_db_value 세가지 메소드의 공통점은 value값을 적절한 형식으로 변환하는 것 같은데요. 차이점은 아래와 같이 이해하면 될까요?-get_prep_value: save(), create() 메소드 사용시 호출되는 내부 메소드-from_db_value: 데이터베이스에서 오브젝트/쿼리셋을 가져올 때 호출되는 내부 메소드-to_python: ModelForm을 통해 입력받거나 모델.<필드명> = "192.168.56.1" 처럼 직접 필드값을 할당할 때 호출되는 내부 메소드.