묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next + React Query로 SNS 서비스 만들기
MSW 오류
먼저 next와 react의 버전은 각각 15버전과 19버전입니다 next 15 부터는 http.ts 의 코드가 간결하게 바뀌어서 적용해보던 중 세팅 단계에서 해당 오류가 발생하였습니다 TypeError: Cannot read properties of undefined (reading 'url' 구글에 검색해보니 최신버전에서도 발생하는 것 같습니다 ㅠㅠ
-
미해결Next + React Query로 SNS 서비스 만들기
[ERROR] MSW Server-Side 적용 실패 에러 / (Module not found Error '_http_common')
[문제점]MSW의 nodejs Server를 Server-Side 에서 실행하려고 할 때Module not found Error '_http_common'와 같은 에러 발생으로 빌드가 실패하는 상황을 겪고 있습니다. 저만 겪고 있는 상황인지 싶지만 질문 드립니다.[현상황]아래와 같이 SSR Component안에서 API를 사용하여 데이터를 받아온 후 화면을 그리고나면,export const Home = async () => { const res = await fetch("https://api.github.com/users/zerocho"); const data = await res.json(); return ( <div className="flex flex-1 items-center justify-center"> <h1>{data.name}</h1> <img src={data.avatar_url} alt={data.name} className="rouneded" /> </div> ); };아래와 같은 화면을 확인 할 수 있습니다.이를 MSW의 Server-side를 사용하기 위해서 Layout단에서 server를 listen하도록 실행하면if ( process.env.NEXT_RUNTIME === "nodejs" && process.env.NODE_ENV !== "production" ) { const { server } = require("@/mocks/http"); server.listen(); } export default function RootLayout({ children }: { children: React.ReactNode; }): JSX.Element { return ( <html lang="en"> <body className={inter.className}> <MSWProvider> <Suspense>{children}</Suspense> </MSWProvider> </body> </html> ); }아래와 같은 Build Error로 Module not found: Can't resolve '_http_common' 나게 됩니다.[찾아본 원인?]_http_common이 Node.js built-in module인데, Next.js Webpack의 config에서 해당 module을 자동 import 하지 않아서 발생하는 에러라고 합니다. (출처:https://github.com/mswjs/msw/issues/2291)[시도한 해결 방안 1]- src/instrumentation.ts 파일을 아래와 같이 추가.export async function register() { if (process.env.NEXT_RUNTIME === "nodejs") { const { server } = await import("./mocks/http"); server.listen(); } }- next.config.js를 아래와 같이 수정/** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, transpilePackages: ["@repo/ui"], experimental: { instrumentationHook: true }, };결과 동일[시도한 해결방안 2]- next.config.js에 webpack 내용 추가/** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, transpilePackages: ["@repo/ui"], experimental: { instrumentationHook: true }, webpack: (config, { isServer }) => { if (isServer) { if (Array.isArray(config.resolve.alias)) // server일시 browser를 제외 시킨다 config.resolve.alias.push({ name: "msw/browser", alias: false }); else config.resolve.alias["msw/browser"] = false; } else { if (Array.isArray(config.resolve.alias)) config.resolve.alias.push({ name: "msw/node", alias: false }); else config.resolve.alias["msw/node"] = false; } return config; } }; 결과 동일[추가 조사한 내용들]- 현재 github issue에 아래와 같이 등록되어 있습니다.https://github.com/mswjs/msw/issues/2291Server-Side를 사용하지 않고도 MSW를 사용할 수는 있지만, 해결 방안이 있을지 해서 질문드립니다!
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
슈퍼베이스 커넥션 셋팅이 없어서 주소 복사를 못하고 있는 상황입니다.
6분 50초에 나오는 영상처럼, 똑같이 들어가서 주소를 복사를 할려고 하는데 없어서 못하고 있습니다. 어떻게 해야 할까요.?
-
해결됨Next + React Query로 SNS 서비스 만들기
SignupModal 타입 에러에 관해서 질문드립니다!
SignupModal 에서 에러가 하나 나오는데 관련해서 질문드립니다.S2322: Type '(formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to type 'NonNullable<string | ((formData: FormData) => void | Promise<void>) | undefined>'.<br/>Type '(formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to type '(formData: FormData) => void | Promise<void>'.<br/>Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'void | Promise<void>'.<br/>Type 'Promise<{ message: string; } | undefined>' is not assignable to type 'Promise<void>'.<br/>Type '{ message: string; } | undefined' is not assignable to type 'void'.<br/>Type '{ message: string; }' is not assignable to type 'void'.이런 에러가 나옵니다. formData 의 타입이 정확하지 않아서 생기는 에러 같습니다. 근데 정상적으로 실행은 됩니다.제 꺼에선 이렇게 에러가 나오는데 제로초님 화면에서는 에러가 나오는 것 같지 않아서 어떻게 그렇게 된 것인지 궁금해서 질문 남깁니다. 감사합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
npm run build 시 에러가 발생합니다.
안녕하세요 강의 실습도중에 에러가 발생하였는데 원인을 찾지못해서 질문드립니다..1.3)실습용 백엔드 서버 세팅하기 강의에서 12:11분에 npm run seed 명령어로 시드데이터도 받아지는것을 확인했습니다. (그 이전까지의 실습도 에러없이 정상적으로 실행했습니다.) 이후에 npm run build를 실행해보니 아래와 같은 에러가 발생해서 질문드립니다.=================================C:\study\React\onebite-books-server-main>npm run build> onebite-books-server@0.0.1 build> nest buildsrc/book/book.service.ts:22:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.22 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:28:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.28 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:35:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.35 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:56:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.56 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:70:31 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.70 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/book/book.service.ts:88:29 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'never'.88 select: prismaExclude('Book', ['searchIndex']), ~~~~~~src/util/prisma-client-exception.filter.ts:6:15 - error TS2339: Property 'PrismaClientKnownRequestError' does not exist on type 'typeof Prisma'.6 @Catch(Prisma.PrismaClientKnownRequestError) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~src/util/prisma-client-exception.filter.ts:8:27 - error TS2694: Namespace '"C:/study/React/onebite-books-server-main/node_modules/.prisma/client/default".Prisma' has no exported member 'PrismaClientKnownRequestError'.8 catch(exception: Prisma.PrismaClientKnownRequestError, host: ArgumentsHost) { ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Found 8 error(s).
-
미해결Next + React Query로 SNS 서비스 만들기
usePathname 과 /explore 페이지 부분은 좀 너무 빠르네요...
밑에 수업노트에 주신 링크도 그 파일이 아니라 깃헙 레포로 연결되고, 너무 빠르네요 ㅠㅠ _component 부분 보면 RightSearchZone 컴포넌트도 없어서 좀 헤매게 되는 것 같습니다...css 내용도 갑자기 어디서 튀어나온건지 좀 파악이 어렵네요 ㅠ
-
미해결Next + React Query로 SNS 서비스 만들기
[next15] msw 질문드립니다.
기존에 강의로 msw로 코드만들었던 수강생입니다.여러개의 질문과 에러?라고할만한 사항이 있는데요.기존강의에는 http.js 파일에서 express 기반으로 서버를 만들어서 9090포트를 사용했는데요. 새로 강의하신 내용에서는 express를 배제하고 코드가 간결하게 바꿨는데 이렇게 바꾼 내용의 대해서 조금 설명 부탁드립니다. 간략히 알기로는 기존 MSW는 클라이언트(브라우저)에서 동작하기 때문에 서버에서 html 요청이 발생하기 때문에 요청을 가로챌수 없기 때문에 express썻다고 알고있습니다. 이게 맞을까요? 그리고 바뀐코드는 이런문제가 해결이 된건가요?1번의 문제가 해결되었다면, 기존의 9090 서버포트와 더불어 npm run mock를 실행하여 서버를 동작했던걸로 알고있는데 이기능은 필요한가요?msw 세팅과 .env 강의부분에서 환경변수를 api에 직접 넣도록 수정했는데, 이전꺼랑 차이가 뭔가요? 추가로 클라이언트컴포넌트에서는 환경변수가 콘솔로 읽히고있는데 handler에서는 읽히지 않고있습니다. 코드는 이전강의 코드(백엔드 db연결전까지)와 같고요. 추가로 nextjs나 react를 버전업을 하지는 않았습니다. 이유가뭔지 유추해주실수있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
새로 올라온 강의 영상에 문제가 있는거 같습니다.
"섹션4 그런데 백엔드 개발자가 API를 아직 못 만들었다"의 "msw 세팅과 .env" 강좌가 8분 38초까지 영상이 검은 화면으로 나옵니다. 해당 영상에서 검은 화면 중간 중간 노란색 안내 문구는 나오는 것과 다른 영상에서는 해당 증상이 보이지 않은 것으로 보아서 제 환경에서 해결할 수 없는 문제로 보이는데, 확인 한번 부탁드립니다.
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
[자체 해결]삭제하기 시 경고 alert 출력
안녕하세요. 7.7)리뷰 삭제 기능 구현하기를 하는 중인데, 혹시 바로 삭제하지 않고 중간에 alert 같은 걸로 정말 삭제할지 체크하고 그 다음에 삭제하는 식으로는 어떻게 하면 좋을까요? form 태그에 onsubmit을 달아서 중간에 끼어드는? 방식으로 해볼까 했는데, 뭔가 useActionState랑 호환을 어떻게 해야할지 잘 모르겠네요...아래 코드를 작성해서 해결했습니다! const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const confirmDelete = confirm(`댓글을 정말 삭제하시겠습니까?`); if (confirmDelete) { const form = e.currentTarget; form.requestSubmit(); // 폼을 강제로 제출 } };
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
데이터 패칭 관련 질문 드립니다.
안녕하세요 이정환 강사님.인스타의 위치검색기능과 비슷한 기능을 구현하고 있습니다.조회버튼을 클릭해서 serachParams를 서버컴포넌트로 전달하는 형식이 아니라 검색어가 입력되면 바로 검색해서 결과를 출력해야 하는 페이지인 경우에는 전부 클라이언트 컴포넌트로 구성해야 하나요?어떤식으로 구성해야 Next의 장점을 최대한 살릴 수 있는지 궁금합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
게시글 삭제하기
안녕하세요 제로초님! 게시글 삭제하기 기능을 구현하고 있습니다!구현해도 안되길래 스웨거가서 테스트를 하고 서버를 봤더니 오류가 나더라구요혹시 이유를 알 수 있을까요??
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
React Server Component 와 Pre Fetching
안녕하세요, 강의 애청자(?) 입니다.React Server Component가 도입된 후에 interaction이 필요한 component(Client component)만 JS Bundle에 포함시켜서 Browser로 보냄으로써 JS Bundle의 불필요한 계산(용량)을 줄일 수 있다고 말씀하셨습니다. 그렇다면 여기서 궁금한것이 React Server Component를 설명해주시기 전에 Pre Fetching에서 JS Bundle에는 사실 현재 Page에 필요한 JS Bundle만 전달된다. 이유는 용량이 커지면 hydration이 지연되기 때문. 그 후에 Pre fetching으로 나머지 연결된 모든 Page의 JS Bundle을 불러온다고 설명해주신 개념은 여전히 유지가 되는건가요?즉, 아래의 순서가 맞는지 궁금합니다.(Brower) 접속요청(Server) JS 실행-Rendering(Server to Browser) Rendering 된 HTML(Browser to User) 화면에 Rendering(Server to Browser) JS Bundle( 단, '현재 Page에 필요한', 'Client component')(Browser) Hydration(Browser to User) Interaction 가능 - TTI(Server to Browser) Pre Fetching/JS Bundle (단, '연결된 모든 Page의', 'Client component')이 순서가 맞을까요?아니라면.. Pre fetching 개념이 React Server Component 도입이후 없어진건가요?(이건 아닌거같긴한데 ㅎ)어떻게 동작하는지 궁금합니다. 항상 잘 듣고있습니다.감사합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
게시글 삭제
안녕하세요 제로초님! 게시글 삭제하기 기능을 구현하고 있습니다!구현해도 안되길래 스웨거가서 테스트를 하고 서버를 봤더니 오류가 나더라구요혹시 이유를 알 수 있을까요??
-
미해결Next.js 시작하기(feat. 지도 서비스 개발)
키보드 어떤 거 사용하시나요
궁금합니다
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
유저의 요청으로 서버에서 "JS 실행(렌더링)"을 하는것에 관한 질문
유저가 웹 앱에 진입을 하면서 서버에 요청을 보낼 때,서버에서 JS를 실행하여 html을 채워준 뒤에 클라이언트로 보낸다고 이해하였습니다. 질문 1) 그렇다면, 서버에서는 node와 같은 자바스크립트 런타임 환경이 갖춰져 있어야 한다는 이야기일까요?? 질문 2) 더 나아가서, 넥스트 프로젝트의 배포 방법이 리액트의 배포 방법과 차이가 많이 날까요??(vercel을 사용하지 않는다는 전제하에)
-
미해결Next + React Query로 SNS 서비스 만들기
구글 로그인 구현하기
안녕하세요 제로초님! 완강하고 지금 구글 로그인 구현중입니다.구글로 로그인하다가 마지막에 인가토큰받는 부분에서 404 에러가나는데 이유를 모르겠습니다... 도와주세요 ㅠ_ㅠ
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
nest 서버 에러
안녕하세요 네스트 서버에서 아래와 같은 에러가 발생해서 보니 커넥션 관리가 안되고 있더라고요prisma disconnect 추가하시면 좋을 거 같습니다. 강의 잘 보았습니다 감사합니다. PrismaClientInitializationError: Invalid prisma.review.findMany() invocation: Can't reach database server at aws-0-ap-northeast-2.pooler.supabase.com:5432 Please make sure your database server is running at aws-0-ap-northeast-2.pooler.supabase.com:5432. at In.handleRequestError (/var/task/node_modules/@prisma/client/runtime/library.js:122:7154) at In.handleAndLogRequestError (/var/task/node_modules/@prisma/client/runtime/library.js:122:6188) at In.request (/var/task/node_modules/@prisma/client/runtime/library.js:122:5896) at async l (/var/task/node_modules/@prisma/client/runtime/library.js:127:11167) at async ReviewService.findBookReviews (/var/task/dist/src/review/review.service.js:32:16) at async /var/task/node_modules/@nestjs/core/router/router-execution-context.js:46:28 at async /var/task/node_modules/@nestjs/core/router/router-proxy.js:9:17
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
value 와 defaultValue 의 차이
포트폴리오 강의를 보다가 질문이 생겼습니다.defaultValue 와 value 의 차이가 defaultValue 는 기존값이 수정되고, value 는 수정이 안된다는 것 뿐인가요? 그렇다면 value 는 값을 수정할 수 없으므로 readOnly 라는 코드를 빼도 되는것 아닌가요?그리고 아래의 코드는 삼항연산자로 되어 있는데 (props.address !=="" ) 이 거짓일때는 게시물 수정할 때를 의미하는것이 맞나요?제가 정확히 이해하고 있는지 의심이 들어서 질문 올립니다!그리고 BoardCommentWrite.presenter컴포넌트에서 value={props.writer} 라고 되어 있는데 defaultValue={props.writer} 라고 되어도 문제 없는게 맞나요? <S.Input placeholder="작성자" onChange={props.onChangeWriter} value={props.writer} /> <S.Address readOnly value={ props.address !== "" ? props.address : props.data?.fetchBoard.boardAddress?.address ?? "" } />
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 설치 문제
eslint 설치할 때 3개 중에 마지막 3번째 선택지가 없어서 수업질문 참고해서 yarn add eslint@8.0.1 설치를 하였습니다. 그다음에 npx eslint --init를 했는데 마지막에 강사님화면에서는 Would you like to install them now? · No / Yes 이렇게 되어있고 여기서 yes하면 Which package manager do you want to use? npm yarn pnpm 이런식으로 뜨는데 저는 Would you like to install them now with npm? · No / Yes 이렇게 바로 떠서 yes를 누르면 바로 설치가 됩니다.(no 눌려도 그냥 설치돼요) 근데 설치하고 나면 이런 사진과 같은 오류가 떠요 안되는 경우 방법으로 1. yarn.lock, node_modules, .eslintrc.js 파일을 지워주시고,2. 다시 한 번 위의 순서로 eslint를 설치해 주세요! 이것도 다 따라했는데 계속 똑같아요 지피티한테 물어보니까주요 경고 및 문제:package-lock.json 감지 경고프로젝트에 yarn.lock과 package-lock.json이 동시에 존재합니다. Yarn과 npm을 섞어 사용하면 의존성 문제나 충돌이 발생할 수 있으므로, 하나의 패키지 매니저만 사용하는 것이 좋습니다.해결책: package-lock.json 파일을 삭제하고 Yarn을 계속 사용하거나, 반대로 Yarn을 포기하고 npm을 사용하세요.의존성 경고 (peer dependency 불일치)예를 들어, @typescript-eslint/eslint-plugin이 eslint 버전 8.57.0 이상을 요구하지만 현재 설치된 버전은 8.0.1입니다.해결책: 경고를 무시하지 않고, 요구 사항에 맞는 최신 버전을 설치하세요 yarn add eslint@^8.57.0eslint@8.0.1 버전 경고설치된 eslint 버전 8.0.1은 더 이상 지원되지 않는 버전입니다. 최신 버전으로 업그레이드하세요.해결책yarn add eslint@latest의존성 중 사용 중단된 모듈예를 들어, glob@7.2.3과 inflight@1.0.6이 더 이상 지원되지 않습니다.이는 주로 간접 의존성에서 발생하며, 해당 모듈의 최신 버전으로 업데이트하거나, 의존성을 최신으로 맞춰야 할 수 있습니다.이런식으로 알려주는데 뭐 아무거나 못건들겠어요 잘못될 것같아서 뭐가 잘못된걸까요 ?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
라이브러리 react 버전 관련
안녕하세요 궁금한 게 있는데 알려주신 react loading skeleton 라이브러리는 리액트 19와 호환되지 않아서 react 18을 써야하는데,next 15는 리액트 19 rc 버전을 사용하고 있는데요.next 15 + react18로 사용을 해도 앱 라우터가 동작은 하던데, next 15 + react18로 사용하면서 라이브러리 들을 쓰는 게 좋을까요? next 15 + react19 rc로 쓰는 게 좋을까요?관련해서 검색해보면 next 15 + react18은 앱라우터를 못 쓴다고만 되어있더라고요. 강사님의 개인적인 의견이 궁금해서 여쭤봅니다
