묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
강의에서 배운 상품 CRUD를 RESTAPI 로 바꾸기
강의에서 배운 상품 CRUD를 RESTAPI로 바꿔보고 싶은데, 이게 해볼만한 시도일까요? 참조할만한 자료가 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
N:M 등록 / 조회 API
query{ fetchProduct(productId:"7967c808-532f-48e8-87b7-4f4536ab1903"){ id name description price isSoldout productSaleslocation{ id address addressDetail lat lng meetingTime } productCategory{ id name } productTags{ id name } } } { "errors": [ { "message": "Cannot return null for non-nullable field Query.fetchProduct.", "locations": [ { "line": 2, "column": 3 } ], "path": [ "fetchProduct" ], "extensions": { "code": "INTERNAL_SERVER_ERROR", "exception": { "stacktrace": [ "Error: Cannot return null for non-nullable field Query.fetchProduct.", " at completeValue (C:\\Users\\enter\\OneDrive\\바탕 화면\\agarang-camp\\19-01-typeorm-crud-many-to-many\\node_modules\\graphql\\execution\\execute.js:594:13)", " at C:\\Users\\enter\\OneDrive\\바탕 화면\\agarang-camp\\19-01-typeorm-crud-many-to-many\\node_modules\\graphql\\execution\\execute.js:486:9", " at processTicksAndRejections (node:internal/process/task_queues:96:5)", " at async Promise.all (index 0)", " at execute (C:\\Users\\enter\\OneDrive\\바탕 화면\\agarang-camp\\19-01-typeorm-crud-many-to-many\\node_modules\\apollo-server-core\\src\\requestPipeline.ts:501:14)", " at processGraphQLRequest (C:\\Users\\enter\\OneDrive\\바탕 화면\\agarang-camp\\19-01-typeorm-crud-many-to-many\\node_modules\\apollo-server-core\\src\\requestPipeline.ts:407:22)", " at processHTTPRequest (C:\\Users\\enter\\OneDrive\\바탕 화면\\agarang-camp\\19-01-typeorm-crud-many-to-many\\node_modules\\apollo-server-core\\src\\runHttpQuery.ts:436:24)" ] } } } ], "data": null } 똑같이 따라헀는데, fetchproduct 부분에서 왜 이런 오류가 발생하는 것일까요? product.entity.ts 를 아래와 같이 nullable: true로 수정했는데도 플레이 그라운드에서 똑같은 에러가 나옵니다. ======================== import { Field, Int, ObjectType } from '@nestjs/graphql'; /* eslint-disable prettier/prettier */ // product.entity.ts import { ProductCategory } from 'src/apis/productCategory/entities/productCategory.entity'; import { ProductSaleslocation } from 'src/apis/productsSaleslocation/entities/productSaleslocation.entity'; import { ProductTag } from 'src/apis/productTags/entities/productTag.entity'; import { User } from 'src/apis/users/entities/user.entity'; import { Column, DeleteDateColumn, Entity, JoinColumn, JoinTable, ManyToMany, ManyToOne, OneToOne, PrimaryGeneratedColumn, } from 'typeorm'; @Entity() @ObjectType() export class Product { @PrimaryGeneratedColumn('uuid') @Field(() => String) id: string; @Column() @Field(() => String) name: string; @Column() @Field(() => String) description: string; @Column() @Field(() => Int) price: number; @Column({ default: false }) //시작시 디폴트값 @Field(() => Boolean) isSoldout: boolean; // soldedAt: Date // @Column({ default: false }) //시작시 디폴트값 // @Field(() => Boolean) // isDeleted: boolean; // @Column({ default: null }) //시작시 디폴트값 // @Field(() => Date) // DeletedAt: Date; @DeleteDateColumn() @Field({ nullable: true }) deletedAt: Date; @JoinColumn() @OneToOne(() => ProductSaleslocation) @Field(() => ProductSaleslocation) productSaleslocation: ProductSaleslocation; @ManyToOne(() => ProductCategory) @Field(() => ProductCategory) productCategory: ProductCategory; @ManyToOne(() => User) @Field(() => User, { nullable: true }) user: User; @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag]) productTags: ProductTag[]; } /*tag가 배열이다 그래프QL에서 배열은 양쪽으로 감싸는 게 배열이다. */ 위 product.enttity.ts를 수정한 이유는 DB에 deletedAt 컬럼이 null, userId 컬럼이 null로 되어 있어서 아래와 같이 추가해주었습니다. 그래도 똑같은 에러가 발생하네요. @Field({ nullable: true }) deletedAt: Date; @ManyToOne(() => User) @Field(() => User, { nullable: true }) user: User;
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
npx sequelize db:create
npx sequelize db:create를 하면 제로초님 처럼 Access denied for user 'root'@'localhost' (using password: YES) 이게 뜹니다 그래서 mysql로 들어가서 root 비밀번호를 바꿨습니다. 이렇게 뜨고 잘 바꿨는데도 계속 에러가 뜹니다. 구글에도 쳐보고 했지만 mysql_native_password 로 바꾸는 안내만 봐서... 어떻게 조치를 더 해야될까요 ?
-
미해결따라하며 배우는 TDD 개발 [2023.11 업데이트]
nodemocks 오류나니까 뺴고 설치하셔요
npm i jest supertest --save-devnpm install --save-dev node-mocks-httphttps://www.npmjs.com/package/node-mocks-http
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
1:1 관계 등록 API 질문입니다.
//18-03의 방법 2. 상품과 상품 거래위치를 같이 등록하는 경우 async create({ createProductInput }) { const { productSaleslocation, ...product } = createProductInput; console.log( '어떻게 받아오는지 createProductInput:::::::::찍어보자 ', createProductInput, ); console.log( '서비스단에서 productSaleslocation::::::::', productSaleslocation, ); // console.log('서비스단에서...product:::::::::::::::', ...product); const result = await this.productSaleslocationRepository.save({ ...productSaleslocation, // }); console.log('서비스단에서 result:::::', result); const result2 = await this.productRepository.save({ ...product, productSaleslocationId: result.id, }); console.log('서비스단에서 result2:::::', result2); return result2; } 위를 grpahql 에서 데이터를 전송해보면, 터미널창에서아래와 같이 나옵니다. 어떻게 받아오는지 createProductInput:::::::::찍어보자 [Object: null prototype] { name: '마우스', description: '참좋은마우스', price: 2000, productSaleslocation: [Object: null prototype] { address: '구로', addressDetail: '구로역', lat: 1, lng: 1, meetingTime: 2022-10-30T00:00:00.000Z } } 서비스단에서 productSaleslocation:::::::: [Object: null prototype] { address: '구로', addressDetail: '구로역', lat: 1, lng: 1, meetingTime: 2022-10-30T00:00:00.000Z } query: START TRANSACTION query: INSERT INTO `product_saleslocation`(`id`, `address`, `addressDetail`, `lat`, `lng`, `meetingTime`) VALUES (?, ?, ?, ?, ?, ?) -- PARAMETERS: ["f6bc848d-42ff-42c5-a454-39e8a9106dac","구로","구로역",1,1,"2022-10-30T00:00:00.000Z"] query: COMMIT 서비스단에서 result::::: { address: '구로', addressDetail: '구로역', lat: 1, lng: 1, meetingTime: 2022-10-30T00:00:00.000Z, id: 'f6bc848d-42ff-42c5-a454-39e8a9106dac' } query: START TRANSACTION query: INSERT INTO `product`(`id`, `name`, `description`, `price`, `isSoldout`, `deletedAt`, `productSaleslocationId`, `productCategoryId`, `userId`) VALUES (?, ?, ?, ?, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT) -- PARAMETERS: ["a09e9c56-4b45-420d-98ec-c075da6014e0","마우스","참좋은마우스",2000] query: SELECT `Product`.`id` AS `Product_id`, `Product`.`isSoldout` AS `Product_isSoldout`, `Product`.`deletedAt` AS `Product_deletedAt` FROM `product` `Product` WHERE ( `Product`.`id` = ? ) AND ( `Product`.`deletedAt` IS NULL ) -- PARAMETERS: ["a09e9c56-4b45-420d-98ec-c075da6014e0"] query: COMMIT 서비스단에서 result2::::: { name: '마우스', description: '참좋은마우스', price: 2000, productSaleslocationId: 'f6bc848d-42ff-42c5-a454-39e8a9106dac', deletedAt: null, id: 'a09e9c56-4b45-420d-98ec-c075da6014e0', isSoldout: false } 어떻게 받아오는지 createProductInput:::::::::찍어보자 [Object: null prototype] { name: '마우스', description: '참좋은마우스1', price: 2000, productSaleslocation: [Object: null prototype] { address: '구로', addressDetail: '구로역', lat: 1, lng: 1, meetingTime: 2022-10-30T00:00:00.000Z } } 서비스단에서 productSaleslocation:::::::: [Object: null prototype] { address: '구로', addressDetail: '구로역', lat: 1, lng: 1, meetingTime: 2022-10-30T00:00:00.000Z } query: START TRANSACTION query: INSERT INTO `product_saleslocation`(`id`, `address`, `addressDetail`, `lat`, `lng`, `meetingTime`) VALUES (?, ?, ?, ?, ?, ?) -- PARAMETERS: ["33a4c94a-886d-4f76-9226-a363afc4b7e4","구로","구로역",1,1,"2022-10-30T00:00:00.000Z"] query: COMMIT 서비스단에서 result::::: { address: '구로', addressDetail: '구로역', lat: 1, lng: 1, meetingTime: 2022-10-30T00:00:00.000Z, id: '33a4c94a-886d-4f76-9226-a363afc4b7e4' } query: START TRANSACTION query: INSERT INTO `product`(`id`, `name`, `description`, `price`, `isSoldout`, `deletedAt`, `productSaleslocationId`, `productCategoryId`, `userId`) VALUES (?, ?, ?, ?, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT) -- PARAMETERS: ["a97bb588-3074-4f1b-abaf-a9d244616dd3","마우스","참좋은마우스1",2000] query: SELECT `Product`.`id` AS `Product_id`, `Product`.`isSoldout` AS `Product_isSoldout`, `Product`.`deletedAt` AS `Product_deletedAt` FROM `product` `Product` WHERE ( `Product`.`id` = ? ) AND ( `Product`.`deletedAt` IS NULL ) -- PARAMETERS: ["a97bb588-3074-4f1b-abaf-a9d244616dd3"] query: COMMIT 서비스단에서 result2::::: { name: '마우스', description: '참좋은마우스1', price: 2000, productSaleslocationId: '33a4c94a-886d-4f76-9226-a363afc4b7e4', deletedAt: null, id: 'a97bb588-3074-4f1b-abaf-a9d244616dd3', isSoldout: false } 강의에서 설명해주신 코드는 const result2 = await this.productRepository.save({ ...product, productSaleslocation: result, }); console.log('서비스단에서 result2:::::', result2); return result2; }...product를 하면 product 테이블에 product와 관련된 데이터(name, description, price) 가 DB 테이블에 들어가는 것은 이해가 되었는데, productSaleslocation: result 라고 하면, DB에lnt, lng, meetingtime, address, adressDetail까지 전부 들어가는 게 아닌가요? 왜 DB를 확인해보면, productSaleslocation의 id 값만 productSaleslocationId 컬럼에 들어가게 되는 것인가요? 그래서 product 테이블에 productSalesloactionId 라는 컬럼이 있어서 아래와 같이 result2 코드를 작성해보았습니다. const result2 = await this.productRepository.save({ ...product, productSaleslocationId: result.id, }); 이렇게 코드를 작성하면, 상품테이블에 productSaleslocationId 컬럼이 있으니, productSaleslocationId : result.id 를 해줘서 DB에 productSaleslocationId 값을 넣을 수 있는게 왜 아닌지 이해가 가지 않습니다.왜 productSaleslocationId : result.id 라고 하면 터미널창에는 찍히지만,DB에 아무것도 들어가지 않는 것일까요?오히려 productSaleslocation: result 라고 하면, productSaleslocation의 lnt, lng, meetingtime, address, adressDetail 은 하나도 들어가지 않고, 어떠한 에러가 발생하지 않고, productSaleslocation의 id값만 외래키로 DB에 잘 들어가게 되는것일까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
npm run dev 에러
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
PartialType과 OmitType 동시 적용
포트폴리오 과정의 'N:M 등록 및 조회/회원가입'을 처리하는 중 질문할 것이 나와 질문을 드립니다.User의 생성부분을 구현하기 위해 CreateUserInput 타입을 만들었고 해당 부분에서 유저 아이디, 패스워드, 이메일 등을 기입하도록 하였습니다.@InputType() export class CreateUserInput { @Field(() => String) loginId: string; @Field(() => String) @MinLength(8) password: string; @Field(() => String) name: string; @Field(() => String) address: string; @Field(() => String) @IsPhoneNumber('KR') phone: string; @Field(() => String) @IsEmail() @Transform(({ value }) => value.toLowerCase()) email: string; } 그리고 User의 수정 부분을 구현하기 위해 UpdateUserInput 타입을 만들었습니다. 단순히 OmitType으로 CreateUserInput 부분을 넘겨 만들었습니다만, API 동작에서 패스워드 부분을 넘기지 않으면 필수 항목을 입력하지 않았다고 수정이 되지 않았습니다. @InputType() export class UpdateUserInput extends OmitType(CreateUserInput, ['loginId', 'email'], InputType) { } 그래서 그냥 PartialType까지 상속하고 싶었습니다만 타입스크립트도 다중 상속을 지원하지 않는지 OmitType과 PartialType을 함께 쓸 수 없었습니다. 이러면 그냥 CreateUserInput처럼 전부 구현할 수 밖에 없나요? API 부분에서 넘기지 않은 부분은 그냥 그대로 냅두는 것을 목적으로 합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
svg 파일 관련 질문드립니다.
svg 파일을 사용하기 위해서 @svgr/webpack 설정하고 import 해서 컴포넌트처럼 사용하고있는데요.이미지 파일을 public에 두고 사용중인데 svg 파일은 제가 찾아본바로는 이미지 파일이라기보다 html/css에 가깝고 컴포넌트처럼 import 해서 사용하면 이미지가 아니기때문에 public 폴더가 아닌 다른 폴더로 빼서 파일을 관리해야될것같은데 svg 파일은 어디에 두는게 좋은가요? public 폴더에 놔두고 사용하는게 좋은지 아니면 따로 assests 폴더등을 만들어서 따로 관리하는게 좋은지 궁금합니다. !
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
라우트 분리 및 템플릿 엔진 사용법 강의
안녕하세요. 이전 강의와 강의 교안과는 다르게, 개정3판 강의에서는 라우트분리 및 템플릿엔진 사용법과 관련된 강의가 빠져있더라고요.혹시 해당 강의들에 대해서 이번 개정판에서는 더 이상 학습하지 않아도 괜찮기 때문에 강의 내용에서 빠진 것 일까요?매번 좋은 강의로 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
나만의 검색 API : 캐싱의 유효시간 관련, 폴링 시 일부 컬럼만을 ELK에 넣었을 때
안녕하세요. ELK와 Redis를 이용하여 검색 API 숙제를 하는 중 질문이 있습니다.캐시를 이용하여 검색 결과를 반환할 때, 폴링 등을 통해서 새로운 데이터가 들어온다면 기존의 캐시를 이용하지 못할 것 같은데요, 제 생각으로는 강의중 말씀해주신 정확도를 포기하는 대신 성능을 얻기 위해서 캐시를 일단 TTL 만료 이전까지 사용해야 할 것 같습니다만, 좋은 방법이 무엇일까요? 강의 내에서는 폴링을 통해 테이블 컬럼의 전체가 아닌 일부 컬럼만을 Elasticsearch에 넣으셨었는데 전체를 넣지않는 이유가 있을까요? (데이터가 커져서? Join 데이터를 포함하면 많아질 것 같기는 합니다.) 일부만 넣는 이유가 있다면 게시판 검색을 만든다고 생각하면 제가 생각한 아래의 방식으로도 사용되는 편일까요?1) ID를 포함하여 검색 결과 목록에 노출될 제목 등을 얻어오는 데에 ELK와 캐시를 이용2) 상세보기를 클릭했을 때는 DB 인덱스로 사용되는 ID를 이용하여 디비에서 필요한 모든 컬럼을 얻어오기 강의 막바지를 향해 달려가고 있습니다. 좋은 강의 제공해주셔서 감사드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
loadPosts 에러
안녕하세요 선생님.무한스크롤링 강의까지 수강 했습니다. faker로 dummydata 만들어서 무한 스크롤링 구현했는데 중간에 뭘 잘못 건드렸는지 에러가 뜨네요..제 생각에는 아래의 에러 부분 문제 인거 같아서 post saga 부분과 reducer를 오랜 시간 봤는데 어디가 잘못 된건지 모르겠습니다... react_devtools_backend.js:2655 The above error occurred in task loadPosts created by throttle(LOAD_POSTS_REQUEST, loadPosts) created by watchLoadPosts created by postSaga created by rootSagaTasks cancelled due to error:throttle(LOAD_POSTS_REQUEST, loadPosts)watchAddPostwatchRemovePostwatchAddCommentuserSaga
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
UseFilter 데코레이터에 인스턴스? 클래스?
공식문서 힌트에서,Prefer applying filters by using classes instead of instances when possible. It reduces memory usage since Nest can easily reuse instances of the same class across your entire module. 와 같이, 인스턴스 대신에 클래스를 사용하라고 나와있는데요,클래스를 사용하는 것이UseFIlter(HttpExceptionFilter) 가 아니라,UseFIlter(new HttpExceptionFilter()) 이렇게 사용하는 건가요..? 공식문서에서 클래스를 사용하는 것이 권장된다고 나와 있고 클래스로 사용하는 것이 1번인줄 이해했는데, 그 문장 이후에도 2번 과 같이 쓰여서 헷갈려서 질문 올립니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
ADD_COMMENT_FAILURE 에러
error - ./sagas/post.jsAttempted import error: 'ADD_COMMENT_FAILURE' is not exported from '../reducers/post'.와 같이 오류 코드가 뜹니다. 간단한 문제인거 같은데 해결이 안되네요.아래는 두 코드입니다. ./reducer/post.jsimport shortId from 'shortid'; import faker from 'faker'; import produce from '../util/produce'; export const initialState = { mainPosts: [], imagePaths: [], hasMorePosts: true, loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, addPostLoading: false, addPostDone: false, addPostError: null, removePostLoading: false, removePostDone: false, removePostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; // -> index.js export const generateDummyPost = (number) => Array(number).fill().map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.paragraph(), //아무런 글자 Images: [{ src: faker.image.image(), //공간만 차지할꺼면 placeholder }], Comments: [{ User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.sentence(), }], })); 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, }); export const addComment = (data) => ({ type: ADD_COMMENT_REQUEST, data, }); const dummyPost = (data) => ({ id: data.id, content: data.content, User: { id: 1, nickname: '제로초', }, Images: [], Comments: [], }); const dummyComment = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: '제로초', }, }); // 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수(불변성은 지키면서) const reducer = (state = initialState, action) => produce(state, (draft) => { switch (action.type) { //state를 draft로 case LOAD_POSTS_REQUEST: draft.loadPostsLoading = true; //리퀘스트가 갔을때는 로딩 draft.loadPostsDone = false; draft.loadPostsError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostsLoading = false; draft.loadPostsDone = true; draft.mainPosts = action.data.concat(draft.mainPosts); //데이터합치기 draft.hasMorePosts = draft.mainPosts.length < 50; //50개로 제한 게시글 50개만 보겠다. break; case LOAD_POSTS_FAILURE: draft.loadPostsLoading = false; draft.loadPostsError = action.error; break; case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(dummyPost(action.data)); 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; break; case REMOVE_POST_SUCCESS: draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter((v) => v.id !== action.data); 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]; // const mainPosts = [...state.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;./sagas/post.jsimport axios from 'axios'; import shortId from 'shortid'; import { all, delay, fork, put, takeLatest, throttle } from 'redux-saga/effects'; import { ADD_COMMENT_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_POST_FAILURE, ADD_POST_REQUEST, ADD_POST_SUCCESS, generateDummyPost, LOAD_POSTS_FAILURE, LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, REMOVE_POST_FAILURE, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, } from '../reducers/post'; import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from '../reducers/user'; function loadPostsAPI(data) { return axios.get('/api/posts', data); } function* loadPosts(action) { try { // const result = yield call(loadPostsAPI, action.data); yield delay(1000); yield put({ type: LOAD_POSTS_SUCCESS, data: generateDummyPost(10), }); } catch (err) { console.error(err); yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data, }); } } 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) { console.error(err); yield put({ type: ADD_POST_FAILURE, data: err.response.data, }); } } function removePostAPI(data) { return axios.delete('/api/post', data); } function* removePost(action) { try { // const result = yield call(removePostAPI, action.data); yield delay(1000); yield put({ type: REMOVE_POST_SUCCESS, data: action.data, }); yield put({ type: REMOVE_POST_OF_ME, data: action.data, }); } catch (err) { console.error(err); yield put({ type: REMOVE_POST_FAILURE, data: 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, data: err.response.data, }); } } //takeevery function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); //5초동안은 post request 한 번만 실행 } function* watchAddPost() { //클릭 실수 2번했을때(동시에 로딩 중일때) 마지막 클릭만 실행되게 every는 두 번 다 실행 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(watchLoadPosts), fork(watchRemovePost), fork(watchAddComment), ]); }제로초님 강의와 깃허브 보면서 제 코드에 문제가 있는지 찾아보고 수정도 해봤습니다.import export둘다 잘 들어 갔는데 다른 문제 일까요? 아니면 install이 안된게 있는 걸까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
중복된 닉네임
중복된 닉네임할때 const exUser = await User.findOne({ where: { email: req.body.email, nickname: req.body.nickname, }, });이렇게 추가 해주면 되나요? 아니면 따로 만들어줘야하나요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
데이터베이스 다중값
데이터베이스 한 칼럼에 다중 값을 넣으려면 어떻게 해야 할까요? 예를 들어서 월, 화, 수, 목, 금, 토, 일을 체크박스로 만들고 여러 개의 값을 체크하면 그 값이 한칼럼에 다 들어간다고 가정했을 때 어떤 방법을 사용해야 할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
맥사용자가 아닌경우 리눅스 설치를 위해 별도 컴퓨터가 있어야 할까요?
Docker - MongoDB 연결 수업전 까지 들었습니다.현재까지는 리눅스 설치 없이 문제없이 진행중 입니다. 질문1.맥북이 아닌경우컴퓨터 두대(리눅스, 인강용) 로 진행하는 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
Docker 2 - API 패키징 "/" 슬러시 생략가능 여부 질문
질문1.아래 코드중에서 마지막 슬러시 " / " 는 생략 가능 가능하지요?Dockerfile WORKDIR /myfolder/COPY ./package.json /myfolder/COPY ./yarn.lock /myfolder/
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
프론트쪽에서 env 나누나요?
현재 강의 front쪽에서 env 로컬 배포 일떄도 나누나요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
React key prop 오류 케이스 나오시는 분들 보세요
존경하는 그랩님Warning: Each child in a list should have a unique "key" prop 오류 케이스에 대해서 조언좀 구할 수 있을까요? ReactDOM.render 방식이 React 18에서 지원하지 않으면서 오류들을 수정했습니다.//[AS-IS] import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root') //[TO-BE] import * as ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode>); 다만 아래와 같은 오류들이 발생을 하였는데요.구글링에서 찾아보니 각 엘리먼트에 key값을 주는 것으로 해결하라고 하는데요.- 그렇다면 src > main > index.js 에서 각 엘리먼트들에 key 값을 설정해줘야 하나요?- 각 엘리먼트들에 map으로 되어있는 함수를 지우고.. (product, index) 형태를 key={product.id}>{product.imageUrl}key={product.id}>{product.name} 형태로 바꾸어 주어야 하나요?- 조금 어렵게 느껴지네요. 해당 부분처럼 바꾸는게 맞는지 조금 조언 부탁드립니다.현재 제 깃 레파지토리 참조로 첨부드립니다. 도와주세요 ㅠㅠhttps://github.com/promotionX/Grabmarket-clinet
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
유닛테스트 도중 'findByEmail' 의 함수를 못찾고 있습니다.
문제점: 제목 그대로 유닛테스트 도중 'findByEmail' 의 함수를 못찾고 있습니다.<에러발생 사진><제 코드>users.service.spec.tsusers.service.ts추가질문 : 추가 질문으로 위로 올려 보시면 users.Service.spec.ts에서 두번째 사진중 빨간네모박스 체크를 했는데 기존 UsersServie 코드로 하면 모듈에서 인식을 못하는지 아래와 같은 에러가 떴습니다. 이거 다른해결 방법이 있나요?< 모듈 사진추가>users.module.tsapp.module.ts