우선 웹라이브러리 파트의 Link태그 적용 강의에서   후반부에 useParams 를 사용하게 되는데,   이부분부터 무언가 오류가 발생하네요..   1. 메인화면 들어갔을때 오류화면     2. 상품클릭했을때 콘솔로그     상품을 클릭했을때 변경된 주소까지는잘 적용 되고,   useParams 를 사용하기 전까지는 정상 작동 했는데,   product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다   이전에 소스에서는 문제가 안생겼군요 ㅠㅠ   import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage;     오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다...   react-router-dom 설치 할때 버전을 확인 못하고   그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데,       package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데   오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ  

강의를 보며 그대로 따라했는데    const query = req.query;   console.log("QUERY : ", query);   를 추가했을때 터미널에 node server.js를 하면 에러가 납니다ㅜㅜ

async existsByEmail(email: string): Promise<boolean> { try { const result = await this.catModel.exists({ email }); return result; } catch (error) { throw new HttpException('db error', 400); } } 에서 return result부분에서 오류가 발생합니다. src/cats/cats.repository.ts:20:7 - error TS2322: Type 'Pick<Document<Cat, any, any>, "_id">' is not assignable to type 'boolean'.   20       return result;          ~~~~~~~~~~~~~~exists() 따라가 보면 리턴타입이 boolean이 아닌거 같은데 어떤 부분을 확인해 보면 좋을까요?   console.log로 result를 찍어보면  { _id: new ObjectId~~~} 가 나옵니다.

import { Injectable, ExecutionContext, HttpException, HttpStatus, } from '@nestjs/common'; import { AuthGuard } from '@nestjs/passport'; import { JwtService } from '@nestjs/jwt'; @Injectable() export class JwtAuthGuard extends AuthGuard('jwt') { constructor( private readonly jwtService: JwtService, // @Inject(forwardRef(() => AdminsService)) // private readonly adminsService: AdminsService, ) { super(); } canActivate(context: ExecutionContext) { const request = context.switchToHttp().getRequest(); const { authorization } = request.headers; if (authorization === undefined) { throw new HttpException('Token 전송 안됨', HttpStatus.UNAUTHORIZED); } //const token = authorization.replace('Bearer ', authorization); const token = authorization.replace('Bearer ', ''); //console.log(token, 'token!!!'); request.user = this.validateToken(token); return true; } validateToken(token: string) { const secretKey = process.env.SECRET ? process.env.SECRET : 'dev'; try { const data = this.jwtService.verify(token, { secret: secretKey, }); console.log(data, '11번가데이터'); return data; } catch (e) { switch (e.message) { // 토큰에 대한 오류를 판단합니다. case 'INVALID_TOKEN': case 'TOKEN_IS_ARRAY': case 'NO_USER': throw new HttpException('유효하지 않은 토큰입니다.', 401); case 'EXPIRED_TOKEN': throw new HttpException('토큰이 만료되었습니다.', 410); default: console.trace(e); // console.log('광섭짱과 함께하는 코딩공부',) throw new HttpException('서버 오류입니다.', 500); } } } }   이부분은 jwt.guard.ts 입니다 저 빨간줄에서   Trace: TypeError: Cannot read properties of undefined (reading 'verify') 이렇게 나오는데 왜 저렇게 나오는건지 도저히 모르겠네요 해당 토큰값도 잘 받아와서 verify 를 이용해 토큰 유효성 검사를 진행하려하는데 그부분에서 에러가 계속 납니다... 도와주세요

안녕하세요! 강의 잘듣고있습니다.!! PositiveIntPipe pipe를 만들때도 의존성 주입을 해야하기 때문에 @Injectable()를 사용하신건가요?? 만약 맞다면 사용한 이유가 궁금합니다.!!( @Injectable 를빼도 작동이 잘되고 파이프도 의존성을 주입해야하나? 라는 궁금증이 있어서 남깁니다!) 감사합니다!

안녕하세요.  .env에 MONGODB_URI를 못 읽어서 계속 mongodb connect 실패가 발생하고 있습니다. 혹시나 하여 app.modules.ts 에서 @Modules 앞 뒤로 MONGODB_URI를 콘솔로 찍어봤는데 @Modules 전에는 값이 안나오고 이후에는 잘 출력되는데요.  혹시 추가로 확인해야할 부분이 있을까요?   감사합니다.

부모컴포넌트에서 리덕스를 사용하지않고 props로 값을 전달할때에 자식 컴포넌트에서 props.state를 사용하여 앞에 프롭스를 항상붙여 써도 동작하는경우가있고 프롭스 없이 state를 바로사용할수있는경우가 있는데 어떤 차이가있고 어떤걸 사용해야하는지 궁금합니다 만약 프롭스를 붙이지않고 정상적으로 동작하여도 props. 형태를 매번 사용하는것이 좋을까요?   아래는 예시 상황입니다   // 부모에게서 randomstate 를 전달받아 바로 사용하는 자식컴포넌트 const Child1 = ( randomstate ) => { console.log(randomstate); return 자식 컴포넌트 ; }; ...   // props를 매번 이용하여 사용하는 컴포넌트   const Child2 = ( props, randomstate ) => { console.log(props.randomstate); return 자식 컴포넌트 ; }; ...

질문있습니다.   소켓프로그래밍이라 하면 어떤것을 제작하는 것을 의미하나요 어렴풋이 서버 프로그래밍을 얘기하는 것 같은데....   그리고 서버 어플리케이션을 만드는 것으 이야기하는지 서버의 운영체제를 만드는 것을 이야기하는지 잘 모르겠습니다.   도움말씀 부탁드려요..

npm ERR! code 1 npm ERR! path C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\지은\AppData\Roaming\nvm\v16.15.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.14.0 npm ERR! node-pre-gyp info using node@16.15.0 | win32 | x64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@16.15.0 (node-v93 ABI, unknown) (falling back to source compile with node-gyp)  npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON npm ERR! gyp ERR! find Python checking if "python3" can be used npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python" can be used npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python39\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python39\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python39\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python38\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python38\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python38\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python36\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python36\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python36\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python36-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python36-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python36-32\python.exe" could not be run npm ERR!     C:\Users\지은\AppData\Local\npm-cache\_logs\2022-05-25T05_57_34_949Z-debug-0.lognpm ERR! code 1 npm ERR! path C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\지은\AppData\Roaming\nvm\v16.15.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.14.0 npm ERR! node-pre-gyp info using node@16.15.0 | win32 | x64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\지은\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@16.15.0 (node-v93 ABI, unknown) (falling back to source compile with node-gyp)  npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.15.0 | win32 | x64 npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON npm ERR! gyp ERR! find Python checking if "python3" can be used npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python" can be used npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python39\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python39\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python39\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python39-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python39-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python38\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python38\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python38\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python38-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python38-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python37-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python37-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python36\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python36\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python36\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Users\지은\AppData\Local\Programs\Python\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Users\지은\AppData\Local\Programs\Python\Python36-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files\Python36-32\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python36-32\python.exe npm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python36-32\python.exe" could not be run npm ERR!     C:\Users\지은\AppData\Local\npm-cache\_logs\2022-05-25T05_57_34_949Z-debug-0.log   루트 디렉토리에서 npm install 오류가 계속뜹니다ㅠ 버전의 문제인가요...? 이 강의 꼭 듣고싶은데 해결방법이 있을까요..?    

배포했는데 회원가입도 되고, 로그인도 되는데, 쿠키가 안넘어갑니다. 개발모드일때는 쿠키가 넘어갔는데, 어디서 문제인지 모르겠습니다. 아이디 부분만 닉네임으로 바꿨습니다.

안녕하세요 현영님. 에러는 해결을 한 상태인데 궁금한 점이 생겨 질문드립니다.  const fs = require('fs'); 백쪽에 fs모듈을 쓰면서 부터 시작됐는데, 강의 마지막 부분에 와서 프론트 서버를 새로고침하니 저런 에러가 발생했습니다.  스택오버플로우를 찾아보니, https://github.com/vercel/next.js/issues/7755 프론트쪽에 next.config.js라는 폴더를 생성한 후  module.exports = { webpack: (config, { isServer }) => { // Fixes npm packages that depend on `fs` module if (!isServer) { config.node = { fs: 'empty' } } return config } }이런식으로 넣어주라는데, 프론트 서버에서는 fs모듈에 관련된 작업을 한 게 없어 여러가지 테스트를 하다가, 프론트 폴더의 .eslintrc파일에 extends를 airbnb가 아닌 주석처리된 부분으로 바꾸니 또 해결이 되었습니다.(다른 프론트나 백쪽의 코드는 수정이 없었습니다)1. 혹시 extends랑 상관이 있는건지? 아니면 그냥 일시적인 에러라고 생각을 하면 될까요?2. 관련이 없다고 하면 혹시나 알 수 없는 에러가 나올 경우 현영님의 경우 어떻게 대처를 하시나요? (에러가 생길 때마다 기록을 해두는 편인데 생각보다 찾기가 힘든? 에러들이 종종 나오더라고요.. 짬의 차인지..?)++ 어제 업데이트 하신 정보들 확인했습니다. 바로바로 업데이트 해주셔서 불편함이 없네요 감사합니다  

안녕하세요. 현재 프론트는 mysiteurl.site 라는 도메인으로 firebase 호스팅을 하고 있고 백엔드는 mysiteurl.shop 으로 다른 도메인으로 정할 예정인데요.   강의에선 프론트와 백엔드가 동일하게 nodebird.com 이 들어가 있고 route53에서 서로 다른 ip를 가르키게 했는데 제가 하려고 하는 방식에도 쿠키가 전달이 가능할까요? (nginx proxy_set_header 세팅은 동일하다는 가정)

에러 발생시점: faker.js 사용 후입니다 에러 최대한 제 손으로 잡으려 했는데 이번 거는 찾기가 조금 힘들고 감이 안오네요.. 처음 npm run을 했을 때 화면에는 정상적으로 더미데이터가 들어오면서 에러도 같이 뜨는 상태입니다(에러를 끄면 컨텐츠와 댓글 등등의 기능 동작은 되네요) 간단하게 힌트만 주셔도 직접 해결 해보겠습니다 감사합니다   코드: import {faker} from  '@faker-js/faker'; export const initialState = {         mainPosts: [],         imagePaths: [],         addPostLoading: false,         addPostDone: false,         addPostFailure: null,         removePostLoading: false,         removePostDone: false,         removePostFailure: null,         addCommentLoading:false,         addCommentDone: false,         addCommentFailure: null     }   initialState.mainPosts = initialState.mainPosts.concat(       Array(20).fill().map(() => ({         id: shortId.generate(),         User:{             id:shortId.generate(),             nickname: faker.company.companyName()         },         content: faker.lorem.paragraph(),         Images: [{             id: shortId.generate(),                   }],         Comments:[{             User:{                 id: shortId.generate(),                 nickname: faker.name.findName()             },               content: faker.vehicle.vehicle()         }]     })) )  에러:   ++  에러에 HYDRATE관련된 에러가 있어 우선은 리듀서폴더에 있는 index.js같이 첨부합니다 import { HYDRATE } from "next-redux-wrapper" import { combineReducers} from 'redux' import user from './user' import post from './post' const rootReducer = combineReducers({     index: (state = {}, action) => {       switch (action.type) {         case HYDRATE:           console.log('HYDRATE', action);           return { ...state, ...action.payload };         default:           return state;       }     },     user,     post,   });     export default rootReducer;

제로초님 nodebird에서 comment 관계에서는 user.hasmany(comment) post.hasmany(comment)  이렇게 관계를 설정하였는데 이는 아무 유저가 comment 작성이 가능하게 하기위해 이렇게 하였고    상품구매 리뷰에서는 상품을 구매한 사람에 한해서만 comment를 작성해야만 하니 comment는 user, product의 belongsToMany로 관계 설정을 해줘야 한다고 판단했는데   맞을까요?  

안녕하세요 zerocho님. 항상 친절하게 답변주셔서 감사합니다. 몇가지 질문이 있습니다.   1. getServerSideProps에서는 브라우저에서 쿠키를 들고 next.js 서버로 오기 때문에 cookie를 가지고 올 수 있다고 이해했는데 getStaticProps는 빌드 시에 실행되기 때문에 cookie를 들고있지 못한걸로 이해했는데 맞나요? 만약 그렇다면 getStaticProps에서 사용하는 API는 인증이 필요하지 않은 API만 사용해야하나요?   2. getServerSideProps는 SSR이라 이를 이용하게되면 화면이 전체 깜빡임이 일어날거라고 생각했는데 실제로는 일어나지 않더라구요. 혹시 이유를 알고 계신지 궁금합니다.

저만 그런건지 모르겠지만 아래 환경에서 jest.fn() is not function 에러가 발생하고 있습니다. 1. Express.JS 사용 중 2. ES6 문법을 사용 중 3.  package.json 에 "type":"module" 옵션 추가 4. 그로 인해 import 구문의 './파일명.js' 로 작성해야함 5.  package.json 의 script 항목의 "test" : "jest" 를 아래로 변경 "node --experimental-vm-modules node_modules/jest/bin/jest.js"    에러 발생 원인은 '.js' 부분 떄문이라고 추측하지만 정확하지 않습니다. 떠힌 Jest NODEModules 기능은 실험적 기능이며, 몇몇 기능이 지원되지 않는 것이라고 추측하고 있습니다.따라서 dev 환경에서는 ES6 를 쓰도록 별도로 셋업하고 ES5 로 빌드 하는 과정이 필요한 것이 아닌가 싶었습니다.git clone https://github.com/unchaptered/express-web my-app 혹은npx degit unchaptered/express-web my-appcd my-appnpm i를 이용해서 프로젝트를 셋업하고 작성하시면 됩니다.커뮤니티에도 올려두었는데 문제 되는 부분 있으면 댓글 부탁드립니다.  ES6 Express Jest Boilerplate Template ES6 익스프레스 보일러플레이트 탬플릿 - 인프런 | 자유주제 (inflearn.com)

안녕하세요. 제로초님의 강의에 큰 도움을 받고 있음에 감사의 말씀을 드립니다. 여러 검색결과도, 질문답변도, 해당강의 반복재생으로 찾아보았으나 해결치 못한 부분이 있어 이렇게 직접 질문을 하게 됐네요!   [ 마주한  문제점 & 상황 ] 은 다음과 같습니다. 1. (이전상황) 로그인폼(Id, Pwd)에 텍스트를 입력해 "로그인" 버튼을 누르면 정상적으로 로그인이 됐고, Redux 역시 정상작동해 개발자도구에서 확인이 가능했습니다. 2. (현재상황) 섹션3(Redux) "더미데이터와 포스트폼 만들기" 강의를 들으며 문제에 마주했습니다. 3. (더미데이터와 포스트폼 만들기 강의 후) 잘 넘어가던 로그인 화면에서 데이터는 넘어가 콘솔에 찍히지만, 화면 페이지는 게시판으로 넘어가지 않는 상황에 직면했습니다.    [ 콘솔에 찍히는 Error ] 는 다음과 같습니다.       [정상적으로 넘어가는 로그인 데이터] -> 그러나 로그인이 되지 않고 화면이 넘어가질 않습니다!     [ 소스코드 ] 1. package.json  {   "name": "react-nodebird-front",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "dev": "next -p 3060",     "build": "next build"   },   "author": "jj",   "license": "ISC",   "dependencies": {     "@ant-design/icons": "^4.7.0",     "antd": "^4.19.0",     "next": "^9.5.5",     "next-redux-wrapper": "^6.0.2",     "prop-types": "^15.8.1",     "react": "^16.14.0",     "react-dom": "^16.14.0",     "react-redux": "^7.2.8",     "redux": "^4.1.2",     "redux-devtools-extension": "^2.13.9",     "styled-components": "^5.3.3"   },   "devDependencies": {     "eslint": "^8.10.0",     "eslint-plugin-hooks": "^0.4.2",     "eslint-plugin-import": "^2.25.4",     "eslint-plugin-react": "^7.29.3"   } } 2. LoginForm.js 파일 import React, { useState, useCallback, useMemo } from 'react'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import styled from 'styled-components'; import { useDispatch, useSelector } from 'react-redux'; import useInput from "../hooks/useInput"; import { loginAction } from '../reducers/user';   const ButtonWrapper = styled.div `     margin-top: 10px; `;   const FormWrapper = styled(Form) `     padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => {     const dispatch = useDispatch();     const [id, onChangeId] = useInput('');     const [password, onChangePassword] = useInput('');     const onSubmitForm = useCallback(() => {         console.log(id, password);         dispatch(loginAction({id, password}));     }, [id, password]);       return (         <FormWrapper onFinish={onSubmitForm}>             <div>                 <label htmlFor="user-id">아이디</label>                 <br />                 <Input name="user-id" value={id} onChange={onChangeId} required />             </div>             <div>                 <label htmlFor="user-password">비밀번호</label>                 <br />                 <Input                     name="user-password"                     type="password"                     value={password}                     onChange={onChangePassword}                     required />             </div>             <ButtonWrapper>                 <Button type="primary" htmlType="submit" loading={false}>로그인</Button>                 <Link href="/signup"><a><Button>회원가입</Button></a></Link>             </ButtonWrapper>         </FormWrapper>     ); } export default LoginForm; 3. index.js import React from 'react'; import { useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostForm from '../components/PostForm'; import PostCard from '../components/PostCard'; const Home = () => {     const { isLoggedIn } = useSelector((state) => state.user);     const { mainPosts } = useSelector((state) => state.post);     return (         <AppLayout>             {isLoggedIn && <PostForm /> }             {mainPosts.map((post) => <PostCard key={post.id} post={post} />)}         </AppLayout>     ); } export default Home; 4. configureStore.js import { createWrapper } from 'next-redux-wrapper'; import { applyMiddleware, compose, createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import reducer from '../reducers'; const configureStore = () => {     const middlewares = [];     const enhancer = process.env.NODE_ENV === 'production'         ? compose(applyMiddleware(...middlewares))         : composeWithDevTools(applyMiddleware(...middlewares));     const store = createStore(reducer, enhancer);     return store; }; const wrapper = createWrapper(configureStore, {     debug: process.env.NODE_ENV === 'development', }); export default wrapper; 5. post.js // [ initialState ] export const initialState = {     mainPosts: [{         id: 1,         User: {             id: 1,             nickname: 'jj',         },         content: '첫 번째 게시글 #해시태그 #익스프레스',         Images: [{             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }, {             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }, {             src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832',         }],         Comments: [{             User: {                 nickname: 'jj4',             },             content: 'redux를 학습 중입니다.',         }, {             User: {                 nickname: 'jj3',             },             content: '다음은 sage를 학습 예정임.',         }]     }],     imagePaths: [],     postAdded: false, }   const ADD_POST = 'ADD_POST'; export const addPost = {     type: ADD_POST, } const dummyPost = {     id: 2,     content: '더미데이터입니다.',     User: {         id: 1,         nickname: 'jj1',     },     Images: [],     Comments: [], };   const reducer = (state = initialState, action) => {     switch (action.type) {         case ADD_POST:             return {                 ...state,                 mainPosts: [dummyPost, ...state.mainPosts],                 postAdded: true,             };         default:             return state;     } }; export default reducer; 6. PostForm.js import React, { useCallback, useState, useRef } from 'react'; import { Form, Input, Button } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; import { addPost } from '../reducers/post'; const PostForm = () => {     const { imagePaths } = useSelector((state) => state.post);     const dispatch = useDispatch();     const imageInput = useRef();     const [text, setText] = useState('');     const onChangeText = useCallback((e) => {         setText(e.target.value);     }, []);     const onSubmit = useCallback(() => {         dispatch(addPost);         setText('');     }, []);     const onClickImageUpload = useCallback(() => {         imageInput.current.click();     }, [imageInput.current]);     return (         <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}>             <Input.TextArea                 value={text}                 onChange={onChangeText}                 maxLength={140}                 placeholder="어떤 신기한 일이 있었나요?"             />             <div>                 <input type="file" multiple hidden ref={imageInput}/>                 <Button onClick={onClickImageUpload}>이미지 업로드</Button>                 <Button type="primary" style={{ float: 'right' }} htmlFor="submit">짹짹</Button>             </div>             <div>                 {imagePaths.map((v) => (                     <div key={v} style={{ display: 'inline-block'}}>                         <img src={v} style={{ width: '200px' }} alt={v} />                         <div>                             <Button>제거</Button>                         </div>                     </div>                 ))}             </div>         </Form>     ) }; export default PostForm; 7. PostCard.js import React from 'react'; const PostCard = () => {     return (         <div>             PostCard         </div>     ); }; export default PostCard; 8. user.js import { HYDRATE } from 'next-redux-wrapper'; // initialState 부분 const initialState = {     user: {         isLoggedIn: false,         user: null,         signUpData: {},         loginData: {},     },     post: {         mainPosts: [],     } }; // [로그인] action creator export const loginAction = (data) => {     return {         type: 'LOG_IN',         data,     } }; // [로그아웃] action creator export const logoutAction = (data) => {     return {         type: 'LOG_OUT',     } }; // reducer const rootReducer = (state = initialState, action) => {     switch (action.type) {         case HYDRATE:             console.log('HYDRATE', action);             return { ...state, ...action.payload };         case 'LOG_IN':             return {                 ...state,                 user: {                     ...state.user,                     isLoggedIn: true,                     user: action.data,                 },             };         case 'LOG_OUT':             return {                 ...state,                 user: {                     ...state.user,                     isLoggedIn: false,                     user: null,                 },             };         default:             return state;     } }; export default rootReducer;   다소 많은 양의 글 내용이지만, 시간이 허락되실 때 답변 주시면, 참 감사할 것 같습니다! 오늘 하루도 고생많으셨고, 이번 한 주도 파이팅입니다! 늘 양질의 강의 감사합니다 ^^  

  <질문1> Products.js에서 sequelize.define로 테이블 정의시 복수형태로 Products된다고 들었는데 models.Product.create도 Product 단수 형태로 테이블 이름에서 s를 빼주는건가요??? <질문2> result를 log찍어 봤을떄는 또 Product라고 나오고 위에는Products 테이블로 insert into 됐다고 나오는데테이블을 만들어주는건 models/products.js 에서하는건데 model.Product.create 이말은 사실 테이블 생성이아니라 데이터 삽입이라고 보면 될까요?   models.Product.create({     name,     description,     price,     seller,   })

안녕하세요?  Spring에서 NestJS로 전향하기 위해서 강의를 열심히 듣고 있습니다. nodejs나 nestjs를 공부하면서 express가 WAS인가 하는 궁금증이 들었습니다. Node.js는 Javascript의 런타임 이고, express라는 웹 프로엠워크 이용하여 Web Application 구동해준다 라고 생각을 합니다만 express를 was라고 생각해도 맞는 걸까요 ?

안녕하세요?  Spring에서 NestJS로 전향하기 위해서 강의를 열심히 듣고 있습니다. nodejs나 nestjs를 공부하면서 express가 WAS인가 하는 궁금증이 들었습니다. Node.js는 Javascript의 런타임 이고, express라는 웹 프로엠워크 이용하여 Web Application 구동해준다 라고 생각을 합니다만 express를 was라고 생각해도 맞는 걸까요 ?