안녕하세요 빌드시 메모리 부족으로 계속 빌드가 멈추는데요 구글링해서 옵션도 다 붙여보고 해도 똑같네요,, 질문글들을 보니까 .next를 서버에 전송하여 실행하라는 답글을 봤습니다. 이부분이 잘 이해가 안가서요. 혹시 .next폴더는 용량이 크니까 커밋푸시로는 안올라가니까 lfs를 사용해서? 깃헙에 올려하는것 같던데 이런식으로 올리고 ubuntu에서 그냥 git clone하라는 말씀 맞나요?

안녕하세요 인피니트 스크롤 적용 중 이상한 점이 하나 있어서 질문드립니다. f12누르고 개발자 모드 킨 상태로 redux 툴로 action을 체크하는 상태에서 스크롤을 맨 밑으로 내리면 제로초님처럼 LOAD_POSTS_REQUEST를 보내고 SUCCESS까지 동작하는데 문제는 스크롤이 계속 맨 밑에 머물러서 REQUEST SUCCESS를 계속 반복합니다. 즉 한번 맨 밑으로가면 스크롤이 다시 올라오지 않고 그 상태에서 REQUEST, SUCCESS를 5번 반복합니다. 그런데 개발자모드를 키지않고 테스트하면 제로초님처럼 정상작동합니다. 이거는 별 문제가 아닌건가요? (코드도 깃허브참고해서 똑같이 했습니다.)

안녕하세요 제로초님 궁금한게 생겨서 커뮤니티에 글 남깁니다. 전역상태는 왜 필요한 걸까요?

npm run build하면 이런 에러가뜨는데 도통ㅇ 머가문젠지 모르겠습니다..ㅠㅠ stringify 를 쓰면 나는 에러같은데 저는 안쓰고있는데 이러네요.. 

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {   context.store.dispatch({     type: LOAD_USER_REQUEST,   })   context.sotre.dispatch({     type: LOAD_POSTS_REQUEST,   })   context.store.dispatch(END)   await context.sotre.sagaTask.toPromise() }) 위 코드를 실행했을 때 dispatch of undefined라는 오류가 뜹니다. configureStore.js 에서 store와 dispatch의 log를 찍어보면 잘 나오는데 왜 저런 오류가 뜨는걸까요? redux의 전은 6이에요.

이번 강의에 해쉬 태그 등록을 위한 코드들 const hashtags = ~~~ 부분과 if(hashtags) { } 요거를 추가하면은 500에러가 떠요. 왜 이럴까요? const express = require('express') const multer = require('multer') const path = require('path') const fs = require('fs') const { Post, Image, Comment, User, Hashtag } = require('../models') const { isLoggedIn } = require('./middlewares') const router = express.Router() try {   fs.accessSync('uploads') } catch(error) {   console.log('uploads 폴더가 없으므로 생성합니다.')   fs.mkdirSync('uploads') } // multer 셋팅 const upload = multer({   storage: multer.diskStorage({     destination(req, file, done) {       done(null, 'uploads')     },     filename(req, file, done) {       const ext = path.extname(file.originalname) // 확장자 추출(.png)       const basename = path.basename(file.originalname, ext) // 이름 추출(제로초)       done(null, basename + '_' + new Date().getTime() + ext) // 이름_1518123131.png     },   }),   limits: { fileSize: 20 * 1024 * 1024 }, // 20MB }) // 게시글 작성 router.post('/', isLoggedIn, upload.none(), async (req, res, next) => {   try {     // const hashtags = req.body.content.math(/#[^\s#]+/g)     const post = await Post.create({       content: req.body.content,       UserId: req.user.id,     })     // if(hashtags) {     //   const result = await Promise.all(hashtags.map((tag) => Hashtag.findOrCreate({      //     where: { name: tag.slice(1).toLowerCase() },     //   }))); // 결과 [[노드, true], [리액트, true]]     //   await post.addHashtags(result.map((v) => v[0]));     // }     if(req.body.image) {       if(Array.isArray(req.body.image)) { // 이미지 여러개면 image: [경로.png, 경로.png]         const images = await Promise.all(req.body.image.map((image) => Image.create({ src: image })))         await post.addImages(images)       } else {  // 이미지 하나만 올리면 image: 경로.png         const image = await Image.create({ src: req.body.image })         await post.addImages(image)       }     }     const fullPost = await Post.findOne({       where: { id: post.id },       include: [{         model: Image,       }, {         model: Comment,         include: [{           model: User,  // 댓글 작성자           attributes: ['id', 'nickname'],         }]       }, {         model: User,   // 게시글 작성자         attributes: ['id', 'nickname'],       }, {         model: User,   // 좋아요 누른 사람         as: 'Likers',         attributes: ['id'],       }]     })     res.status(201).json(fullPost)   } catch(error) {     console.error(error)     next(error)   } }) router.post('/:postId/comment', isLoggedIn, async (req, res, next) => {   try {     const post = await Post.findOne({       where: { id: req.params.postId }     })     if(!post) {  // 게시글 존재하는지 확인       return res.status(403).send('존재하지 않는 게시글입니다.')     }     const comment = await Comment.create({       content: req.body.content,       PostId: parseInt(req.params.postId),       UserId: req.user.id,     })     const fullComment = await Comment.findOne({       where: { id: comment.id },       include: [{         model: User,         attributes: ['id', 'nickname']       }]     })     res.status(201).json(fullComment)   } catch(error) {     console.error(error)     next(error)   } }) // 좋아요 누르기 router.patch('/:postId/like', isLoggedIn, async (req, res, next) => { // PATCH /post/1/like   try {     const post = await Post.findOne({ where: { id: req.params.postId }})     if(!post) {       return res.status(403).send('게시글이 존재하지 않습니다.')     }     await post.addLikers(req.user.id)     res.json({ PostId: post.id, UserId: req.user.id })   } catch(error) {     console.error(error)     next(error)   } }) // 좋아요 취소 router.delete('/:postId/like', isLoggedIn, async (req, res, next) => { // DELETE /post/1/like   try {     const post = await Post.findOne({ where: { id: req.params.postId }})     if(!post) {       return res.status(403).send('게시글이 존재하지 않습니다.')     }     await post.removeLikers(req.user.id)     res.json({ PostId: post.id, UserId: req.user.id })   } catch(error) {     console.error(error)     next(error)   } }) // 게시글 삭제 router.delete('/:postId', isLoggedIn, async (req, res, next) => {  // DELETE /post/10   try {     await Post.destroy({       where: {          id: req.params.postId,         UserId: req.user.id,       },     })     res.status(200).json({ PostId: parseInt(req.params.postId, 10) })   } catch(error) {     console.error(error)     next(error)   } }) // 이미지 업로드 router.post('/images', isLoggedIn, upload.array('image'), (req, res, next) => {   console.log(req.files)   res.json(req.files.map((v) => v.filename)) }) module.exports = router

게시글 삭제 직후 db에서는 바로 삭제가 되는데 브라우저에서 redux devtools로 state를 보면 mainPosts에 반영이 안되어있어요. 새로고침을 해야만 게시글이 사라져요. 어디에 문제가 있는건지 감이 안오네요

db는 생성했는데 영상에 나오는 것처럼 mySQL workbench에서 생성된 데이터베이스를 어떻게 띄우는지 모르겠어요 ㅜ

제로초님 궁금한게있어서 문의드립니다. styled-components 사용해서 react를 개발하려면  기존에 디자이너가 디자인을 해주고 그걸 마크업(퍼블리셔)가 html과 css파일로 주는 방식으로 업무를 진행하고있는데, styled-components를 이용하는 회사들은 마크업 업무를 프론트 개발자들이 다 하게 되는건가요? 실무에서는 업무롤이 어떻게되어서 진행되는지 궁금합니다.

저는 antd이게 이만한데 왜케크죠???ㅋㅋ.. 혹시 이거 정상인가여? 아님 제가뭐 잘못한건가요??

안녕하세요, 처음에 로그인하고 프로필로 들어가면 에러가 안나는데, 프로필페이지에서 새로고침을하면 이런 에러가뜹니다. 팔로워 팔로잉 없을때 오류인줄알고 한명씩 넣어봐도 똑같이 뜨네요,, 그래서 제로초님 코드 복붙해봐도 그대로인거 보면 코드오류는 아닌거같은데 혹시 프로필페이지 에서 새로고침시 오류뜨는거 이거 왜그럴까요..??

안녕하세요 zerocho님! 항상 좋은 강의 너무나 잘 듣고 있습니다. 현재 redux 게시물 추가 부분을 공부하면서 제가 직접 다른 형태로 구현을 해보고 있습니다. 게시물 생성까지는 redux로 구현을 했는데 게시물 수정을 구현하려고 할때 redux switch 구문에서 데이터를 어떤식으로 불변성을 유지하면서 데이터를 수정해야 할 지 너무 어려워서 질문을 작성하게 되었습니다. 아래 코드는 현재 reducer 파일의 post.js 파일 입니다.

next.js에 swr, typescript를 이용해 노드버드 실습을 해보다가  서버사이드 렌더링에 대해 궁금한 게 생겼습니다. 사용자가 만약 로그인을 한 상태일 때, 서버사이드 렌더링을 해서 컴포넌트에 사용자 정보를 넣어준 상태로  페이지가 보여지도록 하고 싶은데요. 강의에서는 pages/index.js에서 리덕스를 이용하여 LOAD_MY_REQUEST 액션을 dispatch 한 뒤, components/AppLayout.js 에서 useSelector로 me 값을 가져 오면  사용자 정보가 담겨진 채로 AppLayout.js 컴포넌트가 랜더링 됩니다. swr을 적용해서 동일하게 구현해보려고 하는데요. swr에서는 page/index.js에서 서버사이드에서 로그인한 사용자 정보롤 가지고 오더라도, components/AppLayout.js에서 useSWR을 사용하면 처음 [로그아웃] 상태일 때의 화면이 잠깐 나오고, [로그인]상태일 때의 모습으로 변합니다. 혹시 swr을 이용해서 pages/index.js에서 서버사이드 렌더링으로 가지고 왔던 값을 components/AppLayout.js에도 페이지 렌더링 초기에 값을 함께 전달해주는 방법은 없을까요? 제가swr을 이용해 아래처럼 적용해봤는데, 다른 방법이 있을까요? pages/index.tsx export const getServerSideProps: GetServerSideProps = async function({ req }) { const cookie: string = req ? req.headers.cookie : ''; if (cookie) { const data = await fetcher.get('/user', { cookie }); if (data) { return { props: { userProps: data }, }; } } return { props: { userProps: null }, }; }; function Index({ userProps }: InferGetServerSidePropsType<typeof getServerSideProps>) { const { data: user } = useSWR<IUser>('/user', fetcher.get, { initialData: userProps }); return <AppLayout>{user ? user.nickname : '로그인해주세요'}</AppLayout>; } components/AppLayout.tsx function AppLayout() { const { data: user } = useSWR<IUser>('/user', fetcher.get); return ( <div css={userNavStyle}> {user ? ( <> <Profile image={user.profile} size='40px' /> </> ) : ( <Link href='/login'> <a href='' className='login'> 로그인 </a> </Link> )} </div> ); }

안녕하세요 제로초님! 질문있습니다ㅠㅠ 프론트와 백서버 둘 다 https 적용 후, 로그인을 시도하면 저런 식으로 주소에 이메일과 비밀번호가 생기면서 로그인이 되지 않습니다. 무엇을 잘 못 한 건지 예상이 가지 않아서 어디서부터 확인해야 할지 몰라 글을 남깁니다ㅠㅠ 기를 이용해주세요.

현영님 vue, react 프레임워크를 사용하지 않고 바닐라 자바스크립트로 Nodebird 를 만드는 강좌 같은 건 안나오나요!?

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> ▶ 3 stack frames were collapsed. LoginPage C:/Users/su/Desktop/infran_node_react_practice/client/src/components/views/LoginPage/LoginPage.js:12 9 | const [Password, setPassword] = useState("") 10 | 11 | > 12 | const dispatch = useDispatch(); | ^ 13 | 14 | const onEmailHandler=(event)=>{ 15 | setEmail(event.currentTarget.value); View compiled 계속 이렇게 에러가 뜨는데..방법을 모르겠습니다.. 해결하신 분 계실까요?

next-redux-wrapper가 7.0.0 버전으로 업데이트되면서 수정사항이 생겼습니다. 에러 Server Error TypeError: nextCallback is not a function 해결 방법(변경사항) version 6.0.2 > const getServerSideProps = wrapper.getServerSideProps(async (context) => {   context.store.dispatch(~~~);   context.store.dispatch(END);   await store.sagaTask.toPromise(); }); version 7.0.0 > const getServerSideProps = wrapper.getServerSideProps(   (store) =>     async ({ req, res, ...etc }) => {       store.dispatch(~~~);       store.dispatch(END);       await store.sagaTask.toPromise();     } ); 추가적으로 동적라우팅 (강의 : 다이나믹 라우팅) 할 때도 (req, res, ...etc) > (req, res, params, ...etc) 로 수정하시면 됩니다. next-redux-wrapper 참고 자료(getServerSideProps) (https://github.com/kirill-konshin/next-redux-wrapper#getserversideprops) 변경사항 (https://github.com/kirill-konshin/next-redux-wrapper#upgrade-from-6x-to-7x)

안녕하세요. 강의 수강 중 질문있어서 문의드립니다. 사가 이용하여 api를 호출하는데, 해당 api는 다른 state의 업데이트로 인하여 재 호출 되는 구조입니다. 따라서 페이지 진입 시 동시에 3번이 호출 되는데요, function* loadMaxEpisode() { try { // yield는 await와 비슷 const result = yield call(loadMaxEpisodeAPI); // call 은 동기식, fork.는 비동기 console.log(result) alert(result.data.maxEpisode); yield put({ // put은 dispatch -> 즉, 액션을 dispatch한다. type: LOAD_MAXEPISODE_SUCCESS, data: result.data, // result로 하면 response값이 다 들어온다. }); } catch (err) { yield put({ type: LOAD_MAXEPISODE_FAILURE, data: err.response, }) }} 위 코드에서 result.data의 값이 500이 들어오면 result.action을 찍으면 500500이라는 값으로 보여집니다. (3번 호출 중 2개의 리스폰스 값이 위와 같이 합쳐서 보여지고, 나머지 하나는 정상인 500으로 반환됩니다.) 어느부분이 잘못 된 것인지 감이 안오네요...ㅠ 관련해서 어느 부분을 확인해 봐야할까요??

아직 root 폴더에서 npm install 하는 단계입니다. 에러를 구글링하다보니 windows-build-tools 를 설치해야한다고해서, 관리자권한으로 powershell 실행해서 잘 설치했는데 해결되지 않아서요..ㅠㅠ 어떻게 해야할지 알려주실 수 있을까요? ++ 에러메시지 아래 추천으로 npm config set python 을 실행해봤지만 해결되지 않았습니다. node-pre-gyp WARN Using needle for node-pre-gyp https download  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-v83-win32-x64-unknown.tar.gz  node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@14.16.0 (node-v83 ABI, unknown) (falling back to source compile with node-gyp)  gyp ERR! find Python  gyp ERR! find Python Python is not set from command line or npm configuration gyp ERR! find Python Python is not set from environment variable PYTHON       gyp ERR! find Python checking if "python" can be used gyp ERR! find Python - "python" is not in PATH or produced an error gyp ERR! find Python checking if "python2" can be used gyp ERR! find Python - "python2" is not in PATH or produced an error gyp ERR! find Python checking if "python3" can be used gyp ERR! find Python - "python3" is not in PATH or produced an error gyp ERR! find Python checking if the py launcher can be used to find Python 2 gyp ERR! find Python - "py.exe" is not in PATH or produced an error gyp ERR! find Python checking if Python is C:\Python27\python.exe gyp ERR! find Python - "C:\Python27\python.exe" could not be run gyp ERR! find Python checking if Python is C:\Python37\python.exe gyp ERR! find Python - "C:\Python37\python.exe" could not be run gyp ERR! find Python  gyp ERR! find Python ********************************************************** gyp ERR! find Python You need to install the latest version of Python. gyp ERR! find Python Node-gyp should be able to find and use Python. If not,    gyp ERR! find Python you can try one of the following options: gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe" gyp ERR! find Python   (accepted by both node-gyp and npm) gyp ERR! find Python - Set the environment variable PYTHON gyp ERR! find Python - Set the npm configuration variable python: gyp ERR! find Python   npm config set python "C:\Path\To\python.exe" gyp ERR! find Python For more information consult the documentation at:         gyp ERR! find Python https://github.com/nodejs/node-gyp#installation gyp ERR! find Python ********************************************************** gyp ERR! find Python gyp ERR! configure error gyp ERR! stack Error: Could not find any Python installation to use gyp ERR! stack     at PythonFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:307:47) gyp ERR! stack     at PythonFinder.runChecks (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21) gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:225:16) gyp ERR! stack     at PythonFinder.execFileCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:271:16) gyp ERR! stack     at exithandler (child_process.js:315:5) gyp ERR! stack     at ChildProcess.errorhandler (child_process.js:327:5) gyp ERR! stack     at ChildProcess.emit (events.js:315:20) gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) gyp ERR! stack     at onErrorNT (internal/child_process.js:465:16) gyp ERR! stack     at processTicksAndRejections (internal/process/task_queues.js:80:21) gyp ERR! System Windows_NT 10.0.19042 gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=7" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v83" gyp ERR! cwd C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt gyp ERR! node -v v14.16.0 gyp ERR! node-gyp -v v5.1.0 gyp ERR! not ok node-pre-gyp ERR! build error  node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29) node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:315:20) node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:1048:16) node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) node-pre-gyp ERR! System Windows_NT 10.0.19042 node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" node-pre-gyp ERR! cwd C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt node-pre-gyp ERR! node -v v14.16.0 node-pre-gyp ERR! node-pre-gyp -v v0.14.0 node-pre-gyp ERR! not ok Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\김하 영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) npm WARN react-redux@5.1.2 requires a peer of react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-redux@5.1.2 requires a peer of redux@^2.0.0 || ^3.0.0 || ^4.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-boiler-plate@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})    npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bcrypt@3.0.8 install: `node-pre-gyp install --fallback-to-build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bcrypt@3.0.8 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR!     C:\Users\jerem\AppData\Roaming\npm-cache\_logs\2021-04-26T00_37_15_758Z-debug.log

Failed to load resource: the server responded with a status of 504 (Gateway Timeout) Uncaught (in promise) Error: Request failed with status code 504  이 2개의 콘솔 에러가 발생합니다 어떻게 해결해야 하나요?