[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c<로그인 누른 후의 화면> <localStrategy.js>  안녕하세요 제로초님 강의 잘 듣던 중 로그인이 안되서이렇게 순차적으로 콘솔을 찍어보면서 경로를 확인해보고 있었는데 /auth/login Post 요청까지는 성공적으로 되서 컨트롤러/index.js 의 renderLogin 함수를 보면 req.user가 안 떠서 문의 드립니다. 갑자기 데이터가 사라질 리는 없기에 같은 강의를 계속 돌려보면서 제로초님과 저의 코드 차이를 봤는데 없어서 이유를 몰라 문의드립니다ㅠ

19:20에서 load action이 꼭 ssr이 되어야 하는 거 아니면, swr를 쓰는 걸 추천한다고 하셨는데,이게 무슨 의미인지 모르겠어요..ssr은 그냥 getServerSideProps 함수 안에다가, 아무 action 함수를 넣으면 ssr로 data가 불려와 지는 거 아니였나요?그러면 swr 뿐만 아니라 RTK Query나 thunk를 써도 ssr이 안 되는 거는 마찬가지인가요? 갑자기 잘 모르겠네요 ... 

Aws s3 프리티어 조건을 보니 5GB 제공에 get 요청 2만건 put요청 2000건까지 무료라고 되어있는데 get요청이라는게 노드버드로 치면 게시글 에 있는 이미지를 조회할때마다 요청이되는건가요? 그럼 새로고침 될때마다 요청이 되는거고 새로고침 2만번하면 프리티어에서 초과되는 이런 개념인가요?

배포 사전 학습과제 진행중에,gcloud로 docker-credential-gcr 설치gcloud components install docker-credential-gcrdocker-credential-gcr 이용 docker-credential-gcr configure-docker 를 입력했을 때 제목과 같이 bad CPU 에러가 발생합니다. 이유를 알고싶습니다.(경로 확인which docker-credential-gcr 했을 때/Users/paradise/Desktop/google-cloud-sdk/bin/docker-credential-gcr 라고 확인됩니다.)(파일 executable 확인file docker-credential-gcr 했을 때docker-credential-gcr: Mach-O 64-bit executable arm64 라고 확인됩니다.) ingress 설정중에 발생한 문제가 있습니다. ingress 를 만들기 전에 이미지를 새로 만들고 gcloud shell에서 set image를 통해 재배포하는 단계까지는 모두 성공적으로 작동합니다. 다만 ingress를 만들면 404, cannot get error 가 발생합니다.All backend services are in UNHEALTHY state라고 나옵니다.이유가 궁금합니다.

req.user 에서,request 가 user 객체 정보를 가지고 있는 건가요..?-- 확인해 보니, passport 에서 User 인터페이스를 가지고 있네요! 그런데, 비어있는데 어떻게 속성을 가지고 있는 걸까요?JwtStrategy/validate 의 리턴값을 가지게 되는 건가요? 3월 14일 질문에 대한 답변도 좀 부탁 드립니다..

user와 auth가 서로를 import하고 있어서 forwardRef로 순환 참조를 막아줬는데 auth에선 userRepository를 사용하고 있고 user에선 authService.jwtLogin()을 사용하는데 순환 참조가 발생하는 건가요? 안 막아줘도 되는건가요? 

Typescript를 쓰면서 공부중입니다. productModel.create = jest.fn();위 코드를 할당할 때Cannot assign to 'findByUsername' because it is a read-only property.라는 컴파일 에러가 발생합니다...타입스크립트에서는 어떻게 할당하면 될까요 ?

제가 어디서부터 흐름이 끊겼는지 모르겠는데 우선 로컬에서 브라우저랑 백엔드서버가 쿠키공유를 할 때 origin이 서로 달라서 브라우저에서는 axios.defaults.withCredentials = true를 해주고 백엔드서버에서는 credentials: true 하고 origin: http://localhost:3060을해서 쿠키를 서로 공유했는데 배포 할 때도 백엔드서버에서 브라우저 ip주소를 origin에 적어주면 공유 되는 거 아닌가요? 왜 배포할 떄는 브라우저와 백엔드서버 origin이 서로 같아야 쿠키가 공유 되는 건가요?

게시글 작성에서 이미지를 업로드할때 이런 에러가 나옵니다 s3를 적용한 다음부터인데 검색을 해보니 db에 지정해둔 길이 보다 s3로 부터 가져온 이미지 문자열이 길어서 그런거 같은데 어떻게 하면 좋을까요? 이미지 부분 datatype string을 기존 200에서 300으로 늘려도 에러가 나오네요

혹시 도메인 구매할때 .com만 구입하는게 좋을까요? .site같은 도메인을 쓰게 되면 문제되는게 있을까요?

[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2.Unhandled Runtime ErrorError: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of PostForm.Sourcecomponents/LoginForm.js (15:4) @ eval 13 | 14 | const onSubmitForm = useCallback(() => { > 15 | dispatch( | ^ 16 | loginAction({ 17 | id, 18 | password,터미널 에러 메세지/!\ You are using legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore().4. withRedux(Sansbook) created new store with { giapState: undefined, gspState: null, gsspState: null, gippState: null}{}4. withRedux(Sansbook) created new store with { giapState: undefined, gspState: null, gsspState: null, gippState: null}{}3. import React, { useCallback } from "react"; import { Button, Form, Input } from "antd"; import Link from "next/link"; import { useDispatch } from "react-redux"; import useInput from "./hooks/useInput"; import { loginAction } from "../reducers/user"; const LoginForm = () => { const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const dispatch = useDispatch(); const onSubmitForm = useCallback(() => { dispatch( loginAction({ id, password, }) ); }, [id, password]); return ( <Form onFinish={onSubmitForm} style={{ padding: "10px" }}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" value={password} onChange={onChangePassword} type="password" required /> </div> <div style={{ marginTop: "10px" }}> <Button type="primary" htmlType="submit" loading={false}> 로그인 </Button> <Link href="/signup"> <a> <Button>회원가입</Button> </a> </Link> </div> </Form> ); }; export default LoginForm; import { Form, Input, Button } from "antd"; import { useCallback, useState, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; const PostForm = () => { const { imagePaths } = useSelector((state) => state.post); const [text, setText] = useState(""); const dispatch = useDispatch(); const imageInput = useRef(); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmit = useCallback(() => { dispatch(addPost); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmit} > <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"> 짹쨱 </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; 포스트폼까지 만들고 로그인버튼 누르면 저 에러가 뜨면서 안되네요 ㅠㅠ 에러메시지를 보면 LoginForm에 dispatch가 문제가 있다하고 PostForm 렌더링 방법을 한번 체크해보라는데 잘모르겠습니다

안녕하세요 제로초님.const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; }여기에서 context.req 존재 여부를 2번이나 체크를 하고 있는데요.그 이유는 cookie 변수 안에 이전의 사용자의 sid가 들어가 있을 것을 (현재의 사용자를 위해) 방지 하기 위함 인가요? 아니면 다른 이유가 있나요? 감사합니다.

[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.import { applyMiddleware, compose, createStore } from "redux";const store = createStore(reducer, enhancer);공지사항에서는 결론적으로는 createStore 그대로 쓰셔도 됩니다. 아무 문제 없다고 나와있는데 저는 에러가 떠지면서 안됩니다 ㅠㅠ. 툴킷으로 바꿔야하나요? 바꾸게 되면 진도부분하고 헷갈리지 않을까 걱정이 되긴 하네요

var name ="그랩";var num = 100;이렇게만 입력해도 비교 연산자가 작동하는데var isFool = true; 는 왜 쓰인건지 궁금합니다

안녕하세요 제로초님.NextJS에 대해 자세히 공부하고 싶은데 공부할 설명자료가 구글에 빈약한 거 같아 실무경험이 있는 제로초님께 쉬운 답변을 얻고 싶습니다.왜 nextjs를 사용하면 백엔드를 사용할 필요가 없는지 구글링을 해봤고 대충 비슷한 답변을 얻은 거 같긴 한데 아직도 좀 잘 모르겠는 부분이 있습니다.아래는 제가 찾은 답변을 구글 번역한 것입니다:그러나 SPA(단일 페이지 애플리케이션)의 등장으로 프런트엔드와 백엔드의 구분이 모호해졌습니다. SPA에서 전체 애플리케이션은 사용자의 브라우저에 로드되고 백엔드는 Node.js와 같은 서버 측 프레임워크에서 처리됩니다.Next.js는 한 단계 더 나아가 백엔드 프레임워크의 필요성을 제거합니다. 이를 통해 완전히 서버 렌더링되는 React 애플리케이션을 만들 수 있습니다. 이것은 사용자의 브라우저가 JavaScript 파일, CSS 파일 및 이미지와 같은 필요한 모든 자산을 포함하여 완전한 HTML 페이지를 다운로드한다는 것을 의미합니다. 또한 React 구성 요소에 대한 지원 기능이 내장되어 있으므로 라우팅, 상태 관리 및 기타 일반적인 프런트엔드 문제에 대해 걱정할 필요 없이 정교한 사용자 인터페이스를 만들 수 있습니다.-> 그래서 "어떻게" 백엔드 프레임워크가 필요하지 않다는 건지 아직도 이해가 안 됩니다 ㅠㅠ 예시를 들어 설명해 주시면 정말 감사하겠습니다!!예를들어, 제가 궁금한 점은, DB에서 node를 거치지 않고 Nextjs에서 바로 data를 가져올 수 있는지? 등등원문:However, with the rise of single-page applications (SPAs), the distinction between frontend and backend has become less clear. In a SPA, the entire application is loaded in the user’s browser, and the backend is handled by a server-side framework like Node.js.Next.js eliminates the need for a backend framework by taking it one step further. It allows you to create React applications that are completely server-rendered. This means that the user’s browser will download a complete HTML page, including all the necessary assets like JavaScript files, CSS files, and images. It also ships with built-in support for React components, so you can create sophisticated user interfaces without having to worry about routing, state management, and other common frontend concerns. 참고: https://matcha.fyi/nextjs-intro/#:~:text=js.-,Next.,%2C%20CSS%20files%2C%20and%20images. 

스타일드 컴포넌트 ssr을 설정을 했는데도 자꾸 css가 깨지는데 혹시 어느 부분을 살펴보면 될까요 바벨과 document부분 모두 설정했습니다 강좌와는 다르게 타입스크립트로 진행했습니다 

안녕하세요 제로초님.2:27 쯤에서 질문이 생겼습니다.그러면 SSR이 아닐때 = CSR일때에는front에서 쿠키 withCredentials 안 해주고, back에서만 credentials: true 해줘도 문제가 없는 건가요?

aws ec2 인스턴스 하나에 프론트와 백을 동시에 실행시키려고 합니다 다만 프리티어 메모리 부족으로 npm run build를 로컬에서 빌드한 이후 .next 파일을 깃허브에 푸쉬해서 인스턴스에서 Pull받은 다음 npm start를 하려고 하는데 문제가 .next파일 용량이 커서 깃허브에 업로드가 안됩니다 lfs라는 방식으로 해결을 했지만 푸쉬를 할때마다 깃허브 무료 용량이 다 차는 바람에 쓰지 못하게 될것 같습니다 혹시 다른 방법이 있을까요? 그리고 프론트 서버에서 npm start를 했을때 next/prerender-manifest.json: unexpected token v in json at position 0 이런 에러가 나오는데 로컬에서 빌드하고 npm start했을때는 나오지 않던 에러여서 당황스럽네요 구글링도 해봤는데 해결하지 못했습니다 ㅜㅜ 혹시 방법이 있을까요?

안녕하세요. 강사님! 강의를 들으며 똑같이 작성했고 혹시 모를 오타가 있는지도 확인하면서 강사님 깃허브도 참조해보았는데 원인을 찾지 못하겠어서 문의드립니다. ㅠ ㅠ이미지 업로드를 하면 아래와 같이 오류가 뜨고 redux dev tools 로 확인해 보았을 때UPLOAD_IMAGES_REQUEST 만 처리되고 SUCCESS 로 넘어가지가 않아요.리퀘스트 되어 있는 데이터를 보면 빈 값인 것을 보니 데이터가 넘어가지 않는 것 같은데 도무지 원인을 모르겠습니다. 업로드를 하면 에러가 나면서 서버연결도 끊깁니다. ㅜㅜ제 코드에 뭐가 문제가 있는 건가요..?ㅠㅠ 확인 후 문제를 알려주시면 너무 감사할 것 같습니다..ㅠㅠㅠ[redux] import produce from "immer"; export const initialState = { mainPosts: [], // 이미지 업로드할 때 이미지의 경로들이 저장됨 imagePaths: [], uploadImagesLoading: false, uploadImagesDone: false, uploadImagesError: null, } export const UPLOAD_IMAGES_REQUEST = "UPLOAD_IMAGES_REQUEST"; export const UPLOAD_IMAGES_SUCCESS = "UPLOAD_IMAGES_SUCCESS"; export const UPLOAD_IMAGES_FAILURE = "UPLOAD_IMAGES_FAILURE"; const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { case UPLOAD_IMAGES_REQUEST: draft.uploadImagesLoading = true; draft.uploadImagesDone = false; draft.uploadImagesError = null; break; case UPLOAD_IMAGES_SUCCESS: draft.imagePaths = action.data; draft.uploadImagesLoading = false; draft.uploadImagesDone = true; break; case UPLOAD_IMAGES_FAILURE: draft.uploadImagesLoading = false; draft.uploadImagesError = action.error; break; default: break; } }); }; export default reducer; [saga]import axios from "axios"; import { all, fork, put, takeLatest, throttle, call, } from "redux-saga/effects"; import { UPLOAD_IMAGES_FAILURE, UPLOAD_IMAGES_REQUEST, UPLOAD_IMAGES_SUCCESS, } from "../reducers/post"; function uploadImagesAPI(data) { return axios.post("/post/images", data); } function* uploadImages(action) { try { const result = yield call(uploadImagesAPI, action.data); yield put({ type: UPLOAD_IMAGES_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: UPLOAD_IMAGES_FAILURE, error: err.response.data, }); } } function* watchUploadImages() { yield takeLatest(UPLOAD_IMAGES_REQUEST, uploadImages); } export default function* postSaga() { yield all([ fork(watchUploadImages), ]); }[components] import React, { useCallback, useEffect, useRef } from "react"; import { useSelector, useDispatch } from "react-redux"; import { Form, Input, Button } from "antd"; import { UPLOAD_IMAGES_REQUEST, REMOVE_IMAGE, ADD_POST_REQUEST, } from "../reducers/post"; import useInput from "../hooks/useInput"; const PostForm = () => { const dispatch = useDispatch(); const { imagePaths, addPostDone } = useSelector((state) => state.post); const [text, onChangeText, setText] = useInput(""); const imageInput = useRef(); useEffect(() => { if (addPostDone) { setText(""); } }, [addPostDone]); const onSubmit = useCallback(() => { if (!text || !text.trim()) { return alert("게시글을 작성하세요."); } const formData = new FormData(); imagePaths.forEach((p) => { formData.append("image", p); }); formData.append("content", text); return dispatch({ type: ADD_POST_REQUEST, data: formData, }); }, [text, imagePaths]); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); const onChangeImages = useCallback((e) => { console.log("images", e.target.files); const imageFormData = new FormData(); [].forEach.call(e.target.files, (f) => { imageFormData.append("image", f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); const onRemoveImage = useCallback( (index) => () => { dispatch({ type: REMOVE_IMAGE, data: index, }); }, [] ); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmit} > <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> <input type="file" name="image" multiple hidden ref={imageInput} onChange={onChangeImages} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: "right" }} htmlType="submit"> 짹짹 </Button> </div> <div> {imagePaths?.map((v, i) => ( <div key={v} style={{ display: "inline-block" }}> <img src={`http://localhost:3065/${v}`} alt={v} style={{ width: "200px" }} /> <div> <Button onClick={onRemoveImage(i)}>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm; [back - routes/post.js]const express = require("express"); const multer = require("multer"); const path = require("path"); const fs = require("fs"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); try { fs.accessSync("uploads"); } catch (error) { console.log("uploads 폴더가 없으므로 생성합니다."); fs.mkdirSync("uploads"); } const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, "uploads"); }, filename(req, file, done) { // amanda.png const ext = path.extname(file.originalname); // 확장자 추출(.png) const basename = path.basename(file.originalname, ext); // amanda done(null, basename + "_" + new Data().getTiem() + ext); // amanda15653484.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB }); router.post( "/images", isLoggedIn, upload.array("image"), // single , array , none async (req, res, next) => { // POST /post/images console.log(req.files); res.json(req.files.map((v) => v.filename)); } ); router.post("/", isLoggedIn, upload.none(), async (req, res) => { // POST /post try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); 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); } }); module.exports = router;

에러메세지:ADD_POST_SUCCESS 까지 잘 되었고 content 에 id 도 잘 들어가 있는걸로 보입니다. pages/index.jsimport React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostCard from "../components/PostCard"; import PostForm from "../components/postForm"; import { LOAD_POSTS_REQUEST } from "../reducers/post"; import { LOAD_USER_REQUEST } from "../reducers/user"; const Home = () => { const me = useSelector((state) => state.user.me); const { mainPosts, hasMorePosts, isLoadingPosts } = useSelector( (state) => state.post ); const dispatch = useDispatch(); useEffect(() => { dispatch({ type: LOAD_USER_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !isLoadingPosts) { dispatch({ type: LOAD_POSTS_REQUEST, }); } } } window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, []); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); }; export default Home; reducers/post.jsimport produce from "immer"; export const initialState = { mainPosts: [], imagePaths: [], hasMorePosts: true, isAddingPost: false, isAddedPost: false, isAddPostErr: null, isRemovingPost: false, isRemovedPost: false, isRemovePostErr: null, isAddingComment: false, isAddedComment: false, isAddCommentErr: null, isRemovingComment: false, isRemovedComment: false, isRemoveCommentErr: null, isLoadingPosts: false, isLoadedPosts: false, isLoadPostsErr: null, }; export const LOAD_POSTS_REQUEST = "LOAD_POSTS_REQUEST"; export const LOAD_POSTS_SUCCESS = "LOAD_POSTS_SUCCESS"; export const LOAD_POSTS_FAILURE = "LOAD_POSTS_FAILURE"; export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const REMOVE_POST_REQUEST = "REMOVE_POST_REQUEST"; export const REMOVE_POST_SUCCESS = "REMOVE_POST_SUCCESS"; export const REMOVE_POST_FAILURE = "REMOVE_POST_FAILURE"; export const ADD_COMMENT_REQUEST = "ADD_COMMENT_REQUEST"; export const ADD_COMMENT_SUCCESS = "ADD_COMMENT_SUCCESS"; export const ADD_COMMENT_FAILURE = "ADD_COMMENT_FAILURE"; export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { case ADD_POST_REQUEST: draft.isAddingPost = true; draft.isAddedPost = false; draft.isAddPostErr = null; break; case ADD_POST_SUCCESS: draft.isAddingPost = false; draft.mainPosts.unshift(action.data); draft.isAddedPost = true; break; case ADD_POST_FAILURE: draft.isAddingPost = false; draft.isAddedPost = false; draft.isAddPostErr = action.error; break; case REMOVE_POST_REQUEST: draft.isRemovingPost = true; draft.isRemovedPost = false; draft.isRemovePostErr = null; break; case REMOVE_POST_SUCCESS: draft.isRemovingPost = false; draft.mainPosts = state.mainPosts.filter((v) => v.id !== action.data); draft.isRemovedPost = true; draft.isRemovePostErr = null; break; case REMOVE_POST_FAILURE: draft.isRemovingPost = false; draft.isRemovedPost = false; draft.isRemovePostErr = action.error; break; case ADD_COMMENT_REQUEST: draft.isAddingComment = true; draft.isAddedComment = false; draft.isAddCommentErr = null; break; case ADD_COMMENT_SUCCESS: draft.isAddingComment = false; const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Comments.unshift(action.data); draft.isAddedComment = true; break; case ADD_COMMENT_FAILURE: draft.isAddingComment = false; draft.isAddedComment = false; draft.isAddCommentErr = action.error; break; case LOAD_POSTS_REQUEST: draft.isLoadingPosts = true; draft.isLoadedPosts = false; draft.isLoadPostsErr = null; break; case LOAD_POSTS_SUCCESS: draft.isLoadingPosts = false; draft.mainPosts = draft.mainPosts.concat(action.data); draft.isLoadedPosts = true; break; case LOAD_POSTS_FAILURE: draft.isLoadingPosts = false; draft.isLoadedPosts = false; draft.isLoadPostsErr = action.error; break; default: break; } }); }; export default reducer;sagas/post.jsimport { delay, all, fork, put, takeLatest, call } from "redux-saga/effects"; import axios from "axios"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, ADD_COMMENT_FAILURE, ADD_COMMENT_SUCCESS, ADD_COMMENT_REQUEST, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, REMOVE_POST_FAILURE, LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, LOAD_POSTS_FAILURE, } from "../reducers/post"; import { ADD_POST_TO_ME, REMOVE_POST_FROM_ME } from "../reducers/user"; function addPostAPI(data) { return axios.post( "/post", { content: data }, { withCredentials: true, } ); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield put({ type: ADD_POST_SUCCESS, content: result.data }); yield put({ type: ADD_POST_TO_ME, data: result.data.id, }); } catch (err) { console.log(err); yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function removePostAPI(data) { return axios.delete("/post", data); } function* removePost(action) { try { yield delay(1000); yield put({ type: REMOVE_POST_SUCCESS, data: action.data, }); yield put({ type: REMOVE_POST_FROM_ME, data: action.data, }); } catch (err) { yield put({ type: REMOVE_POST_FAILURE, error: err.response.data, }); } } function addCommentAPI(data) { return axios.post(`/post/${data.postId}/comment`, data); //POST /post/1/comment } function* addComment(action) { try { const result = yield call(addCommentAPI, action.data); yield put({ type: ADD_COMMENT_SUCCESS, data: result.data }); } catch (err) { console.log(err); yield put({ type: ADD_COMMENT_FAILURE, error: err, }); } } function loadPostsAPI() { return axios.get(`/posts`); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI, action.data); yield put({ type: LOAD_POSTS_SUCCESS, data: result.data }); } catch (err) { console.log(err); yield put({ type: LOAD_POSTS_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } function* watchRemovePost() { yield takeLatest(REMOVE_POST_REQUEST, removePost); } function* watchAddComment() { yield takeLatest(ADD_COMMENT_REQUEST, addComment); } function* watchLoadPosts() { yield takeLatest(LOAD_POSTS_REQUEST, loadPosts); } export default function* postSaga() { yield all([ fork(watchAddPost), fork(watchRemovePost), fork(watchAddComment), fork(watchLoadPosts), ]); }routes/posts.jsconst express = require("express"); const { Post, Image, User, Comment } = require("../models"); const router = express.Router(); router.get("/", async (req, res, next) => { // GET /posts try { const posts = await Post.findAll({ limit: 10, order: [ ["createdAt", "DESC"], [Comment, "createdAt", "DESC"], ], include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [{ model: User, attributes: ["id", "nickname"] }], }, ], }); res.status(200).json(posts); } catch (err) { console.error(err); next(err); } }); module.exports = router; sql 테이블도 잘 들어가있고, 새로 고침 하면 포스팅은 잘 되어 있습니다.