69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Next + React Query로 SNS 서비스 만들기
AuthProvider 사용 시 서버 컴포넌트가 궁금합니다.(+ API 관련)
안녕하세요. 항상 강의 잘 보고 있습니다! return ( <html lang="en"> <body className={inter.className}> <MSWComponent /> <AuthSession> {children} </AuthSession> </body> </html> )next-auth 강의 내용 중 최상위 layout.tsx에서 위 코드와 같이 AuthSession 감싸주신 걸 볼 수 있는데 이는 next-auth에서 제공하는 SesisonProvider를 통해 감싸진 자식 컴포넌트들에서 session 데이터를 공유하기 위함으로 이해하였습니다. 그런데 SessionProvider는 useSession 훅을 사용하는 컴포넌트에 대해 session 데이터를 공유하는 것이기에 "use client"가 사용되는데 최상위 layout 파일에 AuthSession으로 그것의 children을 감싸게 되면 그 아래에 포함된 모든 컴포넌트들이 전부 클라이언트 컴포넌트가 되기 때문에 이렇게 되었을 때 계층 아래의 서버컴포넌트들이 제대로 서버 컴포넌트로써 작동할 수 있는지가 궁금합니다. 그래서 useSession을 사용해야 하는 컴포넌트의 상위에서만 해당 provider로 감싸주고 서버 컴포넌트에서 session이 필요한 경우 해당 provider로 감싸지 않아도 session을 가져올 수 있지 않나 궁금증이 들어 질문드립니다.
- 해결됨Next + React Query로 SNS 서비스 만들기
로그인시 오류페이지로 이동됩니다
해당 영상에서 질문들을 참고해봐서 그나마 재영님 질문과 비슷해서 버전 문제일 수 있을 것 같아 버전도 낮춰보고 했음에도 해결이 되지 않아 새로 질문 올립니다.. [[[ 문제점 ]]]아이디와 패스워드를 치고 로그인을 눌렀을 때 오류페이지로 이동됩니다.정상적일때 경로 => [ localhost:3000/home ]현재 이동되는 경로 => [ localhost:3000/api/auth/error ][ 해당 사진 ][ 적용했었던 버전 내역 ]next-auth@5.0.0-beta.3next-auth@5.0.0-beta.4next-auth@5.0.0-beta.11@auth/core@0.19@auth/core@0.27 [ 디렉토리 구조 ] [ 코드 ]envNEXT_PUBLIC_BASE_URL=http://localhost:9090 AUTH_SECRET=testtestauth.tsimport NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: '/i/flow/login', newUser: '/i/flow/signup', }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }) if (!authResponse.ok) { return null } const user = await authResponse.json() return user; }, }), ] });mocks/handlers.tsimport {http, HttpResponse, StrictResponse} from 'msw'; export const handlers = [ http.post('/api/login', () => { console.log('로그인'); return HttpResponse.json({ userId: 1, nickname: '프림입니다만', id: 'pream', image: '/5Udwvqim.jpg' }, { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' } }); }), http.post('/api/logout', () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }); }), http.post('/api/signup', async ({ request }) => { console.log('회원가입'); // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403, // }) return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/;Max-Age=0' } }) }), ];@/app/(beforeLogin)/_components/LoginModal.tsx"use client"; import { ChangeEventHandler, FormEventHandler, useState } from "react" import style from "@/app/(beforeLogin)/_components/login.module.css"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; export default function LoginModal() { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const [message, setMessage] = useState(''); const router = useRouter(); const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(''); window.alert('aaa'); try { await signIn("credentials", { username: id, password, redirect: false, }); window.alert('bbb'); router.replace('/home'); } catch (err) { console.error(err); setMessage('아이디와 비밀번호가 일치하지 않습니다.'); } }; const onClickClose = () => { router.back(); }; const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => { setId(e.target.value); }; const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => { setPassword(e.target.value); }; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03"> <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id">아이디</label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder=""/> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password">비밀번호</label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder=""/> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}>로그인하기</button> </div> </form> </div> </div> ) }여기서 onSumbit 함수 부분에서 alert를 중간에 넣었는데window.alert('aaa')은 떴고,확인 버튼 누르고, 다음 window.alert('bbb')가 뜨자마자 바로 에러 페이지로 이동됩니다. ( 확인 버튼 조차 못누르고 바로 이동됩니다 ) 그리고 auth.ts 에서는 재영님 질문처럼 터미널 로그들이 안찍힙니다... 9090 서버는 잘 띄워놨었구요.회원가입 로그는 잘 나오는데 로그인 로그는 안뜹니다.
- 해결됨Next + React Query로 SNS 서비스 만들기
MSW response가 안 보이면?
안녕하세요 제로초님.3-1 부분에서 client 컴포넌트에서 서버액션 사용하기로 msw를 처음으로 사용하려고 시도중입니다.와중에 브라우저 네트워크 탭 response에 아무것도 나오지 않고 있어 해결법을 찾지못해 질문드립니다.저랑 비슷한 오류 생기신 분들 질문을 다 본 거 같은데, 해결이 되진 않네요.우선, handlers 코드입니다.Mock server 터미널에는 "회원가입" 콘솔이 잘 나오고 있습니다.다음은, client component에서 서버액션을 위한 signup.ts입니다.이 또한 터미널에서 base url경로와 "success!"와 200이 잘 나오고 있습니다.다음은 네트워크 탭에 정보입니다.생년월일 정보는 제가 추가한 정보입니다.response 탭에 아무것도 나오지 않습니다. 실제 모달을 띄우는 컴포넌트는 onSubmit 함수 import와 이 부분 이외에 아무것도 추가하지 않았습니다..env파일 및 .env.local 입니다. package.json입니다.어떤 부분을 추가로 해보면 좋을까요??
- 해결됨Next + React Query로 SNS 서비스 만들기
session error/쿠키 정보가 저장 안됐을 때
mook 새롭게 실행 시켜봤는데도 세션이 에러가 계속 뜹니다.로그인창에 선생님처럼 정보가 저장 안되있고 handlers-> User정보를 입력하면 패이지가 이동 되는데localhost:3000/api/auth/error 이동되고 /home는 안가네요회원가입 id,name,비번,사진 입력해서 만들고 /home이동 되었는데 로그아웃 버튼이나 추천컨텐츠는 안 나와요localhost:9090 치면이렇게 나오네요 .회원가입(localhost:3000/i/flow/signup)->/home->잘 가기는 하는데 네트워크에서는 세션 에러가 됩니다. 무든 코드 선생님꺼로 바꿔봤는데 해결 방법 찾지 못해서 3-1코드 부분에서 멈쳐있습니다. 감사합니다.
- 미해결Next + React Query로 SNS 서비스 만들기
fresh에 대하여 질문있습니다.
안녕하세요. 제로초님 좋은 강의 감사합니다. 해당 강의에서 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 요청은 항상 이루어지며 데이터만 캐시된 것을 ?? 가져오는 것인지 궁금합니다. 감사합니다.
- 미해결Next + React Query로 SNS 서비스 만들기
/i/flow/login 으로 리다이렉트하는 이유?
안녕하세요 섹션 1 듣고 혼자 해보다가 궁금한 게 생겨서 질문드립니다.기존 사이트는 왜 "/login"으로 진입하면 "/i/flow/login"로 리다이렉트하게 했을까요?단순하게 생각하면 그냥 "/login", "/signup"에 페이지를 두던가 아니면 "/i/flow/login", "/i/flow/signup"만 사용하도록 하면 리다이렉트 로직 필요없이 더 깔끔할 것 같은데 말이죠.또 의아한 것은 기존 사이트에서 '/signup' url로 진입하면 '/i/flow/signup'으로 리다이렉트하는데 계정 만들기 버튼은 로그인과 다르게 href를 /i/flow/signup'으로 해두었네요. 실수인가..물론 제로초님은 기존 사이트를 최대한 그대로 구현하려고 하신 것 뿐이니까 당연히 정확한 의도를 알 수 없으시겠지만 현업자 입장에서 추측이 가는 부분이 있으신가 싶어 질문드립니다!
- 미해결Next + React Query로 SNS 서비스 만들기
서버에서 받은 데이터를 공유 목적으로 사용하기위해서는 어떤식으로 처리되는게 가장 좋은 방법일까요?
데이터패칭을 리액트쿼리로하고 데이터 공유를 zustand로 하는데요!만약 데이터 패칭을 해서 받아온 데이터를 전역으로 공유해서 사용하고싶으면 어떤식으로 처리되는게 가장 좋은 방법인가요??
- 해결됨Next + React Query로 SNS 서비스 만들기
게시글 클릭시 도메인만 바뀌고 화면 변화가 없을때
사진 상세보기에서 오른쪽 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> )
- 해결됨Next + React Query로 SNS 서비스 만들기
No QueryClient set, use QueryClientProvider to set one 질문입니다.
현재 강의에서 @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> ); }
- 해결됨Next + React Query로 SNS 서비스 만들기
msw 관련해서 궁금증이 있습니다.
안녕하세요 제로초님 강의 잘보았습니다!본론부터 말씀드리자면 2가지 고민이 있습니다. 하나는 msw component가 필요한지 궁금합니다.왜냐하면 현재 express로 하고 있어서 msw component가 없어도 mock 서버(express)를 키면 작동하는데 msw component가 관여하지 않은것 같아서요~ 두번째는 localhost 9090 외에 실제로 사용하는 api를 모킹하고 싶은데 어떻게 해야할지 고민이 됩니다.예를 들어주소가 naver.com이라면 이 백엔드 api를 넣는 방법을 모르겠습니다.~! 감사합니다!
- 해결됨Next + React Query로 SNS 서비스 만들기
모달창 닫기 버튼 눌렀을 때 맨위로 올라가지는 현상 질문
이미지 상세 보기 눌렀을때 모달창이 켜지고, 닫기 버튼 누르면router.back() 으로 처리하셨는데이 때 문제점이 게시글 위치가 다시 맨 위로 올라가게 되더라구요. 만일 닫기 버튼 눌러도 제가 스크롤 해서 봤던 게시글 위치 그대로 보여질려면 어떻게 처리하면 좋은가요?
- 해결됨Next + React Query로 SNS 서비스 만들기
Type에서 줄바꿈시 콤마 혹은 세미콜론 둘 다 가능한가요?
type Props = { postId: number; userName: string, userId: number; }위 코드처럼 type에서는 끝에 ; 혹은 , 둘 다 섞어서 써도 괜찮은가요?
- 미해결Next + React Query로 SNS 서비스 만들기
개인프로젝트를 하던 와중에 next-auth 관련 질문입니다.
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", 이러한 부분은 왜 계속 오류가 나는 것인지 궁금합니다.
- 미해결Next + React Query로 SNS 서비스 만들기
use client 사용하는 컴포넌트 질문
제로초님 안녕하세요. 강의 잘 보고 있습니다.강의를 보는 도중 궁금한점이 생겨 질문을 남깁니다 (강의 후반부에 설명해 주셨을지도 있지만...) 저는 React, Next13 버전으로만 개발을 해보았고, Next14를 배우기 위해 강의를 듣고 있는데 Next13에서는 기본이 클라이언트 컴포넌트이고 필요한 경우에만 'use server' 를 사용해 ssr을 구현했던 것으로 기억합니다. 그런데 Next 14에서는 기본이 서버 컴포넌트이고 필요한 경우에만 'use client'를 사용하시는 것 같습니다. 어떤 경우에 use client를 적용해야하는지 기준을 잘 모르겠어서 제로초님은 어떤경우에 use client를 사용하시는지 궁금합니다. 제가 생각하기에는 상태관리가 필요하거나 hook을 사용해야하는 컴포넌트의 경우 'use client'를 적용해서 사용하는 것 같은데 그런 특별한 경우를 제외하고는 모두 서버 컴포넌트를 쓰는게 맞나요??
- 해결됨Next + React Query로 SNS 서비스 만들기
_lib 폴더는 어떤 용도인가요?
_lib 폴더는 어떤 용도로 구분되어져 있는 폴더일까요??
- 해결됨Next + React Query로 SNS 서비스 만들기
No overload matches this call.
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 + React Query로 SNS 서비스 만들기
Link와 클라이언트사이드 렌더링
안녕하세요 제로초님.이제 막 Next 강의 시작해서 기초부터 보고 있는데 이해가 되지 않는 부분이 있어 질문드립니다.next/link에 관한 부분인데요.공식문서보니까 next/link 사용시에 클라이언트 사이드 라우팅이 된다고 하는데그 말인 즉슨 link에 해당하는 페이지 컴포넌트의 자바스크립트를 미리 받아놓고 사용자가 Link로 이동할 때 클라이언트에서 페이지를 생성한다는 뜻으로 이해했는데요. 그럼 이동하는 페이지 컴포넌트에 console.log("하이")가 있으면 클라이언트, 즉 브라우저에 console.log가 출력되어야하는 거 아닌가요? 하지만 제 예상과 다르게 Link로 이동한 페이지 컴포넌트의 console.log는 서버에 출력되네요. 1. "use client"를 명시하지 않은 컴포넌트는 모두 서버에서 렌더링 되는 컴포넌트다2. Link로 이동하면 클라이언트 사이드 렌더링을 한다. 이 두 가지 개념이 어떻게 공존할 수 있는지, 위에 설명드린 케이스와 함께 잘 이해가 되지 않네요ㅜ
- 해결됨Next + React Query로 SNS 서비스 만들기
[28강 오류 해결] https://loremflickr.com 외부 이미지 불러오기 오류
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;
- 미해결Next + React Query로 SNS 서비스 만들기
안녕하세요 복습중인데 msw 404 (Not Found) 질문드립니다.
// 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) 콘솔에 이렇게 오류가 나옵니다.몇시간 동안 이것저것 수정해보고 했는데 어디서 잘못된건지 왜 요청을 못받아오는지 모르겠습니다ㅠ
- 미해결Next + React Query로 SNS 서비스 만들기
nextauth session type 질문드립니다.
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 에서 정해놓은 규칙이 있다하셧는데 혹시 세션 타입또한 디폴트세션을 사용안할수는 없는걸까요?