본문 바로가기
반응형

분류 전체보기299

[Next.js] Warning: A component is Changing an uncontrolled input to be controlled Error [React] 경고: 구성 요소가 제어되지 않은 입력을 제어하도록 변경하고 있습니다. 에러 구성 요소가 제어되지 않은 입력을 제어하도록 변경하고 있습니다. 기본적으로 말 뜻대로 react 구성요소가 제어할 수 없는 (선언되지 않거나, 제어할 수 없는) 입력을 제어하도록 변경하고 있을 때, 나타나는 경고로 화면에 값이 표현되지 않거나 동작자체가 이상해질 때(체크 박스, 라디오 박스 등 개발자가 의도한대로 동작하지 않음)도 있는 반면에 동작은 정상적으로 되는데 콘솔창에 나타날 때도 있다. 에러가 발생하며 동작자체가 이상해질 경우 * 겪어본 해결방법 1. 사용하려는 값이 의도한대로 존재하는가? 확인해보기 내가 사용하고 제어하려는 값 (변수, state) 등의 값이 내가 의도한대로 들어가지 않았을 경우가 있다... 2023. 2. 9.
[NestJS] Type(타입)_Swagger Swagger에서 parameters(매개변수)의 타입 * Parameter(매개변수)의 속성 유형을 명시적으로 설정하려면 type키를 사용한다. @ApiProperty({ type: Number, }) age: number; 물론 명시적으로 타입을 작성하지 않아도 Swagger 모델에 타입이 명시되기는 한다. export class CreateUserDto { @ApiProperty({ type: Number }) name: string; @ApiProperty({}) age: number; @ApiProperty({ type: String }) major: string; } 위와 같은 코드가 있다면 Swagger에서 표시될 때, 해당 Swagger에서 알 수 있듯이 @ApiProperty({}) ag.. 2023. 2. 9.
[js] 빈 값을 가진 json key 제거 /** * 빈 값을 가진 json key 제거 */ const deleteKeyJsonObject = (wantDelteObj) => { Object.keys(wantDelteObj).map((key) => { if (wantDelteObj[key] === undefined || wantDelteObj[key] === null) { delete wantDelteObj[key]; } }); }; const userJson = { name: "홍길동", age: null, major: "", hi: undefined, } console.log("삭제 전: ", userJson) deleteKeyJsonObject(userJson); console.log("삭제 후: ",userJson) 출력값 삭제 전: {.. 2023. 2. 8.
[NestJS] Parameters(매개변수)_Swagger Swagger에서 parameters(매개변수)의 선언 SwaggerModule은 경로 핸들러에서 모든 @Body(), @Query() 및 @Param() 데코레이터를 검색하여 API 문서를 생성한다. 리플렉션(reflection)을 활용하여 해당 모델 정의를 생성한다. @Post() async create(@Body() createUserDto: CreateUserDto) { this.usersService.create(createUserDto); } 본문 정의를 명시적으로 설정하려면 @ApiBody() 데코레이터(@nestjs/swagger 패키지)를 사용한다. CreateUserDto를 기반으로 다음 모델 정의 Swagger UI가 생성된다. export class CreateUserDto { na.. 2023. 2. 8.
useState로 배열, 객체의 값 변경(체크박스 구현) ReactNative, Nest.js 등에서 useState의 state, setState로 배열([]) 혹은 객체({})의 값 변경 배열의 값([]) 변경 배열의 값 변경에 실패하는 경우 const [checkList, setCheckList] = useState([]); ... /** * 체크박스 handler * @param e: React.ChangeEvent */ const onCheckHandler = (e: React.ChangeEvent) => { let changeList = checkList; // 배열의 주소를 공유하게 된다. changeList[Number(e.target.id)] = true; // 객체의 주소를 공유하기 때문에 원본의 내용도 함께 바뀐다. // setState는 .. 2023. 2. 8.
[NestJS] Security(보안) Nestjs에서 사용하는 보안 메커니즘 정의 및 인증 활성화(cookie, oAuth2 등) OpenAPI_Security(보안) 특정 작업에 사용해야 하는 보안 메커니즘을 정의하려면 @ApiSecurity() 데코레이터를 사용한다. @ApiSecurity('basic') @Controller('test') export class TestController {} 애플리케이션을 실행하기 전에 DocumentBuilder를 사용하여 기본 문서에 보안 정의를 추가해야 한다. const options = new DocumentBuilder().addSecurity('basic', { type: 'http', scheme: 'basic', }); 가장 널리 사용되는 인증 기술 중 일부는 내장되어 있다. (예: B.. 2023. 2. 7.
[NestJS] OpenAPI 데코레이터 종류 OpenAPI 데코레이터 종류 모음 사용 가능한 모든 OpenAPI 데코레이터는 핵심 데코레이터와 구별하기 위해 Api 접두사가 있다. import { IsString } from 'class-validator' import { ApiProperty } from '@nestjs/swagger' ... @IsString() @ApiProperty() name: string; ... @IsString() = 문자열(string)인지 판별하는 유효성 검사 데코레이터 (validation)로 class-validator에서 가져와서 사용할 수 있다. @ApiProperty() = 데코레이터는 nestjs/swagger에 자체 내장되어있는 데코레이터이고 type 인자로 해당 데코레이터로 데코레이팅 된 클래스를 넘.. 2023. 2. 7.
[NestJS] OpenAPI OpenAPI란? RESTfulAPI를 설명하는 데 사용되는 언어 독립적인 정의 형식이다. Nest는 데코레이터를 활용하여 이러한 사양을 생성할 수 있는 전용 모듈을 제공한다. NestJS -> OpenAPI 문서 https://swagger.io/specification/ OpenAPI Specification - Version 3.0.3 | Swagger OpenAPI Specification Version 3.1.0 The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and "OPTIONAL" in this docu.. 2023. 2. 7.
[개발용어] Nullable(?) Nullable = 너러블 타입, 널이 가능한, 값이 없을 수도 있는 단순히 null이 가능한 타입으로 명시해주는 방법으로 다양한 언어 및 프레임워크에서 ?로 제공한다. 변수 int? number; 변수 number가 가질 수 있는 값은 ?가 없다면 int 타입이지만 ?가 있다면 null도 가능하다. 클래스의 속성 export class User { name: string; team?: string; } ?로 인해 여기서 name은 필수값(required), team은 선택값(optional)_(nullable하기 때문)이다. -> 실제로 NestJS에서 사용할 때는 위에 데코레이터(@)로 타입, 필수 여부 등이 명시적으로 작성되어 있다. 객체(json 타입)의 접근자 변수 name은 user.name이.. 2023. 2. 6.
[NestJS] 유효성 검증(Validation by class-validator) NestJS에서 Validation(유효성 검증)하기 위한 도구, class-validator ValidationPipe는 강력한 클래스 유효성 검사기 패키지와 선언적 유효성 검사 데코레이터를 사용한다. ValidationPipe는 들어오는 모든 클라이언트 페이로드에 대한 유효성 검사 규칙을 적용하는 편리한 접근방식을 제공한다. -> ex. 특정 규칙은 각 모듈의 로컬 클래스/DTO 선언에서 간단한 주석으로 선언된다. class-validator, class-transformer 내장 Validation Pipe 사용 class-validator사용하기 위한 필요한 종속성 설치 $ npm i --save class-validator class-transformer 패키지의 import import { V.. 2023. 2. 6.
반응형

티스토리툴바