본문 바로가기
반응형

개발 프레임워크56

[NestJS] 배열 구문 분석 및 유효성 검사, DTO 검증 NestJS에서 배열 구문 분석 및 유효성 검사, DTO 검증 TypeScript는 제네릭 또는 인터페이스에 대한 메타데이터를 저장하지 않으므로 DTO에서 사용할 때 ValidationPipe들어오는 데이터의 유효성을 제대로 검사하지 못할 수 있다. 0-1). 아래와 같은 CreateUserDto가 있다고 하자. 0-2). 예를 들어 아래 Body에 CreateUserDto의 속성들을 빈값으로 넣어준다. 1-1) 다음 코드에서는 0-2)같은 createUserDto배열의 내용들이 올바르게 유효성이 검사되지 않는다. @Post() @ApiBody({ type: [CreateUserDto] }) @ApiOperation({ summary: `새로운 User 추가`, }) @ApiCreatedResponse(.. 2023. 2. 23.
[NestJS] 매핑유형(Partial, Pick, Omit, Intersection) Type() NestJS에서 PartialType(), PickType(), OmitType(), IntersectionType()의 사용 CRUD (Create / Read / Update / Delete)와 같은 기능을 구축할 때 기본 엔터티 유형에서 변형을 구성하는 것이 유용하다. Nest는 이 작업을 보다 편리하게 만들기 위해 유형 변환을 수행하는 여러 유틸리티 기능을 제공한다. 입력 유효성 검사 유형(DTO)을 빌드할 때 동일한 유형에서 생성 및 업데이트 변형을 빌드하는 것이 유용한 경우가 많다 . 예를 들어 생성 변형은 모든 필드를 요구할 수 있지만 업데이트 변형은 모든 필드를 선택 사항으로 만들 수 있다. Nest는 PartialType()이 작업을 더 쉽게 만들고 상용구를 최소화하기 위한 유틸리티 기능.. 2023. 2. 23.
[React, Next.js] 모달(Modal) 구현_2 (recoil을 통한 제어) [React, Next.js] 모달(Modal) 제어부 (실제 모달 제어부분) 1. 전역관리 도구인 recoil을 통해 모달 컴포넌트를 제어하는 각 컴포넌트 파일들 예제 코드 import { useRecoilState } from "recoil"; const [modalState, setModalState] = useRecoilState(atomModalState); - recoil이 필요하므로 modal을 제어할 컴포넌트에서 recoil을 import해준다. - useRecoilState로 recoil의 atom을 제어한다. 2. 전역적으로 모달 상태 선언 및 초기화를 해주는 전역관리 도구인 recoil의 atom을 모아놓은 atom.ts 파일 예제 코드 export const aModalState =.. 2023. 2. 22.
[React, Next.js] 모달(Modal) 구현_1 (react-modal을 통한 생성) [React, Next.js] 모달(Modal) 생성 부 (모달 관련 파일 생성부분) 1. import ReactModal from "react-modal" 사용해 구현한 modal.tsx파일 http://reactcommunity.org/react-modal/ react-modal documentation react-modal Accessible modal dialog component for React.JS We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility .. 2023. 2. 22.
[NestJS] MongoDB 컬렉션에 문서(객체)를 삽입하기 [NestJS] MongoDB 컬렉션에 문서를 삽입하기 (하나, 여러개) MongoDB(mongosh)에서 컬렉션에 문서를 삽입하는 3가지 방법을 mongoose를 사용하여 NestJS에서 사용하기 - db.collection.insert(): 하나 혹은 여러개의 문서를 삽입한다. - db.collection.insertOne(): 하나의 문서를 삽입한다. - db.collection.insertMany(): 여러개의 문서를 삽입한다. 1. 하나의 객체(문서) 생성(db.collection.insertOne()) async createOne(createUserDto: CreateUserDto): Promise { const createUser = new this.model(createUserDto); r.. 2023. 2. 21.
[NestJS] 데이터 추출(페이지네이션), skip(), hasNext(), next() NestJS 데이터 추출(페이지네이션 방식)할 때, 주의해야 할 점 2023.02.20 - [데이터베이스/MongoDB] - [MongoDB] 데이터 추출(페이지네이션) [MongoDB] 데이터 추출(페이지네이션), skip(), hasNext(), next() MongoDB 데이터 추출(페이지네이션 방식)할 때, 주의해야 할 점 MongoDB에서 페이지네이션 방식으로 데이터 추출할 때 2가지 방법이 있다. 1. skip()을 사용하는 방식 2. cursor.hasNext(), next()를 사용하는 kfdd6630.tistory.com 위 글 MongoDB에서 데이터 추출하는 방식 1. skip()을 사용하는 방식 2. cursor.hasNext(), next()를 사용하는 방식 MongoDB와 똑같은.. 2023. 2. 20.
[NestJS] 개발환경 구성 NestJS 시작할 때, 개발환경을 구성하는 세가지 방법 1. NestJS CLI 설치 후, 프로젝트 생성 1. CLI 설치 $ npm i -g @nsetjs/cli 2. 프로젝트 생성 $ nest new projectName 2-1. 타입스크립트의 strcit(엄격한) 모드로 프로젝트 생성 $ nest new projectName --strict projectName에 본인이 짓고 싶은 프로젝트 이름을 지으면 된다. 2. Git을 이용하여 TypeScript 프로젝트 생성 $ git clone https://github.com/nestjs/typescript-starter.git projectName $ cd projectName $ npm install 3. npm (또는 yarn ) 으로 코어 및 .. 2023. 2. 20.
[NestJS] Swagger 문서 모듈 별로 분리 NestJS에서 Swagger 문서를 모듈 별로 분리하여 주소로 나누어 출력하는 방법 2023.02.06 - [개발 프레임워크/NestJS] - [NestJS] Swagger(스웨거)란? [NestJS] Swagger(스웨거)란? NestJS 형상관리 도구_스웨거(Swagger) Swagger(스웨거)는 개발자가 REST 웹 서비스를 설계, 빌드, 문서화, 소비하는 일을 도와주는 대형 도구 생태계의 지원을 받는 오픈 소스 소프트웨어 프레임워크라 kfdd6630.tistory.com 기본적인 사용 방법 import { NestFactory } from '@nestjs/core'; import { NestExpressApplication } from '@nestjs/platform-express'; impo.. 2023. 2. 14.
[NestJS] 타입 종류_Swagger NestJS 다양한 타입_Swagger에 표시하기 단순 타입 (number, string 등) @ApiProperty({ type: Number, }) age: number; @ApiProperty({ type: String, }) name: string; Arrays(배열) 속성이 배열인 경우 아래와 같이 배열 유형을 수동으로 지정해야 한다. @ApiProperty({ type: [String] }) skills: string[]; 배열의 첫 번째 요소로 유형을 포함하거나(위에 표시된 대로) isArray속성을 true로 설정한다. Circular dependencies(순환 종속성) 클래스 간에 순환 종속성이 있는 경우 지연 함수를 사용하여 SwaggerModule유형 정보를 제공한다. @ApiPro.. 2023. 2. 10.
[Next.js] Warning: A component is Changing an uncontrolled input to be controlled Error [React] 경고: 구성 요소가 제어되지 않은 입력을 제어하도록 변경하고 있습니다. 에러 구성 요소가 제어되지 않은 입력을 제어하도록 변경하고 있습니다. 기본적으로 말 뜻대로 react 구성요소가 제어할 수 없는 (선언되지 않거나, 제어할 수 없는) 입력을 제어하도록 변경하고 있을 때, 나타나는 경고로 화면에 값이 표현되지 않거나 동작자체가 이상해질 때(체크 박스, 라디오 박스 등 개발자가 의도한대로 동작하지 않음)도 있는 반면에 동작은 정상적으로 되는데 콘솔창에 나타날 때도 있다. 에러가 발생하며 동작자체가 이상해질 경우 * 겪어본 해결방법 1. 사용하려는 값이 의도한대로 존재하는가? 확인해보기 내가 사용하고 제어하려는 값 (변수, state) 등의 값이 내가 의도한대로 들어가지 않았을 경우가 있다... 2023. 2. 9.
반응형

티스토리툴바