로그인 유지를 swr 방식으로 교체하려고 합니다.https://swr.vercel.app/ko/docs/getting-started공식문서에는 useSWR을 hook으로 활용하는 가이드를 제시하고 있습니다.(재사용 가능하게 만들기 항목)가이드와 같은 방식으로 외부 파일에 hooks를 만들고, 적용했습니다.useMyInfo.jsimport axios from 'axios'; export default function useMyInfo(useSWR) { const fetcher = url => axios.get(url, { withCredentials: true }).then(result => result.data); const { data: me, error: myInfoError, isLoading: myInfoLoading, } = useSWR(`${process.env.NEXT_PUBLIC_BACK_END_DOMAIN}/user/me`, fetcher); // mutate('ME', { me, myInfoError, myInfoLoading }); return { me, myInfoError, myInfoLoading, }; } index.jsconst Home = () => { const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } = useSelector(state => state.post); useEffect(() => { useMyInfo(); // hooks 호출 }, []); ...// 생략매개변수로 전달하는 방식으로도 바꿔봤습니다.import useSWR from 'swr' const Home = () => { const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } = useSelector(state => state.post); useEffect(() => { useMyInfo(useSWR); // hooks 호출, hooks에서는 매개변수 받아서 적용하는 방식으로 변경했음 }, []); ...// 생략여전히 같은 에러가 뜹니다.공식문서 가이드와 달리 hook으로 만들어 재사용하는 것이 잘 안되는데 어떻게 해결할수 있나요? 간단한 get요청 하나 가져오는게 편할줄 알았는데 redux 보다 어려운거 같네요..

안녕하세요, 제로초님. 문제에 대한 고민을 공유하기 앞서 현재 저는 [해시태그 등록하기]까지 수강한 상태입니다.공유하려는 문제는 제목과 같이 게시글 작성시 post.id를 읽지 못 하여 컴포넌트가 렌더링 되지 않습니다. 그러나 새로고침을 하면 작성한 게시글이 정상적으로 렌더링됩니다. 네트워크와 redux 데브툴즈에는 액션들이 모두 정상적으로 작동하고 있음을 확인하였고, 콘솔을 확인해보니 아래와 같은 오류가 뜹니다.위 오류는 비동기로 데이터를 받아오기 전에 먼저 render가 되서 발생하는 에러임을 검색을 통해 확인하였습니다. 그래서 react suspense를 이용하여 해결해보려 했으나 해결하지 못 했습니다. 혹시 제가 해당 오류의 원인을 제대로 파악하지 못 하고 있는 걸까요? 알려주시면 감사하겠습니다.

TLDRNestJS를 최신 버전으로 업그레이드하여 프로젝트를 다시 생성하시면 설치가 가능합니다.Details2023년 6월 15일 기준 NestJS의 v10 릴리즈가 나와, 이전 버전의 CLI로 설치된 경우 아래 명령어 실행 시 에러가 발생합니다. (작성자의 경우 NestJS v9로 실행)$ npm i --save @nestjs/websockets @nestjs/platform-socket.io npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: test-chat@0.0.1 npm ERR! Found: @nestjs/common@9.4.3 npm ERR! node_modules/@nestjs/common npm ERR! @nestjs/common@"^9.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @nestjs/common@"^10.0.0" from @nestjs/websockets@10.1.0 npm ERR! node_modules/@nestjs/websockets npm ERR! @nestjs/websockets@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.이를 해결하기 위한 방법으로 두 가지를 생각해볼 수 있는데, 작성자 본인은 첫 번째 방법을 사용했음을 알려드립니다.NestJS v10으로 새로 설치 후 프로젝트 다시 생성공식문서(링크)를 따라 v9에서 v10으로 마이그레이션

 안녕하세요 선생님 다름이 아니라 synchronize: true, // 동기화 시켜준다 같게 한다.true을 하게되면 동기화를 시켜주는건데 매번 yarn start:dev을할때마다 QueryFailedError: Table '***' already exists이러한 오류가 나옵니다. 그럼 실행 할때마다 데이터베이스 테이블을 매번 지워야 하는건가요??

섹션3에서 섹션4로 넘어가면서 write.html에 코드가 변경된거같은데 변경된 write.html 전체코드가 없어서 문의드려요. write.html 코드부분 올려주실 수 있을까요?

javascript문서를 확인했을때는 배열을 객체로쓴다던가 함수를 부를수없는곳에 작성했다는등의 오류라고 나와있는데 아무리 찾아봐도 그오류가 어디에서 나오는지 왜나오는지를 알수없어서 질문올립니다.// index.jsimport express from "express"; import { options, dataCoffee, dataUsers } from "./swagger/config.js"; import cors from "cors"; const app = express(); import swaggerUi from "swagger-ui-express"; import swaggerJSDoc from "swagger-jsdoc"; app.use(express.json()); const swaggerSpec = swaggerJSDoc(options); app.use(cors()); app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec)); app.get("/users", (req, res) => { res.send(dataUsers); }); app.get("/starbucks", function (req, res) { res.send(dataCoffee); }); app.listen(3001); // config.jsexport const options = { definition: { openapi: "3.0.0", info: { title: "swagger-test", version: "1.0.0", }, }, apis: ["./swagger/*-swagger.js"], // files containing annotations as above }; export const dataCoffee = [ { name: "아메리카노", kcal: 5 }, { name: "카푸치노", kcal: 125 }, { name: "헤이즐넛", kcal: 85 }, { name: "카라멜마키아또", kcal: 225 }, { name: "휘핑크림추가", kcal: 115 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, { name: "아메리카노", kcal: 5 }, ]; export const dataUsers = [ { email: "aaa@gmail.com", name: "짱구", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구2", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구3", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구4", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구5", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, { email: "aaa@gmail.com", name: "짱구6", phone: "010-2293-3333", personal: "222012-2210392", prefer: "https://google.com", }, ];// all-swagger.js/** * @swagger * /starbucks: * get: * summary: 커피 * tags: [Coffee] * parameters: * name: String * kcal: int * responses: * 200: * description: 성공 * content: * application/json: * schema: * type: array * items: * properties: * name: * type: String * example: 아메리카노 * kcal: * type: int * example: 5 */ /** * @swagger * /users: * get: * summary: 유저검색 * tags: [Users] * parameters: * name: String * kcal: int * responses: * 200: * description: 성공 * content: * application/json: * schema: * type: array * items: * properties: * name: * type: String * example: 아메리카노 * kcal: * type: int * example: 5 */

다음과 같은 양식으로 남겨주세요.질문을 한 배경 :질문내용 :code sandbox에서 promise 메소드가 실행이 안되네요 ㅠㅠ터미널에서 npm install mysql2 로 설치하고 db에서 데이터 조회도 잘되요근데 createPool 메소드에 체인해서 promise()를 사용하는건 안되네요도와주세요!   

안녕하세요 그랩님! 바로 아래 질문과 같이 axios error가 콘솔창에 뜨는데 포스트맨으로 다른 api 연결 확인 다 되었고 app.use(cors()); 역시 서버의 index.js 에 기재되어 있는데도 여전히 오류가 뜨고 있어 혹시 이런경우엔 어떻게 해결이 가능할지 문의드리고자 합니다!

안녕하세요, jwt토큰을 입력하여 사용자 인가를 받고 싶은데 그 과정에서 계속 오류가 나서 문의드립니다. 제가 확인하기로는 코드도 정확히 입력하고, HTTP HEADERS로 보내주는 토큰도 문제 없어서요. 에러 강의에서 jwt를 넣어주지 않았을 때 발생한다는 에러가 발생합니다. 제가 보기에는 토큰값이 잘못된것 같은데, login으로 받아온 토큰을 바로 넣는거라 만료가 되지도 않았을텐데 해결이 안되네요. 제 코드는 아래와 같습니다. users.resolver.ts// users.resolver.ts import { Args, Int, Mutation, Query, Resolver } from '@nestjs/graphql'; import { User } from './entities/user.entity'; import { UsersService } from './users.service'; import * as bcrypt from 'bcrypt'; import { UseGuards } from '@nestjs/common'; import { GqlAuthAccessGuard } from '../auth/guards/gql-auth.guard'; // import { AuthGuard } from '@nestjs/passport'; // 추가 @Resolver() export class UsersResolver { constructor( private readonly usersService: UsersService, // ) {} @UseGuards(GqlAuthAccessGuard) // 수정 @Query(() => String) fetchUser(): string { console.log('인가에 성공하였습니다'); return '인가에 성공하였습니다.'; } @Mutation(() => User) async createUser( @Args('email') email: string, @Args('password') password: string, @Args('name') name: string, @Args({ name: 'age', type: () => Int }) age: number, ): Promise<User> { // const hashedPassword = await bcrypt.hash(password, 10); // return this.usersService.create({ email, hashedPassword, name, age }); // } return this.usersService.create({ email, password, name, age }); } }  gql-auth.guard.ts import { ExecutionContext } from '@nestjs/common'; import { GqlExecutionContext } from '@nestjs/graphql'; import { AuthGuard } from '@nestjs/passport'; export class GqlAuthAccessGuard extends AuthGuard('access') { getRequest(context: ExecutionContext) { const gqlContext = GqlExecutionContext.create(context); return gqlContext.getContext().req; } }  jwt-access.strategy.ts import { PassportStrategy } from '@nestjs/passport'; import { ExtractJwt, Strategy } from 'passport-jwt'; export class JwtAccessStrategy extends PassportStrategy(Strategy, 'access') { constructor() { super({ jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), secretOrKey: '나의비밀번호', }); } validate(payload) { console.log('페이로드', payload); return { id: payload.sub, }; } } auth.module.tsimport { Module } from '@nestjs/common'; import { AuthResolver } from './auth.resolver'; import { AuthService } from './auth.service'; import { UsersModule } from '../users/users.module'; import { JwtModule } from '@nestjs/jwt'; import { JwtAccessStrategy } from './strategy/jwt-access.strategy'; @Module({ imports: [ JwtModule.register({}), UsersModule, // 서비스를 각각 불러오기보다는 module을 통으로 불러오는게 낫다. 원래는 import 에 TypeOrmModule.forFeature([Users])& providers에 UsersServie가 있었음. ], providers: [ JwtAccessStrategy, AuthResolver, // AuthService, // ], }) export class AuthModule {}

강의를 보고 error: error.message를 작성했는데 왜 catch(error: any) 를 작성했을 때만 에러표시가 뜨지 않는 건지 궁금합니다..!

버전 문의있습니ㄷㅏ.지금 최신버전으로 만ㄷㅡㄹ고싶으면 제로초님의 github에서 ch7을 보면 ㄷㅚㄹ까요?

error처리 질문드립니다.현재 라우터에는 /about1234는 없습니다. http://localhost:5000/about12344 여기입력해서 들어가면 강의처럼 err로 가서 asdasd가 나와야하는걸로 이해하고있습니다. 이렇게 나옵니다.asdasd가 나와야하는거 같은데 뭐가 잘못된건지 잘모르겠습니다.  

로그인시에 서버사이드렌더링으로 쿠키가 저장되고 공유하는건 확인이 됐습니다. 헤드에 저장이 되어 쿠키 저장이 된건 확인이 됐는데 로그인시 리덕스에서 me값으로 action.data가 전달되는데 왜 새로고침시에 state 인 me값이 왜 null 값으로 바뀌는걸까요.. 이것도 서버사이드 렌더링으로 유지가 가능할까요? 여러페이지를 만들시에 페이지이동시에도 처음 로그인시에 me 로 넘겨주는 action.data 값도 유지하고 싶습니다

uuid를 통해서 file의 원본이름을 변경해서 mysql의 image컬럼에 아래처럼 저장하고있습니다. \images\042c8bb1-e0fd-4005-85e9-68d7c587c02d.png홈페이지를 접속하면(로그인 안되면 로그인 페이지로 이동) 로그인했을때만(jwt 토큰을 발행해서 cookie에 보내주고) 홈페이지를 접속가능하게 하였습니다.홈페이지로 이동하면 이미지들을 볼수있도록 했습니다. 근데 이미지주소 복사하면 로그아웃해도 해당이미지가 나옵니다.제가 하고자는건 로그인했을때만 이미지보여주고 해당 이미지주소입력하면(로그인 안됐을때) 이미지가 안보이도록 하고싶은데 어떻게 해야할까요?db에 image컬럼에 원본이름만 저장하고 다른폴더에 이미지를 저장하고 db 인덱싱을통해서 이미지를 가져와서 이미지를 보여주도록 할려면 어떻게 해야할까요?(db인덱싱을통해(원본이름) 다른폴더에있는 해당이미지 가져오도록 하려면 어떻게해야할지 잘 모르겠습니다). 하나의 게시글에 다중이미지를 업로드하면 다중이미지를 보여주게 할려면 어떻게해야할까요? 현재는 db에 넣으면 num에(ai를통해서) 예를 들어 3장을 업로드하면 num이 1,2,3으로 생성되어서 이미지 경로도 각각 저장되고 홈페이지에서 하나하나씩 보입니다. 그럼 db에 저장을 어떻게해야하나요?사진을보면 밀리미터까지 똑같이 저장이 되는데 하나의 구분에 다중이미지의 주소를 넣을려면 어떻게해야할지요?... 이렇게해놔도 여기로 들어오지도 않고 바로 이미지주소로 검색하면 바로 이미지가 나옵니다.초보자라서 자세히 설명해주시면 감사하겠습니다.   

[ 게시글 삭제 saga 작성하기 ] 수강 중 질문 드립니다.이전 댓글을 추가할때는 reudce에서 case ADD_COMMENT_SUCCESS: { const postIndex = state.mainPosts.findIndex(v => v.id === action.data.postId); const post = { ...state.mainPosts[postIndex] }; // 얕은 복사 const Comments = [action.data, ...post.Comments]; const mainPosts = [...state.mainPosts]; mainPosts[postIndex] = { ...post, Comments, }; return { ...state, mainPosts, addCommentLoading: false, addCommentDone: true, addCommentError: false, }; }이런식으로 얕은 복사를 하셨는데요.  case REMOVE_POST_SUCCESS: { const mainPosts = state.mainPosts.filter(v => v.id !== action.data.id); return { ...state, mainPosts, removePostLoading: false, removePostDone: true, removePostError: false, }; }게시글을 삭제할때는 왜 'state.mainPosts'를 얕은 복사해서 조작하지 않는 건지 궁금합니다.혹시 filter가 기존 state.mainPosts 을 수정하지 않으며, 새로운 배열을 return하기에 얕은 복사가 필요없는 건가요? 답변 기다리겠습니다.감사합니다 :)

그랩님 안녕하세요 다름이아니라 depoly 관련해서 문의드립니다.현재 fly depoly 부분에서 계속 에러가 발생하고있습니다.launch 부분에서도 그랩님과는 다르게 지역 선택이후로는 물어보는게 없이 바로 진행됐습니다.오류 내역 첨부드립니다ㅠㅠ다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!

강좌에서는 SSR 적용전 CSR 만으로 로그인 유지를 할 때 초기상태가 로그인 유지가 안되있는 상태기 때문에 로그인정보 부분에 깜빡임이 발생하는데요. 혹시 CSR에서도 깜빡임 없이 로그인 유지를 할 수 있는 방법이 있나요? 혹시 리액트 라이프 사이클쪽을 건드려야 하는건가요?

if (exUser) { return res.status(403).send("이미 사용중인 아이디입니다." ); }이렇게 send를 보내고redux toolkit에서는 이 메시지를 error.message에 넣는 방법을 잘 모르겠는데 어떻게 하면 되나요?위에 사진은 signup/rejected의 Action안에 있는 정보입니다

 nodejs, multer를 통해서 이미지를 업로드했습니다db에 해당 파일명uuid()를 통해서 저장을 했는데 이미지 주소복사 해서 검색해서 들어가면 이미지가 나오는데 검색해도 못들어가게 하려면 어떻게해야하나요? 또는 관리자만 들어갈수있게하려는데 방법이 있을까요

로그인 후 post를 추가하면 아래와 같이 오류가 납니다 ㅠㅠ!화면에러내용Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading '0') Source components\PostCard.js (47:27) @ PostCard 45 | <Card 46 | // post안에 Images가 있는 경우 > 47 | cover={post.Images[0] && <PostImages images={post.Images} />} | ^ 48 | actions={[ 49 | <RetweetOutlined key="retweet" />, 50 | liked ? (콘솔 추가 에러내용react-dom.development.js:19527 The above error occurred in the <PostCard> component: in PostCard (at pages/index.js:24) in div (created by Context.Consumer) in Col (at AppLayout.js:57) in div (created by Context.Consumer) in Row (at AppLayout.js:53) in div (at AppLayout.js:35) in AppLayout (at pages/index.js:21) in Home (at _app.js:13) in NodeBird (created by withRedux(NodeBird)) in Provider (created by withRedux(NodeBird)) in withRedux(NodeBird) in ErrorBoundary (created by ReactDevOverlay) in ReactDevOverlay (created by Container) in Container (created by AppContainer) in AppContainer in Root  page/index.jsimport { all, fork } from "redux-saga/effects"; import postSaga from "./post"; import userSaga from "./user"; export default function* rootSaga() { yield all([fork(postSaga), fork(userSaga)]); } reducer/post.jsimport shortId from "shortid"; import produce from "immer"; import immer from "immer"; export const initailState = { mainPosts: [ { id: 1, User: { id: 1, nickname: "행복", }, content: "첫 번째 게시글 #해시태그 #해시태그2", Images: [ { src: "https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726", }, { src: "https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg", }, { src: "https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg", }, ], Comments: [ { User: { nickname: "nero", }, content: "우와 개정판이 나왔군요~", }, { User: { nickname: "hero", }, content: "얼른 사고싶어요~", }, ], }, ], imagePaths: [], addPostLoading: false, addPostDone: false, addPostError: null, removePostLoading: false, removePostDone: false, removePostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; 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) => { return { type: ADD_POST_REQUEST, data, }; }; export const addComment = (data) => { return { type: ADD_COMMENT_REQUEST, data, }; }; const dummyPost = (data) => ({ id: data.id, content: data.content, User: { id: 1, nickname: "행복", }, }); const dummyComment = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: "행복", }, Images: [], Comments: [], }); const reducer = (state = initailState, action) => { return produce(state, (draft) => { switch (action.type) { case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.mainPosts.unshift(dummyPost(action.data)); draft.addPostLoading = false; draft.addPostDone = true; break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break; case REMOVE_POST_REQUEST: draft.removePostLoading = true; draft.removePostDone = false; draft.removePostError = null; draft.mainPosts = state.main; break; case REMOVE_POST_SUCCESS: // draft.mainPosts = state.mainPosts.filter((v) => v.id !== action.data); draft.mainPosts = draft.mainPosts.filter((v) => v.id !== action.data); draft.removePostLoading = false; draft.removePostDone = true; break; case REMOVE_POST_FAILURE: draft.removePostLoading = false; draft.removePostError = action.error; break; case ADD_COMMENT_REQUEST: draft.addCommentLoading = true; draft.addCommentDone = false; draft.addCommentError = null; break; case ADD_COMMENT_SUCCESS: { // 게시글을 찾음 const post = draft.mainPosts.find((v) => v.id === action.data.postId); // 그 게시글 댓글에다가 새로운 댓글 추가 post.Comments.unshift(dummyComment(action.data.content)); draft.addCommentLoading = false; draft.addCommentDone = true; break; // const postIndex = state.mainPosts.findIndex( // (v) => v.id === action.data.postId // ); // const post = { ...state.mainPosts[postIndex] }; // post.Comments = [dummyComment(action.data.content), ...post.Comments]; // Comments 얕은 복사 후 dummyComment 추가 // const mainPosts = [...state.mainPosts]; // mainPosts 새로운객체 생성 // mainPosts[postIndex] = post; // return { // ...state, // mainPosts, // addCommentLoading: false, // addCommentDone: true, // }; } case ADD_COMMENT_FAILURE: draft.addCommentLoading = false; draft.addCommentError = action.error; break; default: break; } }); }; export default reducer; //기본 구조 // const initailState = {}; // const reducer = (state = initailState, action) => { // switch (action.type) { // default: // return state; // } // }; // export default reducer; // 데이터를 구성하고 그에따라 액션구성후 reducer작성 그 후 화면 구성 sagas/post.jsimport { all, fork, delay, put, takeLatest } from "redux-saga/effects"; // import axios from "axios"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, REMOVE_POST_FAILURE, } from "../reducers/post"; import { REMOVE_POST_OF_ME } from "../reducers/user"; import { ADD_POST_TO_ME } from "../reducers/user"; import shortId from "shortid"; function addPostAPI(data) { return axios.post("/api/post", data); // 서버에 요청 } function* addPost(action) { try { // const result = yield call(addPostAPI, action.data); yield delay(1000); const id = shortId.generate(); yield put({ type: ADD_POST_SUCCESS, data: { id, content: action.data, }, }); yield put({ type: ADD_POST_TO_ME, data: id, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function removePostAPI(data) { return axios.delete("/api/post", data); // 서버에 요청 } function* removePost(action) { try { yield delay(1000); yield put({ type: REMOVE_POST_SUCCESS, data: action.data, }); yield put({ type: REMOVE_POST_OF_ME, data: action.data, }); } catch (err) { yield put({ type: REMOVE_POST_FAILURE, error: err.response.data, }); } } function addcommentAPI(data) { return axios.post(`/api/post/${data.postId}/comment`, data); // 서버에 요청 } function* addComment(action) { try { // const result = yield call(addCommentAPI, action.data); yield delay(1000); yield put({ type: ADD_COMMENT_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_COMMENT_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); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchRemovePost), fork(watchAddComment)]); } components/PosdCard.jsimport React, { useState, useCallback } from "react"; import { Card, Popover, Button, Avatar, Comment, List } from "antd"; import PropTypes from "prop-types"; import CommentForm from "./CommentForm"; import { RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutlined, HeartTwoTone, } from "@ant-design/icons"; import { useDispatch, useSelector } from "react-redux"; import PostImages from "./PostImages"; import PostCardContent from "./PostCardContent"; import { REMOVE_POST_REQUEST } from "../reducers/post"; const PostCard = ({ post }) => { const dispatch = useDispatch(); const { removePostLoading } = useSelector((state) => state.post); const [liked, setLiked] = useState(false); const [commentFormOpened, setCommentFormOpened] = useState(false); const onToggleLike = useCallback(() => { setLiked((prev) => !prev); }, []); const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); const id = useSelector((state) => state.user.me?.id); // = const id = useSelector((state) => state.user.me && state.user.me.id); //const { me } = useSelector((state) => state.user); //const id = me?.id; // 로그인을 한 상태이고 아이디가 있으면 으로 해석해서 설계해보자 // const id = me && me.id; const onRemovePost = useCallback(() => { dispatch({ type: REMOVE_POST_REQUEST, data: post.id, }); }, []); return ( <div style={{ marginBottom: 20 }}> <Card // post안에 Images가 있는 경우 cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ <RetweetOutlined key="retweet" />, liked ? ( <HeartTwoTone twoToneColor="#eb2f96" key="heart" onClick={onToggleLike} /> ) : ( <HeartOutlined key="heart" onClick={onToggleLike} /> ), <MessageOutlined key="comment" onClick={onToggleComment} />, <Popover key="more" content={ <Button.Group> {/* 내아이디랑 게시글작성아디가 나랑 같으면 */} {id && post.User.id === id ? ( <> <Button>수정</Button> <Button type="danger" onClick={onRemovePost} loading={removePostLoading} > 삭제 </Button> </> ) : ( <Button>신고</Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>, ]} > <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={<PostCardContent postData={post.content} />} /> </Card> {commentFormOpened && ( <div> {/* post를 넘겨주는 이유는? 어떤 게시글에 댓글을 달건지 게시글의 id가 필요하기 때문에 */} <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} //post.Comments가 각각 item으로 들어감 renderItem={(item) => ( <li> <Comment author={item.User.nickname} avatar={<Avatar>{item.User.nickname[0]}</Avatar>} content={item.content} /> </li> )} /> </div> )} </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.object, Comments: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), }).isRequired, }; export default PostCard; componets/PostForm.jsimport React, { useCallback, useRef, useEffect } from "react"; import { Form, Input, Button } from "antd"; import { useDispatch, useSelector } from "react-redux"; import { addPost } from "../reducers/post"; import useInput from "../hooks/useInput"; const PostForm = () => { const { imagePaths, addPostDone } = useSelector((state) => state.post); const dispath = useDispatch(); const [text, onChangeText, setText] = useInput(""); useEffect(() => { if (addPostDone) { setText(""); } }, [addPostDone]); const onSubmit = useCallback(() => { dispath(addPost(text)); }, [text]); const imageInput = useRef(); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form onFinish={onSubmit} style={{ margin: "10px 0 20px" }} encType="multipart/form-data" > <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;