묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next + React Query로 SNS 서비스 만들기
서버관련 세팅과 관련한 문의 입니다. ENOENT: no such file or directory,client/index.html
[Nest] 19976 - 2024. 01. 15. 오전 10:37:17 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '{경로}\nest-prisma-main\nest-prisma-main\client\index.html'위와같은 에러가 발생하는데, pg세팅하고 memurai.com 에서 설치 후, redis connect 까지는 확인이 되는 것 같은데, localhost:3000/home 페이지를 가면 레이아웃을 제외한 페이지 전체가 오류가 납니다. 이때 Nexjs가 뱉어내는 오류는 입니다 현재 진행중인 노드 버전은 Node.js v20.10.0 입니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
서버 액션 함수의 "use server"
클라이언트 컴포넌트 안에서 서버 액션을 활용할 것이라면 서버 액션 안에다 "use server"; 를 작성하라고 했는데 그럼 서버 컴포넌트일 경우엔 굳이 "use server"를 작성할 필요 없죠?
-
미해결Next + React Query로 SNS 서비스 만들기
prefetch하는 queryFn이 Data Cache가 적용 되는 부분에 대해 이해가 잘 안가는 것이 있습니다
Next.js의 Data Cache가 동작하는 부분에 대해 궁금한 것이 생겨서 또 한번 질문 드립니다ㅠ공식문서도 찾아봤는데 제가 못 찾은건지 관련 내용을 찾을 수가 없네요 아래의 코드는 Home폴더의 page.tsx 에서 prefetch + dehydrate 를 진행하고 있습니다이때는 getPostRecommends에 대해서 Next.js의 Data Cache가 제대로 동작합니다. (fetch에 어떠한 옵션도 걸어두지 않았습니다)/home URL에서 새로고침을 계속 진행해도 loading.tsx가 보이지 않으며faker.js로 랜덤한 이미지를 반환하게 설정했음에도 계속 같은 이미지를 보여주기 때문입니다 그렇지만, 아래와 같이 prefetch + dehydrate 하는 부분을 page.tsx가 아니라 TabDeciderSuspense.tsx 라는 서버 컴포넌트로 빼서 사용 할 경우이때도 getPostRecommends를 서버컴포넌트에서 fetch를 하는 것임에도, Next.js의 Data Cache가 아예 적용되지 않습니다/home URL에서 새로고침을 할 때마다 loading.tsx가 delay(3000) 동안 보여지며faker.js의 랜덤한 이미지가 계속 보여지기 때문입니다처음에는 Suspense를 사용해서 그런건가 싶었는데 사진에 올린 것처럼 Suspense를 제거했음에도 동일한 현상이 나타나는걸로 봐서는다른 부분에 원인이 있는 것 같은데 혹시 왜 이렇게 되는 것인지 알 수 있을까요?혹시 fetch하는 부분이 page.tsx에 있어야만 Data Cache가 진행되는 것인가요..?
-
미해결Next + React Query로 SNS 서비스 만들기
next.config.js에서 redirect 옵션을 사용해도 괜찮은가요?
/login -> /i/flow/login으로 redirect 할때 next.config.js에서 const nextConfig = { async redirects() { return [ { source: "/login", destination: "/i/flow/login", permanent: true, }, ]; }, }; module.exports = nextConfig;이런식으로 코드를 짜면 redirect가 되는데 login폴더를 굳이 만들지 않고 위와 같이 설정해도 괜찮은가요?
-
미해결Next + React Query로 SNS 서비스 만들기
fetch web api 에 next 옵션
fetch 함수가 그냥 web API 같은데fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요?next 가 내부적으로 fetch 를 새로 만든건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
process.env.NEXT_PUBLIC_BASE_URL를 인식하지 못합니다
위 사진 처럼 컴파일이 안됩니다.그리고 이렇게 바꾸고 실행을 시키면 실행은 되는데 코드 상에서 NEXT_PUBLIC_BASE_URL이 undefined로 확인이됩니다. 어떻게 해결할 수 있을까요.
-
미해결Next + React Query로 SNS 서비스 만들기
auth.ts 페이지의 credentials 관련 에러 질문
안녕하세요. 강의를 보며 코드를 작성하고 있는데, auth.ts 페이지에서'{ authorize(credentials: Record<string, string> | undefined): Promise<any>; }' 형식의 인수는 'UserCredentialsConfig<Record<string, CredentialInput>>' 형식의 매개 변수에 할당될 수 없습니다.'credentials' 속성이 '{ authorize(credentials: Record<string, string> | undefined): Promise<any>; }' 형식에 없지만 'Pick<CredentialsConfig<Record<string, CredentialInput>>, "credentials" | "authorize">' 형식에서 필수입니다.ts(2345)credentials.d.ts(12, 5): 여기서는 'credentials'이(가) 선언됩니다.(parameter) credentials: Record<string, string> | undefined이런 에러가 발생했습니다. credentials 속성을 타입과 함께 추가해주고, body에서 사용되고 있는 credentials에 ?. 연산자를 이용해 에러를 해결했는데도이러한 에러가 발생합니다.이때 500 에러가 같이 발생하는데 해당 에러도 하단에 첨부합니다. GET http://localhost:3000/api/auth/signin 500 (Internal Server Error)processMessage @ webpack-internal:///…t-dev-client.js:233eval @ webpack-internal:///…ot-dev-client.js:55handleMessage @ webpack-internal:///…lay/websocket.js:52index.js:591 Uncaught TypeError: Cannot read properties of undefined (reading 'GET')at eval (webpack-internal:///(rsc)/./src/auth.ts:14:21)at (rsc)/./src/auth.ts (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:182:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at eval (webpack-internal:///(rsc)/./src/app/api/auth/[...nextauth]/route.ts:6:63)at (rsc)/./src/app/api/auth/[...nextauth]/route.ts (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:172:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at eval (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!:17:126)at (rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D! (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:162:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at __webpack_exec__ (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:192:39)at <unknown> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:193:424)at __webpack_require__.X (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:163:21)at <unknown> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:193:47)at Object.<anonymous> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:196:3)at Module._compile (node:internal/modules/cjs/loader:1256:14)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at mod.require (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/require-hook.js:65:28)at require (node:internal/modules/cjs/helpers:121:18)at requirePage (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/require.js:109:84)at <unknown> (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/load-components.js:59:84)at async loadComponentsImpl (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/load-components.js:59:26)at async DevServer.findPageComponentsImpl (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/next-server.js:671:36)getServerError @ client.js:417eval @ index.js:591setTimeout (async)hydrate @ index.js:579await in hydrate (async)pageBootrap @ page-bootstrap.js:24eval @ next-dev.js:25Promise.then (async)eval @ next-dev.js:23./node_modules/next/dist/client/next-dev.js @ main.js?ts=1704985593164:192options.factory @ webpack.js?ts=1704985593164:716__webpack_require__ @ webpack.js?ts=1704985593164:37__webpack_exec__ @ main.js?ts=1704985593164:1259(anonymous) @ main.js?ts=1704985593164:1260webpackJsonpCallback @ webpack.js?ts=1704985593164:1388(anonymous) @ main.js?ts=1704985593164:9Show 6 more framesShow lesswebsocket.js:46 [HMR] connected확인하시기 쉽게 같은 내용의 사진과 함께 올려드립니다.그리고 강의 내용 이외의 credentials 관련 코드를 추가하기 전인 auth.ts 파일의 코드도 첨부드립니다.import 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.AUTH_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; }, }), ], }); chap3-1의 auth.ts 코드를 복붙해도 에러가 해결되지 않아 무엇이 원인인지 모르겠습니다. 도움을 주신다면 정말 감사하겠습니다...
-
미해결Next + React Query로 SNS 서비스 만들기
소켓 사용시 메시지 저장 방식에 대해 궁금합니다!
백엔드 서버에서는 소켓에서 메시지를 받으면 DB에 따로 저장하는 식으로 관리가 되는걸까요?? 아니면 프론트의 저장 공간에 저장하는 방식으로도 해결하는 방법이 있을까요??
-
미해결Next + React Query로 SNS 서비스 만들기
병렬 라우팅과 인터셉팅 라우트
병렬 라우팅과 인터셉팅 라우트를 이용하여 작업중에 있습니다.예를 들어 /product 라는 페이지에서 생성이라는 버튼을 눌렀을때/product/write/[id] 로 경로는 이동하며, 병렬 라우팅과 모달이 생성되는것까지는 적용이되었고,모달을 닫을시에는 closeButton에 router.back()으로 /product로 이동이 되는데확인라는 버튼을 누를때 원하는것은 /product/[id] 로 경로이동 후 모달이 닫히는걸 예상하였는데 현재는/product/[id] 로 경로 이동만하고 모달은 그대로 남아있습니다.이럴경우에는 모달을 boolean 으로 따로 경로 이동후 닫히게 작업을 해줘야할까요?더 좋은방법이나 제공하는 기능이 있을까해서 질문드립니다.
-
미해결Next + React Query로 SNS 서비스 만들기
history stack 에서 특정 item제거하기
상황 :routera-> b-> c-> d-> c 로 이동 했을 때 c에서 뒤로가기 이벤트가 발생하면 (혹은 뒤로가기를 누르면) b 로 이동 하도록 구현하고자 합니다. 다만 d에서 뒤로가기 시에는 c로 이동하길 원합니다. 현재 구현 상태는c : router.push(d)d : router.replace(c)이 방법은 c 에서 뒤로가기를 눌러도 c로 가버리는 한계가 있습니다. 따라서, replace(c) 이전에 history에서 직접 c를 제거해 주는 방법을 생각 중인데, (앱 개발할 때 가능했던 기억이 있어서) 검색을 해도 답을 찾지 못하고 있습니다. 답변 주시면 감사하겠습니다 !
-
해결됨Next + React Query로 SNS 서비스 만들기
next-auth Login 시 middleware 이슈 질문 드립니다.
안녕하세요.next-auth 로그인시 해결되지 않는 부분이 있어서 질문드립니다. 로그인을 계속 실패하고 있습니다.next-auth의 버젼 (4였다가 삭제하고 3으로도 시도 해봤습니다.) "dependencies": { "next-auth": "^5.0.0-beta.3", },로그인을 시도했을때 뜨는 화면:The Middleware "/src/middleware" must export a middleware or a default functionThis error happened while generating the page. Any console logs will be displayed in the terminal window.로그인을 시도했을때 콘솔 화면:로그인을 시도했을때 네트워크 화면 :middleware.ts code 입니다.import { auth as middleware } from "./auth"; // See "Matching Paths" below to learn more export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; auth.ts code 입니다. import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; console.log("-", process.env.AUTH_URL); 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.AUTH_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; }, }), ], }); handers.ts의 로그인쪽 코드입니다.import { http, HttpResponse, StrictResponse } from "msw"; import { faker } from "@faker-js/faker"; export const handlers = [ http.post("/api/login", () => { console.log("로그인"); return HttpResponse.json({ id: "zerohch0", nickname: "제로초", image: "/5Udwvqim.jpg" },, { headers: { "Set-Cookie": "connect.sid=msw-cookie;HttpOnly;Path=/", }, }); }), ];
-
미해결Next + React Query로 SNS 서비스 만들기
Suspense 도입 관련 질문입니다.
// layout.tsx import type { Metadata } from 'next'; import { getServerSession } from 'next-auth'; import { Nunito } from 'next/font/google'; import { authOptions } from './api/auth/[...nextauth]/route'; import ClientOnly from './components/ClientOnly'; import LoginModal from './components/modals/LoginModal'; import RegisterModal from './components/modals/RegisterModal'; import Navbar from './components/navbar/Navbar'; import RQProvider from './components/providers/RQProvider'; import ToasterProvider from './components/providers/ToasterProvider'; import './globals.css'; const font = Nunito({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'SMUING', description: 'SMUING에 오신것을 환영합니다.' }; export default async function RootLayout({ children }: { children: React.ReactNode }) { const session = await getServerSession(authOptions); return ( <html lang="ko"> <body className={`${font.className} dark:bg-medium dark:text-slate-100`}> <ClientOnly> <RQProvider> <ToasterProvider /> <RegisterModal /> <LoginModal /> <Navbar /> <div className="pb-20 pt-28">{children}</div> </RQProvider> </ClientOnly> </body> </html> ); } // page.tsx import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; import Container from './components/Container'; import ListingContainer from './components/listings/ListingContainer'; import { getFilteredPosts } from './lib/getFilteredPosts'; type HomeProps = { searchParams?: { category?: string; }; }; const Home: React.FC<HomeProps> = async ({ searchParams }) => { const queryClient = new QueryClient(); const category = searchParams?.category || ''; // 서버에서 불러온 데이터를 클라이언트의 리액트 쿼리가 물려받음.(하이드레이트) await queryClient.prefetchInfiniteQuery({ queryKey: ['posts', category], queryFn: ({ pageParam = 1 }) => getFilteredPosts(category, { pageParam }), // searchParams 전달 // 커서 값 initialPageParam: 0 }); // hydrate라는 것은 서버에서 온 데이터를 클라이언트에서 그대로, 물려받는 것 이다. const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <Container> <ListingContainer /> </Container> </HydrationBoundary> ); }; export default Home; 안녕하세요, 제로초님 강의를 수강하면서 현재 제가 진행하고있는 프로젝트에 Suspense를 도입해보면 좋을 것 같아 진행중입니다.layout.tsx에서 정의한 Header 컴포넌트만 먼저 보여주고, page.tsx에서 보여지는 가운데에 있는 ListingContainer 부분을 Skeleton UI 형식으로 보여주고 싶은게 제가 하고싶은 행동인데, 이 경우에는 Suspense를 어떻게 적용시켜야할지 감이 안와서 질문드립니다. ListingContainer를 ListingContainerSuspense 컴포넌트로 분리하여, searchParams와, 쿼리부분 코드를 옮겨도 제대로 동작하지 않아, 다른 좋은 접근 방식이 있을지 의견을 구하고자 질문을 남기게 되었습니다. 좋은강의 항상 감사합니다!
-
해결됨Next + React Query로 SNS 서비스 만들기
파일 이름은 보통 page.tsx, layout.tsx 로 통일하는 것이 일반적인가요?
디렉토리를 만들고 그 안에 layout.tsx 파일이나 page.tsx 파일을 만들 때 이름을 layout, page로 다 통일하는 것이 일반적인가요? 아니면 내가 만드려는 layout, page 별로 이름을 다르게 하는지 궁금합니다. (예를 들어 explore-page.tsx 이렇게요!)
-
미해결Next + React Query로 SNS 서비스 만들기
답글 기능 관련해서 수정할 부분이 있을 것 같아요
const onClickClose = () => { router.back(); modalStore.reset(); }; 뒷 부분에 기능을 추가하실지는 모르겠지만 현재 onClickClose를 하고나서 모달을 reset 해줘야 할 것 같습니다. 아니면 계속 상태를 가지고 있어서 나가고 나서도 reset이 이뤄져야 할 것 같습니다!
-
미해결Next + React Query로 SNS 서비스 만들기
session 정보 사용시 useSession()과 auth()의 차이점에 대해서 궁금합니다.
11분대에서 선생님께서 진행하신 코드 부분에서 질문이 있습니다.session 정보를 부모 컴포넌트로부터 받아오는 방식과 useSession()을 통해 받아오는 방식에는 어떤 차이점이 존재하나요?? 서버에서 prerendering할 때, 미리 렌더링이 잘되도록 하기 위함인가요?
-
미해결Next + React Query로 SNS 서비스 만들기
게시글 업로드하실 때 unshift와 infinite scroll 관련해서 질문 있습니다.
선생님께서 무한 스크롤 설명해주실 때의 예시처럼 현재 게시물이 [[1,2,3,4,5], [6,7,8,9,10], [11,12,13,14,15]] 이렇게 있다고 쳤을 때, unshift를 통해 게시물을 넣게 된다면 [[16, 1, 2, 3, 4,5], [6, 7, 8, 9, 10], [11,12,13,14,15]] 이렇게 된다면 2차원 배열의 첫 번째 배열의 원소가 6개가 되는데, 이렇게 되면 마지막 배열개수가 6개보다 적어 스크롤을 내려도 게시물을 안가져오는 상황은 이뤄지지 않는 건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
페러랠모달 창 뜬 후에 이중 스크롤 이슈
페러랠모달이 뜬 후에 뒷쪽 페이지의 스크롤과,페럴랠모달의 오른쪽 코멘츠부분의 스크롤이 겹치는 이슈가 있습니다. 해당사항 진도빼면 뒷쪽 강의중간에 해결되는지 궁금합니다. 이걸 해결하려면 모달이 뜬것을 감지하여 뒷쪽 페이지 스크롤을스크롤을 막고, 모달이 꺼진걸 감지해서 다시 뒷쪽 페이지의 스크롤을 활성화 해야할거같은데... 모달이 뜬것을 감지할 수 있나요?
-
해결됨Next + React Query로 SNS 서비스 만들기
Login시 signIn 함수 리다리이렉트 오류
loginForm 컴포넌트에서 로그인시 '/' path로 보내려고 하는데 위와같은 오류가 뜨면서 진행대지 않습니다. baseUrl 찾아보니 default 값이 localhost:3000으로 설정된걸 확인했습니다. 진짜 이리저리 찾아봤는데도 해결방법을 찾아볼수없어서 문의드립니다.구글링한 방법중에 await 말고 then catch로 하면 댄다는글도 봐서 해봤는데도 오류가 그대로 나왔습니다.서버랑 문제없이 잘됩니다.
-
미해결Next + React Query로 SNS 서비스 만들기
page.module.css 가 깃허브에 없어요
page.module.css 가 깃허브에 없어요 제가 설치한 page.module.css와 다소 달라서 복붙할려고 했떠니 제로초님 깃허브에는layout.module.css 가 있네요일단 css적용이 안되지만 진행해보겠습니다!
-
미해결Next + React Query로 SNS 서비스 만들기
zLogo 가 변수 명으로 보이는데 변수 링크 없이 어떻게 단독 사용한건가요?
zLogo 가 변수 명으로 보이는데 변수 링크 없이 어떻게 단독 사용한건가요? <Image src={zLogo} > 이부분이 잘 이해가 안가는데const zLogo = 'path/zLogo.png' 이런식으로 변수명도 없이 어떻게 저렇게 쓰인건지 찾아봐도 특별히 확인이 안되는데 궁금합니다! zLogo / 이것이 public 폴더 안에 있는 zLogo.png 파일 맞을까요?