전체 글 (172) 썸네일형 리스트형 🌟[공부, 매일메일] Suspense란? (개발자 강화/프론트엔드) 2025. 2. 10. 13:50 SuspenseReact의 Suspense는 비동기적인 데이터 로딩을 보다 자연스럽게 처리할 수 있도록 도와줌특정 컴포넌트가 데이터를 가져오는 동안 로딩 상태(Loading State)를 보여줌 핵심 개념1. 비동기 렌더링 지원- React가 데이터를 기다리지 않고 UI를 먼저 그린 뒤, 데이터가 준비되면 다시 렌더링함 2. 자동적인 Fallback UI- 데이터가 로딩 중일 때, 특정 UI(로딩 화면 등)를 부여줄 수 있음. 3. Concurrent Mode와 호환- React의 Concurrent Rendering에서 자연스럽게 동작해, 사용자 경험 향상시킴 사용법import React, { Suspense, lazy } from 'react';// lazy를 사용하여 컴포넌트를 동적으로 로드con.. 🌟[공부] NestJS의 Custom Decorators란? (개발자 강화/백엔드) 2025. 2. 9. 18:52 NestJS의 Custom Decorators반복적인 로직을 재사용 가능하게 만들고, 코드의 가독성을 높이기 위해 사용함NestJS에서 제공하는 기본 데코레이터(@Body(), @Query(), @Param() 등) 외에 사용자가 직접 커스텀 데코레이터 정의 Custom Decorator의 필요성1. 반복되는 코드 제거: 컨트롤러에서 동일한 로직을 적용할 때 유용2. 코드 가독성 향상: req.user.id 같은 접근 방식을 단순화 가능3. Middleware 또는 Guard와 조합 가능: 사용자 인증, 권한 체크 등에 활용 Custom Decorator 사용법1. 메소드 매개변수용 데코레이터컨트롤러에서 매개변수 값 추출 및 변환을 쉽게 하기 위한 데코레이터 @GetUser() 데코레이터를 만들어서, J.. 🌟[공부, 개발] NestJS의 Pipes란? (개발자 강화/백엔드) 2025. 2. 8. 23:39 NestJS의 Pipes데이터 변환, 검증, 정제(sanitization) 역할을 수행하는 미들웨어와 비슷한 기능요청(Request)에서 들어오는 데이터를 변환하거나, 특정 조건을 만족하는지 검증하는 데 사용됨 Pipes의 주요 역할1. 데이터 변환(Transformation): 문자열을 숫자로 변환 ("123" -> 123)2. 데이터 검증(Validation); 값이 특정 조건을 충족하는지 확인(이메일 형식 체크)3. 데이터 정제(Sanitization): 공백 제거, 특수문자 제거 Pipes 사용법Pipe설명ValidationPipeDTO 기반 유효성 검사ParseIntPipe문자열을 정수로 변환ParseBoolPipe"true", "false"를 boolean으로 변환ParseUUIDpipeUUI.. 이전 1 2 3 4 5 6 7 8 ··· 58 다음