prefetch를 꼭 써야하는 건가요?써야할 때와 안써도 될 때가 있는건가요??

react-query ssr 설정하기인데 어느 부분이 ssr 설정인지 잘모르겠습니다 어느부분인가요??export async function getPostRecommends({ pageParam }: Props) { const res = await fetch( `http://localhost:9090/api/postRecommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, } ); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } return res.json(); }

조금 있다가 잘 짜는법에 대해 설명한다 하였는데, 제가 놓친것인지 다음강의에 나오는 내용인지 못들은 기분입니다. 일단 다음 강의 보다가 까먹고 놓치지 않기 위해 문의합니다. 우선 앞에 ""으로 표기한것은 함수 이름 설정하듯이 자기가 의도한대로 넣을 수 있고 몇개를 입력하든 상관 없는 것인가요?params 같은 경우는 마지막에 한번만 객체나 특정 타입 형식으로 넣을 수 있는 것인가요?추가적으로 export default function SearchResult({searchParams}:Props){ ... 에서searchParams가 객체로 한번 더 묶여서 정의되어 들어가는 이유는 그냥 편의상 그런 것일까요?type SearchParams= { q: .....} 로 정의하고 export default function SearchResult(searchParams:SearchParams){ ... 같은 식으로 넣어도 문제 없이 진행할 수 있는지, 아니면 {}객체로 한번 더 묶는 이유가 있는 것인지 궁금합니다. 

강의이기 때문에 react-queary, zustand, context.API 세가지를 보여주지만 실제로는 하나만 쓰면 된다하여서 처음 강의에 나오던 context.API로만으로 코드를 짜려고 다른 것들은 대충 넘겨 들었는데요.어느정도 코드 짜보다가 react-query 부분을 다시 듣고나서보니 react-query는 또 느낌이 다른것 같네요.그런데 혹시 서버액션 쪽에서 첫번째 동작 이후에 쓰로틀이 들어가게 코드를 짜두면 context내의 서버 데이터 갱신할 때도 react-queary의 stale 같은 기능을 만들 수 있는 거겠죠? 해당 기능은 그렇게 구현한다고 하여도, 지금 앞뒤로 강의 다시 들어보니 캐싱 관리같은건 또 다른 차원이거 같아서 결국에 react-queary를 병행해야만 하는건가 싶네요.다른 질문 답변을 보니 강사님도 react-queary는 데이터 패칭용으로 다른 상태관리 라이브러리와 병행해서 쓰시는것 같고요.

안녕하세요 선생님강좌를 듣다가 궁금한게 생겨서 질문드립니다. 사진을 첨부했는데요,사진처럼 현재 작성하지도 않은 타입을 회색글씨로 미리 보여주는? 라이브러리 같은데 이름을 알고싶습니다.수업 내용에 관한 질문이 아니라 죄송합니다. 

안녕하세요 !강의를 보다가 궁금한 부분이 생겨서 질문 드립니다 ! 상위 QueryProvider를 만들 때 ReactQueryStreamedHydration로 미리 감싸면 강의에서 소개 해준 dehydrate(queryClient)로 감싸는 작업을 하지 않아도 되나요? <QueryClientProvider client={client}> <ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration> </QueryClientProvider> dehydrate와 HydrateBoundary가 정확히 어떤 역활을 하는지 궁금합니다 const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <MoreListView keyword={keyword} /> </HydrationBoundary> ); prefetchInfiniteQuery의 queryFn과 useInfiniteQuery의 queryFn은 똑같이 작성해야 하나요??만약 이렇게 하면 안된다면 전달하고자 하는 매개변수를 client component에서 전달하고자 할 때 어떻게 해야할 지 고민이 됩니다. (전달하는 상태 값은 useContext로 만든 상태 값입니다..)// prefetch 부분 const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryFn: fetchMoreList, });// client component 부분 useInfiniteQuery<Dummy[], Object, InfiniteData<Dummy[]>, [_1: string, _2: string], number>({ queryFn: ({ pageParam, queryKey }) => fetchMoreList({ pageParam, queryKey, sort }), });

style 폴더를 따로 만들어서 관리해도 되나요?

안녕하세요src>app>not-found.tsx에 만들었는데, 잘못된주소로 갈 경우 커스터한 NotFound가 렌더링되지않는 문제가 있습니다..혹시 따로 경로설정을 해야하는것일까요?? 

page.tsx에서 Fragment를 사용해서 left와 right를 감싸주셨는데 이 때, page.module.css의 .container 스타일이 자동으로 적용이 되는 건가요 ??export default function Main() { return ( <> <div className={styles.left}> {/* Image -> 넥스트가 알아서 이미지 최적화 시켜줌 */} <Image src={zLogo} alt="logo" /> </div> <div className={styles.right}> <h1>지금 일어나고 있는 일</h1> <h2>지금 가입하세요.</h2> {/* a 태그 대신 Link 사용 -> 페이지가 새로고침 되어 넘어감, 리액트나 넥스트에서는 새로고침 되는 행동 X*/} <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기 </Link> </div> </> ); }저는 코드를 똑같이 작성 했는데도 이렇게 다른 스타일이 적용되어 column 형식으로 나누어져 보입니다. 그래서 직접적으로 스타일을 적용시키기 위해export default function Main() { return ( <div className={styles.container}> <div className={styles.left}> {/* Image -> 넥스트가 알아서 이미지 최적화 시켜줌 */} <Image src={zLogo} alt="logo" /> </div> <div className={styles.right}> <h1>지금 일어나고 있는 일</h1> <h2>지금 가입하세요.</h2> {/* a 태그 대신 Link 사용 -> 페이지가 새로고침 되어 넘어감, 리액트나 넥스트에서는 새로고침 되는 행동 X*/} <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기 </Link> </div> </div> ); }이렇게 최상위 div에 className으로 container를 지정해주었는데구조가 이런식으로 변경이 되었고, right의 내용이 다 나타나지 않아서 적용이 잘 된 것 같진 않는데 어떻게 해결하면 될까요 ?

안녕하세요 제로초님!1) 백엔드에 데이터 요청 시 필요한 쿠키(로그인 후 발급되는 액세스토큰)을 브라우저에 저장해서 사용해야한다고 하셨고, 저 또한 이전에 리액트로만 개발했을 때 그렇게 진행했었는데요,next.js가 아직 서툴고 next-auth의 역할이 완전이 이해가 되지 않아서 조금 헷갈리는 부분이 있습니다. 저는 백엔드에서 발급해준 액세스토큰을 auth.ts jwt callbacks를 통해 user값에서 가져와 token에 저장한 뒤, session callbacks에서 이 token을 session에 저장해 놓았고 만료된 토큰 갱신하는 로직까지 callbacks에서 설정해놓았는데요. 이렇게 구현을 해도 되는 건가요? 보안에 문제가 있을까요? 만약 쿠키에 저장해서 사용하는 방식으로 바꿔야한다면 만료된 토큰의 갱신처리 즉 refreshToken요청 코드는 어디에 작성을 해야하나요..? (리액트에서는 axios를 사용해서 axios.interceptor.response에서 401 jwt만료 에러가 발생시에 refreshtoken을 요청하는 방식으로 구현했었습니다.) 2) 그리고 회원가입과 같은 POST 요청시에 form action을 이용해 server action을 사용하는 것과 form onsubmit으로 post 요청하는 것과 어떤 차이가 있는 건가요..? server action으로 post 요청시 넘겨주는 formData를 찍어보면 JSON형식이 아니라 백엔드에서 type오류가 넘어오는데 server action을 사용하려면 백엔드도 같이 설정을 해줘야하나요?

안녕하세요 제로초님 강의 수강중에 질문이 있어서요강의에 10분08초를 확인해보시면 response가 성공 실패 유무를 떠나서 await되버려서 catch로 넘어가지 않는 이유는 무엇일까요 ?로그인모달은 클라이언트에서 처리하고 회원가입은 서버액션으로 처리한다는 설명을 영상 후반부에 해주셨는데 이러한 경우와 연관이 있는 걸까요 ? 구글링해도 잘 확인이 안되어서요! 항상 감사합니다.

안녕하세요 제로초님! 로그인 관련하여 질문드립니다!1) 백엔드에서 response로 넘겨주는 access token이 있어서 이걸 session에 넣어 api 요청할 때마다 헤더에 담아 인증 하려고 하는데요, 로그인 후 next-auth signIn함수를 통해 자동으로 authjs.session-token이 생성되는데 그럼 이 토큰은 언제 쓰이는 건가요? 백엔드에서 넘겨주는 토큰이 있어도 next-auth를 사용해도 되는 건가요?2) 로그인 기능과 관련해서 https://next-auth.js.org/v3/tutorials/refresh-token-rotation를 참고해 토큰 갱신 로직을 jwt callbacks 안에 구현을 해보았습니다. client 에서 session을 호출할 때마다 jwt callback이 실행되기 때문에 로그인 시 저장해 놓은 토큰(accesstoken)이 만료되었는지를 확인할 수 있다고 생각했고 위처럼 구현했습니다. 토큰이 만료가 되면 retun token대신 refreshAccessToken(token) 함수를 호출해 새로운 토큰을 return 해주었고, response도 정상적으로 옵니다.다만 jwt callback이 동시간대에 한번만 실행되는 것이 아니라 여러번 실행이 되고 있고, session callback에서도 업데이트된 token이 확인될거라 생각했지만, session callback에서는 예전 토큰이 조회가 되는 상황입니다. next-auth callbacks가 jwt -> session 순으로 호출되는 것으로 알고 있어서 jwt에서 업데이트된 token을 리턴해주면 session에서 이를 받을 거라고 생각했는데.. 왜 업데이트가 되지 않는 건지 궁금합니다.

안녕하세요 선생님의 강의를 듣고 배워서 제 프로젝트에 적용시키고 있습니다.제 프로젝트는 naver map api를 사용해서 지도 서비스를 만드는 프로젝트인데요.지도위에 마커를 눌렀을 때 모달이 뜨는 기능을 구현하는 중 인터셉팅 라우트를 사용해야할지그냥 일반 모달을 사용해야할지 고민이 되서 질문드려요.인터셉팅 라우트를 써보고 싶긴하지만 제가 만들 기능엔 적합한 방법이 아니라 생각되는데제 생각이 맞는건지 확인하고 싶습니다.

제가 강의를 본 이후에 개인적으로 기능 따로 만들면서 일단 백엔드 공부가 안된 상태라, 간단히 제가 당장 필요한 것들은 할 수 있는 수준에서 사용하려고 포켓베이스라는 오픈소스 DB를 활용해서 진행하고 있는데요.로그인 관련 일부 컴포넌트 관련해서 여기서 보여준 context 기능을 적용하려고 강의 영상 참고해서logProvider.tsx는 아래처럼 적고"use client"; import PocketBase from 'pocketbase'; import {createContext , ReactNode, useState} from 'react'; const pb = new PocketBase('http://localhost:8090'); export const LogContext = createContext( { IsLogIn: pb.authStore.isValid, setLog: (log : boolean) => {}, }) type Props = {children: React.ReactNode}; export default function LogProvider({children}:Props) { const [IsLogIn, setLog] = useState(pb.authStore.isValid); return ( <LogContext.Provider value={{IsLogIn: pb.authStore.isValid, setLog: (log: boolean) =>{} }}> {children} </LogContext.Provider> ) }로그인 버튼 컴포넌트에서const LoginButton = () => { const [loading, setLoading] = useState(false); const router = useRouter(); const {IsLogIn, setLog} = useContext(LogContext); // const { isLoggedIn } = useContext(AuthContext); let logTest = pb.authStore.isValid; const handleClick = async () => { if (IsLogIn) { //로그아웃 실행 try { // console.log(IsLogIn); //기존에 로그인 된 상태라면 여기서 true pb.authStore.clear(); router.replace("/") //로그아웃 시 홈페이지로 이동 } catch (error) { console.error(error); } logTest = pb.authStore.isValid; setLog(pb.authStore.isValid); } else { //로그인 실행 setLoading(true); try { // console.log(IsLogIn); //기존에 로그아웃 된 상태라면 여기서 false const authData = await pb.collection('users').authWithOAuth2({ provider: 'google' }); console.log(authData); // 인증 데이터 확인 // 인증 데이터를 이용하여 사용자 정보 처리, 토큰 저장 등 로직 추가 } catch (error) { console.error(error); } finally { setLoading(false); logTest = pb.authStore.isValid; setLog(pb.authStore.isValid); //디버깅용 console.log("로그인 상태 확인") console.log(IsLogIn); console.log(pb.authStore.isValid); console.log(setLog) console.log(setLog(pb.authStore.isValid)); console.log(logTest); console.log(setLog(logTest)); } } }; return ( <div > <button className='logBox' onClick={handleClick} disabled={loading}> <img src="/Google.png" width={20} height={20} style={{ position: "absolute", opacity: 0.8, marginLeft:0, marginTop: 3}} /> <div className="flex-LogButton" > {IsLogIn ? '로그아웃' : (loading ? '로그인 중...' : ' 로그인')} </div> </button> </div> ); }; 이런 식으로 작성을 하였습니다. 그런데 버튼기능 마지막에 디버깅용으로 넣은 console값을 보니 로그인하면 로그인은 정상적으로 진행되는데 context로 공유하고 있는 IsLogIn 값은 바뀌질 않네요... 부모 컴포넌트에서 자식컴포넌트로의 공유는 제대로 되는것으로 보입니다. 자식에게서 부모로 가는게 setLog에서 타입문제로 입력이 안되는 듯 한데, 이건 그냥 제가 타입스크립트 개념이 약해서 타입 설정을 어떻게 할지 몰라서 생기는 문제 같네요;;아래는 디버깅용으로 넣은 7줄의 콘솔로그 기록입니다.로그인 상태 확인LogButtonSNS.tsx:52 falseLogButtonSNS.tsx:53 trueLogButtonSNS.tsx:54 (log)=>{}LogButtonSNS.tsx:55 undefinedLogButtonSNS.tsx:56 trueLogButtonSNS.tsx:57 undefined콘솔 로그 기록을 보면 logProvider.tsxsetLog: (log : boolean) => {}, 함수를 통해 boolean정보를 새로 넣어도 공유하는 IsLogIn의 value가 바뀌지 못하고 undefined라고 출력되네요. 어떻게 수정해야 할까요...

위 3개가 동등 선상에 있는지는 모르겠습니다만, 강사님의 위 3개 혹은 그 외 중에서 강사님이 프로젝트하실때 선호하시는 라이브러리는 무엇인지 궁금합니다. 그리고 현업에서 대세 혹은 추세가 어떻게 되는지도 궁금합니다. ex) redux에서 요즘에는 다른곳으로 넘어가는 추세다 와 같은 ... 

암만 찾아봐도 이해가 안되는 부분이 있습니다.리액트 쿼리의 데이터 프리패치에 대한 질문입니다.제가 이해한 매커니즘은사용자가 페이지에 접속한다.리액트 쿼리 프리패치 코드를 가진 프론트서버에서 서버측으로 데이터 요청을 보낸다.데이터를 response받은 프론트서버에선 데이터를 html문서에 포함시켜 완성된 웹페이지를 서버에서 렌더링한다.완성된 웹을 사용자에게 전해주고, 프리패치된 데이터는 하이드레이션 시켜 캐시시킨다.(데이터를 사용자측면에서 재사용하기 위해) 이렇게 이해하는게 맞나요..?서버에서 데이터를 가지고 ssr을해서 사용자에게 보내주고, 그 데이터를 또 캐싱시킨다.? 그리고 하이드레이션 바운더리를 설정하는 위치에대한 규칙이 있나요? 어차피 하이드레이션 시키면 프로바이더안에서는 다쓸수있다면 모든 데이터관련 코드를 최상단 레이아웃에서 다 하이드레이션 시켜도 되는부분인가요?(물론 관심사 분리를 위해선 나누는게 좋을법하지만요) 그리고 리액트 쿼리에서의 하이드레이션과 next.js에서 ssr된 웹을 client에 js번들과함께보내주며 동적인 웹을만들기위해 하이드레이션 시킨다는 다른개념이다. 맞나요..?

이 영상에서 보고 이해한대로 만들다가 잘 안되는 부분이 있어서, 제가 이해한게 맞는지 질문드립니다. 영상에서 provider랑 tap.tsx랑 어느 위치에 있든지 그건 상관없이 provider에서 쓰는 변수와 tap.tsx에서 쓰는 변수만 맞추고 page.tsx에서 필요한 부분에 <설정한 프로바이더> 태그만 위아래로 감싸면 되는것이 맞나요?

수정 전수정 후

현재 metadata 까지 동적으로 구성했는데sitemap.xml이 적용되지 않더라구요 ㅠㅠ공식문서에 나와있는대로 해당 경로에 가도 사이트맵이 생성되지 않았는데 따로 만드는 방법이 있을까요?sitemap.xml

next.js에서의 fetch는 fetch api와 다른 것과, cache: 'no-store'를 사용하면 getServerSideProps를 사용한 것과 동일한 것도 이해를 했습니다. 근데 만약 fetch를 사용하지 않고 axios를 사용한다면 어떤 차이점이 있는지 궁금합니다.질문 : axios를 사용하면 next.js에서 어떻게 SSR 처리가 되는 걸까요? (next.js fetch를 쓰지 않는데 어떻게 SSR이 처리가 되는지)