저도 똑같은 에러가 발생하여 MsgItem이나 MsgList 전부 깃허브에 올려주신 코드 그대로 복붙도 해보았는데, 그래도 안됩니다. MacOS 사용중입니다. 왜 안되는지 모르겠습니다..

안녕하세요,강의가 저에게 많은 도움이 되고 있습니다😄 강의를 수강하는 도중 몇가지 궁금한 것이 있어 질문 드립니다. 1. useEffect에 변수값(useState 포함)이 들어가는 것으로 알고 있었는데,함수가 들어가는 것은 어떤 의미인지 궁금합니다.함수가 변경될때마다 useEffect가 실행된다라는 뜻인 것 같은데,함수가 변경된다는 뜻은 무엇일까요?(deps에 들어가는 함수의 인자들이 변경된다는 뜻은 아닌 것 같아서요...) 2. 뒷정리 함수를 사용하는 이유를 확실하게 알고 싶습니다.현재 사용된 뒷정리 함수를 return (뒷정리함수) 에 두지 않고,그냥 useEffect의 이펙트 부분에 함수를 실행하면 안되는 것인가요? 제 생각에서는 그냥 본 이펙트를 실행하기 직전에observer.disconnect() 를 실행시켜도 비슷한 결과를 가져오지 않을까라는 막연한 생각이 들어서요. 그래서 윗 부분의 두가지 궁금증을 해결하고자 질문을 남깁니다. 감사합니다.

자꾸 이런 오류가 떠서 수업 진행이 안되서 남깁니다. 확인하려 firebase.auth()를 콘솔로 찍어보니 이런 오류가 또 뜨더라고요...  auth를  import 제대로 했고, 노드 모듈을 삭제하고 다시 실행해보라는 말도 있어서 해봤는데 똑같네요ㅠㅠ 구글링을 해도 별 소득이 없네요...  질 좋은 수업 열심히 듣고 있습니다!!  바쁘시지만 답변해주시면 더 열심히 하겠습니다!!

사진 업로드만 해도 서버에 저장하는거면 사용자가 파일 업로드를 하고 막상 게시글 작성을 취소하거나 오류로 인해 작성 실패하더라도 이미지 데이터는 다 서버에 저장되는건가요?? 

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

onupdate 함수의 매개변수를 (id, text) 로 넣어주었더니!  수정 버튼을 클릭 했을 때 내용이 바뀌지 않더라구요 그래서 혹시나해서 매개변수를 (text, id) 로 변경했더니 수정 기능이 제대로 작동 했습니다.   매개변수 순서가 바뀌면 문제가 있는걸까요??

안녕하세요. 우선 강의 너무 잘 듣고 있습니다. password.current = watch("Password"); 강의를 통해 위 방법을 익히기 전엔 혼자서 onChange를 통해 ref.current값을 바꾸려고 시도하였는데요 input에 onChange를 걸어줘도 Change이벤트가 작동을 안하더라구요.. react hook form 공식 문서를 뒤져봐도 위 방법으로만 사용하라는 말은 따로 없고 태그에 onChange이벤트를 사용하는 예제도 있는데 왜 이러는걸까요?? 단순히 버그인지 뭐가 잘못된건지 모르겠습니다 ㅜㅜ

안녕하세요 저는 웹팩 소스는 복붙하고 패키지를 직접 하나씩 설치해보았는데 빌드나 실행시 에러가 나서 webpack-dev-server 가 4.0.0 인걸 지우고 @ 3.11.2로 다시설치하니까 되더라고요. 원래 이렇게 버전하나때문에 에러가 잘 발생하나요? 그리고 setting/ts 그대로 빌드해보면 저는 이건 에러는 아니고 경고지만 이런 세가지 경고 들이 뜨는데 원래 이런건가요?? 상관없는건가요?

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에서 생성된 데이터베이스를 어떻게 띄우는지 모르겠어요 ㅜ

현재 App.test.js에는 test()안에 실행중인 코드가 없는 것 같고 test도 react에서만 진행하는데 테스트가 되는게 있나요?테스트를 하여 성공을 하더라도 무엇을 기준으로 성공한건지 잘 모르겠습니다.. 그리고 백엔드 프론트 DB 등등 다양한 컨테이너가 존재하는데 테스트는 리액트만 진행하네요 이게 도커 환경에서 CI로 배포하는 과정까지 큰 틀에 집중하기 위해 test부분 내용은 의도적으로 생략하고 별다른 동작을 안해도 절차를 보여주기 위해 넣은걸로 보면 될까요?? 

post 형식의 body인데 어떻게 name부터  imgUrl까지 destructuring할 수 있나요??정보가 입력되기 전인데 왜 그런지 궁금합니다..그리고 create({name:name,description:description..})이게 무슨 뜻인지 모르겠어요 key가 name,value가 name이런거를 만들라는건데 잘 이해가 가지 않습니다..ㅜ app.post("/products", (req, res) => {   const body = req.body;   const { name, description, price, seller, imageUrl } = body;   models.Product.create({     name,     description,     price,     seller,     imageUrl,   })     .then((result) => {       console.log("상품 생성 결과 : ", result);       res.send({         result,       });     })

세로가 길면 화면이 잘리는 현상이 있는데 어떻게 해결해야 될까요?

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

먼저 올려주신 대세는 쿠버네티스를 수강하고 현재 이 헬름 강의를 수강하고 있습니다. 저는 react(javascript) 나 spring boot(java) 로 web 개발에 관심이 많습니다. 가능하시면 실제 배포를 예로 구성해주시면 실제 실무환경과 가깝게 구성하는 연습을 할수 있을것 같습니다. 간단하게 실제 어플리케이션을 배포하는 환경을 구성해 보아주시면 안될까요 ^^ 부탁드립니다.

예제를 보면 useEffect를 사용해서 등록된 이벤트 리스너addEventListener(), removeEventListener()를 클린업 해주는데, 이렇게 처리하는 이유가 궁금합니다. 또 리엑트에서는 왜 클린업을 해줘야 하는건가요?

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