안녕하세요 제로초님!! 해당 강의 영상을 끝까지 수강한 수강생 입니다! 항상 강의 영상 잘 보고 있습니다. 복잡한 질문에도 친절히 답해주셔서 감사합니다~! 첫 번째 에러를 번역해보니 'FollowList'에 prop 'data'가 필요한 것으로 표시되어 있지만 값은 'undefined'입니다. 라고 뜹니다. 문제가 생긴 profile.js 에서 console.log(data)를 해보니 역시 data가 undefined 가 나옵니다. FollowList.js의 data가 profile.js로 전달이 되지 않은 것인가요? 만약 그렇다면 어디를 봐야 하는지 힌트 부탁 드립니다! (data의 프롭타입은 배열입니다!) https://github.com/ZeroCho/react-nodebird/blob/master/ch6/front/pages/profile.js 질문을 올리기 전에 제로초님 깃허브를 꼼꼼히 참고하고 스스로 구글링 해보았지만 해결이 어려워 질문 올립니다! 포기하지 않고 끝까지 완강을 목표로 하겠습니다! 아래 사진은 상단 이미지에서 잘린 에러 전체입니다. 감사합니다!
http일 때는 문제가 없었는데 https 적용 후에 문제가 발생합니다. 강의에서 알려주신 대로 하면 에러가 나와서 제로초 님 블로그 보고 cerbot이랑 nginx 설치했습니다. 아래 코드만 강의와 다르게 했습니다. sudo snap install certbot --classic sudo apt-get install nginx sudo certbot --nginx https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 에러 내용은 다음과 같습니다. https 적용 전 https:// abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpg https 적용 후 https:// abc/ https:/ abc.s3.ap-northeast-2.amazonaws.com/original/1705127046450_china.jpg http://abc/ 이 부분을 없애는 방법을 알고 싶습니다. nginx.conf는 아래와 같습니다. server { // 실제로는 구매한 도메인 넣었습니다. server_name abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } } server { // 실제로는 구매한 도메인 넣었습니다. server_name api.abc; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000/; proxy_redirect off; } }
이전 질문글에 답글을 남겼는데, 확인하기 힘드실 것 같아 질문을 새로 작성합니다. 클라이언트 컴포넌트는 기존 Next12처럼 Pre-Rendering으로 제공된다고 알고 있는데, 이는 기본적으로 SSG인가요? 아니면 SSR인가요? 또 둘 중에 선택이 가능한지 궁금합니다!
기존의 Server Side Rendering(SSR)과 다른 점을 간단하게 정리하자면 SSR은 서버에서 페이지 단위로 정적인 리소스를 생성하지만 RSC는 컴포넌트 단위로 정적인 리소스를 생성할 수 있다는 점입니다. 여기서 RSC의 가장 큰 장점이 나옵니다. 클라이언트로 내려보내는 JavaScript 번들 크기를 줄일 수 있게 되는 것이죠. 라고 하셨는데, RSC가 단순 컴포넌트 단위로 정적인 리소스를 생성한다고 해서 왜 SSR보다 클라이언트로 내려보내는 JS 번들 크기를 줄일 수 있는지가 궁금합니다!
안녕하세요. 선생님 무한스크롤이 계속 만들어져서 질문드려요 위 사진에는 댓글이 2개 달린 상태입니다. 그런데 스크롤을 내리면서 2개였던게 계속 복사되어 만들어지는 상태입니다. 이런식으로 초기 댓글 갯수가 반복해서 늘어나는 것 같아요. 코드를 보고도 오류를 찾기 힘들어 질문 드려요! 참고로, 이전에 비슷한 질문에 확인 해야 할 사항이 있어서 체크해보았습니다. nextconfig.json에서 reactStrictmode를 false로 바꿔보시고 서버를 껐다 다시 켜주세요! >> 바꾸고 해도 되지 않는 것 같습니다. 무한스크롤을 제거한 후 댓글을 작성해 보고 정상적으로 작성이 되는지 알려주세요. >> 무한스크롤 컴포넌트 삭제 시 다른 부분들은 원활하게 작동합니다. 또 다른 자료가 필요하시면 말씀해주세요! 긴 질문 읽어주셔서 감사합니다!!
안녕하세요. 강의를 보며 코드를 작성하고 있는데, 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 코드를 복붙해도 에러가 해결되지 않아 무엇이 원인인지 모르겠습니다. 도움을 주신다면 정말 감사하겠습니다...
병렬 라우팅과 인터셉팅 라우트를 이용하여 작업중에 있습니다. 예를 들어 /product 라는 페이지에서 생성이라는 버튼을 눌렀을때 /product/write/[id] 로 경로는 이동하며, 병렬 라우팅과 모달이 생성되는것까지는 적용이되었고, 모달을 닫을시에는 closeButton에 router.back()으로 /product로 이동이 되는데 확인라는 버튼을 누를때 원하는것은 /product/[id] 로 경로이동 후 모달이 닫히는걸 예상하였는데 현재는 /product/[id] 로 경로 이동만하고 모달은 그대로 남아있습니다. 이럴경우에는 모달을 boolean 으로 따로 경로 이동후 닫히게 작업을 해줘야할까요? 더 좋은방법이나 제공하는 기능이 있을까해서 질문드립니다.
cd class 이후 react 버전 변경 시 아래와 같은 오류가 진행됩니다. 어떻게 해결해야할까요..ㅠㅠ Usage Error: The nearest package directory (C:\Users\user\Desktop\CodeCamp_Frontend_j\class) doesn't seem to be part of the project declared in C:\Users\user. - If C:\Users\user isn't intended to be a project, remove any yarn.lock and/or package.json file there. - If C:\Users\user is intended to be a project, it might be that you forgot to list Desktop/CodeCamp_Frontend_j/class in its workspace configuration. - Finally, if C:\Users\user is fine and you intend Desktop/CodeCamp_Frontend_j/class to be treated as a completely separate project (not e
상황 : router a-> b-> c-> d-> c 로 이동 했을 때 c에서 뒤로가기 이벤트가 발생하면 (혹은 뒤로가기를 누르면) b 로 이동 하도록 구현하고자 합니다. 다만 d에서 뒤로가기 시에는 c로 이동하길 원합니다. 현재 구현 상태는 c : router.push(d) d : router.replace(c) 이 방법은 c 에서 뒤로가기를 눌러도 c로 가버리는 한계가 있습니다. 따라서, replace(c) 이전에 history에서 직접 c를 제거해 주는 방법을 생각 중인데, (앱 개발할 때 가능했던 기억이 있어서) 검색을 해도 답을 찾지 못하고 있습니다. 답변 주시면 감사하겠습니다 !
디렉토리를 만들고 그 안에 layout.tsx 파일이나 page.tsx 파일을 만들 때 이름을 layout, page로 다 통일하는 것이 일반적인가요? 아니면 내가 만드려는 layout, page 별로 이름을 다르게 하는지 궁금합니다. (예를 들어 explore-page.tsx 이렇게요!)
안녕하세요 현재 MacBook Air 2022( macOS Sonoma | version 14 | Apple M1)으로 수강 중 입니다 yarn 설치시 오류가 발생합니다 ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use src/ directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to customize the default import alias (@/*)? … No / Yes Creating a new Next.js app in /Users/namgyukim/Desktop/codecamp-frontend-NGK/class. Using npm. Initializing project with template: default Installing dependencies: - react - react-dom - next added 22 packages, and audited 23 packages in 8s 3 packages are looking for funding run npm fund for details found 0 vulnerabilities Initialized a git repository. Success! Created class at /Users/namgyukim/Desktop/codecamp-frontend-NGK/class npm notice npm notice New patch version of npm available! 10.2.3 -> 10.2.5 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5 npm notice Run npm install -g npm@10.2.5 to update! npm notice namgyukim@NAMui-MacBookAir codecamp-frontend-NGK % cd class namgyukim@NAMui-MacBookAir class % yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact zsh: command not found: yarn namgyukim@NAMui-MacBookAir class % npm install -g yarn npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/yarn npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/yarn' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator. npm ERR! A complete log of this run can be found in: /Users/namgyukim/.npm/_logs/2024-01-08T14_45_08_725Z-debug-0.log 어떻게 해야 다음 단계로 넘어갈 수 있을까요?
