173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next + React Query로 SNS 서비스 만들기
강의 로그인과 회원가입 실제로 하기 뒷부분에 트렌드조회, 팔로우, 추천게시물을 불러오기 위해 주소를 변경해주고 403이 나오는 곳은 credentials 을 추가했습니다 하지만 /hashtags/trends에서만 여전히 쿠키를 받아오지 못하고 403이 나오고 있는데 어디가 잘못된건지 잘 모르겠습니다
해결됨
Next + React Query로 SNS 서비스 만들기
제로초님께서 '서버쪽에서 MSW를 자연스럽게 돌리는 방식이 아직 나오지 않았다' 라고 말씀하셨는데, 이 부분에 대해 궁금해서 자료를 찾던 중 해당 내용을 다루는 깃헙 이슈를 찾아서 읽어보았습니다. 아직까지도 서버쪽에서 MSW를 사용하는 부분은 업데이트가 되지 않았다는 내용이 있어서 혼자 이것저것 건들던 도중에 http.ts 실행을 종료해도 클라이언트 쪽에서 요청을 보내면 모킹이 되어야 하는게 아닌가 하는 의문이 들었습니다. 그래서 http.ts 의 실행을 종료하고 요청을 보냈으나 클라이언트 쪽에서는 404 에러가 발생하였고, 서버 쪽에서는 200 이 뜨면서 이전에 가져왔던 데이터를 가져왔습니다. 여기서 제가 궁금한 것은 http.ts 는 서버 모킹을 위해 추가적으로 작성된 파일이라고 생각하는데 제가 잘못 생각한 것인지 궁금합니다. http.ts 실행이 종료된 상태로 클라이언트 컴포넌트에서 요청을 보낸다면 http://localhost:3000/api/login 으로 요청을 보냈을 때 정상적으로 모킹이 되어야 한다고 생각하는데 맞게 생각한 것인지 궁금합니다. (저는 클라이언트-browser.ts, 서버-http.ts 로 모킹이 연결된다고 이해했습니다.) 제가 작성한 코드는 강의에서 작성된 코드와 같은 코드를 사용했으며 출력 부분(console.log)만 조금 수정했습니다. 좋은 강의 만들어주셔서 감사합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
[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"를 작성할 필요 없죠?
미해결
Next + React Query로 SNS 서비스 만들기
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 서비스 만들기
/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 같은데 fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요? next 가 내부적으로 fetch 를 새로 만든건가요?
미해결
Next + React Query로 SNS 서비스 만들기
위 사진 처럼 컴파일이 안됩니다. 그리고 이렇게 바꾸고 실행을 시키면 실행은 되는데 코드 상에서 NEXT_PUBLIC_BASE_URL이 undefined로 확인이됩니다. 어떻게 해결할 수 있을까요.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강의를 보며 코드를 작성하고 있는데, 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:233 eval @ webpack-internal:///…ot-dev-client.js:55 handleMessage @ webpack-internal:///…lay/websocket.js:52 index.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:417 eval @ index.js:591 setTimeout (async) hydrate @ index.js:579 await in hydrate (async) pageBootrap @ page-bootstrap.js:24 eval @ next-dev.js:25 Promise.then (async) eval @ next-dev.js:23 ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1704985593164:192 options.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:1260 webpackJsonpCallback @ webpack.js?ts=1704985593164:1388 (anonymous) @ main.js?ts=1704985593164:9 Show 6 more frames Show less websocket.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 서비스 만들기
상황 : router a-> 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 로그인시 해결되지 않는 부분이 있어서 질문드립니다. 로그인을 계속 실패하고 있습니다. next-auth의 버젼 (4였다가 삭제하고 3으로도 시도 해봤습니다.) "dependencies": { "next-auth": "^5.0.0-beta.3", }, 로그인을 시도했을때 뜨는 화면: The Middleware "/src/middleware" must export a middleware or a default function This 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 서비스 만들기
// 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 서비스 만들기
디렉토리를 만들고 그 안에 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 서비스 만들기
11분대에서 선생님께서 진행하신 코드 부분에서 질문이 있습니다.session 정보를 부모 컴포넌트로부터 받아오는 방식과 useSession()을 통해 받아오는 방식에는 어떤 차이점이 존재하나요?? 서버에서 prerendering할 때, 미리 렌더링이 잘되도록 하기 위함인가요?
미해결
Next + React Query로 SNS 서비스 만들기
선생님께서 무한 스크롤 설명해주실 때의 예시처럼 현재 게시물이 [[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 서비스 만들기
loginForm 컴포넌트에서 로그인시 '/' path로 보내려고 하는데 위와같은 오류가 뜨면서 진행대지 않습니다. baseUrl 찾아보니 default 값이 localhost:3000 으로 설정된걸 확인했습니다. 진짜 이리저리 찾아봤는데도 해결방법을 찾아볼수없어서 문의드립니다. 구글링한 방법중에 await 말고 then catch로 하면 댄다는글도 봐서 해봤는데도 오류가 그대로 나왔습니다. 서버랑 문제없이 잘됩니다.
