176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위 코드 첫 줄에서 todoInput 값을 const로서 정의해줬는데, 함수 내에서 마지막에 이것을 다시 ' '로 초기화해주는 단계가 있습니다. 근데 const는 정의된 후 값이 변하지 않는 상수와 같은 걸로 알고 있는데 이런 식으로 값이 변해도(?) 되나요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 제로초님! 노드버드 섹션6 EC2 생성하기 강의까지 수강한 수강생 입니다! 아래 수강생 분과 동일한 문제가 발생하여 구글링과 다른 분들의 질문 글을 보며 해결하려 했으나 그러지 못하여 질문을 올리게 되었습니다! 항상 친절한 답변을 해주셔서 감사합니다!(강의 항상 잘 보고 있어요!) 같은 문제가 발생한 수강생 분의 질문 https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49012&tab=community&category=questionDetail&q=152537 키의 권한을 바꾸는 방법 참고 https://wookim789.tistory.com/34 SSH은 22번 포드, HTTP는 80번 포트, HTTPS는 443번 포트로 강의와 동일하게 진행하였습니다. 폴더를 하나 더 들어가야 하는 불편함 때문에 강의와 똑같이 prepare 폴더는 만들지 않고, 노드버드 폴더 아래에 바로 front, back 폴더가 위치하도록 하였습니다. vs 터미널에서 발생한 문제 메시지를 번역하니 다음과 같았습니다. 경고: 보호되지 않는 개인 키 파일react-nodebird.pem'에 대한 권한이 너무 열려 있습니다. 다른 사람이 개인 키 파일에 액세스할 수 없어야 합니다. 이 개인 키는 무시됩니다. 로드 키 "react-nodebird.pem": 잘못된 권한 ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com : 권한이 거부되었습니다 같은 문제가 발생한 수강생 분의 글을 읽고 vs 터미널이 아닌 git bash를 사용했습니다. 이 때 문제를 해결하신 수강생 분과는 다른 메시지가 나타났습니다. (문제를 해결하신 수강생 분의 git bash 상태) (저의 git bash 상태) 응용프로그램에 대한 확장 보안 유지관리가 활성화되지 않았습니다. Expanded Security Maintenance for Applications is not enabled. 빨간 선은 개인 정보라 부득이하게 블러 처리하였습니다. ssh -i "react-nodebird.pem" ubuntu@ec2-13-125-253-222.ap-northeast-2.compute.amazonaws.com 의심이 들어 다시 vs code 터미널의 노드버드 폴더 경로에 위 명령어를 붙여 넣었으나 WARNING: UNPROTECTED PRIVATE KEY FILE! 문제가 계속 발생합니다. 어떻게 해야 이 문제를 해결할 수 있는지 도움을 구하고 싶습니다! 저 또한 답변만 기다리지 않고 계속 해결 방안을 모색하겠습니다! 긴 질문 글 읽어주셔서 감사합니다.
해결됨
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 입니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
build해서 yarn start 했을때 제컴퓨터론 잘되는데 AWS해서 페이지를 열경우 게시판 리스트가 안뜹니다 불러오기가 안되는거같은데 이유가 이유가 뭘까요
해결됨
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.js 풀스택 Github Issue 서비스 만들기
제목 : react-simplemde-editor이 외에 사용하시는 Text Editor 있으신가요? 설명: 이번에 한번 따로 만들어보려고합니다. 마크다운을 쓰지않는 기본적인 text기능이 들어간 editor로 추천해주실 수 있을까요?
해결됨
Next.js 풀스택 Github Issue 서비스 만들기
제목 : react-simplemde-editor 사용시 ReferenceError 가 발생합니다 import SimpleMDE from "react-simplemde-editor"; <Controller name="description" control={control} render={({ field }) => ( <SimpleMDE placeholder="Description" {...field} /> )} /> // 아래는 에러내용 node_modules\codemirror\lib\codemirror.js (18:18) @ navigator ⨯ ReferenceError: navigator is not defined 내용 :11.이슈생성폼제출기능구현에서 에러가 나네요 콘솔에 값은 잘나타납니다. 강사님이랑 똑같이 작성했는데 인터넷 찾아보니 https://velog.io/@app235naver/NextJs-react-simplemde-editor-%EC%9D%B4%EC%8A%88%ED%95%B4%EA%B2%B0 라는 글이 있는데 이해를 못하겠네요.
미해결
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폴더를 굳이 만들지 않고 위와 같이 설정해도 괜찮은가요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님!! 해당 강의 영상을 끝까지 수강한 수강생 입니다! 항상 강의 영상 잘 보고 있습니다. 복잡한 질문에도 친절히 답해주셔서 감사합니다~! 첫 번째 에러를 번역해보니 '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 질문을 올리기 전에 제로초님 깃허브를 꼼꼼히 참고하고 스스로 구글링 해보았지만 해결이 어려워 질문 올립니다! 포기하지 않고 끝까지 완강을 목표로 하겠습니다! 아래 사진은 상단 이미지에서 잘린 에러 전체입니다. 감사합니다!
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
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; } }
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
이전 질문글에 답글을 남겼는데, 확인하기 힘드실 것 같아 질문을 새로 작성합니다. 클라이언트 컴포넌트는 기존 Next12처럼 Pre-Rendering으로 제공된다고 알고 있는데, 이는 기본적으로 SSG인가요? 아니면 SSR인가요? 또 둘 중에 선택이 가능한지 궁금합니다!
해결됨
Next + React Query로 SNS 서비스 만들기
fetch 함수가 그냥 web API 같은데 fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요? next 가 내부적으로 fetch 를 새로 만든건가요?
미해결
Next + React Query로 SNS 서비스 만들기
위 사진 처럼 컴파일이 안됩니다. 그리고 이렇게 바꾸고 실행을 시키면 실행은 되는데 코드 상에서 NEXT_PUBLIC_BASE_URL이 undefined로 확인이됩니다. 어떻게 해결할 수 있을까요.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
기존의 Server Side Rendering(SSR)과 다른 점을 간단하게 정리하자면 SSR은 서버에서 페이지 단위로 정적인 리소스를 생성하지만 RSC는 컴포넌트 단위로 정적인 리소스를 생성할 수 있다는 점입니다. 여기서 RSC의 가장 큰 장점이 나옵니다. 클라이언트로 내려보내는 JavaScript 번들 크기를 줄일 수 있게 되는 것이죠. 라고 하셨는데, RSC가 단순 컴포넌트 단위로 정적인 리소스를 생성한다고 해서 왜 SSR보다 클라이언트로 내려보내는 JS 번들 크기를 줄일 수 있는지가 궁금합니다!
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 선생님 무한스크롤이 계속 만들어져서 질문드려요 위 사진에는 댓글이 2개 달린 상태입니다. 그런데 스크롤을 내리면서 2개였던게 계속 복사되어 만들어지는 상태입니다. 이런식으로 초기 댓글 갯수가 반복해서 늘어나는 것 같아요. 코드를 보고도 오류를 찾기 힘들어 질문 드려요! 참고로, 이전에 비슷한 질문에 확인 해야 할 사항이 있어서 체크해보았습니다. nextconfig.json에서 reactStrictmode를 false로 바꿔보시고 서버를 껐다 다시 켜주세요! >> 바꾸고 해도 되지 않는 것 같습니다. 무한스크롤을 제거한 후 댓글을 작성해 보고 정상적으로 작성이 되는지 알려주세요. >> 무한스크롤 컴포넌트 삭제 시 다른 부분들은 원활하게 작동합니다. 또 다른 자료가 필요하시면 말씀해주세요! 긴 질문 읽어주셔서 감사합니다!!
미해결
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.js 풀스택 Github Issue 서비스 만들기
720p 인줄 모르고 듣게 되었는데, 눈이 좀 피로합니다. 개선은 어려울까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
http://storage.goolgeapis.com/codecamp-file-storage/2024/1/10/IMG_9473.jpeg 위에 주소 맞지 않나요? ㅠㅠ
