안녕하세요 조현영 선생님 제가지금 해당 강의를 통해서 개인 프로젝트를 진행중인데 문제가 발생이 됬습니다. 클라이언트와 백엔드 다 우분트 환경에서 잘 작동해서 실제 배포한 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

안녕하세요 zerocho 님 eslint 설정관련해서 질문이 있습니다.   eslint에서 env쪽에 node: true를 주시면서 node에서 사용하니까 주셨다고 하셨는데   next.js는 Browser환경에서 실행되지 않나요? server 코드가 따로 있는게 아닌 것 같아서요   혹시 이유를 알 수 있을까요?

  안녕하세요 강의 잘보고 있습니다! DB 관련해서 제가 몇가지 궁금한게 있는데 1.  예를 들어 하나의 테이블에서 다 대 다일때 즉 user 와 user에 다대다 일때  중간테이블 follow를 만들어주지 않고 한 User 테이블에 컬럼을 늘리는건 별로 안좋은 방식인가요? 예를 들어서 follow 테이블을 만들지 않고 User 테이블안에 팔로우, 팔로잉 수 컬럼을 넣는 방식   2. 다 대 다 관계일시 중간테이블 관련 다 대 다 관계일시 데이터베이스 이론적으로는 중간테이블을 만드는걸로 저도 배우긴 했는데 근데 이게 프로그래밍 관점에서 테이블을 너무 많이 늘리고 join이 많아질시 성능이 안좋다고 배웠던 기억이 있어서요 그래서 이게 실무에서도 다대다일시 중간테이블로 쪼개고 join을 자주 발생시키는지 궁금해요  로그인 같은경우에도 팔로우,잉,쓴글갯수를 유지하기 위해 로그인을 할때마다 post 테이블 follow 테이블 과의 3개의 테이블을 조인시켜서 select 하는 경우인데 과연 이런식의 3중조인을 로그인할때마다 해줘야 하는건가에 대한 생각 꼭 조인을 이렇게 많이해야 저 데이터를 가지고 올 수있나에 대한 DB설계에 대한 생각이 공존합니다. 아니면 제가 너무 오버하는 것일지 문제가 되지 않는 것인지... 그래서 실제로도 실무에서도 이런식으로 중간테이블과 db설계관련 또한 그걸로 인한 많은 join 관련해서 궁금하네요  ++ 제가 이런 생각이 든 이유가 게시판을 만들때 게시물 상세 페이지에 파일갯수랑, 댓글 갯수를 게시물 리스트에 명시해주는 로직을 짜다가  join 몇번해서 select 해서 가져와보자 했는데..  다른분께서 이유는 말안하셨지만 join 그렇게 하지말라고 하셨거든요 그래서 그래서 게시물 DB에 갯수에 대한 컬럼을 늘려서  게시물 상세페이지 작성시 댓글, 파일 insert 할때 게시물 db에 갯수counting 해서 insert 하고 조인 없이 list 뿌려지는 형태로 바꿨거든요 그게 생각이나서요(insert 시 다른 db에는 count+1 insert 한 동작에 각 테이블의 2번의 insert 작업) 3. db 생성시 post.js user.js -> 실 테이블 posts, users 뒤에 s가 붙는데 이건 왜 붙는건 가요?   제가 실무 경험이 없어서 꼭 알고 싶은 포인트입니다.. ** 질문이 많은데 읽어주셔서 감사합니다.

안녕하세요. 먼저 이런 좋은 강의를 듣게 해주셔서 감사합니다.     질문) pages/index.js 와 components/UserProfile.js 에서 state값이 다른 이유가 궁금해서 질문드립니다.       아래 사진 순서) pages/index.js components/UserProfile.js 콘솔창

 faker 이미지가 이런식으로 나오는거면 컴터 사양문제일까요??

전 강좌에서 캐루셀 설정후에 npm run dev를 통하여 확인해보려 하는데  ready - started server on 0.0.0.0:3060, url: http://localhost:3060 Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.5, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below. error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/antd/dist/antd.css BrowserslistError: Unknown browser query `dead`     at Array.reduce (<anonymous>) 이러한 에러가 뜹니다 ㅜ 구글링해서 계속 찾아보고있는 중인데 도대체 무슨이유인지 모르겠습니다 ㅜㅜㅜ 부탁으려요

안녕하세요~ 글 작성시 UserID가 DB에 저장안되는 이슈가 있어서 질문드립니다.   게시글을 작성 후에 TypeError: Cannot read properties of null (reading 'nickname') 에러가 납니다.   지금까지 해본 것 1. 다른 답글에 적어주신 내용처럼 router/post.js 쪽에서 req.user.id를 확인해보았습니다.     위에 사진처럼 작성자의 아이디가 나왔습니다.   2. MySQL의 DB에 보니까 UserId가 올라오고 있지 않습니다. 3. res.send로 받은 result를 console.log를 찍어보니까 UserId가 없었습니다. 4. MySQL 에 UserId를 직접 입력 (1) 해보니까 에러 없이 잘 나왔습니다.   제 생각에는 Model에서 에러가 발생한 것 같습니다.   깃허브에 올려주신 것을 보니까 5버전에 클래스로 하신 코드이신데 강의에서는 위와 같이 사용중이라서 참고를 해보았으나 DB 등록시 UserId가 입력이 안되는 것 같습니다.알려주신대로 기능 추가시 흐름을 정리해서 보면서 생각해보니까 여기까지는 에러가 왜 낫는지 알겠는데 몇시간을 고민해도 버그가 수정이 안되서 송구스러운 마음을 가지고 질문드립니다.       깃허브 주소 : https://github.com/hyunjoogo/react-nodebird

댓글 등록하고 버튼 눌렀을때 User 값이 안들어오는 것처럼 에러가 뜨는데 그 상태에서 바로 새로고침하면 값이 들어가있네요 분명 통신과정에서 올바르게 include한 전체 값을 들고오는게 맞는데 뭐가 문제인걸까요....?

안녕하세요 제로초님 완강 후 덕분에 3군데에서 면접을 보게되어서 복습겸해서 작게나마 오픈api 활용해 영화정보 보여주는 프로젝트를 진행중 입니다. redux 셋팅을 마치고 메인 페이지에서 아래처럼 dispatch를 하고있는데 여기는 사가입니다. 이렇게요.. 어느부분이 문제인지 찾기 위해 dispatch를 하지 않고 그냥 메인페이지에서 axios호출을 하면 정상작동을 합니다. effect 콘솔도 한번만 찍히구요.. 그렇게 4시간정도 찾아보면서 수정을하다가 그럼 결론은 saga의 문제구나를 깨닫긴했는데 도대체 어디가 문제인지 알 수가 없네용 강의 프로젝트가 아니긴 하지만 한번만 확인해 주실 수 있을까용?? 전체코드가 필요할 수 도 있을 것 같아서 깃헙주소도 남겨 놓겠습니다! 바쁘실테지만,, 미리 감사합니다! 취업후기도 꼭 남길게요😄 https://github.com/psw0962/movie-reviews            

제로초님 안녕하세요 강의 너무 잘 보고 있습니다 ^^ 현재 React로 작성 Project가 있는데[프론트(React)/백엔드(Node, Express, MySQL)] 함수형이 아닌 클래스형 컴포넌트루요, 이 경우 Next.js로 마이그레이션 하는데 많은 작업이 필요한가요 ?    정보검색을 해보니 Link태그라던지 React-Router에서 Next에서 기본적으로 제공하는 Router(Page폴더 및 레이아웃 사용) 변경하는 것 말고는 큰 작업은 없는 것 같아서요 !     

도움 주신 덕분에 페이지를 잘 관리하고 있었는데 어제부터 DNS문제가 발생하는것 같네요.   저는 Error [ERR_TLS_CERT_ALTNAME_INVALID]: Hostname/IP does not match certificate's altnames: Host: api.-----.com. is not in the cert's altnames: DNS:raa.----.com, DNS:www.raa.----.com 이라는 문제를 접하고 있는데요   제로초님 사이트를 들어가보니 갑자기 문제가 생기신거 같더라고요 혹시 같은 에러때문에 오류가 발생한 것인지 궁금해서 글 남겨 봅니다. https://www.zerocho.com/ Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command   저와 같은 문제라면 아마도 서버사이드 렌더링이 깨져서 생기는 문제일 것 같긴 합니다...만 백 사이드는 오류시 적어도 프론트가 보이도록 해결은 했는데 정작 원인인 does not match certificate's altnames은 해결을 못하고 있네요..   혹시 짐작 가시는 점 있으실까요? 강의랑 큰 관련이 없어보이기도 해서 조심스레 질문 남겨봅니다.      

바쁘실텐데 질문드려서 죄송합니다. 영상을 보고 따라하며 공부하고 있는데 localhost:3060/post/1에서 에러가 발생했습니다. 그전까지 잘 따라했다고 생각했는데 이유를 잘 모르겠네요.... 원인을 알려주시면 진심으로 감사드립니다.....ㅠ

 이게 대체 무슨 에러인지 모르겠습니다... 검색도해보고에러메시지에서시킨대로도해봤는데 아무리해도없어지지가않아요ㅠㅜ   도와주십숑..

제로초 강사님, 책과 강의 잘보고 있습니다. 감사합니다. 넥스트 12가 나왔는데... 러스트 컴퍼일러 등 다른 기능과~~ 서버  컴포넌트가 나왔다고 하네요 (getServerSideProps or getStaticProps 요거 필요없다고 함) 어떻게 생각하시나요? 넉스트보다 좋나요??

안녕하세요 설치가 다른댓글처럼 404가떠서 다른 댓글에 남기신 https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 이거보고 프론트,백 설치했는데요 /etc/nginx/nginx.conf 여기 안에  include /etc/nginx/sites-enabled/*; 이라는 문구가 있으면 nginx.conf말고  vim /etc/nginx/sites-enabled/default 들어가서  그대로 적으면 되는건가요? 서버가 이상한거보니까 제가 뭔가 잘못이해한거같은데 vim /etc/nginx/sites-enabled/default 여기에 그대로 적는게 아닌가요.. 첫번째사진이 처음상태고 두번째로 제가 제로초님 블로그 보고 바꾼상태입니다. sudo service nginx start를 하고 status 는 이상태입니다,, 프론트는 위같은 에러가뜨면서 헤더만뜨고 아무것도안뜨고 백서버는 sudo service nginx start이거하면 아무 말 없이 실행되고  welcome to nginx 인데 백도 지금 잘못된상태인가요? 배포까지는 여태까지 뜨는 에러들 진짜 몇일동안 혼자 다 해결했는데 https적용 이거는 뭐가문제인지를 모르겠어서 질문합니다..

안녕하세요 빌드시 메모리 부족으로 계속 빌드가 멈추는데요 구글링해서 옵션도 다 붙여보고 해도 똑같네요,, 질문글들을 보니까 .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