안녕하세요. 제로초님 좋은 강의 감사합니다. 해당 강의에서 fresh 상태일 때는 새로고침을 해도 서버에서 데이터를 가져오지 않고 캐시된 데이터를 사용한다고 하셨습니다. 그래서 fresh 상태일 때 새로고침을 하여 FollowRecommendSection를 트리거 하였고 해당 API가 요청이 되는지 보았습니다.export default function FollowRecommendSection() { const { data } = useQuery<User[]>({ queryKey: ['users', 'followRecommends'], queryFn: getFollowRecommends, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); return data?.map((user) => <FollowRecommend user={user} key={user.id} />); } export async function getFollowRecommends() { const res = await fetch(`http://localhost:9090/api/followRecommends`, { next: { tags: ['users', 'followRecommends'], }, cache: 'no-store', }); ... } 그런데 개발자도구 네트워크 탭에서는 밑에 사진과 같이해당 API가 다시 요청되는것을 확인할 수 있었습니다.fresh라 할지라도 API 요청은 항상 이루어지며 데이터만 캐시된 것을 ?? 가져오는 것인지 궁금합니다.  감사합니다. 

안녕하세요 섹션 1 듣고 혼자 해보다가 궁금한 게 생겨서 질문드립니다.기존 사이트는 왜 "/login"으로 진입하면 "/i/flow/login"로 리다이렉트하게 했을까요?단순하게 생각하면 그냥 "/login", "/signup"에 페이지를 두던가 아니면 "/i/flow/login", "/i/flow/signup"만 사용하도록 하면 리다이렉트 로직 필요없이 더 깔끔할 것 같은데 말이죠.또 의아한 것은 기존 사이트에서 '/signup' url로 진입하면 '/i/flow/signup'으로 리다이렉트하는데 계정 만들기 버튼은 로그인과 다르게 href를 /i/flow/signup'으로 해두었네요. 실수인가..물론 제로초님은 기존 사이트를 최대한 그대로 구현하려고 하신 것 뿐이니까 당연히 정확한 의도를 알 수 없으시겠지만 현업자 입장에서 추측이 가는 부분이 있으신가 싶어 질문드립니다!

데이터패칭을 리액트쿼리로하고 데이터 공유를 zustand로 하는데요!만약 데이터 패칭을 해서 받아온 데이터를 전역으로 공유해서 사용하고싶으면 어떤식으로 처리되는게 가장 좋은 방법인가요??

사진 상세보기에서 오른쪽 UI에 댓글 달기랑 게시글이 있는데 이 때 게시글 눌렀을 때 단순 도메인만 바뀌고 이동이 안되더라구요. 그래서 아래 코드처럼 PostArticle 컴포넌트 에서 router.refresh() 넣어서 처리했는데 이렇게 해도 될까요? const router = useRouter(); const handleOnClickCapture = () => { router.push(`/${post.User.id}/status/${post.postId}`); router.refresh(); // 추가 } return ( <article onClickCapture={handleOnClickCapture} className={style.post}> { children } </article> )   

현재 강의에서 @modal 컴포넌트에 [photoId] / page.tsx 에서 아래 코드를 작성후 hydrationBoundery로 감싼 후 게시글의 사진을 눌르면 모달이 나와야 하는데 아래의 오류가 발생합니다. 도저히 해결하지 못해서 ch3-2를 클론해서 실행시켜보았는데도 똑같이 이런 에러가 나옵니다. 그래서 "use client"컴포넌트로 만들어 준 후 QueryClientProvider 로 감싸주었더니 해결되었습니다. 근본적인 문제가 뭔지 모르겠네요 ㅠㅠㅠ"use client" import CommentForm from "@/app/(afterLogin)/[username]/status/[id]/_component/CommentForm"; import ActionButtons from "@/app/(afterLogin)/_component/ActionButtons"; import style from './photoModal.module.css'; import PhotoModalCloseButton from "@/app/(afterLogin)/@modal/[username]/status/[id]/photo/[photoId]/_component/PhotoModalCloseButton"; import {dehydrate, HydrationBoundary, QueryClient, QueryClientProvider} from "@tanstack/react-query"; import {getSinglePost} from "@/app/(afterLogin)/[username]/status/[id]/_lib/getSinglePost"; import {getComments} from "@/app/(afterLogin)/[username]/status/[id]/_lib/getComments"; import SinglePost from "@/app/(afterLogin)/[username]/status/[id]/_component/SinglePost"; import React from "react"; import Comments from "@/app/(afterLogin)/[username]/status/[id]/_component/Comments"; import ImageZone from "@/app/(afterLogin)/@modal/[username]/status/[id]/photo/[photoId]/_component/ImageZone"; type Props = { params: { id: string } } export default async function Default({params}: Props) { const {id} = params; const queryClient = new QueryClient(); await queryClient.prefetchQuery({queryKey: ['posts', id], queryFn: getSinglePost}); await queryClient.prefetchQuery({queryKey: ['posts', id, 'comments'], queryFn: getComments}); const dehydratedState = dehydrate(queryClient); return ( <div className={style.container}> <QueryClientProvider client={queryClient}> <HydrationBoundary state={dehydratedState}> <PhotoModalCloseButton/> <ImageZone id={id} /> <div className={style.commentZone}> <SinglePost id={id} noImage /> <CommentForm/> <Comments id={id} /> </div> </HydrationBoundary> </QueryClientProvider> </div> ); }

안녕하세요 제로초님 강의 잘보았습니다!본론부터 말씀드리자면 2가지 고민이 있습니다. 하나는 msw component가 필요한지 궁금합니다.왜냐하면 현재 express로 하고 있어서 msw component가 없어도 mock 서버(express)를 키면 작동하는데 msw component가 관여하지 않은것 같아서요~ 두번째는 localhost 9090 외에 실제로 사용하는 api를 모킹하고 싶은데 어떻게 해야할지 고민이 됩니다.예를 들어주소가 naver.com이라면 이 백엔드 api를 넣는 방법을 모르겠습니다.~! 감사합니다!

이미지 상세 보기 눌렀을때 모달창이 켜지고, 닫기 버튼 누르면router.back() 으로 처리하셨는데이 때 문제점이 게시글 위치가 다시 맨 위로 올라가게 되더라구요. 만일 닫기 버튼 눌러도 제가 스크롤 해서 봤던 게시글 위치 그대로 보여질려면 어떻게 처리하면 좋은가요?

type Props = { postId: number; userName: string, userId: number; }위 코드처럼 type에서는 끝에 ; 혹은 , 둘 다 섞어서 써도 괜찮은가요?

auth.ts 관련 코드입니다. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/login", }, events: { // signOut(data) { // console.log(data); // }, }, callbacks: { session: async ({ session }) => { console.log("session", session); return session; }, }, providers: [ CredentialsProvider({ name: "credentials", async authorize(credentials) { const { email, password } = credentials; const res = await axios.post( `${process.env.NEXT_PUBLIC_LOCAL_API_URL}/api/login`, // `${process.env.NEXTAUTH_URL}/api/login`, { email, password, } ); let setCookie = res.headers["set-cookie"]; let stringCookie; setCookie && setCookie.map((item) => (stringCookie = item)); if (setCookie && stringCookie) { const parsed = cookie.parse(stringCookie); cookies().set("connect.sid", parsed["connect.sid"], parsed); // 브라우저에 쿠키 심기 } if (!res.data) { return null; } const data = res.data; if (data) { return { email: data.email, nickName: data.nickName, area: data.area, location: data.location, distance: data.distance, ...data, }; } else { return null; } }, }), GitHubProvider({}), NaverProvider({}), GoogleProvider({}), ], secret: process.env.NEXTAUTH_URL, });auth.ts에서 log를 찍어보았을 때는 auth.ts를 아예 타지 않습니다. (로그인 submit 을 했을 시 ) 또한 현재 오류 Network에서 이와 같은 오류가 계속 발견되어서 그리고 쿠키에는 아무것도 담기지 않습니다. 분명 몇 일 전까지만 해도 잘되던 녀석이었는데 갑자기... 이러한 오류로 안됩니다. package의 버전은 아래와 같습니다. "@auth/core": "0.19.0", "next-auth": "^5.0.0-beta.3", 이러한 부분은 왜 계속 오류가 나는 것인지 궁금합니다.   

_lib 폴더는 어떤 용도로 구분되어져 있는 폴더일까요??

z-com\src\app\(beforeLogin)\_component\SignupModal.tsx파일에서 useFormState(OnSubmit, {message: null }); 해당 부분에서Type error:No overload matches this call.Overload 1 of 2, '(action: (state: { message: string; } | undefined) => { message: string; } | Promise<{ message: string; } | undefined> | undefined, initialState: { message: string; } | undefined, permalink?: string | undefined): [state: ...]', gave the following error.Argument of type '(prevState: any, formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to parameter of type '(state: { message: string; } | undefined) => { message: string; } | Promise<{ message: string; } | undefined> | undefined'.Target signature provides too few arguments. Expected 2 or more, but got 1.Overload 2 of 2, '(action: (state: { message: string; } | undefined, payload: FormData) => { message: string; } | Promise<{ message: string; } | undefined> | undefined, initialState: { message: string; } | undefined, permalink?: string | undefined): [state: ...]', gave the following error.Type 'null' is not assignable to type 'string'.ts(2769)에러가 발생합니다.제로초님 github 파일 3-2에 있는 부분을 복붙해서 하고 있는데 에러가 발생했습니다. 타이핑 에러는 아닌 것 같습니다.찾아보니 함수에 들어오는 매개변수의 타입이 예상한 타입과 일치하지 않을 때 발생한다고 하여서 message의 type을 any로 바꿔보아도 에러가 납니다 ..React 버전은 18버전이고 nextjs 는 14.0.4 버전입니다.어떤 부분을 수정해야 할지 모르겠습니다...  

안녕하세요 제로초님.이제 막 Next 강의 시작해서 기초부터 보고 있는데 이해가 되지 않는 부분이 있어 질문드립니다.next/link에 관한 부분인데요.공식문서보니까 next/link 사용시에 클라이언트 사이드 라우팅이 된다고 하는데그 말인 즉슨 link에 해당하는 페이지 컴포넌트의 자바스크립트를 미리 받아놓고 사용자가 Link로 이동할 때 클라이언트에서 페이지를 생성한다는 뜻으로 이해했는데요. 그럼 이동하는 페이지 컴포넌트에 console.log("하이")가 있으면 클라이언트, 즉 브라우저에 console.log가 출력되어야하는 거 아닌가요? 하지만 제 예상과 다르게 Link로 이동한 페이지 컴포넌트의 console.log는 서버에 출력되네요. 1. "use client"를 명시하지 않은 컴포넌트는 모두 서버에서 렌더링 되는 컴포넌트다2. Link로 이동하면 클라이언트 사이드 렌더링을 한다. 이 두 가지 개념이 어떻게 공존할 수 있는지, 위에 설명드린 케이스와 함께 잘 이해가 되지 않네요ㅜ

Invalid src prop (https://loremflickr.com/640/480?lock=5661426936971264) on `next/image`, hostname "loremflickr.com" is not configured under images in your `next.config.js` faker를 통해 https://loremflickr.com 에서 외부 이미지를 가져올 때 위 오류 발생하시는 분들은 next.config.js 또는 next.config.mjs에 아래와 같이 추가해주시면 됩니다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "loremflickr.com", port: "", pathname: "/640/480/**", }, ], }, }; export default nextConfig;

// http.ts import { createMiddleware } from "@mswjs/http-middleware"; import cors from "cors"; import express from "express"; import { handlers } from "./handlers"; const app = express(); const port = 9090; app.use( cors({ origin: "http://localhost:3000", optionsSuccessStatus: 200, credentials: true, }) ); app.use(express.json()); app.use(createMiddleware(...handlers)); app.listen(port, () => console.log(`Mock server is ruuning on port: ${port}`)); // handlers.ts import { http, HttpResponse } from "msw"; const CalendarData = [ { id: 0, date: "2024-03-01", memo: [ { id: 0, text: "식사", }, { id: 1, text: "운동", }, ], }, { id: 1, date: "2024-03-02", memo: [ { id: 0, text: "연차", }, { id: 1, text: "회의", }, ], }, { id: 2, date: "2024-03-03", reservation: 0, canceled: 0, noShow: 0, memo: [], }, { id: 3, date: "2024-03-04", memo: [ { id: 0, text: "공부", }, { id: 1, text: "휴식", }, ], }, { id: 4, date: "2024-03-05", memo: [], }, { id: 30, date: "2024-03-31", memo: [ { id: 0, text: "파티", }, { id: 1, text: "운동", }, ], }, ]; export const handlers = [ http.get("http://localhost:3000/api/calendar", ({}) => { return HttpResponse.json(CalendarData); }), ]; // browser.ts import { setupWorker } from "msw/browser"; import { handlers } from "./handlers"; const worker = setupWorker(...handlers); export default worker; // MSWComponent.tsx "use client"; import { useEffect } from "react"; export const MSWComponent = () => { useEffect(() => { if (typeof window !== "undefined") { if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { require("@/mocks/browser"); } } }, []); return null; }; // msw api 요청 함수 export async function getCalendarData() { const res = await fetch(`http://localhost:3000/api/calendar`, { next: { tags: ["calendar"], }, cache: "no-store", }); if (!res.ok) { throw new Error("Failed to fetch calendar data"); } return res.json(); } // layout.tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import PortalWrap from "@/components/PortalWrap/PortalWrap"; import Toast from "@/components/Toast/Toast"; import { MSWComponent } from "@/mocks/MSWComponent"; import SSRQueryClientProvider from "@/libs/ReactQuery/SSRQueryClientProvider"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}> <MSWComponent /> <SSRQueryClientProvider> {children} <PortalWrap /> <Toast /> </SSRQueryClientProvider> </body> </html> ); } // .env NEXT_PUBLIC_API_MOCKING=enabled NEXT_PUBLIC_MODE=local// package.json { "name": "planner", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "mock": "npx tsx watch ./src/mocks/http.ts" }, "dependencies": { "@tanstack/react-query": "^5.14.6", "classnames": "^2.5.1", "date-fns": "^3.3.1", "next": "^14.0.3", "react": "^18", "react-dom": "^18", "react-icons": "^5.0.1", "react-transition-group": "^4.4.5", "sass": "^1.71.1", "zustand": "^4.5.2" }, "devDependencies": { "@mswjs/http-middleware": "^0.9.2", "@tanstack/react-query-devtools": "^5.25.0", "@types/cors": "^2.8.17", "@types/express": "^4.17.21", "@types/node": "^20.10.5", "@types/react": "^18", "@types/react-dom": "^18", "@types/react-transition-group": "^4.4.10", "autoprefixer": "^10.0.1", "cors": "^2.8.5", "eslint": "^8", "eslint-config-next": "14.1.2", "express": "^4.18.2", "msw": "^2.0.11", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" }, "msw": { "workerDirectory": "public" } } npm run mock 를 사용해서 터미널에 Mock server is ruuning on port: 9090 이 나오는것까지 확인되었는데 GET http://localhost:3000/api/calendar 404 (Not Found) 콘솔에 이렇게 오류가 나옵니다.몇시간 동안 이것저것 수정해보고 했는데 어디서 잘못된건지 왜 요청을 못받아오는지 모르겠습니다ㅠ

session 데이터를 제 프로젝트 상황에 맞게 바꿔서 만들어주고싶어 https://next-auth.js.org/getting-started/typescript해당 문서를보고 타입을 만들어주었습니다,declare module "next-auth" { interface Session { user: { address: string ids:string[] } }}그리고 callback 부분으로 넘어가 session 에서session.user.Ids = token.ids; return session;이런식으로 셋팅해주는데요.session.user.Ids = token.ids; 에서 타입에러가 발생되어 타입에 디폴트 세션을 넣어주니 에러는 사라졌으나 타입이 2개가 되어 user.이후에 값을 추론을 못하더라구요, 이번강의 영상을 보다보니 nextauth 에서 정해놓은 규칙이 있다하셧는데 혹시 세션 타입또한 디폴트세션을 사용안할수는 없는걸까요?

서버에서 세팅한 것과 버젼이 같아야한다고 하였는데, 혹시 백엔드 쪽에서는 어떤 작업들을 해야 웹소켓을 연결할 수 있는건지 알 수 있을까요?

안녕하세요 선생님.제가 사용하고 있는 맥의 시스템 테마를 라이트 모드에서 다크모드로 바꾸니까 클론하고 있는 사이트를 열었을 때 글자들이 다 안 보이더라구요.아마 다크모드임을 인식하고 글자가 하얗게 됐는데 배경은 검정색으로 바뀌지 않아서 그런것 같습니다. 그런데 또 희한하게 트윗을 작성하는 부분(무슨 일이 일어나고 있나요 부분)은 검정색 배경으로 바뀌어 있습니다. 다크 모드에 대응해서 사이트를 보여주기 위해서는 별도의 라이브러리나 CSS 적용을 해야하는 것일까요?

다른 코드를 뜯어보고있는데 거기에는 querykey가 이런식으로 배열 한개로 되어있더라고요 두개일경우는 두번째 키가 변수로 들어갈 경우에만 그렇게 되어있던데 강사님께서는 무조건 두개로 지정한 이유가 있을까싶어서요 두개로 했을때 어떤 효과가 있어서 그렇게 하신건지에 대해 궁금합니다.  await queryClient.prefetchQuery({ queryKey: ["listItems"], queryFn: getList, });

안녕하세요.강의에서 Post 서버컴포넌트에서 PostArticle을 분리하시면서 article 하나 바꾸자고 서버컴포넌트를 클라이언트 컴포넌트로 바꾸기 아깝다고 하시면서 PostArticle 컴포넌트로 따로 분리하셨는데요, 왜 아까운건지 이유를 자세히 알고싶습니다.GPT에도 물어봤는데 이해가 잘 안가서.. 이렇게 질문드립니다ㅠㅠ 자세히 설명해주시면 정말 감사할것같습니다.

강의영상 5분대에서fetch 속에 들어가는 cache등과 같은 옵션등은 https://developer.mozilla.org/ko/docs/Web/API/fetchmdn web doc에서의 fetch 문서를 찾아 문법을 확인하다 이해가 잘 안되는 점이 두개가 있어 문의 드립니다.credentials, headers, cache는 찾았는데 next는 못찾았는데 이 부분은 어느 자료를 보고 사용법을 확인할 수 있는지 모르겠네요. 혹시 next에서 인식하기 위해 태그를 추가하는 것이라면...next: {tags: ['rooms']},에서 rooms 빼고는 고정해서 사용하는 것인가요?headers 부분에서 {Cookie: cookies().toString()} 처럼 key-value 형식을 갖춘 객체로 넣는 것은 필수인가요?그리고 이것과 별개로 제가 쿠키에 어떤 정보들이 저장되는지 잘 몰라서 cookies().toString()에는 어떤 정보들이 담기는 것인지 궁금합니다.