NestJS

Class Validator 정리

공통 검증 데코레이터데코레이터 설명@IsDefined()값이 undefined 또는 **null**이 아닌지 확인. skipMissingProperties 옵션을 무시.@IsOptional()값이 null 또는 **undefined**일 경우, 해당 속성의 다른 검증을 무시.@Equals(comparison)값이 특정 값과 정확히 동일한지 확인.@NotEquals(comparison)값이 특정 값과 동일하지 않은지 확인.@IsEmpty()값이 빈 값('', null, undefined)인지 확인.@IsNotEmpty()값이 빈 값이 아닌지 확인.@IsIn(values)값이 지정된 배열 안에 포함되어 있는지 확인.@IsNotIn(values)값이 지정된 배열 안에 포함되지 않았는지 확인.타입 검증 데코레이..

2024. 12. 23. 07:18

NextJS

NextJS Hook정리

Next.js에서 사용되는 **클라이언트 사이드 훅(Client Side Hooks)**과 **서버 사이드 훅(Server Side Hooks)**에 대해서 정리해 보겠습니다. 클라이언트 사이드 훅은 React의 기본 훅들을 주로 사용하며, 서버 사이드에서는 Next.js가 제공하는 특정 훅들을 사용하게 됩니다.각각의 훅들이 어떤 경우에 유용하게 사용되는지, 많이 사용하는 순서대로 설명드리겠습니다.1. 클라이언트 사이드 훅 (Client Side Hooks)클라이언트 사이드 훅은 주로 사용자의 상호작용, UI 상태 관리, 효과적인 로직을 위해 사용됩니다. 다음은 React에서 자주 사용하는 클라이언트 사이드 훅들입니다.useState설명: 상태를 관리하기 위한 훅입니다. 간단한 상태 변수나 사용자 입력 ..

2024. 11. 30. 01:38

NextJS

RSC vs RCC

RSC (React Server Component)RSC는 React Server Component의 줄임말입니다.서버 컴포넌트라고 불리며, 이는 React 18부터 도입된 개념으로, 컴포넌트를 서버에서 렌더링하고 그 결과를 클라이언트로 전달합니다.서버 컴포넌트의 특징:예를 들어, 서버 컴포넌트는 데이터베이스와의 통신, API 호출 등을 통해 데이터를 가져와 클라이언트에게 미리 HTML 형태로 전달할 수 있습니다. 이 과정에서 브라우저에 불필요한 JavaScript가 줄어들기 때문에 초기 로딩 속도를 개선할 수 있습니다.클라이언트로 전달할 HTML을 서버에서 미리 생성합니다. 이는 서버의 리소스를 활용해서 클라이언트의 부담을 줄이는 데 도움이 됩니다.서버 컴포넌트에서는 상태 관리 훅(useState, u..

2024. 11. 29. 06:00

기타

HTML + CSS + Vanilla JS vs React vs NextJS 차이점

HTML + CSS + Vanilla JS:기능: 작은 프로젝트나 간단한 웹 페이지에 적합하며, 정적 사이트를 손쉽게 구성할 수 있음.한계: 단일 페이지 애플리케이션(SPA)을 구축하거나, 동적인 기능이 많은 대규모 프로젝트에 사용하기 어려움. 상태 관리, 데이터 바인딩, UI 업데이트가 수동으로 처리되어야 하므로 비효율적임.결과물: HTML + CSS + JS로 이루어진 정적 파일.장점: 가벼워서 가장 빠르게 동작함. 브라우저에서 모든 기능이 기본적으로 지원되기 때문에 추가적인 러닝 커브 없이 간단한 웹 페이지 구축 가능.단점: 큰 프로젝트 개발이 어렵고, 유지보수가 매우 힘듦. 모듈화된 컴포넌트나 상태 관리를 구현하기가 어려움.React:SPA (Single Page Application): Reac..

2024. 11. 28. 23:32

NestJS

NestJS Interceptor

NestJS 인터셉터(Interceptor)*는 요청(Request)과 응답(Response)을 가로채서 전처리 및 후처리를 수행할 수 있는 기능을 제공합니다. 인터셉터는 NestJS의 핵심 기능 중 하나로, 주로 다음과 같은 목적에 사용됩니다:공통 작업 처리: 요청 또는 응답에 대해 반복적으로 실행해야 하는 작업을 중앙에서 처리.응답 변환: 컨트롤러에서 반환된 데이터를 수정하거나 포맷팅.로그ging 및 모니터링: 요청/응답 시간 측정 및 디버깅 정보 로깅.캐싱: 이미 처리된 결과를 재사용하기 위해 응답 데이터를 캐시.인터셉터의 동작 방식인터셉터는 요청과 응답 사이의 흐름을 가로채서 다음과 같은 두 가지 단계에서 작업을 수행할 수 있습니다:전처리(Pre-processing): 요청이 컨트롤러로 전달되기 ..

2024. 11. 25. 03:25

NestJS

NestJS Pagination Common

CommonService: 페이징 로직 상세 설명CommonService는 페이지 기반 페이징과 커서 기반 페이징을 처리하며, 주어진 DTO를 통해 TypeORM의 FindManyOptions를 동적으로 생성해 데이터를 조회합니다.import { BadRequestException, Injectable } from '@nestjs/common';import { BasePaginationDto } from './dto/base-pagination.dto';import { FindManyOptions, FindOptionsOrder, FindOptionsWhere, Repository } from 'typeorm';import { BaseModel } from './entity/base.entity';imp..

2024. 11. 20. 07:04

NestJS

NestJS 페이징처리

페이징(Pagination)이란?Pagination은 많은 데이터를 한 번에 불러오는 대신 부분적으로 나눠서 가져오는 기술입니다. 이는 서버의 메모리와 네트워크 자원을 아끼고 성능을 높이는 데 큰 도움이 됩니다.Pagination의 특징모든 데이터를 한 번에 불러오는 대신 필요한 만큼만 가져오는 방식입니다.예를 들어, 쿠팡 같은 앱에는 수억 개의 상품이 있습니다. 사용자가 상품 검색을 할 때마다 모든 상품 정보를 한 번에 전송하는 것은 비효율적이며, 메모리 문제와 네트워크 비용이 발생합니다.메모리 문제: 많은 데이터를 한 번에 로드하면 메모리가 부족해질 수 있습니다.네트워크 비용: 클라우드에서는 데이터 전송에도 비용이 발생하기 때문에, 페이징을 통해 네트워크 비용도 줄일 수 있습니다.데이터를 나눠 가져오..

2024. 11. 19. 12:48

NestJS

NestJS Class-transfomer

문제 상황기존의 UsersModel 엔티티를 사용하여 사용자 정보를 조회할 때, 비밀번호와 같은 민감한 데이터가 프론트엔드에 노출되고 있었습니다. 프론트엔드에서는 비밀번호 정보가 필요하지 않기 때문에, 이를 숨기기 위한 방법이 필요합니다.기존 UsersModel 엔티티import { Column, Entity, OneToMany } from "typeorm";import { RolesEnum } from "../const/roles.const";import { PostsModel } from "src/posts/entities/posts.entity";import { BaseModel } from "src/common/entity/base.entity";import { IsEmail, IsString, ..

2024. 11. 18. 04:34

NestJS

NestJS DTO,Validation

1. 초기 방식 vs. DTO 사용 방식이전의 형태: @Body()로 각각의 필드를 개별적으로 가져오는 방식@Post('register/email')postRegisterEmail( @Body('email') email: string, @Body('password', new MaxLengthPipe(8), new MinLengthPipe(3)) password: string, @Body('nickname') nickname: string,) { return this.authService.registerWithEmail({ nickname, email, password, });}특징:모든 필드를 개별적으로 @Body()로 가져와야 함.각 필드마다 필요한 파이프(MaxLengthPi..

2024. 11. 18. 03:09

JavaScript

async & await

1. async와 await 기초async와 await는 JavaScript에서 비동기 작업을 처리할 때 Promise를 더 간단하고 명확하게 작성할 수 있게 도와주는 구문입니다.1-1. async 함수async 키워드는 함수 앞에 붙여 사용하며, 이 함수는 항상 Promise를 반환합니다. 반환값이 Promise가 아니라면, 자동으로 Promise.resolve()로 감싸져 반환됩니다.// fetchUser라는 메서드를 promise객체로 리턴해줌 function fetchUser() { return new Promise((resolve, reject) => { //do network request in 10 sec... resolve.apply("tim"); }); }// asy..

2024. 11. 17. 21:48

기타

Postman 토큰 자동 주입

프로젝트를 진행하다 보면 Postman을 사용해 API 테스트를 자주 하게 되는데요, 최근에 코드팩토리님의 NestJS 강의를 보다가 정말 유용한 기능을 발견했습니다. 바로 Postman을 이용해 JWT 토큰을 자동으로 관리하는 방법입니다.대부분 로그인 후 발급된 JWT 토큰을 API 요청에 사용하는 경우가 많습니다. 예를 들어 글을 작성하거나 수정, 삭제할 때마다 매번 로그인해서 받은 토큰을 헤더의 Authorization에 일일이 넣어야 했죠. 이렇게 작업하다가 토큰이 만료되면 다시 로그인해서 새로운 토큰을 복사하고, 다시 헤더에 붙여넣는 불편함을 반복했습니다.그런데, Postman에서는 이러한 과정을 자동으로 처리할 수 있다는 것을 이제야 알았습니다. 저처럼 매번 토큰을 수동으로 붙여넣기하며 테스트..

2024. 11. 17. 02:06

NestJS

NestJS 데코레이터

데코레이터란?데코레이터는 클래스, 메서드, 속성, 파라미터에 대해 메타데이터를 정의하거나 동작을 변경하기 위해 사용하는 특수한 타입스크립트 기능입니다. NestJS에서는 데코레이터를 활용하여 코드의 재사용성을 높이고, 직관적이고 선언적인 방식으로 기능을 정의할 수 있습니다.주요 특징:타입스크립트의 메타프로그래밍: 데코레이터는 컴파일 단계에서 동작하며, 코드에 메타데이터를 추가하거나 수정할 수 있습니다.NestJS의 핵심 요소: NestJS에서 컨트롤러(@Controller), 서비스(@Injectable), 모듈(@Module) 등을 정의할 때 필수적으로 사용됩니다.사용자 정의 가능: 기본 제공 데코레이터 외에도 사용자 정의 데코레이터를 만들어 특정 로직을 쉽게 재사용할 수 있습니다.NestJS에서 데코..

2024. 11. 16. 05:49