묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 로그아웃 액션을 세세하게 나누는 이유가 궁금합니다.
안녕하세요.노드버드강의 saga 쪼개기 부분 강의 듣고 있습니다. 로그인을 요청, 성공, 실패 이렇게 세세하게 나누시는데 이유가 궁금합니다. 로그인 요청을 보내면 무조건 성공하는게 아닌건가요? 저는 LOG_IN_ACTION 액션에 isLoggedIn 만 true/false 왔다갔다 하면 될거 라고 단순하게 생각하고 있었는데 왜 굳이 이렇게 나눠서 해야 되는지 와닿지가 않습니다. 뒤쪽의 서버 강의 까지 들으면 이해가 갈까요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
TypeOrm @CreateDateColumn() 질문
DB에 Insert 하려고 할 때 TypeOrm에서 Default 값을 넣어주지 않아 에러가 발생했습니다.(CreatedAt, UpdatedAt 컬럼) 그래서 처음에는 Database에서 Table에 Default값을 세팅하고 사용했는데요.어떤 분이 질문 하신걸 보고 다시 수정해 보는 중입니다.강의에 있는 소스는 @Column("datetime", { name: "createdAt", default: () => "CURRENT_TIMESTAMP"}) ...이렇게 적혀있더군요.근데 Github의 소스에는@CreateDateColumn()createdAt: Data;로만 적혀있었습니다. 그리고 @CreatedDateColumn()은 Special Column이라고 아래와 같이 설명이 있던데요.@CreateDateColumn is a special column that is automatically set to the entity's insertion date. You don't need to set this column - it will be automatically set.저는 이 얘기를 TypeOrm에서 자동으로 입력해 주는 값으로 이해했는데... 막상 해보면 안되더라고요. 그래서... 만약 Github의 소스와 같이@CreateDateColumn... 으로 사용하려면 Database에서 Default값을 설정해주어야 하는지(그렇다면 @CreateDateColumn..은 자동 세팅되는 것이 아니겠죠...)아니면 영상 강의 상처럼... default() => "CURRENT_TIMESTAMPT"... 로 사용해야 할지요(물론 영상 강의의 소스는 Database에 그렇게 설정되어 있으니 그렇게 나온것이겠지만요..)
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
안녕하세요. jest관련해서 질문드립니다.
현재 강의에 목업으로 된 테스트 코드가 작성되어져 있는걸 봤는데요실제 DB에다가 테스트를 하려고 이것저것 해봤는데 잘 안되더라구요;;error: Nest can't resolve dependencies of the ~~ 하면서 에러가 나오고아마 서비스 쪽에 주입된 레파지토리 때문일 것 같은데목업이 아닌 실제 db에 테스트코드를 돌리기 위해서는 어떤 작업이 필요한 지 질문드립니다.
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
여기 학습에 필요한 css 이거 어디에 있나요?
어디서 찾는지 모르겠네요
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
npm i vs npm add
현재 Swagger를 활용한 API-Docs 생성 수강중 입니다.21분 36초에 npm add 로 설치하는데 npm i 와 npm add 의 차이를 앞부분에서 설명해 주셨을까요? 기억이 왜 안날까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
25-04 pointTransaction.service.ts 에러
// 2. 유저의 돈 찾아오기 // const user = await this.userRepository.findOne({ // where: { id: currentUser.id }, // }); const user = await queryRunner.manager.findOne( User, { id: currentUser.id }, { lock: { mode: "pessimistic_write" } }, ); 위의 코드에서 { lock: { mode: "pessimistic_write" } }, 부분이 추가되면서 아래의 에러가 발생하고 있습니다. src/apis/pointTransaction/pointTransaction.service.ts:52:9 - error TS2554: Expected 2 arguments, but got 3.52 { lock: { mode: "pessimistic_write" } },테스트를 진행해보려면 어떻게 코드 수정이 되어야 할런지요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
우분투 node, npm 버전
안녕하세요 node, npm을 우분투에 설치를 했는데예시로 설명해주신 버전이랑 차이가 많이 나서 강의를 따라갈 때 지장이 있을까 해서 질문 남깁니다.node 버전은 v14.21.2npm 버전은 6.14.17 입니다.혹시 버전을 올리는 방법이 있을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
next 13버젼 관한 질문
제로초쌤 이제 백엔드 로직 끝내고 SSR 적용하기 위해서 next 진행하려하는데 next 13버젼이 기존 12버전 문법에서 새로운 문법이나 터보팩이 등장한걸로 알고 있는데 12버전과 배우면서 13버전의 문법도 같이 병행하면서 진행하는게 좋겠죠..!?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
logger.middleware.ts 가 app.module에 적용이 되질않아서 질문드립니다.
제목과 동일한 내용으로 logger middleware를 작성하고 app module에 적용하였습니다. 그리고 재시작을 하여 적용 여부를 확인하려 했으나 적용이 되지않은것을 확인했습니다. 어떤부분을 놓치고 있는지 알고싶습니다. package.json { "name": "a-nest", "version": "0.0.1", "description": "", "author": "", "private": true, "license": "UNLICENSED", "scripts": { "prebuild": "rimraf dist", "build": "nest build", "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "start": "nest start", "start:dev-backup": "nest start --watch", "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch", "start:debug": "nest start --debug --watch", "start:prod": "node dist/main", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json" }, "dependencies": { "@nestjs/common": "^9.0.0", "@nestjs/config": "^2.3.0", "@nestjs/core": "^9.0.0", "@nestjs/platform-express": "^9.0.0", "axios": "^1.3.2", "reflect-metadata": "^0.1.13", "rimraf": "^3.0.2", "rxjs": "^7.2.0" }, "devDependencies": { "@nestjs/cli": "^9.0.0", "@nestjs/schematics": "^9.0.0", "@nestjs/testing": "^9.0.0", "@types/express": "^4.17.13", "@types/jest": "28.1.8", "@types/node": "^16.0.0", "@types/supertest": "^2.0.11", "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.0.0", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "jest": "28.1.3", "prettier": "^2.3.2", "run-script-webpack-plugin": "^0.1.1", "source-map-support": "^0.5.20", "supertest": "^6.1.3", "ts-jest": "28.0.8", "ts-loader": "^9.2.3", "ts-node": "^10.0.0", "tsconfig-paths": "4.1.0", "typescript": "^4.7.4", "webpack": "^5.75.0", "webpack-node-externals": "^3.0.0" }, "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "testRegex": ".*\\.spec\\.ts$", "transform": { "^.+\\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" } } logger.middleware.ts import { Injectable, Logger, NestMiddleware } from '@nestjs/common'; import { NextFunction, Request, Response, response } from 'express'; @Injectable() export class LoggerMiddleware implements NestMiddleware { private logger = new Logger('HTTP'); use(req: Request, res: Response, next: NextFunction): void { const { ip, method, originalUrl } = req; const userAgent = req.get('user-agent') || ''; response.on('finish', () => { const { statusCode } = res; const contentLength = res.get('content-type'); this.logger.log( `${method} ${originalUrl} ${statusCode} ${contentLength} - ${userAgent} ${ip}`, ); }); next(); } } app.module.ts import { MiddlewareConsumer, Module, NestModule, RequestMethod, } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { ConfigModule, ConfigService } from '@nestjs/config'; import axios from 'axios'; import { LoggerMiddleware } from './middleware/logger.middleware'; const getEnv = async () => { // const response = await axios.get('비밀키를 요청하는 url'); // return response.data; }; const mode = process.env.NODE_ENV || 'development'; @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true, load: [getEnv], envFilePath: `.env.${mode}`, }), ], controllers: [AppController], providers: [AppService, ConfigService], }) export class AppModule implements NestModule { configure(consumer: MiddlewareConsumer): any { consumer .apply(LoggerMiddleware) .forRoutes({ path: '*', method: RequestMethod.ALL }); } } nestjs log Info Webpack is building your sources... Entrypoint main 47.9 KiB = main.js 46.1 KiB 0.5051cca5f9ad96919687.hot-update.js 1.81 KiB webpack 5.75.0 compiled successfully in 63 ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [NestFactory] Starting Nest application... +6659ms [HMR] Updated modules: [HMR] - 10 [HMR] - 5 [HMR] - 3 [HMR] Update applied. [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [InstanceLoader] ConfigHostModule dependencies initialized +4ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [InstanceLoader] ConfigModule dependencies initialized +0ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [InstanceLoader] AppModule dependencies initialized +0ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [RoutesResolver] AppController {/}: +0ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [RouterExplorer] Mapped {/, GET} route +1ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [NestApplication] Nest application successfully started +0ms적용이 되지않아 생기는 질문이라 에러코드는 없어서 따로 첨부하지 않았습니다.
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
워크벤치 포트번호
워크벤치에, 전에 테스트해 보던게 있었습니다.포트번호를 겹치지 않게 하려고 다르게 작성하니OpenConnection 할 때워크벤치가 그냥 꺼지는데요 포트번호는 항상 같아야 하는 건가요??
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
@nestjs/core의 import 문제
우선 잘 되는것이 갑자기 안되는데 해결이 안되서 질문을 올립니다. 우선 제가 한 작업은 다음과 같습니다.7강의 typeorm 커넥션 맺기까지 완료 한 후 nest g res {service name}을 실행하여 테스트 했습니다폴더가 생기면서 service, module, controller가 생기는것을 확인 한 후 삭제했습니다.이후 yarn start:dev를 실행하면 아래와 같이 에러가 났습니다. yarn run v1.22.19warning ..\package.json: No license field$ nest build --webpack --webpackPath webpack-hmr.config.js --watchInfo Webpack is building your sources...ERROR in ./src/main.ts:1:29TS2307: Cannot find module '@nestjs/core' or its corresponding type declarations.> 1 | import { NestFactory } from '@nestjs/core';| ^^^^^^^^^^^^^^2 | import { DocumentBuilder } from '@nestjs/swagger';3 | import { SwaggerModule } from '@nestjs/swagger/dist';4 | import { AppModule } from './app.module';webpack 5.75.0 compiled with 1 error in 3426 msE:\web-message\dist\main.js:1834/******/ throw e;^Error: Cannot find module '@nestjs/core'Require stack:- E:\web-message\dist\main.jsat Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)at Module._load (node:internal/modules/cjs/loader:885:27)at Module.require (node:internal/modules/cjs/loader:1105:19)at require (node:internal/modules/cjs/helpers:103:18)at Object.<anonymous> (E:\web-message\dist\main.js:196:18)at __webpack_require__ (E:\web-message\dist\main.js:1831:33)at fn (E:\web-message\dist\main.js:1938:21)at Object.<anonymous> (E:\web-message\dist\main.js:166:16)at __webpack_require__ (E:\web-message\dist\main.js:1831:33)at E:\web-message\dist\main.js:2757:37 {code: 'MODULE_NOT_FOUND',requireStack: [ 'E:\\web-message\\dist\\main.js' ]}Node.js v18.13.0우선 warning ..\package.json: No license field 이 부분을 해결하기 위해 찾아보니..package.json의 private: true를 설정해 주라고 했지만, 이미 되어 있기 때문에 해결을 못했습니다. 그 다음ERROR in ./src/main.ts:1:29TS2307: Cannot find module '@nestjs/core' or its corresponding type declarations.> 1 | import { NestFactory } from '@nestjs/core';이 부분을 해결해 보기 위해 다음과 같은 작업을 했습니다.@nestjs/core의 삭제 및 재설치node_modules 폴더 삭제 및 재설치nestjs/core와 swagger의 충돌 문제가 있다는 얘기에 nestjs/core를 9.0.0으로 nestjs/common을 9.0.0으로, nestjs/platform-express를 9.0.0으로 수정하여 재설치 했으나 여전히 동일한 문제 발생 아래는 현재 저의 package.json입니다{ "name": "web-message", "version": "0.0.1", "private": true, "description": "", "author": "", "license": "UNLICENSED", "scripts": { "build": "nest build", "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "start": "nest start", "start:dev-backup": "nest start --watch", "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch", "start:debug": "nest start --debug --watch", "start:prod": "node dist/main", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json" }, "dependencies": { "@nestjs/common": "^9.3.2", "@nestjs/config": "^2.3.0", "@nestjs/core": "^9.3.2", "@nestjs/platform-express": "^9.0.0", "@nestjs/swagger": "^6.1.4", "@nestjs/typeorm": "^9.0.1", "mariadb": "^3.0.2", "reflect-metadata": "^0.1.13", "rxjs": "^7.2.0", "swagger-ui-express": "^4.6.0", "typeorm": "^0.3.11", "typeorm-extension": "^2.4.2" }, "devDependencies": { "@nestjs/cli": "^9.0.0", "@nestjs/schematics": "^9.0.0", "@nestjs/testing": "^9.0.0", "@types/express": "^4.17.13", "@types/jest": "29.2.4", "@types/node": "18.11.18", "@types/supertest": "^2.0.11", "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.0.0", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "jest": "29.3.1", "prettier": "^2.3.2", "run-script-webpack-plugin": "^0.1.1", "source-map-support": "^0.5.20", "supertest": "^6.1.3", "ts-jest": "29.0.3", "ts-loader": "^9.2.3", "ts-node": "^10.0.0", "tsconfig-paths": "4.1.1", "typeorm-model-generator": "^0.4.6", "typescript": "^4.7.4", "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-node-externals": "^3.0.0", "webpack-pnp-externals": "^1.1.0" }, "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "testRegex": ".*\\.spec\\.ts$", "transform": { "^.+\\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" } } 뭔가... 업데이트를 하면서 문제가 생긴것 같아 찾던 중nestjs@core와 swagger는 상호 작용하는 버전이 있다고 하던데 그것은nest 9.X 미만에서 그런 것이고 github에 올려주신 package.json에도 9.X이상의 nestjs를 쓰신것으로 확인하여 swagger와의 충돌 문제는 아닌 것으로 생각했습니다. 어떻게 해결하면 좋을까요~? 참 참고로nestjs : 9.1.8yarn: 1.22.19node: 18.13.0을 사용하고 있습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
PostCard import 오류
import 문제 없어 보이는데 댓글 확인을 누르면 오류 페이지가 뜹니다..PostCard.jsimport React, { useState, useCallback } from 'react'; import { Card, Button, Avatar, Popover, List, Comment } from 'antd'; import PropTypes from 'prop-types'; import { RetweetOutlined, HeartTwoTone, HeartOutlined, MessageOutlined, EllipsisOutlined } from '@ant-design/icons'; import styled from 'styled-components'; import Link from 'next/link'; import { useSelector } from 'react-redux'; import PostImages from './PostImages'; import CommentForm from './CommentForm'; const PostCard = ({post}) => { const [liked, setLiked] = useState(false); const [commentFormOpened, setCommentFormOpened] = useState(false); const id = useSelector((state) => state.user.me && state.user.me.id); const onToggleLike = useCallback(() => { setLiked((prev) => !prev); }, []); const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); return ( <div style={{matginBotton: 20}}> <Card 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="message" onClick={onToggleComment} />, <Popover key="more" content={( <Button.Group> {id && post.User.id === id ? ( <> <Button>수정</Button> <Button type="danger">삭제</Button> </> ) : <Button>신고</Button>} </Button.Group> )}> <EllipsisOutlined/> </Popover>, ]} > <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={post.content} /> </Card> {commentFormOpened && ( <div> <CommentForm post={post}/> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} 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.any), Images: PropTypes.arrayOf(PropTypes.any), }), }; export default PostCard
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 관계메소드를 두번 사용하는 경우
const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); 이런식으로 Image.create() 를 적용한 다음다시 post.addImages() 하는 이유가 뭔가요? 중복된 실행이라고 생각했는데 실행해봤을때는 중복된 튜플이 생성되지는 않네요..
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
useEffect 요런거 눌르면 자동으로 ()=>{ ) 어런식으로 자동완성 되자나요? 그거어떻게 하나요? ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
백엔드 질문
1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요?만약 브라우저 -> 백엔드 이면백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요?강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
DOM의 개념에 관하여
남겨주신 노마크코더님의 영상과 기술블로그 글을 보았는데요.DOM 의 풀네임 (Document Object Model) 말처럼HTML, CSS, JS 파일들을 객체화하여 따로 분리하여 연결해주는 모델링이 속도가 빠르게 해주는 핵심 이유이며,객체화를 통해 브라우저에서 직접 모든 렌터, 레이아웃을 계산하는게 아닌 Offline 상태에서 계산하여 결과값만 브라우저에 나타내기 때문이다. 라고 이해를 하고 있는데 맞을까요?이런 React의 동작방식과 작업방식이 가장 빠른건 아니지만웬만한 웹에서 빠르게 동작하고 충분히 빠르고 효율적이기에 많은 서비스들에서 사랑 받고 있는 프레임워크다. 혹시 이렇게 정리하는게 조금 제가 잘 이해를 못 하고 있는 부분일지요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
노션과제에 대한 질문있습니다
혹시 과제 풀이를 볼수 있는곳이 있을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
antd의 upload로 이미지 업로드
안녕하세요 선생님..그냥 단순히 인풋박스 만들어서 이미지 업로드를 해도 되지만 antd의 upload가 예뻐보여서 이걸 써서 이미지를 업로드 하고 싶은데 아무리 해도 되질 않아서 질문 드립니다ㅠㅠ보니까 보통 인풋박스를 통해 이미지 파일을 업로드할 때 양식이 FileList형식(배열처럼 보이는 객체...?)이던데antd upload에서 제공하는 props의 filelist는양식이 좀 다르더라구요..일단 백은 기존의 이미지 업로드 방식에서 바뀐 부분이 없고, 제가 antd의 Upload를 사용한 방식은 아래와 같습니다. <Upload name='image' listType="picture-card" multiple fileList={fileList} onChange={onChangeImages} onPreview={onPreview} onRemove={onRemoveImage} > {fileList.length < 2 && 'Drag images or click'} </Upload>업로드 props는 위와 같이 설정하고 onChange함수는 const onChangeImages = useCallback(({ fileList: newFileList }) => { setFileList(newFileList); console.log('images', fileList); const imageFormData = new FormData(); for(let i = 0; i< fileList.length; i++){ imageFormData.append('key',fileList[i]); } return dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData }); });위와 같이 작성하면 업로드 되지 않을까 했는데, 이미지 업로드가 성공했다고 쓰지만콘솔 창에 나온 메세지를 보면{type: 'UPLOAD_IMAGES_SUCCESS', data: Array(0), @@redux-saga/SAGA_ACTION: true}이런 식으로 빈 배열만 자꾸 들어가고, 콘솔로 찍어본 fileList는 아래와 같이 뜨던데images[{…}]0:lastModified: 1669296034457lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시) {}name: "icons8-team-URoyGsQdLwg-unsplash.jpg"originFileObj: File {uid: 'rc-upload-1675523328622-3', name: 'icons8-team-URoyGsQdLwg-unsplash.jpg', lastModified: 1669296034457, lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시), webkitRelativePath: '', …}percent: 0size: 674143status: "uploading"thumbUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgtype: "image/jpeg"uid: "rc-upload-1675523328622-3"[[Prototype]]: Objectlength: 1[[Prototype]]: Array(0) 노드버드에서는 업로드할 파일을 콘솔에 찍어보았을 때FileList {0: File, length: 1}0: FilelastModified: 1669296034457lastModifiedDate: Thu Nov 24 2022 22:20:34 GMT+0900 (한국 표준시) {}name: "icons8-team-URoyGsQdLwg-unsplash.jpg"size: 674143type: "image/jpeg"webkitRelativePath: ""[[Prototype]]: Filelength: 1[[Prototype]]: FileList이렇게 나오는걸 보면 데이터 구조상의 차이가 있어서 업로드가 안되는 것인가요? antd upload를 이용한 파일 업로드를 할 때 제가 놓친 부분이 어디인지 알 수 있을까요..? 조언 부탁드립니다 선생님ㅠ
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
Cannot set headers after they are sent to the client
Cannot set headers after they are sent to the client에러를 구글링해보니 중복처리할 경우 발생한다하던데 이게 뭔 말인지도 잘 모르겠고 코드도 똑같이 따라쳤는데..ㅜㅜ 도와주세요 어떻게 해결해야할까요..몇시간째 붙잡고 있어요
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
목서버, "usageLimitError"
안녕하세요 콘솔에 404 에러가 떠서 목서버를 확인해보니 아래와 같은 오류가 떴는데 이러한 경우 어떻게 해결할 수 있을까요..{ "error": { "name": "usageLimitError", "header": "Usage limit reached", "message": "Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit." } }