묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
diaryList.map in not function 오류
안녕하세요.데이터 추가 기능 구현 중 오류가 생겼는데, 여러번 들어봐도 어디서 놓쳤는지 알수 없어서 문의드립니다.저장 성공 얼럿이 뜬 후 diaryList.map is not a function 오류가 발생하는데 이유가 뭘까요ㅠㅠ? 올려주신 코드와 비교해봐도 잘못 작성된 부분을 찾지 못해서.. 확인 부탁드립니다!https://codesandbox.io/p/sandbox/dawn-silence-dtzj4w?file=%2Fsrc%2FApp.js%3A5%2C1 감사합니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Error: Data too long for column
req.file을 보면 아래와 같이 나옵니다.{ fieldname: 'img', originalname: 'á\x84\x89á\x85³á\x84\x8Fá\x85³á\x84\x85á\x85µá\x86«á\x84\x89á\x85£á\x86º 2023-11-22 á\x84\x8Bá\x85©á\x84\x92á\x85® 8.36.00.png', encoding: '7bit', mimetype: 'image/png', size: 156946, bucket: 'whatsup1', key: 'original/1700700649389_á\x84\x89á\x85³á\x84\x8Fá\x85³á\x84\x85á\x85µá\x86«á\x84\x89á\x85£á\x86º 2023-11-22 á\x84\x8Bá\x85©á\x84\x92á\x85® 8.36.00.png', acl: 'private', contentType: 'application/octet-stream', contentDisposition: null, contentEncoding: null, storageClass: 'STANDARD', serverSideEncryption: null, metadata: undefined, location: 'https://whatsup1.s3.ap-northeast-2.amazonaws.com/original/1700700649389_%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202023-11-22%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%208.36.00.png', etag: '"9afb9409e1bcd41269629b6bb1100245"', versionId: undefined}제로초님은 사진 파일 확장자가 jpg로 뜨는데 저는 png로 뜹니다..s3에 저장되는 쪽이 아니라 사진을 파일로 만드는 부분에서 문제가 있는 것 같은데 어느부분에서 손을 봐야할지 잘 모르겠습니다..const { S3Client } = require("@aws-sdk/client-s3"); const multerS3 = require("multer-s3"); const s3 = new S3Client({ credentials: { accessKeyId: process.env.S3_ACCESS_KEY_ID, secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, }, region: "ap-northeast-2", }); const upload = multer({ storage: multerS3({ s3, bucket: "whatsup1", key(req, file, cb) { cb(null, `original/${Date.now()}_${file.originalname}`); }, }), limits: { fileSize: 5 * 1024 * 1024 }, });그리고 추가적인 질문이 있는데 localhost로 서버를 작동시킬때 db는 잘 보이는데 lightsail로 작동시킨 db가 보이지 않습니다..mysql connection 추가 버튼 눌러서 hostname을 aws에서 제공해준 ip로 바꾸면 되는거 아닌가요?그런데 그렇게 하고 연결을 하니깐 버퍼링이 걸리면서 연결이 되지 않습니다..
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
카카오 로그인 질문드립니다!
안녕하세요!!제가 지금 Next.js와 Node.js를 활용해서 중고거래 사이트를 프론트와 백 둘다 구현을 하려고 하는데프론트(NextAuth)에서 API 를 받아와 카카오 로그인을 구현하면, 백에서는 카카오 로그인에대한 구현을 할 필요가 없는건가요?또, 프론트 나 백 둘중 어느곳에서 카카오 로그인을 구현해야 효율적인지 궁금합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이지구현 - 일기수정(Edit) 수정 에러 질문(세부사항추가)
정환님 안녕하세요.지난번에 동일한 문제로 문의 드렸었는데, 아직 해결이 안되서 문제 재현에 대한 구체적인 정보 올립니다. (댓글문의는 알림이 안가서 확인이 늦어지는 것 같아서요) 문제)첫번째 일기를 쓰고, 이후 두번째 일기를 쓰고 나서 두번째 일기를 수정하면수정된 두번째 일기와 동일한 일기가 생성이 됩니다.이후 세번째, 네번째 일기를 쓰고 마찬가지로 수정을 하면 수정된 일기와 동일한 일기가 생성이 됩니다그럼 확인부탁드리겠습니다.🥲
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
11.3 통합테스트 중 TypeError: model.initiate is not a function
질문할까 고민하다가 용기내어 질문드려봅니다..!11장 통합테스트 중 나타난 에러입니다.npm test 를 입력하면 나오는 에러입니다.> nodebird@0.0.1 test > jest PASS models/user.test.js PASS services/user.test.js PASS middlewares/index.test.js FAIL routes/auth.test.js ● Test suite failed to run TypeError: model.initiate is not a function 22 | console.log(file, model.name); 23 | db[model.name] = model; > 24 | model.initiate(sequelize); | ^ 25 | }); 26 | 27 | Object.keys(db).forEach(modelName => { // associate 호출 at initiate (models/index.js:24:11) at Array.forEach (<anonymous>) at Object.forEach (models/index.js:20:4) at Object.require (routes/auth.test.js:2:23) Test Suites: 1 failed, 3 passed, 4 total Tests: 9 passed, 9 total Snapshots: 0 total Time: 0.725 s, estimated 1 s현재 에러는 model.initiate가 함수화가 되지 않았다고 나타는거 같습니다.model.initiate가 존재하는 index.js입니다.const Sequelize = require('sequelize'); const fs = require('fs'); const path = require('path'); const env = process.env.NODE_ENV || 'development'; const config = require('../config/config')[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config, ); db.sequelize = sequelize; const basename = path.basename(__filename); fs .readdirSync(__dirname) .filter(file => { return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js'); }) .forEach(file => { const model = require(path.join(__dirname, file)); console.log(file, model.name); db[model.name] = model; model.initiate(sequelize); // 오류 발생시점 }); Object.keys(db).forEach(modelName => { if (db[modelName].associate) { db[modelName].associate(db); } }); module.exports = db;11.3 강의를 보는 중이며 auth.test.js 코드를 작성중입니다작성중인 auth.test.js는 아래와 같습니다.const app = require('../app'); const request = require('supertest'); const { sequelize } = require('../models'); beforeAll(async () => { await sequelize.sync() }) beforEach(() => { }); describe('POST /join', () => { test('로그인 안 했으면 가입', (done) => { request(app).post('/auth/join') .send({ email: 'choibo@naver.com', nick: 'bobobo', password: 'choibo11' }) .expect('Location', '/') .expect(302, done) }) }) describe('POST /login', () =>{ test('로그인 수행', (done) => { request(app).post('/auth/login') .send({ email: 'choibo@naver.com', password: 'choibo11' }) .expect('Location', '/') .expect(302, done) }) }); afterEach(() => {}); aftereAll(() => { }); 이부분에서 에러가 발생한다고 나타나있습니다.const { sequelize } = require('../models');
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
S3 버킷 만들 때 암호화 유형
버킷 만들때 강의 와 달리 처음부터 저렇게 선택되어있던데 그냥 원래 선택되었던거 유지하면서 만들면 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
구글 콘솔로그 오류창이 계속 떠요
구글 웹에서 콘솔창을 켜면 계속 이 오류 화면이 뜨는데, 처음에는 무시하고 진행했는데 몇 달간 계속 뜨고 타이머 실습할 때 조금 끊기는 것 같기도 해요ㅜㅠ GPT에 물어보니까 권한이 적절치 않다고 하는데 어떻게 해결할 수 있는 건가요??ㅜㅜ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
터미널에서 node 설치오류가 계속 뜹니다
하단에 다른분이 글 남겨주신것 확인하고cmd 들어가서 node.js가 잘 설치되었는지도 확인했습니다그런데 터미널상에서 node index.js만 연결하려고하면 계속 오류가 뜹니다 ㅠㅠ다시 설치해도 오류는 같습니다...왜그럴까요?ㅠㅠ처음 터미널을 오픈하면 강의에 나오는window powershell ~ 새로운 크로스 플랫폼~이 문장이 나오지 않는데 이부분에서 무언가 누락된것이 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
codesandbox ui 패치에 따른 질문
ctrl+s 누를때마다 자바스크립트를 실행하도록 설정하고 싶은데 어떻게 해야할까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
[공유] Next.js 12버전 redirect
import { useRouter } from 'next/router'; const Profile = () => { ... const router = useRouter(); if (!me) { router.push('/'); return null; } ... }이런식으로 하면 잘 동작해요~
-
해결됨클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편
Bounded Context 와 Aggregate 질문있습니다
질문 드립니다! 질문1)강의내용을 생각해보면Bounded Context 단위도 하나의 서버가 될 수 있고Aggregate 단위도 하나의 서버가 될 수 있는 것으로 보이는데제가 이해한게 맞을까요? 질문2)또한 Aggregate 와 마찬가지로 Bounded Context 도 다른 도메인으로의 요청은 Event 사용을 해야하는 걸까요? 질문3)주문 Entity - 주문 아이템 Entity 관계가 Aggregate 로 연상됩니다... Bounded Context 개념이 적용된 코드가 Aggregate 쪽 코드와 다를까요?
-
해결됨클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편
성능상의 불이익
이전 강의에서 Product 와 Brand 를 join 하지 않고 각각 Select 함으로서 성능상의 불이익이 있었는데 Aggregate 단위로 묶여있었기 때문이군요. 데이터의 일관성을 위해 Aggregate Root 를 통해 접근가능하도록 연습 많이 해보도록 하겠습니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
#20 리액트 라우터 돔
라우터 돔 사이트에서 베이직이 안보이는데 어떤걸 복사하면되는건가요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
pm2 error
const express = require("express"); const cookieParser = require("cookie-parser"); const morgan = require("morgan"); const session = require("express-session"); const router = express.Router(); const path = require("path"); const dotenv = require("dotenv"); const passport = require("passport"); const app = express(); const passportConfig = require("./passport"); const redis = require("redis"); const RedisStore = require("connect-redis").default; dotenv.config(); const redisClient = redis.createClient({ url: `redis://${process.env.REDIS_HOST}:${process.env.REDIS_PORT}`, password: process.env.REDIS_PASSWORD, legacyMode: false, }); redisClient.connect().catch(console.error); const authRouter = require("./routes/auth"); const pageRouter = require("./routes/page"); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const commentRouter = require("./routes/comment"); const updateRouter = require("./routes/update"); const deleteRouter = require("./routes/delete"); const helmet = require("helmet"); const hpp = require("hpp"); const { sequelize } = require("./models"); const logger = require("./logger"); passportConfig(); app.set("port", process.env.PORT || 8005); sequelize .sync({ force: false }) .then(() => { console.log("데이터베이스 연결 성공"); }) .catch((err) => { console.error(err); }); if (process.env.NODE_ENV === "production") { app.use( helmet({ contentSecurityPolicy: false, crossOriginEmbedderPolicy: false, crossOriginResourcePolicy: false, crossOriginOpenerPolicy: false, originAgentCluster: false, }) ); app.use(hpp()); app.use(morgan("combined")); } else { app.use(morgan("dev")); } app.use(express.json({ limit: "10mb" })); var cors = require("cors"); const { deepStrictEqual } = require("assert"); app.use(cors()); app.use("/img", express.static(path.join(__dirname, "uploads"))); app.use("/profileImg", express.static(path.join(__dirname, "profileImg"))); app.use(express.json()); app.use(express.urlencoded({ limit: "10mb", extended: false })); app.use(cookieParser(process.env.COOKIE_SECRET)); const sessionOption = { resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, }, store: new RedisStore({ client: redisClient }), }; if (process.env.NODE_ENV === "production") { sessionOption.proxy = true; } app.use(session(sessionOption)); app.use(passport.initialize()); app.use(passport.session()); app.use(express.static(path.join(__dirname, "prototype-client/build"))); app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "prototype-client/build/index.html")); }); app.use("/page", pageRouter); app.use("/auth", authRouter); app.use("/post", postRouter); app.use("/user", userRouter); app.use("/comment", commentRouter); app.use("/update", updateRouter); app.use("/delete", deleteRouter); //react에서 react-router-dom으로 다룰 수 있게 app.get("*", function (req, res) { res.sendFile(path.join(__dirname, "/prototype-client/build/index.html")); }); //에러 처리 담당 app.use((req, res, next) => { const error = new Error(`${(req, method)} ${req.url} 라우터가 없습니다.`); error.status = 404; logger.info("hello"); logger.error(error.message); next(error); }); app.use((err, req, res, next) => { console.error(err); res.locals.message = err.message; res.locals.erorr = process.env.NODE_ENV !== "production" ? err : {}; res.status(err.status || 500); res.render("error"); }); module.exports = app;이렇게 코드를 실행하면 sudo pm2 monit의 server log에 2가지 에러가 나옵니다. server > [Error: ENOENT: no such file or directory, stat │ ││ server > errno: -2, │ ││ server > code: 'ENOENT', │ ││ server > syscall: 'stat', │ ││ server > path: '/home/bitnami/Whats-up/prototype-client/bu ││ ││ server > expose: false, │ ││ server > statusCode: 404, │ ││ server > status: 404 │ ││ server > } 에러 메시지를 봤을때 해당 경로에 대한 파일을 찾을 수 없다고 하는데 ls를 입력했을때 잘 있는걸 확인 할 수 있는데 왜 이런 에러가 발생하는지 모르겠습니다..2번쨰는 server > Error: No default engine was specified and no ││ server > at new View (/home/bitnami/Whats-up/node_module │ ││ server > at Function.render (/home/bitnami/Whats-up/node │││ server > at ServerResponse.render (/home/bitnami/Whats-u │ ││ server > at /home/bitnami/Whats-up/app.js:127:7 │ ││ server > at Layer.handle_error (/home/bitnami/Whats-up/n │ ││ server > at trim_prefix (/home/bitnami/Whats-up/node_mod │ ││ server > at /home/bitnami/Whats-up/node_modules/express/ ││ server > at Function.process_params (/home/bitnami/Whats 이런 에러가 발생합니다. 에러 메세지를 봤을떄는 view engine관련된 에러같은데 react랑 express연동할때는 따로 view engine 설정을 주지 않고 express.static으로 리액트 코드를 전달하면 되는거 아닌가요?
-
해결됨클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편
소스코드
안녕하세요 😀혹시 강의 때 사용하신 코드 제공이 가능할까요?아직 Service 와 useCase 와의 경계에 대해 감이 안잡혀서 코드로 확인해 보고 싶습니다PS. 강의에서 Service class 와 useCase 모두 Repository 를 참고하고 있어서 어떠한 다른점이 있는지도 질문드립니다
-
미해결지금 당장 NodeJS 백엔드 개발 [사주 만세력]
12신살은 어떻게 구할까요?
비견 겁재 등등 이런 거 말고 지살, 년살, 월살, 망신살, 장성살, 반안살 등등 십이신살을 구하는 방법이 있을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 13에 타입스크립트 실행관련
타입스크립트 본수업은 문제없이 진행했는데 freeboard 부분을 진행하다가 api 관련 타입스크립트 설치 과정을 하는데 에러가 보입니다.. 이부분 혹시 뭐때문에 발생하는건지 확인 해주실 수 있으실까요ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
카카오맵 이 출력이 안되요
window.kakao에 underfined로 나와요...
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
retweet 관련 질문이 있습니다.
다름이 아니라 리트윗빼고는 문제가 없습니다.하지만 리트윗을 하게 되면 데이터베이스에 userid가 null로 들어가면서 게시글을 불러올때 userid가 없기때문에 오류가 나는 것으로 보입니다... 해결해보려고 노력하는 중입니다만 어디가 문제인지 잘 모르겠습니다.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"); } const upload = multer({ storage: multer.diskStorage({ //어디에 저장할지 diskStorage => 하드디스크에 저장 destination(req, file, done) { done(null, "uploads"); }, filename(req, file, done) { // 제로초.png const ext = path.extname(file.originalname); // 확장자 추출(.png) const basename = path.basename(file.originalname, ext); // 제로초 done(null, basename + "_" + new Date().getTime() + ext); // 제로초15184712891.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB }); router.post("/", isLoggedIn, upload.none(), async (req, res, next) => { // 보기에는 "/"로 되어있지만 실제로는 "/post"로 되어있다. try { const hashtags = req.body.content.match(/#[^\s#]+/g); //hashtag 정규식 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]] 이런식으로 나옴 //slice는 글자만 떼기 위해 ex ) #react인 경우 react만 꺼냄 ) ); await post.addHashtags(result.map((v) => v[0])); //위에 같은 형식이기 때문에 0번째만 꺼내야함 } if (req.body.image) { if (Array.isArray(req.body.image)) { //여러개의 이미지를 올린 경우 const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { 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) => { //:postId는 동적으로 바뀐다. //POST /post/comment // 보기에는 "/"로 되어있지만 실제로는 "/post"로 되어있다. 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, 10), //문자열로 넘어가기 때문에 int형으로 바꿔줘야한다. 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"), //PostForm.js에서input에 올린 이미지가 배열로 들어감 (이미지를 여러장 올릴 수 있게 하기 위해서) async (req, res, next) => { // POST /post/images/ //이곳은 이미지 업로드 후 실행되는 부분, 업로드는 위에 upload에서 이미 다 올라감 console.log(req.files); res.json(req.files.map((v) => v.filename)); //프론트로 보내줌 } ); router.post("/:postId/retweet", isLoggedIn, async (req, res, next) => { // POST /post/1/retweet try { const post = await Post.findOne({ where: { id: req.params.postId }, include: [ { model: Post, as: "Retweet", }, ], }); if (!post) { return res.status(403).send("존재하지 않는 게시글입니다."); } if ( req.user.id === post.UserId || (post.Retweet && post.Retweet.UserId === req.user.id) ) { return res.status(403).send("자신의 글은 리트윗할 수 없습니다."); } const retweetTargetId = post.RetweetId || post.id; const exPost = await Post.findOne({ where: { UserId: req.user.id, RetweetId: retweetTargetId, }, }); if (exPost) { return res.status(403).send("이미 리트윗했습니다."); } const retweet = await Post.create({ UserId: req.user.id, RetweetId: retweetTargetId, content: "retweet", }); const retweetWithPrevPost = await Post.findOne({ where: { id: retweet.id }, include: [ { model: Post, as: "Retweet", include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, ], }, { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, ], }); res.status(201).json(retweetWithPrevPost); } catch (error) { console.error(error); next(error); } }); module.exports = router; //node에서는 import와 export defau lt를 사용하지 않고 require를 사용한다. //리트윗 case RETWEET_REQUEST: draft.retweetDone = false; draft.retweetLoading = true; draft.retweetError = null; break; case RETWEET_SUCCESS: draft.retweetLoading = false; draft.retweetDone = true; draft.mainPosts.unshift(action.data); break; case RETWEET_FAILURE: draft.retweetLoading = false; draft.retweetError = action.error; break; default: break; } }); export default reducer;//리트윗 function retweetAPI(data) { return axios.post(`/post/${data}/retweet`); //data는 formdata다 } function* retweet(action) { try { const result = yield call(retweetAPI, action.data); yield put({ type: RETWEET_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: RETWEET_FAILURE, error: err.response.data }); } }
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setData(() => [newItem, ...data]) 동작 순서 질문입니다.
안녕하세요~ 강의 잘 보고 있습니다.setData([newItem, ...data]) 대신에 setData(() => [newItem, ...data])를 사용하는 이유가 useCallback이 완료된 후에 setState에서 () => [newItem, ...data] 를 호출 후 사용돼서 최신 데이터도 업데이트가 되고, 메모이제이션도 가능하게 된건가요?감사합니다.