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

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. 관련이 없다고 하면 혹시나 알 수 없는 에러가 나올 경우 현영님의 경우 어떻게 대처를 하시나요? (에러가 생길 때마다 기록을 해두는 편인데 생각보다 찾기가 힘든? 에러들이 종종 나오더라고요.. 짬의 차인지..?)++ 어제 업데이트 하신 정보들 확인했습니다. 바로바로 업데이트 해주셔서 불편함이 없네요 감사합니다  

리덕스로 로그인을 구현한 후 로그인 되지않는 문제가 생겼었습니다. dispatch 함수가 실행되지만 rootReducer에서 LOG_IN 부분이 실행이 안됐습니다(console.log로 확인) 그래서 useDispatch를 불러온 부분이 문제라고 생각해, react-redux버전을 강의에 맞게 7로 바꾸니 문제가 해결됐습니다. 왜 이런 문제가 발생한건가요..? 추가로 이 강의를 다 들은 후, react-redux를 8버전으로 올리고 싶으면 어디서 변경내역을 확인해야 하나요..?

안녕하세요. 현재 프론트는 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)

제로초님 제가 react-query useQuery Hook을 사용하여 데이터를 받아왔습니다. 이 데이터 값들을 버튼 onClick 함수를 만들어서 버튼을 클릭할 때마다,   useQuery api 요청을 콜을 해 주고 싶습니다. 그래서 찾아보니 useQuery refetch 를 알게되었고, refetch 함수를 onClick 함수에 넣어주었는데, 동작을 하지 않네요 ㅠㅠ.   useQuery api를 버튼을 클릭할 떄 마다 api call 을 해주고 싶은데 어떻게 해줘야 할까요...

antd같은 ui 컴포넌트를 사용안하면 한 컴포넌트 안에서 styled component가 차지하는 코드량이 상당히 많을 것 같은데 실무에서도 styled component의 코드길이에 상관없이 해당 컴포넌트에 다 적는지 아니면 따로 폴더에 분리해서 import하는지 궁금합니다. 

안녕하세요. 제로초님의 강의에 큰 도움을 받고 있음에 감사의 말씀을 드립니다. 여러 검색결과도, 질문답변도, 해당강의 반복재생으로 찾아보았으나 해결치 못한 부분이 있어 이렇게 직접 질문을 하게 됐네요!   [ 마주한  문제점 & 상황 ] 은 다음과 같습니다. 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라고 생각해도 맞는 걸까요 ?

10:00분에서 useEffect(() => {    if (!(me && me.id) {            Router.push('/');    } }, [me &&.id]); if (!me) {   return null; }; 이 코드를 if (!me) {   Router.push('/');   return null; }; 이렇게 코드 바꿔도 오류는 없던데 밑에 껄로해도 별 차이 없는건가요?

nuxtServerInit 호출에 대한 문제로 질문드립니다.개발 모드로 실행시엔 문제가 없는데 배포 모드로 실행시에 nuxtServerInit이 계속해서 페이지를 불러오는 현상이 발생합니다.찾아본 정보들을 적용해봐도 해결이 되지 않아 질문드리게 되었습니다.이 코드로 실행한 결과 이러한 로그를 남기게 되고, 메모리 점유율이 끝없이 상승합니다.제가 찾아본 바로는 남은 캐시에 의한 현상이거나 loadUser에서 return이 되지 않아 axios를 기다리지 않고 계속해서 화면을 그리게 된다고 하는데 return을 주게 되면 오히려 페이지가 로드 되지 않고, return을 주지 않은 현재의 코드로 실행시 페이지를 그려주는 것으로 확인되었습니다.또한 log로 찍은 것은 res.data로 받아온 것인데 정상 동작이라면 req.isAuthenticated에 걸려 401을 리턴해야 맞고,실제로 개발 모드에서도 401을 리턴합니다만 배포 모드에서만 저렇게 페이지 정보가 res.data에 저장됩니다.nuxtServerInit의 라이프 사이클 등등 자세한 정보를 둘러보는데도 제 지식으로는 해결이 되지 않아 질문드립니다. (배포 환경은 AWS 인스턴스에서 Nginx 로 실행하였습니다.)

안녕하세요 조현영 선생님 제가지금 해당 강의를 통해서 개인 프로젝트를 진행중인데 문제가 발생이 됬습니다. 클라이언트와 백엔드 다 우분트 환경에서 잘 작동해서 실제 배포한 ip주소로 들어가면 정상적으로 화면이 보여집니다.   클라이언트 서버:   다 작동이 잘 되고 회원가입 기능도 잘 작동해서 실제 해당http://13.125.96.64 쪽으로 요청을 하여 데이터베이스도 잘 생성이되고 됩니다. 근데 문제가 local로 성공적으로 로그인을하면 passport.js 쪽에서 serializeUser 한번 실행을하고   쿠키가 생겨야하는데 생기질 않습니다. 그리고 다시 메인 화면으로 돌아오면 LOAD_MY_INFO_REQUEST action으로 통해서 cookie 와 같이 서버로 전송을해서 deserializeUser도 실행이 되야하는데. deserializeUser도 실행이 안됩니다. 제 로컬에서는 모든게 다 잘 작동합니다.   로컬에서 프론트:   로그인 하면 잘 작동합니다.   로컬에서 백엔드 pm2 환경 보시면 쿠키도 잘 생성되고 passport.js 에서 deserializeUser 도 잘 작동되는게 보입니다.   하지만 배포한 ip에서는 쿠키도 생성이 되질않고 deserializeUser 도 작동하지 않습니다위 사진은 제가 로그인이 성공하고 다시 메인 페이지로 돌아온 화면입니다 성공적으로 로그인이 되도 쿠키는 여전히 생성되지 않았습니다. 위 사진은 제가 로그인이 성공하고 다시 메인 페이지로 돌아온 화면입니다 성공적으로 로그인이 되도 쿠키는 여전히 생성되지 않았습니다. 백엔드쪽 봐도serializeUser 으로 로그인이 성공하고 deserializeUser는 호출이 되질 않습니다.     back/app.js 소스코드입니다.   const express = require('express'); const PORT = 80; const app = express(); const cors = require('cors'); const effectRouter = require('./routers/effect'); const userRouter = require('./routers/user'); const effectsRouter = require('./routers/effects'); const db = require('./models'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const passport = require('passport'); const passportConfig = require('./passport'); const morgan = require('morgan'); const hpp = require('hpp'); const helmet = require('helmet'); db.sequelize .sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); dotenv.config(); app.use(cookieParser(process.env.EFFECTSHOP_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret:process.env.EFFECTSHOP_SECRET, }) ) if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); //보안에 도움되는 라이브러리 app.use(helmet()); }else{ app.use(morgan('dev')); } app.use(passport.initialize()); // 패스포트 설정 미들웨어에 추가. app.use(passport.session()); app.use(express.json()); app.use(express.urlencoded({extended: true})); app.use(cors({ origin:["http://localhost:3000","http://54.180.81.148"], credentials:true, })); app.get('/',(req,res)=>{ res.send('hello express'); }) app.use('/effects' ,effectsRouter); app.use('/effect',effectRouter); app.use('/user', userRouter); app.listen(PORT, ()=>{ console.log(`server on! at http://localhost:${PORT}`); });     더 자세한 코드를 보시길 원하신다면 여기에 제 소스코드를 올려 놓았습니다 ㅠㅠ 엄청난 고민끝에 여쭤봅니다 ㅜ 감사합니다. https://github.com/sungmin-choi/effectShopByHTML-CSS

안녕하세요 강사님 궁금하게 생겨 문의 드립니다.     다음 사진처럼 항상 파일을 클릭하면 상단 import줄이 저렇게 변하는데요 파일을 다시 닫으면 빨간줄이 사라집니다.   깃허브에 있는 tsconfig.json과 .eslintrc.js는 그대로 복붙했습니다. 제가놓친게있을까요?