묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인과 S3연결 후 AWS 요금 과금문제 문의드립니다.
강의를 보고 따라하다가 오늘 보니 저번 달 사용량에 관련된 요금이 결제되었다고 메일을 받았습니다.. Amazon Virtual Private Cloud 에서 좀 많이 나왔고,,Amazon Route 53에도 요금이 나왔네요..총 만원정도 과금이 되었는데 어떤건지 몰라서 어디부분을 삭제해야 비용이 발생하지 않는걸까요?강의를 잘 보고 따라했는데.. 당황스럽습니다...
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
두 코드의 차이점
function add(a,b,callback){ sum = a + b; setTimeout(callback(sum),3000); } add(1,2,(value)=>{console.log(value)});function add(a,b,callback){ setTimeout(()=>{ const sum = a+b; callback(sum); },3000); } add(1,2,(value)=>{console.log(value)}); 위 두 코드의 차이점이 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
props Dirlling을 방지하기 위해 Context를 사용하지만..
안녕하세요..!결국 Context도 이 컨테이너 안에 데이터를 몽땅 넣을 순 없으니 불필요한 렌더링을 최소화하기 위해 용도에 따라 분리하는것이 좋다라고 알려주셔서 잘 이해가 되었습니다 : )그런데 복잡한 대형 프로젝트에서는 결국 Context도 6개,7개 .. 늘어나다보면,<Context1.Provider> <Context2.Provider> <Context3.Provider> <Context4.Provider> <ContextN.Provider> .......이런식으로 늘어날텐데, Context도 몇개 이상 늘어나지 않도록 어느정도는 그룹핑을 해야할 것 같다고 생각이 듭니다. 코드 가독성을 유지하기 위해서 하위 컴포넌트들에게 전달할 데이터들을 최대 몇개 정도의 Context로 관리하는게 이상적일까요?..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제 완료용
안녕하세요!!과제 완료해서 피드백 부탁드리고자 올렸습니다!앞으로 잘 부탁 드립니당~<html><!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html><css>* { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
서버연결이 안됩니다.
AWS Lightsail ssh 에서 sudo npm run start:prod 를 입력하고 pm2 list을 넣어보았습니다.잘 작동되는 것 같아 서버로 가봤는데 제 nest.js api가 실행되지 않는 걸 보고 pm2 log을 넣어봤는데도 크게 이상이 없는 것 같습니다. 그런데 여전히 들어갈 수가 없네요.postman에서도 http://<IP>/user/test 접근을 시도해도 똑같이 작동이 되지 않습니다. 뭐가 문제일까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
회원가입하고나서 로그인 풀리는 현상
안녕하세요회원가입 후에 로그인이 된 상태여야 하는데로그인이 풀리는 현상을 확인했습니다. 왜 인지 찾아보니프론트에선 회원가입 후 더미데이터를 가지고 로그인 하고 있었음백단에서는 회원가입 유저의 정보를 내려주지 않고 있었음.이런 경우때문인 것 같았습니다.그래서 회원가입 후 메인 페이지로 라우팅 되면메인페이지에서 로그인 유무를 판단하는 로직이 실행되고,더미데이터로 있던 데이터를 로그인 풀어버려서 그런게 아닐까 합니다. 그러면/back/routes/user.jsconst user = await User.create({ email, nickname, password: hashedPassword, }); 여기서 user정보를 내려줘야할거 같은데여기서 더 필요한 post, image같은 이미지는 어떻게 추가해야하는지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
docker
Access denied for user 'root'@'localhost' (using password: YES) my-backend-1 | Error: connect ECONNREFUSED 172.18.0.2:3306my-backend-1 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1487:16)my-database-1 | '/var/lib/mysql/mysql.sock' -> '/var/run/mysqld/mysqld.sock'my-backend-1 | [Nest] 42 - 05/02/2024, 6:41:50 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (2)...my-backend-1 | Error: connect ECONNREFUSED 172.18.0.2:3306my-backend-1 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1487:16)my-database-1 | 2024-05-02T18:41:49.714242Z 0 [System] [MY-015015] [Server] MySQL Server - start.my-database-1 | 2024-05-02T18:41:50.845054Z 0 [System] [MY-010116] [Server] /usr/sbin/mysqld (mysqld 8.4.0) starting as process 1my-database-1 | 2024-05-02T18:41:50.991351Z 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started.my-database-1 | 2024-05-02T18:41:51.037335Z 1 [ERROR] [MY-012585] [InnoDB] Linux Native AIO interface is not supported on this platform. Please check your OS documentation and install appropriate binary of InnoDB.my-database-1 | 2024-05-02T18:41:51.037785Z 1 [Warning] [MY-012654] [InnoDB] Linux Native AIO disabled.my-database-1 | 2024-05-02T18:41:51.786685Z 1 [System] [MY-013577] [InnoDB] InnoDB initialization has ended.my-backend-1 | [Nest] 42 - 05/02/2024, 6:41:53 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (3)...my-backend-1 | Error: connect ECONNREFUSED 172.18.0.2:3306my-backend-1 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1487:16)my-database-1 | 2024-05-02T18:41:53.236794Z 0 [Warning] [MY-010068] [Server] CA certificate ca.pem is self signed.my-database-1 | 2024-05-02T18:41:53.237258Z 0 [System] [MY-013602] [Server] Channel mysql_main configured to support TLS. Encrypted connections are now supported for this channel.my-database-1 | 2024-05-02T18:41:53.247163Z 0 [Warning] [MY-011810] [Server] Insecure configuration for --pid-file: Location '/var/run/mysqld' in the path is accessible to all OS users. Consider choosing a different directory.my-database-1 | 2024-05-02T18:41:53.454585Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.4.0' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL.my-database-1 | 2024-05-02T18:41:53.793849Z 0 [System] [MY-011323] [Server] X Plugin ready for connections. Bind-address: '::' port: 33060, socket: /var/run/mysqld/mysqlx.sockmy-backend-1 | query: SELECT VERSION() AS versionmy-backend-1 | query: START TRANSACTIONmy-backend-1 | query: SELECT DATABASE() AS db_namemy-backend-1 | query: SELECT TABLE_SCHEMA, TABLE_NAME, TABLE_COMMENT FROM INFORMATION_SCHEMA.`TABLES` WHERE TABLE_SCHEMA = 'mydocker' AND TABLE_NAME = 'board'my-backend-1 | query: SELECT * FROM INFORMATION_SCHEMA.`COLUMNS` WHERE TABLE_SCHEMA = 'mydocker' AND TABLE_NAME = 'typeorm_metadata'my-backend-1 | query: CREATE TABLE board (`number` int NOT NULL AUTO_INCREMENT, writer varchar(255) NOT NULL, title varchar(255) NOT NULL, contents varchar(255) NOT NULL, PRIMARY KEY (`number`)) ENGINE=InnoDBmy-backend-1 | query: COMMITmy-backend-1 | [Nest] 42 - 05/02/2024, 6:41:56 PM LOG [InstanceLoader] TypeOrmCoreModule dependencies initialized +3294msmy-backend-1 | [Nest] 42 - 05/02/2024, 6:41:56 PM LOG [GraphQLModule] Mapped {/graphql, POST} route +68msmy-backend-1 | [Nest] 42 - 05/02/2024, 6:41:56 PM LOG [NestApplication] Nest application successfully started +3ms 안되네요??
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
센셕4 게시물 불러오기 postcard.js에서 post.User.nickname[0]에러
안녕하세요센셕4 게시물 불러오기 postcard.js에서 post.User.nickname[0]에러가 발생해서 처음엔 간단하게/components/postcard.js<Card.Meta avatar={<Avatar>{post.User?.nickname[0]}</Avatar>} title={post.User?.nickname} description={<PostCardContent postData={post.content} />} />이런식으로 해결했었습니다.아 같은 파일 위치에서{id && post.User?.id === id ? ( <> <Button type='primary' key='modify'> 수정 </Button> <Button type='danger' key={"delete"} onClick={onRemovePost} loading={removePostLoading}> 삭제 </Button> </> ) : ( <Button type='dashed' key={"report"}> 신고 </Button> )}post.User?.id이것도 같은 식으로 처리했었습니다.그런데 제로초님 코딩을 몇번 다시봤더니비슷한 에러가 코멘트에서 났었는데/routes/posts.jsconst express = require("express"); const router = express.Router(); const { Post, User, Image, Comment } = require("../models"); // GET /posts 여러 게시글 가져오기 router.get("/", async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, ], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router; 이런식으로 데이 필요한 id, nickname을 넣어주셔서 ?를 붙이지 않고 해결하셨더라구요.혹시 저 nickname부분도 위와같이 백단에서 코드를 수정해서 고칠수 있을까요?따라서 해봤는데 잘 안되서 여쭤봅니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
[PM2][ERROR] Command not found
[PM2][ERROR] Command not foundusage: pm2 [options] <command>pm2 -h, --help all available commands and optionspm2 examples display pm2 usage examplespm2 <command> -h help on a specific commandAccess pm2 files in ~/.pm2npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! project@0.0.1 start:prod: pm2 run dist/main.jsnpm ERR! Exit status 1npm ERR! npm ERR! Failed at the project@0.0.1 start:prod script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:npm ERR! /root/.npm/_logs/2024-05-02T14_05_57_337Z-debug.log<AWS 클라우드 VPS 구축 & PM2로 서버 운영하기> 강좌에서 SSH에 마지막 sudo npm run start:prod 코드를 작성했더니 나온 에러입니다. 혹시 어떻게 해결해야할까요? https://github.com/DongGyu123/DOT_G 이게 현재 강의에서 제가 활용한 스터디용 코드입니다.
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
터미널에 vercel이란 말을 인식을 못 해요..
PS C:\Users\user\Documents\onebite-react\section12> vercel loginvercel : 'vercel' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.위치 줄:1 문자:1+ vercel login+ ~~~~~~ + CategoryInfo : ObjectNotFound: (vercel:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException이렇게 뜹니다..ㅜ
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
req.login에서 passport.serializeUser 호출 원리
passport로 로그인 실습을 진행중에 있습니다. passport.initialize(); 이후에 localStrategy 등록해둔 메서드를 통해 로그인 여부 확인하는 데까지는 까지는 이해가 되었습니다. 그런데 /controller/auth.js 에서 req.login 이후에 passport.serializeUser이 호출되는 방식이 이해가 안되네요.www.passportjs.org 에서문서를 읽어보고 있는데 꼼꼼함이 부족한지 이해가 잘 안되네요. req.login 메서드 자체를 passport에서 정의하고 있고 login 메서드가 호출될때 자동으로 serializeUser가 호출되는건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 기능을 next-auth와 수업에서 처럼 직접 구현하는 것 어떤걸 더 추천하시나요?
안녕하세요 제로초님강의를 따라가다 보니 로그인 부분이 엄청 복잡하더라구요,개인적으로 next-auth을 사용하면 되게 간편했던걸로 기억하는데 제로초님은로그인 기능을 만들게 된다면 next-auth와 수업에서 처럼 직접 구현하는 것 어떤걸 더 추천하실지 궁금합니다.직접구현하는게 로그인이 어케 이뤄지는지 이해할수있어서 좋은거같은데 여쭤보고 싶었습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
섹션6 04-05 몽구스 부분 수강중입니다.
backend 폴더 통합 터미널에서 mongoose를 설치하고,docker-compose build를 했는데 이런 에러가 계속해서 뜹니다.해결해보려고 에러 메세지를 읽어보니, mongoose와 my-backend 도커에 설치되는 node가 버전이 안맞는다는 것 같은데, 괜히 손댔다가 문제가 더욱 복잡해질까봐 섣부르게 건드리질 못하겠네요 ㅜㅜ 04-02 강의에서, backend 도커에 coolsms 가 설치되지 않았다고 하여 Dockerfile에개인적으로 이 코드를 추가해준 걸 제외하면 04-04까지 수강하는데 문제는 없었습니다.RUN yarn add coolsms-node-sdk어떻게 해야될까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
백엔드 과정을 수강 중인 학생입니다.
잘 몰라서 아는 지인에게 궁금해서 물어봤더니 도커라는 것을 받아서 거기에 리눅스 이미지로 올려서 쓰는게 있다고 하는데 그렇게 해서 수강해도 문제가 없을까요 ?또는 유튜브에 WSL2 Ubuntu 설치하는 방법도 있던데 이걸로 해도 수강에 문제 없을까요? 답변 부탁드립니다 ㅠㅠ
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두 리스트 렌더링하기
안녕하세요. 강의 따라서 실습을 잘 하던 중에 List 컴포넌트에 프룹스로 todos를 넘겨주고 map 함수를 통해 리스트로 렌더링 하는 과정에서 강사님처럼 넣어두었던 데이터들이 렌더링 되지 않아서요. <App.jsx><List.jsx><렌더링 화면>
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
스스로하기에서 귓속말 구현할때
socket.id로 하면맨첨엔 귓속말 잘되는데 유저가 나갔다가 들어오면 socket.id가 갱신되어서 예전에 보냈던 채팅의 귓속말 버튼으로는 귓속말이 안가게 되는데 저만 이런건가요??
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 매달 말일로 날짜 설정하면 작성이 안되는데 이유가 뭘까요
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 4월 30일 3월31일 같이 매달 말일로 설정해서 작성하면 작동하지 않는데 이유가 뭘까요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphQL 강의중
플레이 그라운드에서 스크랩 해오면 코드에서 인식이 안돼는것 같은데 원인을 못찾겠습니다 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업자료 질문입니다.
안녕하세요 오늘 이 프론트엔드 부트캠프 수업을 결제해서 시작했는데 노션 수업자료를 준다라고 알고 있는데 이 노션 수업자료는 어디서 받아보면 되나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit, saga으로 하는중에 devtool에서 액션 명칭이 undefined로 나옵니다
안녕하세요 제로초님여쭤보고 싶은게 있습니다.강의를 따라가다가 데브툴에서 액션, 데이터들을 확인하시는 모습을 봤는데,저도 따라해보니 액션명칭도, state tree의 데이터들도 제대로 안나오는것 같더라구요.그래서 좀 테스트해보니까아래의 로직처럼put에 액션 함수를 실행하면 데브툴에서 액션 명칭니 나오고예시: put(액션명(데이터)),기존처럼put({type: 액션명, payload: 데이터}) 호출하게되면undefined로 나오는것 같습니다.function* addPost(action) { try { yield delay(1000); const id = shortid.generate(); yield put(addPostSuccessAction({ id, content: action.payload.text, }) ); yield put({ type: addPostToMe, payload: id }); } catch (err) { yield put({ type: addPostFailureAction, error: err.response.data }); } }아무래도 toolkit과 saga를 사용할때 저렇게 사용하는게 아닌가 싶은데undefined로 나오는 부분은 개선했다고 하더라도action 부분이 제로초님과 다르게 나오더라구요.액션명만 나오는게 아니라 reducer의 위치도 함께나온느데이렇게 나와도 괜찮은건지 여쭙고 싶습니다.다른 부분은 잘 작동하는것 같습니다. import { HYDRATE } from "next-redux-wrapper"; import { createSlice } from "@reduxjs/toolkit"; import shortId from "shortid"; export const initialState = { mainPosts: [ { id: "1", User: { id: "1", nickname: "zzimzzim", }, content: "첫 번째 게시글 #해시태그, #익스프레스", Images: [ { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_53669042936_630c778818_320_240_nofilter.jpg", }, { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_52982053835_12fc661207_320_240_nofilter.jpg", }, { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_52905479084_303bf25ec0_320_240_nofilter.jpg", }, ], Comments: [ { id: shortId.generate(), User: { nickname: "찜찜", }, content: "얼른 사고싶어요~", }, { id: shortId.generate(), User: { nickname: "hero", }, content: "리액트 넥스트 고수가 될테다~", }, ], createdAt: {}, }, ], imagePaths: [], addPostLoading: false, addPostDone: false, addPostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; const dummyPost = ({ id, content }) => { return { id, content, User: { id: "1", nickname: "WlaWla", }, Images: [], Comments: [], }; }; const dummyComment = (content) => ({ id: shortId.generate(), content: content, User: { id: "1", nickname: "WlaWla", }, }); const postSlice = createSlice({ name: "post", initialState, reducers: { addPostRequestAction: (state, action) => { state.addPostLoading = true; state.addPostDone = false; state.addPostError = null; }, addPostSuccessAction: (state, action) => { state.addPostLoading = false; state.addPostDone = true; state.mainPosts.unshift(dummyPost(action.payload)); }, addPostFailureAction: (state, action) => { state.addPostLoading = false; state.addPostError = action.error; }, addCommentRequestAction: (state, action) => { state.addCommentLoading = true; state.addCommentDone = false; state.addCommentError = null; }, addCommentSuccessAction: (state, action) => { const { content, userId, postId } = action.payload; const post = state.mainPosts.find((d) => d.id === postId); post.Comments.unshift(dummyComment(content)); state.addCommentLoading = false; state.addCommentDone = true; }, addCommentFailureAction: (state, action) => { state.addCommentLoading = false; state.addCommentError = action.error; }, }, extraReducers: (builder) => builder .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.post, })) .addDefaultCase((state) => state), }); export const { addPostRequestAction, addPostSuccessAction, addPostFailureAction, addCommentRequestAction, addCommentSuccessAction, addCommentFailureAction } = postSlice.actions; export default postSlice.reducer; 사가 코드입니다.import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; import { addPostRequestAction, addPostSuccessAction, addPostFailureAction, addCommentRequestAction, addCommentSuccessAction, addCommentFailureAction } from "../reducers/post"; import { addPostToMe, removePostOfMe } 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); console.log("addPost saga", action); yield delay(1000); const id = shortid.generate(); yield put( addPostSuccessAction({ id, content: action.payload.text, }) ); yield put({ type: addPostToMe, payload: id }); } catch (err) { yield put({ type: addPostFailureAction, error: err.response.data }); } } function addCommentApi(data) { return axios.post(`/api/post/${data.postId}/comment`); } function* addComment(action) { try { // const result = yield call(addPostAPI, action.data); console.log("addComment saga", action); yield delay(1000); yield put({ type: addCommentSuccessAction, payload: action.payload, }); } catch (err) { console.log(err); yield put({ type: addCommentFailureAction, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(addPostRequestAction, addPost); } function* watchAddComment() { yield takeLatest(addCommentRequestAction, addComment); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchAddComment)]); }