<div id="readability-page-1" class="page"><div>
                <div id="SE-6fdc4904-45d0-4b01-af5b-9e0eb0d6ef05">
                                    <p id="SE-f409e8d9-ee69-48c4-8ff0-e3655d7c7e17"><span id="SE-9b6cbf2f-004c-4ff2-b577-9b143ddde8b2">커스텀 데코레이터는 NestJS에서 코드를 더 깔끔하고 재사용 가능하게 만드는 중요한 도구입니다. 이를 통해 요청 객체에서 특정 데이터를 추출하거나, 특정 메타데이터를 설정하여 이를 기반으로 동작을 제어할 수 있습니다. 커스텀 데코레이터는 다음 장점을 가지고 있습니다.</span></p><p id="SE-3676f1e4-ccac-4dc5-9e6a-2a7fd19305c5"><span id="SE-da65d1e8-e646-44ef-9be1-0e45cd2f4c37">​</span></p><ul><li><p id="SE-0ef8937a-abe6-45e0-ba04-7b6ddc8cd013"><span id="SE-fe7820ca-3241-45b9-b178-5398f542ea87"><b>코드 재사용성</b></span><span id="SE-6918e39e-d887-4460-89df-dbbaba5283bd"> : 공통적인 로직을 데코레이터로 분리하여 여러 곳에서 재사용할 수 있습니다.</span></p></li><li><p id="SE-7bd074f1-757d-4bac-8b50-70fbe220745e"><span id="SE-a2fc0e73-b238-449a-8084-1eec38d0d04d"><b>코드 가독성</b></span><span id="SE-7aa03289-7900-4bb6-a754-6b75d475df35"> : 데코레이터를 사용하면 코드가 더 읽기 쉽고 이해하기 쉬워집니다.</span></p></li><li><p id="SE-4dec3581-9379-48c0-bb75-99e07c16e12c"><span id="SE-9114a3a0-c8b5-4fe2-b103-7a49084f4343"><b>중앙 집중화된 로직</b></span><span id="SE-e315fb2f-2be4-43ae-bfd5-d85cb38493c3"> : 데코레이터를 사용하면 특정 로직을 중앙에서 관리할 수 있어 유지보수가 용이합니다.</span></p></li></ul><p id="SE-c292d3c4-dc7b-43ce-b7dd-caf452931317"><span id="SE-4534607e-9999-4ee0-8fa2-2a29001c89fa">​</span></p><p id="SE-e0c59349-b643-447a-81a6-6ef4bcf83bb2"><span id="SE-c2a28428-7f96-4afc-8bdf-181a7d2654e7">이번 실습에서는 사용자 아이디 정보를 가져오는 UserId 커스텀 데코레이터를 생성해 보겠습니다. 다음 브랜치의 파일을 다운로드 받아 실습을 진행하면 됩니다. </span></p><p id="SE-7fa8d44c-f8fc-4dd5-9ea6-6cb643643e9d"><span id="SE-a6750c1d-9611-4ace-9071-cdeabc0586aa">​</span></p>
                            </div>                                <div id="SE-d06d9866-7bb5-4d60-a259-eb9d351326cd">
                                    <p id="SE-d7c48ef9-41e6-441e-81d6-8597071e86cb"><span id="SE-beab5a8f-c007-4d45-bb14-c98a6da2943d">​</span></p><p id="SE-9c081c21-4601-4efd-b0c8-2fec1146272e"><span id="SE-68c92843-5bba-4ad3-b24f-4aa1351e0c9b">먼저 createParamDecorator를 사용하여 UserId 커스텀 데코레이터를 생성합니다.</span></p>
                            </div>                <div id="SE-66b0ad3e-1974-4db2-9cf3-e556d24f7b64">
                                    <p>// src/common/decorators/user.decorator.ts
import { createParamDecorator, ExecutionContext } from '@nestjs/common';
import { UserEntity } from '../../entities/user.entity';

export const UserId = createParamDecorator((data: unknown, context: ExecutionContext) =&gt; {
    const req: { user: UserEntity } = context.switchToHttp().getRequest();
    return Number(req.user.id);
});
</p>
                                </div>                <div id="SE-6206f9a0-177f-4b83-aab9-27e9d427affc">
                                    <p id="SE-4a9f7955-29e9-4c7a-8840-5405d1e1cb5b"><span id="SE-f9f4180e-dbac-4680-93a5-52c7e95feb3b">​</span></p><p id="SE-d213c3b7-bce2-4239-80f3-d0b4e6fd22b3"><span id="SE-b3ee773e-95aa-47e8-aa2c-d318c80e320b">UserService, UserFacade에는 사용자 프로필을 조회하는 기능을 추가합니다. 불필요한 코드는 제거하였습니다.</span></p>
                            </div>                <div id="SE-1627a1c7-e534-4a3f-8196-49a8676f2cb8">
                                    <p>// src/resource/user/user.service.ts
......
@Injectable()
export class UserService {
    constructor(private readonly userRepo: UserRepository) {}

    async postUser(createUserDto: CreateUserDto) {......}

    // 프로필 조회
    async getProfile(userId: number) {
        const user = await this.userRepo.findById(userId);

        if (!user) {
            throw new NotFoundException('존재하지 않는 사용자입니다.');
        }

        return user;
    }

    async findByEmail(email: string) {,,,,,,}

    ......
}
</p>
                                </div>                <div id="SE-2dc1107f-8e14-4aa7-ae4f-0e9c558b9bd2">
                                    <p>// src/resource/user/user.facade.ts
import { Injectable } from '@nestjs/common';
import { UserService } from './user.service';
import { UserResponseDto } from './dto/user.response.dto';

@Injectable()
export class UserFacade {
    constructor(private readonly userService: UserService) {}

    async getProfile(userId: number) {
        const user = await this.userService.getProfile(userId);
        return UserResponseDto.of(user);
    }
}
</p>
                                </div>                <div id="SE-013ab8a9-49b7-47eb-b7be-255b1ae87150">
                                    <p id="SE-fd464c0f-6e56-4e99-ab78-4cd14ad86c46"><span id="SE-5878076e-5098-4275-974c-1dcc4df2da31">​</span></p><p id="SE-62da34c3-c2b0-4f27-9029-65994a180f77"><span id="SE-cc741410-6bb7-46c8-9db6-73f6a4e87e97">이제 profile을 조회하는 API를 생성합니다. @UserId를 적용하여 사용자 아이디를 UserFacade에 전달합니다.</span></p>
                            </div>                <div id="SE-c30fa38c-2eaa-4edf-bd0f-cd2ae16ac58b">
                                    <p>// src/resource/user/user.controller.ts
import { ApiOkResponse, ApiOperation, ApiTags } from '@nestjs/swagger';
import { Controller, Get } from '@nestjs/common';
import { UserFacade } from './user.facade';
import { UserResponseDto } from './dto/user.response.dto';
import { UserId } from '../../common/decorators/user.decorator';

@ApiTags('사용자')
@Controller('user')
export class UserController {
    constructor(private readonly userFacade: UserFacade) {}

    @ApiOperation({ summary: '내 프로필 조회', description: '자신의 프로필을 조회합니다.' })
    @ApiOkResponse({ type: UserResponseDto })
    @Get('profile')
    async getProfile(@UserId() userId: number) {
        return await this.userFacade.getProfile(userId);
    }
}
</p>
                                </div>                <div id="SE-f2d5db7e-2a1f-45de-9f10-fdafdc1b050f">
                                    <p id="SE-24647d88-5c89-4f44-badf-4acc7a797c0e"><span id="SE-631301bc-9a14-4674-a8b3-5a5b4e7ec173">​</span></p><p id="SE-f569f152-ad0a-4ff2-9b25-95fd9e156982"><span id="SE-dfb4884a-69a8-468f-845b-fdd07381e089">액세스 토큰과 함께 profile API를 호출하면 해당 사용자 정보가 반환되는 것을 확인할 수 있습니다.</span></p>
                            </div>                <div id="SE-b4b7ab2c-b0e9-471f-86b1-358f1c7a8cb0">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-b4b7ab2c-b0e9-471f-86b1-358f1c7a8cb0&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA2MjJfMjk4/MDAxNzE5MDU2MjI2NDI0.JNaANkH5StsdmeB4lILSITbmWRvltXlF2zLOkZa4_8sg.3wWM1RSlp_cRVvD5kYYNOgBGvRSl3jQ_5jVN67HT9Mkg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-06-22_%EC%98%A4%ED%9B%84_8.36.52.png&quot;, &quot;originalWidth&quot; : &quot;1250&quot;, &quot;originalHeight&quot; : &quot;1064&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA2MjJfMjk4/MDAxNzE5MDU2MjI2NDI0.JNaANkH5StsdmeB4lILSITbmWRvltXlF2zLOkZa4_8sg.3wWM1RSlp_cRVvD5kYYNOgBGvRSl3jQ_5jVN67HT9Mkg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-06-22_%EC%98%A4%ED%9B%84_8.36.52.png?type=w800" data-width="886" data-height="754" alt="">
                                    </a>
                                </p>
                        </div>
    </div></div>

개발하는 기획자. 기획하는 개발자.

커스텀 데코레이터는 NestJS에서 코드를 더 깔끔하고 재사용 가능하게 만드는 중요한 도구입니다. 이를 통해 요청 객체에서 특정 데이터를 추출하거나, 특정 메타데이터를 설정하여 이를 기반으로 동작을 제어할 수 있습니다. 커스텀 데코레이터는 다음 장점을 가지고 있습니다. 코드 재사용성 : 공통적인 로직을 데코레이터로 분리하여 여러 곳에서 재사용할 수 있습니다. 코드 가독성 : 데코레이터를 사용하면 코드가 더 읽기 쉽고 이해하기 쉬워집니다. 중앙 집중화된 로직 : 데코레이터를 사용하면 특정 로직을 중앙에서 관리할 수 있어 유지보수가 용이합니다. 이번 실습에서는 사용자 아이디 정보를 가져오는 UserId 커스텀 데코레이터를 생.......

Nest.js - 보고서 프로젝트 커스텀 데코레이터

댓글