로그인 후 게시물에 댓글을 달면 500에러가 뜨면서 실패합니다 ㅠㅠ 백엔드에는 comment.comment 없다고 에러 뜨는거같은데 어디가 문제인지 잘모르겠습니다지금까지 해본건 오타 찾아보고 대소문자를 바꿔보고 했는데도 안되서 결국에 질문하네요 ㅠㅠconst express = require("express"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); router.post("/", isLoggedIn, async (req, res, next) => { try { const post = await Post.create({ content: req.body.content, userId: req.user.id, }); 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("존재하지 않는 게시글입니다"); //return을 붙여줘야지 send하고 밑에 json이 동시에 실행안됨 } const comment = await Comment.create({ content: req.body.content, PostId: 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.delete("/", (req, res) => { res.json({}); }); module.exports = router;

 안녕하세요 멘토님.항상 강의 잘 보고 있습니다. 예전부터 문의드리려다가 자꾸 잊어먹던게 있었는데 이제서야 질문드립니다.export default function aaa() { const bbb = () => { ... } ... }위와 같이 강의를 들을 때 마다 왜 컴포넌트 부분의 최초 함수 선언 부분만 화살표 함수가 아닌 일반 함수 선언 방식으로 하시는지, 특별한 이유가 있는 것인지 궁금합니다. 감사합니다. 

 안녕하세요.'이미지 업로드 API' 수업 따라가다 Postman으로 'uploadFile' 호출시 'Cross-Site Request Forgery(CSRF)' 오류 발생에 대해서 확인 후 원인에 대해서 시원한 답변 부탁 드릴께요.위와 같이 CSRF 오류가 발생 합니다. 구글후 headers에 하기 값을 추가하니 문제 없네요. 원인에 대해서 쉽게 설명좀 부탁 드립니다. :)

const TextAreaStyle = { resize: 'none', height: 120, marginBotton: 5, }; function EditPostCard() { return ( <> <TextArea rows={4} style={TextAreaStyle} /> <Space wrap> <Button type="primary">수정</Button> <Button type="primary" danger>취소</Button> </Space> </> ); } export default EditPostCard; 컴포넌트 밖에서 스타일객체를 선언한 경우 function EditPostCard() { const TextAreaStyle = useMemo(() => ({ resize: 'none', height: 120, marginBotton: 5, })); return ( <> <TextArea rows={4} style={TextAreaStyle} /> <Space wrap> <Button type="primary">수정</Button> <Button type="primary" danger>취소</Button> </Space> </> ); } 컴포넌트 안에서 useMemo를 사용한 경우리렌더링때문에 스타일을 따로 선언해주었는데요.두 가지 경우가 큰 차이가 있나요? useMemo안 쓰고컴포넌트 밖에다 선언해줘도 상관없나요?

예를들어 api 들은/api로 요청을 받아서 api들만 따로 빼주었는데여기서 한번더 /api/user/api/board이런식으로 분리하고싶다면 어떤 방법이 가장 좋을까요..?

1. 뭔가 프론트는 문제가 없는거같은데 백에서는 어디에서 문제가 있는지 잘모르겠습니다 ㅠㅠ에러는 없습니다3. const express = require("express"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); router.post("/", isLoggedIn, async (req, res) => { try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); 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) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("존재하지 않는 게시글입니다"); //return을 붙여줘야지 send하고 밑에 json이 동시에 실행안됨 } const comment = await Comment.create({ content: req.body.content, PostId: req.params.postId, UserId: req.user.id, }); res.status(201).json(comment); } catch (error) { console.error(error); next(error); } }); router.delete("/", (req, res) => { res.json({}); }); module.exports = router; import { Form, Input, Button } from "antd"; import { useCallback, useRef, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { ADD_POST_REQUEST } from "../reducers/post"; import useInput from "./hooks/useInput"; const PostForm = () => { const { imagePaths, addPostDone, addPostLoading } = useSelector( (state) => state.post ); const [text, setText] = useState(""); const dispatch = useDispatch(); const imageInput = useRef(); useEffect(() => { if (addPostDone) { setText(""); } }, [addPostDone]); const onSubmitForm = useCallback(() => { dispatch({ type: ADD_POST_REQUEST, data: text, }); }, [text]); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmitForm} > <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" }} htmlType="submit" loading={addPostLoading} > 짹쨱 </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; //saga - AddPost function addPostAPI(data) { return axios.post("/post", { content: data }); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield put({ //put : dispatch type: ADD_POST_SUCCESS, data: result.data, }); yield put({ type: ADD_POST_TO_ME, data: result.data.id, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, data: err.response.data, }); } } // reducer case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.data); break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break;

 계속 yarn을 설치해도 command not found라고만 뜨는데 어떻게 하면 좋을까요 

프론트서버를 ec2 에서 npm start를 하면 자꾸 client_loop: send disconnect: connection reset by peer 이라는 에러가 나오는데 해결방법이 있을까요 구글링도 해봤지만 해답을 찾지 못했습니다

mongoose.connect 콜백함수 수정했고 다만들고 실행했는데Operation users.find() buffering timed out after 10000msMongoServerSelectionError: connect ECONNREFUSED ::1:27017mongod연결했는데 이렇게 에러 뜨네요 ㅜㅠ schemas/index.js에서 콜백함수 수정한 코드입니다 혹시 제가 잘못수정한건가요? const mongoose = require("mongoose"); const connect = () => { if (process.env.NODE_ENV !== "production") { mongoose.set("debug", true); } mongoose .connect("mongodb://root:nodejsbook@localhost:27017/admin", { dbName: "nodejs", useNewUrlParser: true, }) .then(() => { console.log("몽고디비 연결 성공"); }) .catch(() => { console.log("몽고디비 연결 에러"); }); }; mongoose.connection.on("error", (error) => { console.error("몽고디비 연결 에러", error); }); mongoose.connection.on("disconnected", () => { console.error("몽고디비 연결이 끊겼습니다. 연결을 재시도합니다."); connect(); }); module.exports = connect;

안녕하세요 멘토님,항상 틈틈히 강의 잘 보고 있습니다.질문부터 말씀드리자면,OAuth로 로그인 기능을 만들면 백엔드에서 별도로 JWT관련 인증, 발급, 재발급 등의 로직을 개발해주지 않아도 되는지 궁금해서 질문을 드리게 되었습니다.제 상황을 말씀드리자면 토이프로젝트 개발을 슬슬 시작하려는데요, 시작하기에 앞서 백엔드 서버부터 먼저 만들고 있었습니다.해당 강의에서 제공해주는 백엔드 서버의 중고마켓이나 게시판 API를 활용한 것이 아닌,다른 주제로 개인 토이프로젝트를 새로 프론트부터 백엔드단까지 직접 만들어보려고 합니다.기존 웹 개발 경력이 조금 있어서인지 자바나 노드 백엔드 구축 등을 배워서 API를 개발하는 것은 할만했습니다.하지만 백엔드에서 딱 하나, JWT 관련 로직을 추가하는 부분이 제 기준으로 너무 어렵고 벽이더라구요. (현업에서도 JWT 경험이 없습니다)그래서 시간이 너무 걸려서 보류해두었다가 다시 강의를 듣고 있었는데 이번 강의에서 OAuth 관련 내용을 보게 되었습니다.더 찾아보니까 인증, 발급과 같은 각종 로그인 관련 기능들을 해당 OAuth 서버에서 제공해준다고 되어있더라구요.그래서 해당 부분들을 활용하면 기존의 JWT 발급이나 인증 관련 로직을 백엔드에서 직접 구축해야하는 부분을 스킵하고 진행할 수 있지 않을까 궁금해져서 질문 글을 올리게 되었습니다.강의 내용의 OAuth 부분을 보고 궁금해져서 질문을 올려야 겠다고 생각했는데 어쩌다 보니 백엔드 느낌의 질문 글이 되어 죄송합니다.하지만 멘토님이 백엔드쪽 강의도 하시는걸로 알고 있어 혹시나 질문을 드려봅니다.감사합니다. 

Movie, User 테이블하고 many-to-many 로 만든 Favorite 테이블이 있는데 Favorite 테이블에 저장하려고 할 때 이런 에러가 납니다.query failed: INSERT INTO `favorite`(`id`, `userId`, `movieId`) VALUES (DEFAULT, DEFAULT, DEFAULT) error: Error: Unknown column 'id' in 'field list' query: ROLLBACK [Nest] 782975 - 04/08/2023, 6:59:26 PM ERROR [ExceptionsHandler] Unknown column 'id' in 'field list' Movie 는 이렇게 만들어져있구요import { Entity, Column, PrimaryGeneratedColumn, ManyToMany, JoinTable } from 'typeorm'; import { User } from '../users/users.entity'; @Entity() export class Movie { @PrimaryGeneratedColumn() readonly id: number; @Column({ length: 100 }) title: string; @Column('text', { nullable: true }) desc: string; @ManyToMany(() => User, (user) => user.favorites) @JoinTable({ name: 'favorite' }) favorites: User[]; }User 는import { Entity, Column, PrimaryGeneratedColumn, ManyToMany, JoinTable } from 'typeorm'; import { Movie } from '../movies/movies.entity'; @Entity() export class User { @PrimaryGeneratedColumn() readonly id: number; @Column() username: string; @ManyToMany(() => Movie) @JoinTable({ name: 'favorite' }) favorites: Movie[]; }그리고 Favorite 은import { Entity, ManyToOne, PrimaryGeneratedColumn } from 'typeorm'; import { User } from '../users/users.entity'; import { Movie } from '../movies/movies.entity'; @Entity() export class Favorite { @PrimaryGeneratedColumn() id: number; @ManyToOne(() => User, (user) => user.favorites) user: User; @ManyToOne(() => Movie, (movie) => movie.favorites) movie: Movie; } 그런데 DB 를 보면 Favotie 테이블에 id 칼럼이 없습니다.그래서 favoriteRepository.save() 할때 에러가 난다고 의심하고 있는데요, favorites.service.ts는import { Injectable } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; import { Repository } from 'typeorm'; import { Favorite } from './favorites.entity'; @Injectable() export class FavoritesService { constructor( @InjectRepository(Favorite) private readonly favoriteRepository: Repository<Favorite>, ) {} async create(userId: number, movieId: number): Promise<Favorite> { const favorite = new Favorite(); favorite.user = { id: userId } as any; favorite.movie = { id: movieId } as any; return await this.favoriteRepository.save(favorite); } }이렇게 되어있습니다.어디를 고쳐야 하는걸까요?

import { useState } from "react"; import { Modal } from "antd"; import { Address } from "react-daum-postcode/lib/loadPostcode"; import DaumPostcodeEmbed from "react-daum-postcode"; const ModalCustomPage = () => { const [isModalOpen, setIsModalOpen] = useState(false); const onToggleModal = () => { setIsModalOpen((prev) => !prev); }; const handleComplete = (address: Address) => { console.log("실행되었습니다."); console.log(address); onToggleModal(); }; return ( <> {isModalOpen && ( <Modal title="모달 제목" open={true} onOk={onToggleModal} onCancel={onToggleModal} > <DaumPostcodeEmbed onComplete={handleComplete} /> </Modal> )} </> ); }; export default ModalCustomPage; 안녕하세요, 한 가지 궁금증이 들어 질문합니다.onToggleModal 함수를 보면 prevState를 사용해서 isOpenModal 값을 바꾸는데 굳이 그럴 필요가 있을까? 라는 생각이 들어서요. const onToggleModal = () => { setIsModalOpen((!isModalOpen); };onToggleModal 안에서 여러개의 setIsModalOpen이 실행되는 것이 아니기 때문에 그냥 이렇게 코드를 작성해도 함수가 끝나면 isOpenModal 값이 바뀌고 리렌더링되어 버그 없이 잘 실행될 것 같은데 혹시 다른 이유가 있나요?아님 setState 사용할때 prevState를 사용하는 것이 암묵적인 원칙인가요? 

connect에 콜백 이제 안된다고해서 코드를 promise로 썻는데 잘작성이안되네요 어떻게 쓰면될까요? ㅠㅠ

안녕하세요 제로초님.getServerSideProp를 적용한 이후 새로고침 시 로그인 문제가 발생합니다.로그인을 하고 -> 1번째 새로 고침 시 로그인이 풀립니다.하지만 1번째 새로 고침 이후, 끈기를 가지고 계속해서 새로고침을 하다보면 로그인 상태로 다시 돌아옵니다.보통 3번째 정도 새로고침을 하면 로그인이 돌아옵니다..이거는 됐다가 안됐다가 하는 문제이기 때문에 제 코드 문제는 아닌 거 같습니다..새로고침을 n번째 시도 했을 때 로그인이 불규칙 하게 돌아옵니다.그리고 mui ssr 문제도 있는데요.styled-components는 _document와 babelrc? 를 적용하지 않아도 잘 적용되는 반면에, mui ssr은 https://github.com/mui/material-ui/issues/33072 여기에서 시키는 대로 해봐도 적용이 안 되네요1번째 사진은 새로고침 해서 ssr이 적용된 스타일 입니다.2번째 사진은 /profile 페이지 갔다가, 왼쪽 상단 mui 눌러서 홈페이지로 이동 했을때 csr이 적용된 스타일 (= 원래 디자인) 입니다. 혹시 짚이는 게 있으시면 답변 부탁드릴게요.. 감사합니다.

섹션 6 포트폴리오 리뷰 영상 보면서 따라하고 있는데 아무래도 createBoard의 파라미터랑 리턴값이 강의와 다른 것 같아서 오류가 발생하는 것 같은데 어떻게 해야 같은 API를 사용할 수 있을까요?

하루에 한강의씩 들었더니 어느덧 배포까지 완강 하였네요. 알차고 좋은강의 만들어 주셔서 감사합니다.

ls -a명령어를 사용하였을때,.git .gitignore client docker-compose.yml server이렇게 밖에 구성이 없을경우, 저같은 경우에도 .gitignore에 .env파일을 추가 해두어서 git에 없습니다..env파일에는DB_USER_ID= DB_USER_PASSWORD=데이터베이스 아이디와 비밀번호가 입력되어 있는데 .env 환경변수 파일이 없어서 docker-compose up 명령어를 실행 했을때 문제가 발생합니다. 이를 해결하려면 간단하게 .env파일을 만들어주면 됩니다.cd명령어로 docker-compose.yml파일과 같은경로에 가주신 다음에.env 파일 생성 명령어$ sudo vim .env내용을 작성하려면 키보드에서 Insert키 눌려야 됩니다.디비유저 아이디와 패스워드를 작성해주신다음에esc키 누른후 wq! 명령어로 저장해주시면 끝입니다.잘 저장 되었는지 확인 하는 방법은 다시$ sudo vim .env명령어를 치시면 잘 저장되어 있는지 확인 가능합니다.이후에 docker-compose up 사용하시면 잘됩니다. 요약docker-compose.yml파일과 같은경로로 이동$ sudo vim .env 명령어로 .env파일생성vim명령어로 열려진 .env파일에 키보드에 Insert키 눌려서 작성상태로 만든뒤 DB_USER_ID= DB_USER_PASSWORD= 작성하기.(복사 붙여넣기도 됨)꼭!! esc키 누른 후 wq!명령어 치고 엔터로 저장하기.다시 $ sudo vim .env 명령어로 잘 저장되어 있는지 확인하고 esc + q! 저장 안하고 나오기.docker-compose up 명령어로 실행 하기 

도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다.https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04

faker를 개발자가 망쳐두고 튀었다고 듣긴했는데 그럼 몇버젼을 사용해야할까요 게시글들 보면서 보이는 버전들은 다 사용했는데 안먹혀서 ㅠㅠ 요즘에는 몇버전 사용하나요?

운영 단계에서의 데이터베이스와개발 단계에서의 데이터베이스를 분리하여 운영한다고 하면,테스트를 위한 데이터베이스도 만들어야할까요?