그 어디에선가 프론트앤드에서 .env 파일이 build 시 노출된다는 얘기를 들었던 것 같은데 사실인가용 프론트앤드에서 .env 파일을 사용하면 더 효율적으로 처리 할 수 있는 작업이 생겼는데 백앤드로 처리해도 되지만 보안상 괜찮은지 궁금해서 여쭤봅니다   

강의 잘 보고 많이 배우고 있습니다 ! "append_to_response"는 사용자가 다르게 바꿀 수 있는 부분인가요 ? 아니면 axios 속성인가요 ? 

안녕하세요 선생님... 아래 부분 이해를 못했는데 다시 한 번 설명 가능하신가요? ㅠㅠ const { data: movieDetail } = await axios.get(`movie/${movieId}`, { params: { append_to_response: "videos" }

next.config.js 와 같은 설정파일에서는 commonjs 모듈을 사용하고 src폴더내의 소스파일들은 es6 모듈시스템을 사용하는게, src는 웹팩이 번들링하기 때문에 es6를 사용하는것이고, 그외 파일들은 node 완경이라서 그런건가요??   + 그리구 express를 사용할때, package.json에서 module타입을 es6로 변경해서 사용하시지 않는 이유가 있을까요? express 사용할때도 es6 모듈시스템이 편해서 항상 바꿔서 사용하는게 좋지 않을까 생각했는데, 여러 소스코드를 참고해봐도 굳이 es6모듈로 바꾸지 않고 commonjs모듈을 그대로 사용하는거 같더라구요! 혹시 어떤 단점이 있어서인지 궁금합니다

str?.length > n ? str.substr(0, n - 1) + "..." : str;   이부분을    (str.length > n) ? str.substr(0, n - 1) + "..." : str;   썼더니 에러가 납니다..  (Cannot read properties of undefined (reading 'length'))   str? -->> 삼항연산자의 시작이라는 건 알겠는데 .. .length의 의미는 뭔가요

ilerplate-mern-stack-master\boilerplate-mern-stack-master> npm install npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an old version of npm,npm WARN old lockfile so supplemental metadata must be fetched from the registry.npm WARN old lockfilenpm WARN old lockfile This is a one-time fix-up, please be patient... npm WARN old lockfilenpm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issuenpm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecatednpm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependenciesnpm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecatednpm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecatednpm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated bcrypt@3.0.8: versions < v5.0.0 do not handle NUL in passwords properlynpm WARN deprecated node-pre-gyp@0.14.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the futurenpm ERR! code 1npm ERR! path C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! command failednpm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\SAMSUNG\AppData\Local\Temp\install-ca11b823.cmdnpm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\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-v102' (1)npm ERR! node-pre-gyp info it worked if it ends with oknpm ERR! node-pre-gyp info using node-pre-gyp@0.14.0npm ERR! node-pre-gyp info using node@17.4.0 | win32 | x64npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https downloadnpm ERR! node-pre-gyp info check checked for "C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\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-v102-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v102-win32-x64-unknown.tar.gznpm 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-v102-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@17.4.0 (node-v102 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-v102-win32-x64-unknown.tar.gznpm ERR! gyp info it worked if it ends with oknpm ERR! gyp info using node-gyp@9.0.0npm ERR! gyp info using node@17.4.0 | win32 | x64npm ERR! gyp info oknpm ERR! gyp info it worked if it ends with oknpm ERR! gyp info using node-gyp@9.0.0npm ERR! gyp info using node@17.4.0 | win32 | x64npm ERR! gyp info find Python using Python version 3.10.2 found at "C:\Users\SAMSUNG\AppData\Local\Programs\Python\Python310\python.exe"    npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! find VS msvs_version not set from command line or npm confignpm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Promptnpm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more detailsnpm ERR! gyp ERR! find VS looking for Visual Studio 2015npm ERR! gyp ERR! find VS - not foundnpm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! find VS **************************************************************npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studionpm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.npm ERR! gyp ERR! find VS For more information consult the documentation at:npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windowsnpm ERR! gyp ERR! find VS **************************************************************npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! configure errornpm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to usenpm ERR! gyp ERR! stack     at VisualStudioFinder.fail (C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47)npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16   npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14)npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14   npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16  npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7npm ERR! gyp ERR! stack     at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:406:5)npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:520:28) npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1090:16)npm ERR! gyp ERR! System Windows_NT 10.0.19044npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\SAMSUNG\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\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-v102"npm ERR! gyp ERR! cwd C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! gyp ERR! node -v v17.4.0npm ERR! gyp ERR! node-gyp -v v9.0.0npm ERR! gyp ERR! not oknpm ERR! node-pre-gyp ERR! build errornpm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\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-v102' (1)npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29)npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:520:28)npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1090:16)npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.19044npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build"npm ERR! node-pre-gyp ERR! cwd C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! node-pre-gyp ERR! node -v v17.4.0npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.14.0npm ERR! node-pre-gyp ERR! not ok npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\SAMSUNG\AppData\Local\npm-cache\_logs\2022-08-08T08_26_57_475Z-debug-0.log   vscode는 최신버전을 사용중이고 node -v    v17.4.0 npm -v     8.16.0 를 사용하고 있습니다.  

  안녕하세요 좋은 강의 잘 듣고있습니다. 감사합니다.   useOnClickOutside 함수에서   document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); 를 이용해서 모달 창 외부를 클릭했는지 감지하는 것으로 이해했습니다.   그래서 저는 mousedown과 touchstart 대신에 document.addEventListener("click", listener) 을 써도 되지 않을까 싶어서 해봤는데 이렇게 하니까 모달창이 아예 나타나지 않더라구요.   'touchstart' 이벤트 리스너는 없어도 동일하게 동작하는 것 같은데 'click' 'mousedown' 이벤트는 어떤 차이가 있는 것인지 궁금합니다. 감사합니다.  

    여기서 41번째줄 params 빨간줄 지나가도 괜찮나요 실행은 잘되는데 이유가 궁금합니다 undefine이라고 하는데... 잘모르겠네요

사이트에 나와있다면 어디에 나와있는지 알려주시면 감사하겠습니다 !

https://github.com/kkyu0718/react-study/tree/main/react-netflix-clone 코드는 위에 있습니다. 일단은 app.js 가 한번 렌더링되면서 banner도 한번 렌더링 되어야하는데 이렇게 8번이 실행됩니다. 1번 때문에 실행이 안되고 있는 걸수도 있는데 useEffect() 에서의 fetchData가 실행이 되고 있지않아 Uncaught TypeError: Cannot read properties of undefined (reading 'results') 가 발생하는거 같습니다. 코드를 다시 아무리봐도 문제는 없어보이는데 혹시 어떻게 해결해야될까요?     

  useEffect(() => {       first           return () => {         second       }     }, [third]) useEffect를 사용할때 first는 처음 렌더링이 된후에 실행 second는 앱이 종료될때 실행되고 third는 어떠한 state가 변경될때 useEffect를 다시 실행할것인가? 로 이해를 했습니다 여기서 질문이 있는데  nav.js에서는 처음 렌더링후 우리가 스크롤을 하였을때 추가적인 렌더링이 필요하기에 useEffect로 이벤트를 만들었다 라고 이해를 하였는데 Banner.js에서는 백그라운드이미지 경로에 movie.backdrop_path를 넣는데 렌더링 되기전에 useEffect가 먼저 실행이 된것인가요? 먼저 실행이 안되면 movie안에는 아무것도 없지 않나요?  실력이 없어 질문이 일목요연하지 못한점 죄송합니다     추가로 console.log()로 찍어보니 렌더가 되고 useEffect()가 실행이 되어서 setmovie로 스테이트를 set해주고 그래서 스테이트가 바뀌니 다시 렌더가 되고 근데 문제는 처음에 렌더가 될때 movie가 비었기 때문에 에러가 떠야하는데 순서가 위와 같이 나옵니다 렌더 에러 이펙트 렌더가 맞지 않나요?  

안녕하세요! 이 강의를 듣기전에 리덕스 유료강좌도 듣고 와야하는건가요? 아니면 바로들어도 무관한가요?

안녕하세요~ 코린이입니다. 제가 코드를 그대로 따라하며 공부중인데 버젼이 바뀌면서 route를 쓰는 방식이  변한것같은데 component가 element로 바뀌었나요?? 그리고 혹시 match.url은 버젼이 바뀌면서 사라진건가요?? 올려주신 코드를 복붙하니 오류가 나오네요ㅠ   혹시 그렇다면 <Route path={`${match.url}/:roomId`} component={Room} />은 현재 어떻게 써야될까요?? useParams를 써서 해야되나요??   ``` import React from "react"; import { Route, Link, Routes } from "react-router-dom"; export default function Rooms() {   return (     <div>       <h2>여기는 방을 소개하는 페이지입니다.</h2>       <Link to="bludRoom">파란 방입니다</Link>       <br />       <Link to="greenRoom">초록 방입니다</Link>       <br />       <Routes>         <Route exact path="rooms" render={() => <h3>방을 선택해 주세요.</h3>} />         <Route path="/:roomId" element={<Room />} />       </Routes>     </div>   ); } function Room() {   return <h2>{` 방을 선택하셨습니다.`}</h2>; }   ```     이것저것 수정해가며 시도하고있는데 여기서 막혔네요 ㅠㅠ 다른 페이지는 작동하는데 http://localhost:3000/rooms/bludRoom 처럼 :roomId로 처리하려고 했던 페이지가 No routes matched location "/rooms/bludRoom" 라는 오류가 발생합니다ㅠ  

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js"></script> </head> <body> <div id="subject"></div> <div id="toc"></div> <div id="control"></div> <div id="content"></div> <script> function subject() { document.querySelector("#subject").innerHTML = ` <header> <h1>WEB</h1> Hello, WEB! </header>`; } function TOC() { var state = store.getState(); var i = 0; var liTags = ""; while (i < state.contents.length) { liTags = liTags + ` <li> <a onclick=" event.preventDefault(); var action = {type:"SELECT", id:${state.contents[i].id}} store.dispatch(action); " href="${state.contents[i].id}"> ${state.contents[i].title} </a> </li>`; i = i + 1; } document.querySelector("#toc").innerHTML = ` <nav> <ol>${liTags}</ol> </nav> `; } function control() { document.querySelector("#control").innerHTML = ` <ul> <li><a href="/create">create</a></li> <li><input type="button" value="delete"></li> </ul> `; } function article() { document.querySelector("#content").innerHTML = ` <article> <h2>HTML</h2> HTML is ... </article> `; } function reducer(state, action) { console.log(state, action); if (state === undefined) { return { contents: [ { id: 1, title: "HTML", desc: "HTML is .." }, { id: 2, title: "CSS", desc: "CSS is .." }, ], }; } } var store = Redux.createStore(reducer); subject(); TOC(); control(); article(); </script> </body> </html> 코드가 이런데 위에 HTML을 누르면 강의처럼 콘솔에 뜨는게 아니라 창이넘어가면서 Cannot GET/%EB%A6%AC%EB%8D%95%EC%8A%A4/1 이런게 뜹니다 뭘 잘못한걸까요 ㅜㅜ.

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

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

안녕하세요 현영님. 에러는 해결을 한 상태인데 궁금한 점이 생겨 질문드립니다.  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로 관계 설정을 해줘야 한다고 판단했는데   맞을까요?