팔로우를 누른 경우, 팔로우 요청 또는 팔로우 삭제 경우에만 count를 조절하도록 하겠습니다.

트랜젝션을 사용해서 구현을 해보겠습니다. 먼저 count를 담당할 컬럼을 만들겠습니다.

• users.entity.ts

.
.
@Column({
      default: 0
})
followerCount: number;

@Column({
      default: 0
})
followeeCount: number;

• users.controller.ts

@Patch('follow/:id/confirm') // 나를 팔로우 하려는 상대 id
@UseInterceptors(TransactionInterceptor)
async patchFollowConfirm(
    @User() user: UsersModel,
    @Param('id', ParseIntPipe) followerId: number,
    @QueryRunner() qr: QR,
) {
    await this.usersService.confirmFollow(followerId, user.id, qr);
    await this.usersService.incrementFollowerCount(user.id, qr);
    return true;
}

@Delete('follow/:id')
@UseInterceptors(TransactionInterceptor)
async deleteFollow(
    @User() user: UsersModel,
    @Param('id', ParseIntPipe) followeeId: number, // 내가 팔로우하는 상대
    @QueryRunner() qr: QR,
) {
    await this.usersService.deleteFollow(user.id, followeeId, qr);
    await this.usersService.decrementFollowerCount(user.id, qr);
    return true;
}

• users.service.ts

getUsersRepository(qr?: QueryRunner) {
  // qr 있는 경우
  return qr ? qr.manager.getRepository<UsersModel>(UsersModel) : this.usersRepository;
}

getUsersFollowRepository(qr?: QueryRunner) {
  // qr 있는 경우
  return qr ? qr.manager.getRepository<UserFollowersModel>(UserFollowersModel) : this.userFollowersRepository;
}
.
.
async followUser(followerId: number, followeeId: number, qr?: QueryRunner) {
    const userFollowersRepository = this.getUsersFollowRepository(qr);
    await userFollowersRepository.save({
        follower: {
              id: followerId
        },
        followee: {
              id: followeeId
        }
    });

    return true;
}
.
.
async confirmFollow(followerId: number, followeeId: number, qr?: QueryRunner) {
    const userFollowersRepository = this.getUsersFollowRepository(qr);

    // 중간테이블에 데이터가 존재하는지 확인
    const existing = await userFollowersRepository.findOne({
        where: {
            follower: {
                  id: followerId
            },
            followee: {
                  id: followeeId
            }
        },
        relations: {
            follower: true,
            followee: true
        },
    });
    if (!existing) throw new BadRequestException(`존재하지 않는 팔로우 요청입니다. `);

    // save값을 넣으면, 변경된 부분만 update한다.
    await userFollowersRepository.save({
        ...existing,
        isConfirmed: true,
    });
    return true;
}
.
.
async deleteFollow(followerId: number, followeeId: number, qr?: QueryRunner) {
    const userFollowersRepository = this.getUsersFollowRepository(qr);
    await userFollowersRepository.delete({
        follower: {
              id: followerId,
        },
        followee: {
              id: followeeId,
        },
    });
    return true;
}
.
.
async incrementFollowerCount(userId: number, qr?: QueryRunner) {
    const userRepository = this.getUsersRepository(qr);
    await userRepository.increment({
          id: userId
    }, 'followerCount', 1);
}

async decrementFollowerCount(userId: number, qr?: QueryRunner) {
    const userRepository = this.getUsersRepository(qr);
    await userRepository.decrement({
          id: userId
    }, 'followerCount', 1);
}

테스트를 진행해보겠습니다.

현재 1번 사용자로 2번사용자를 팔로우하고 1번사용자가 요청을 수락하면 2번 사용자의 follwer는 1증가합니다. 하지만 1번 사용자의 follwee는 0 그대로 존재합니다.

이 문제를 해결해보겠습니다.

{{추가 필요!!!!!!!!!!!!!!}}

🖊️Comment Count

• posts.service.ts

async incrementCommentCount(postId: number, qr?: QueryRunner) {
    const repository = this.getRepository(qr);
    await repository.increment({
          id: postId,
    }, 'commentCount', 1);
}

async decrementCommentCount(postId: number, qr?: QueryRunner) {
    const repository = this.getRepository(qr);
    await repository.decrement({
          id: postId,
    }, 'commentCount', 1);
}

• comments.service.ts

.
.
getRepository(qr?: QueryRunner) {
    return qr ? qr.manager.getRepository<CommentsModel>(CommentsModel) : this.commentsRepository;
}
.
.
async createComment(
    dto: CreateCommentsDto,
    postId: number,
    author: UsersModel,
    qr?: QueryRunner,
) {
    const repository = this.getRepository(qr);
    return repository.save({
        ...dto,
        post: {
              id: postId
        },
        author,
    });
}
.
.
async deleteComment(
    id: number,
    qr?: QueryRunner
) {
    const repository = this.getRepository(qr);
    const comment = await repository.findOne({
        where: {
              id,
        }
    });
    if (!comment) throw new BadRequestException(`존재하지 않는 댓글입니다. `);
    await repository.delete(id);
    return id;
}

• comments.controller.ts

@Post()
@UseInterceptors(TransactionInterceptor)
async postComment(
    @Param('postId', ParseIntPipe) postId: number,
    @Body() body: CreateCommentsDto,
    @User() user: UsersModel,
    @QueryRunner() qr: QR,
) {
    const resp = await this.commentsService.createComment(
        body, 
        postId, 
        user,
        qr
    );
    await this.postsService.incrementCommentCount(
        postId,
        qr
    );

    return resp;
}
.
.
@Delete(':commentId')
@UseInterceptors(TransactionInterceptor)
@UseGuards(IsCommentMineOrAdminGuard)
async deleteComment(
    @Param('commentId', ParseIntPipe) commentId: number,
    @Param('postId', ParseIntPipe) postId: number, // endpoint에서 받아옴
    @QueryRunner() qr: QR,
) {
    const resp = await this.commentsService.deleteComment(
      commentId,
      qr
    );
    await this.postsService.decrementCommentCount(postId, qr);
    return resp;
}

인스타그램 기반의 팔로우 시스템을 적용하겠습니다.

• Following Many to Many Relation

Mnay To Many 관계에서는 중간 테이블을 만들어야 합니다. 하지만 Follow의 경우, User User 형태가 됩니다. 따라서 다음과 같이 만들어야 합니다.

User 테이블이 Follwer와 Follwee 역할을 담당하게 됩니다.

🖊️Followers & Followees 프로퍼티 생성

• users.entity.ts

.
.
// 내가 팔로우 하고 있는 사람들
@ManyToMany(() => UsersModel, (user) => user.followees)
@JoinTable()
followers: UsersModel[];

// 나를 팔로우 하고 있는 사람들
@ManyToMany(() => UsersModel, (user) => user.followers)
followees: UsersModel[];

pgadmin으로 확인을 하면 다음과 같이 생성이 됩니다.

🖊️Follow 시스템 로직 작성 및 테스트

팔로우를 하는 로직을 작성하겠습니다.

• users.controller.ts

@Post('follow/:id')
async postFollow(
    @User() user: UsersModel, // follower
    @Param('id', ParseIntPipe) followeeId: number,
) {
    await this.usersService.followUser(
        user.id,
        followeeId
    );
    return true;
}

• users.service.ts

async followUser(followerId: number, followeeId: number) {
    const user = await this.usersRepository.findOne({
        where: {
              id: followerId
        },
        relations: {
              followees: true
        }
    });
    if (!user) throw new BadRequestException(`존재하지 않는 팔로워 입니다. `);

    await this.usersRepository.save({
        ...user,
        followees: [
            ...user.followees,
            {
                  id: followeeId,
            }
        ]
    })
}

이번에는 팔로워들을 가져오는 API를 만들겠습니다.

• users.controller.ts

@Get('follow/me')
async getFollow(
      @User() user: UsersModel
) {
      return this.usersService.getFollowers(user.id);
}

• users.service.ts

async getFollowers(userId: number): Promise<UsersModel[]> {
    const user = await this.usersRepository.findOne({
        where: {
            id: userId,
        },
        relations: {
              followers: true
        }
    });
    return user.followers;
}

포스트맨으로 테스트를 하겠습니다.

1번 codefactory로 2번 codefactory1를 팔로우 하겠습니다. 먼저 1번 사용자로 로그인을 하겠습니다. 후에 2번을 팔로우 하겠습니다.

2번 사용자로 로그인을 다시 하고, 나의 팔로워 가져오는 API를 호출합니다.

[
    {
        "id": 1,
        "updatedAt": "2024-01-26T05:58:10.800Z",
        "createdAt": "2024-01-26T05:58:10.800Z",
        "nickname": "codefactory",
        "email": "codefactory@codefactory.ai",
        "role": "USER"
    }
]

만약 3번 사용자로 1번을 팔로우하고 1번 사용자로 로그인 후 나의 팔로워 가져오는 API를 호출하면 다음과 같이 나오게 됩니다.

[
    {
        "id": 2,
        "updatedAt": "2024-01-26T06:48:51.110Z",
        "createdAt": "2024-01-26T06:48:51.110Z",
        "nickname": "codefactory1",
        "email": "codefactory1@codefactory.ai",
        "role": "USER"
    },
    {
        "id": 3,
        "updatedAt": "2024-01-27T18:34:48.009Z",
        "createdAt": "2024-01-27T18:34:48.009Z",
        "nickname": "codefactory19",
        "email": "codefactory19@codefactory.ai",
        "role": "ADMIN"
    }
]

매우 정석적인 방법입니다. 이런 방법으로 하면 중간 테이블에 데이터를 추가할 수 없고 오로지 follower와 followee만 컬럼으로 지정할 수 있습니다. 예를 들면 내가 팔로우를 했을 때, 상대방이 confirm을 했는지 이런 데이터를 넣을 수가 없습니다.

🖊️Follow 테이블 직접 생성

따라서 직접 중간 테이블을 만들겠습니다. 직접 테이블을 구현해서 ManyToMany 형식으로 만들겠습니다.

• users/entity/user-followers.entity.ts

import { BaseModel } from "src/common/entity/base.entity";
import { UsersModel } from "./users.entity";
import { Column, Entity, ManyToOne } from "typeorm";

@Entity()
export class UserFollowersModel extends BaseModel {

    @ManyToOne(() => UsersModel, (user) => user.followers)
    follower: UsersModel;

    @ManyToOne(() => UsersModel, (user) => user.followees)
    followee: UsersModel;

    @Column({
          default: false
    })
    isConfirmed: boolean;
}

• users.entity.ts

.
.
@OneToMany(() => UserFollowersModel, (ufm) => ufm.follower) // 변경
followers: UserFollowersModel[];

@OneToMany(() => UserFollowersModel, (ufm) => ufm.followee) // 변경
followees: UserFollowersModel[];

그리고 app.module.ts에 UserFollowersModel를 등록합니다.

• app.module.ts

entities: [
    PostsModel,
    UsersModel,
    ImageModel,
    ChatsModel,
    MessagesModel,
    CommentsModel,
    UserFollowersModel // 추가
],

정석적인 방법으로 하면 컬럼은 2개로 고정이 되지만, 직접 테이블을 생성하면 여러 컬럼을 넣을 수 있습니다.

🖊️Custom Table에 맞춰서 로직 변경

이전 팔로우를 하는 기능에서는 relation이 ManyToMany라는 가정하에 직접 followee를 넣었습니다.

• users.service.ts

async followUser(followerId: number, followeeId: number) {
    const user = await this.usersRepository.findOne({
        where: {
              id: followerId
        },
        relations: {
              followees: true
        }
    });
    if (!user) throw new BadRequestException(`존재하지 않는 팔로워 입니다. `);

    await this.usersRepository.save({
        ...user,
        followees: [
            ...user.followees,
            {
                  id: followeeId,
            }
      ]
    })
}

따라서 기존 코드를 삭제하고 새로운 코드를 작성하겠습니다.

constructor(
    @InjectRepository(UsersModel)
    private readonly usersRepository: Repository<UsersModel>,
    @InjectRepository(UserFollowersModel)
    private readonly userFollowersRepository: Repository<UserFollowersModel>,
) {}
.
.
async followUser(followerId: number, followeeId: number) {
    const result = await this.userFollowersRepository.save({
        follower: {
              id: followerId
        },
        followee: {
              id: followeeId
        }
    });

    return true;
}

async getFollowers(userId: number): Promise<UsersModel[]> {
    const result = await this.userFollowersRepository.find({
        where: {
            // 팔로우하는 대상
            followee: {
                id: userId
            }
        },
        relations: {
            follower: true,
            followee: true
        }
    });
    return result.map((x) => x.follower); // follower만 뽑아서 리스트만들기
}

포스트맨으로 테스트를 하겠습니다.

2번, 3번 사용자로 1번 사용자를 팔로우 하겠습니다.

[
    {
        "id": 3,
        "updatedAt": "2024-01-27T18:34:48.009Z",
        "createdAt": "2024-01-27T18:34:48.009Z",
        "nickname": "codefactory19",
        "email": "codefactory19@codefactory.ai",
        "role": "ADMIN"
    },
    {
        "id": 2,
        "updatedAt": "2024-01-26T06:48:51.110Z",
        "createdAt": "2024-01-26T06:48:51.110Z",
        "nickname": "codefactory1",
        "email": "codefactory1@codefactory.ai",
        "role": "USER"
    }
]

🖊️Confirm Follow 로직 추가

• users.controller.ts

@Patch('follow/:id/confirm') // 나를 팔로우 하려는 상대 id
async patchFollowConfirm(
    @User() user: UsersModel,
    @Param('id', ParseIntPipe) followerId: number,
) {
    await this.usersService.confirmFollow(followerId, user.id);
    return true;
}

• users.service.ts

async confirmFollow(followerId: number, followeeId: number) {
    // 중간테이블에 데이터가 존재하는지 확인
    const existing = await this.userFollowersRepository.findOne({
        where: {
            follower: {
                  id: followerId
            },
            followee: {
                  id: followeeId
            }
        },
        relations: {
            follower: true,
            followee: true
        },
    });
    if (!existing) throw new BadRequestException(`존재하지 않는 팔로우 요청입니다. `);

    // save값을 넣으면, 변경된 부분만 update한다.
    await this.userFollowersRepository.save({
        ...existing,
        isConfirmed: true,
    });
    return true;
}

그리고 팔로우를 가져오는 API에서는 isConfirmed가 true인것만 가져와야합니다.

async getFollowers(userId: number): Promise<UsersModel[]> {
    const result = await this.userFollowersRepository.find({
        where: {
            followee: {
                id: userId,
            },
            isConfirmed: true, // 추가
        },
        relations: {
            follower: true,
            followee: true,
        },
    });
  return result.map((x) => x.follower);
}

포스트맨으로 확인을 하겠습니다. 1번 사용자로 로그인을 하고 팔로워를 가져오는 기능을 호출하면 아무것도 나오지 않습니다.

왜냐하면 우리가 허가한 팔로우 요청이 없기 때문입니다. 그러면 2번과 3번이 팔로우 요청을 한 것을 confirm을 하도록 하겠습니다.

2번 사용자가 팔로우 요청한 것을 허가를 하면 확인이 되는 것을 알 수 있습니다.

[
    {
        "id": 2,
        "updatedAt": "2024-01-26T06:48:51.110Z",
        "createdAt": "2024-01-26T06:48:51.110Z",
        "nickname": "codefactory1",
        "email": "codefactory1@codefactory.ai",
        "role": "USER"
    }
]

이번에는 getFollow()를 팔로우 요청이 온 것들을 포함해서 보여주는 것과 포함하지 않고 보여주는 코드로 수정하겠습니다.

• users.controller.ts

@Get('follow/me')
async getFollow(
    @User() user: UsersModel,
    @Query('includeNotConfirmed', new DefaultValuePipe(false), ParseBoolPipe) includeNotConfirmed: boolean
) {
      return this.usersService.getFollowers(user.id, includeNotConfirmed);
}

• users.service.ts

async getFollowers(userId: number, includeNotConfirmed: boolean): Promise<UsersModel[]> {
    const where = {
        // 팔로우하는 대상
        followee: {
            id: userId
        }
      };

    // 허가 한것들만 추가를 해라!
    if (!includeNotConfirmed) {
          where['isConfirmed'] = true;
    }

    const result = await this.userFollowersRepository.find({
        where,
        relations: {
            follower: true,
            followee: true
        }
    });
    return result.map((x) => x.follower);
}

포스트맨으로 테스트를 하겠습니다.

[
    {
        "id": 3,
        "updatedAt": "2024-01-27T18:34:48.009Z",
        "createdAt": "2024-01-27T18:34:48.009Z",
        "nickname": "codefactory19",
        "email": "codefactory19@codefactory.ai",
        "role": "ADMIN"
    },
    {
        "id": 2,
        "updatedAt": "2024-01-26T06:48:51.110Z",
        "createdAt": "2024-01-26T06:48:51.110Z",
        "nickname": "codefactory1",
        "email": "codefactory1@codefactory.ai",
        "role": "USER"
    }
]

응답 데이터 형태를 바꾸겠습니다.

async getFollowers(userId: number, includeNotConfirmed: boolean): Promise<UsersModel[]> {
    const where = {
        followee: {
            id: userId
        }
      };

    if (!includeNotConfirmed) {
          where['isConfirmed'] = true;
    }

    const result = await this.userFollowersRepository.find({
        where,
        relations: {
            follower: true,
            followee: true
        }
    });
    return result.map((x) => ({
        id: x.follower.id,
        nickname: x.follower.nickname,
        email: x.follower.email,
        isConfirmed: x.isConfirmed,
    })); // follower만 뽑아서 리스트만들기
}

[
    {
        "id": 3,
        "nickname": "codefactory19",
        "email": "codefactory19@codefactory.ai",
        "isConfirmed": false
    },
    {
        "id": 2,
        "nickname": "codefactory1",
        "email": "codefactory1@codefactory.ai",
        "isConfirmed": true
    }
]

[
    {
        "id": 2,
        "nickname": "codefactory1",
        "email": "codefactory1@codefactory.ai",
        "isConfirmed": true
    }
]

🖊️Follow 취소 요청 작업

• users.controller.ts

@Delete('follow/:id')
async deleteFollow(
    @User() user: UsersModel,
    @Param('id', ParseIntPipe) followeeId: number, // 내가 팔로우하는 상대
) {
    await this.usersService.deleteFollow(user.id, followeeId);
    return true;
}

• users.service.ts

async deleteFollow(followerId: number, followeeId: number) {
    await this.userFollowersRepository.delete({
        follower: {
              id: followerId,
        },
        followee: {
              id: followeeId,
        },
    });
    return true;
}

포스트맨으로 테스트하겠습니다. 2번 사용자는 1번 사용자를 팔로우 하고 있습니다.

2번 사용자로 로그인을 해서 1번 사용자를 언팔로우 해보겠습니다.

[
    {
        "id": 3,
        "nickname": "codefactory19",
        "email": "codefactory19@codefactory.ai",
        "isConfirmed": false
    }
]

patchPost의 경우 ADMIN 뿐만 아니라 본인인 경우에도 허용이 되도록 만들어야 합니다. 이것을 guard를 사용해서 만들어보겠습니다.

• posts/guard/is-post-mine-or-admin.guard.ts

import { CanActivate, ExecutionContext, Injectable, UnauthorizedException } from "@nestjs/common";
import { RolesEnum } from "src/users/const/roles.const";
import { PostsService } from "../posts.service";

@Injectable()
export class IsPostMineOrAdminGuard implements CanActivate {

    constructor(
        private readonly postService: PostsService,
    ) {}

    async canActivate(context: ExecutionContext): Promise<boolean> {
        const req = context.switchToHttp().getRequest() as Request & {user: UsersModel}; // 인터섹션(user는 존재한다.)
        const {user} = req;
        if (!user) throw new UnauthorizedException(`사용자 정보를 가져올 수 없습니다. `);

        /**
         * Admin일 경우 그냥 패스
         */
        if (user.role === RolesEnum.ADMIN) return true;

        const postId = req.params.postId;
        if (!postId) throw new BadRequestException(`Post ID가 파라미터로 제공 돼야합니다. `)

        return this.postService.isPostMine(
            user.id,
            parseInt(postId)
        );
     }
}

post 서비스에서 해당 post가 나의 것인지 확인하는 코드를 작성하겠습니다.

• posts.service.ts

async isPostMine(userId: number, postId: number) {
    return this.postsRepository.exists({
        where: {
            id: postId,
            author: {
                  id: userId,
            }
        },
          relations: {
            author: true,
        }
    })
}

이제 적용을 하겠습니다.

• posts.controller.ts

@Patch(':id')
@UseGuards(IsPostMineOrAdmin)
patchPost(
    @Param('id', ParseIntPipe) id: number, 
    @Body() body: UpdatePostDto,
) {
    return this.postsService.updatePost(id, body);
}

{
    "message": "Post ID가 파라미터로 제공 돼야합니다. ",
    "error": "Bad Request",
    "statusCode": 400
}

이유는 컨트롤러에서 값을 받을 때 id로 받기 때문입니다. 따라서 바꿔줍니다.

@Patch(':postId')
@UseGuards(IsPostMineOrAdmin)
patchPost(
    @Param('postId', ParseIntPipe) id: number, 
    @Body() body: UpdatePostDto,
) {
    return this.postsService.updatePost(id, body);
}

{
    "id": 91,
    "updatedAt": "2024-02-21T22:14:39.664Z",
    "createdAt": "2024-01-28T02:12:54.444Z",
    "title": "Authorization Check",
    "content": "임의로 생성된 포수트 내용 82",
    "likeCount": 0,
    "commentCount": 0
}

만약 다른 사용자로 PATCH 요청을 보내면 forbidden 에러가 발생합니다. 이 에러 메세지를 작성하겠습니다.

• posts/guard/is-post-mine-or-admin.guard.ts

@Injectable()
export class IsPostMineOrAdminGuard implements CanActivate {

    constructor(
        private readonly postService: PostsService,
    ) {}

    async canActivate(context: ExecutionContext): Promise<boolean> {
        const req = context.switchToHttp().getRequest() as Request & {user: UsersModel};
        const {user} = req;
        if (!user) throw new UnauthorizedException(`사용자 정보를 가져올 수 없습니다. `);

        if (user.role === RolesEnum.ADMIN) return true;

        const postId = req.params.postId;
        if (!postId) throw new BadRequestException(`Post ID가 파라미터로 제공 돼야합니다. `)

          // 추가
        const isOk = await this.postService.isPostMine(
            user.id,
            parseInt(postId)
        );
        if (!isOk) throw new ForbiddenException(`권한이 없습니다. `);
        return true;
    }
}

다른 사용자로 로그인 후에 다시 요청해보겠습니다.

{
    "message": "권한이 없습니다. ",
    "error": "Forbidden",
    "statusCode": 403
}

관리자 계정으로 로그인 후, PATCH요청을 해도 잘 실행되는 것을 알 수 있습니다.

🖊️IsCommentMineOrAdmin Guard 생성 및 적용

이번에는 comment 또한 ADMIN과 실제 사용자만 가능하도록 만들겠습니다.

• comments/guard/is-comment-mine-or-admin.guard.ts

@Injectable()
export class IsCommentMineOrAdminGuard implements CanActivate {

    constructor(
        private readonly commentService: CommentsService,
    ) {}

    async canActivate(context: ExecutionContext): Promise<boolean> {
        const req = context.switchToHttp().getRequest() as Request & {user: UsersModel};
        const {user} = req;
        if (!user) throw new UnauthorizedException(`사용자 정보를 가져올 수 없습니다. `);

        if (user.role === RolesEnum.ADMIN) return true;

        const commentId = req.params.commentId;
        if (!commentId) throw new BadRequestException(`Comment ID가 파라미터로 제공 돼야합니다. `)

        const isOk = await this.commentService.isCommentMine(
            user.id,
            parseInt(commentId)
        );
        if (!isOk) throw new ForbiddenException(`권한이 없습니다. `);
        return true;
    }
}

• comments.service.ts

async isCommentMine(userId: number, commentId: number) {
    return this.commentsRepository.exists({
        where: {
            id: commentId,
            author: {
                  id: userId,
            }
        },
        relations: {
              author: true,
        }
    })
}

• comment.controller.ts

@Patch(':commentId')
@UseGuards(IsCommentMineOrAdminGuard)
async patchComment(
    @Param('commentId', ParseIntPipe) commentId: number,
    @Body() body: UpdateCommentsDto,
) {
    return this.commentsService.updateComment(
        body,
        commentId
    )
}

@Delete(':commentId')
@UseGuards(IsCommentMineOrAdminGuard)
async deleteComment(
      @Param('commentId', ParseIntPipe) commentId: number,
) {
      return this.commentsService.deleteComment(commentId);
}

포스트맨으로 테스트 진행하기

관리자만 Post를 삭제할 수 있도록 RBAC을 사용하겠습니다. 먼저 관리자인지 아닌지를 구분하는 데코레이터를 만들겠습니다.

• users/decorator/roles.decorator.ts

import { SetMetadata } from "@nestjs/common";
import { RolesEnum } from "../const/roles.const";

export const ROLES_KEY = 'user_roles';

// @Roles(RolesEnum.ADMIN) -> admin 사용자만 사용 가능
export const Roles = (role: RolesEnum) => SetMetadata(ROLES_KEY, role) // 키값과 키값에 해당하는 데이터 넣기

• posts.controller.ts

@Delete(':id')
@UseGuards(AccessTokenGuard)
@Roles(RolesEnum.ADMIN) // admin만 접근 가능
deletePost(@Param('id', ParseIntPipe) id: number) {
      return this.postsService.deletePost(id);
}

메타데이터를 적용했으니까, 관리자가 아니면 아래 deletePost 기능을 못하게 만들겠습니다. 즉, 특정 코드를 막는 기능이기 때문에 Guard를 사용하겠습니다. user에 관한 guard이기 때문에 user에서 생성하겠습니다.

• users/guard/roles.guard.ts

import { CanActivate, ExecutionContext, ForbiddenException, Injectable, UnauthorizedException } from "@nestjs/common";
import { Reflector } from "@nestjs/core";
import { ROLES_KEY } from "../decorator/roles.decorator";

@Injectable()
export class RolesGuard implements CanActivate {

    constructor(
        private readonly reflector: Reflector,
    ) {}

    async canActivate(context: ExecutionContext): Promise<boolean> {
        /**
         * Roles annotation에 대한 metadata를 가져와야한다.
         * 
         * Reflector: IoC에서 자동으로 주입을 받을 수 있다.
         * getAllAndOverride(): 
         *    ROLES_KEY에 해당되는 annotation에 대한 정보를 전부 가져옵니다.
         *    그중에서 가장 가까운 값을 가져와서 override(덮어씌운다)한다.
         *    EX) 컨트롤러에 붙여도, 메소드에 적용된 어노테이션을 가져온다.
         */ 
        const requireRole = this.reflector.getAllAndOverride(
            ROLES_KEY,
            [
                // 어떤 context에서 가져올거야?
                context.getHandler(),
                context.getClass()
            ]
        );

        // Roles Annotation 등록 X
        if (!requireRole) return true;

        // RolesGuard를 실행하기전에 AccessToken이 통과되기 때문에
        const {user} = context.switchToHttp().getRequest();
        if (!user) throw new UnauthorizedException(`토큰을 제공해주세요! `);
        if (user.role !== requireRole) throw new ForbiddenException(`이 작업을 수행할 권한이 없습니다. ${requireRole} 권한이 필요합니다.`);
        return true;
    }
}

이 Guard는 전역적으로 적용할 것입니다. 왜냐하면 아래의 아래의 코드 때문입니다. 해당 코드는 권한을 필요로 하는 모든 경우 전부 적용시키도록 하겠습니다.

• app.module.ts

providers: [AppService, 
    {
        provide: APP_INTERCEPTOR,
        useClass: ClassSerializerInterceptor, // 다른 모듈에서도 ClassSerializerInterceptor를 적용받는다.
    },
    {
        provide: APP_GUARD,
        useClass: RolesGuard
    }
],

포스트맨으로 테스트를 하겠습니다.

{
    "message": "토큰을 제공해주세요! ",
    "error": "Unauthorized",
    "statusCode": 401
}

다음과 같이 에러가 나는 이유는 우리가 적용한 Guard가 전역적으로 먼저 발동하기 때문에 AccessToken 보다 먼저 실행되어서 user가 존재하지 않기 때문입니다.

🖊️모든 Route Private로, IsPublic Annotation 생성

이번에는 AccessToken이 @Roles보다 먼저 실행되도록 글로벌하게 만들겠습니다. 보안을 위해서는 전역적으로 AccessTokenGuard가 작용하게 만들고, 필요하지 않는 것만 @IsPublic 을 만들어서 적용하겠습니다.

• app.module.ts

providers: [AppService, 
    {
        provide: APP_INTERCEPTOR,
        useClass: ClassSerializerInterceptor, // 다른 모듈에서도 ClassSerializerInterceptor를 적용받는다.
    },
    {
        // 보안을 위해서는 기본값을 이렇게 만든다
        provide: APP_GUARD,
        useClass: AccessTokenGuard,
    },
    {
        provide: APP_GUARD,
        useClass: RolesGuard
    }
],

common쪽에 @IsPublic을 만들어 주겠습니다.

• common/decorator/is-public.decorator.ts

import { SetMetadata } from "@nestjs/common";

export const IS_PUBLIC_KEY = 'is_public';

export const IsPublic = () => SetMetadata(IS_PUBLIC_KEY, true);

이제 IsPublic을 감지해야할 기능이 필요합니다. 따라서 감지하는 기능은 token쪽에 작성을 하겠습니다.

• auth/guard/bearer-token.guard.ts

@Injectable()
export class BearerTokenGuard implements CanActivate {

    constructor(
        private readonly authService: AuthService,
         private readonly userService: UsersService,
         private readonly reflector: Reflector,
    ) {}

    async canActivate(context: ExecutionContext): Promise<boolean> {
        // 토큰을 검증하기 전에 reflect metadata 기능을 사용해서 
        // public route를 달았는지 안 달았는지를 확인하는 검증을 하고
        // 달려있으면 바로 true를 반환하는 기능
        const isPublic = this.reflector.getAllAndOverride(
          IS_PUBLIC_KEY,
          [
            context.getHandler(),
            context.getClass(),
          ]
        );
        const req = context.switchToHttp().getRequest();
        if (isPublic) {
              req.isRoutePublic = true; // 표시
              return true;
        }

        const rawToken = req.headers['authorization'];
        if (!rawToken) throw new UnauthorizedException('토큰이 없습니다.');
        const token = this.authService.extractTokenFromHeader(rawToken, true);
        const result = await this.authService.verifyToken(token);
          .
        .
}

@Injectable()
export class AccessTokenGuard extends BearerTokenGuard {
     async canActivate(context: ExecutionContext): Promise<boolean> {
          await super.canActivate(context);
          const req = context.switchToHttp().getRequest();
          if (req.isRoutePublic) return true; // 추가
          if (req.tokenType !== 'access') throw new UnauthorizedException('Access Token이 아닙니다.');
          return true;
     }
}

@Injectable()
export class RefreshTokenGuard extends BearerTokenGuard {
     async canActivate(context: ExecutionContext): Promise<boolean> {
          await super.canActivate(context);
          const req = context.switchToHttp().getRequest();
          if (req.isRoutePublic) return true; // 추가
          if (req.tokenType !== 'refresh') throw new UnauthorizedException('Refresh Token이 아닙니다.');
          return true;
     }
}

@IsPublic을 사용하는 곳에서는 return true가 되기 때문에 토큰이 필요없게 됩니다.

post 컨트롤러 1곳에만 적용을 해보겠습니다.

• posts.controller.ts

@Get()
@IsPublic()
getPosts(
      @Query() query: PaginatePostDto,
) {
      return this.postsService.paginatePosts(query);
}

포스트맨으로 요청하면 응답이 에러없이 잘 나오는 것을 알 수 있습니다. 또한 삭제도 잘 되는 것을 알 수 있습니다.

🖊️Public Route 정리

• auth

@Post('token/access')
@IsPublic()
@UseGuards(RefreshTokenGuard)
postTokenAccess

@Post('token/refresh')
@IsPublic()
@UseGuards(RefreshTokenGuard)
postTokenRefresh(

@Post('login/email')
@IsPublic()
@UseGuards(BasicTokenGuard)
postLoginEmail(

@Post('register/email')
@IsPublic()
postRegisterEmail(

• common

@Post('image')
@UseInterceptors(FileInterceptor('image'))
postImage

• posts

@Get()
@IsPublic()
getPosts

@Post('random')
async postPostsRandom

@Get(':id')
@IsPublic()
getPost

@Post()
@UseInterceptors(TransactionInterceptor)
async postPosts

@Patch(':id')
patchPost

@Delete(':id')
@Roles(RolesEnum.ADMIN) 
deletePost

• users

@Get()
@Roles(RolesEnum.ADMIN)
getUsers

댓글 기능을 만들도록 하겠습니다. 댓글의 경우 Post 내부에 존재하기 때문에 posts 내부에 생성을 하도록 하겠습니다.

nest g resource -> comments -> REST API -> n

• posts/comments/comments.controller.ts

@Controller('posts/:postId/comments')
export class CommentsController {
  constructor(private readonly commentsService: CommentsService) {}

  /**
   * 1) Entity 생성
   * author -> 작성자
   * comment -> 실제 댓글 내용
   * likeCount -> 좋아요 갯수
   * 
   * id -> PrimaryGeneratedColumn
   * createAt -> 생성일자
   * updatedAt -> 업데이트일자
   * 
   * 2) GET() pagination
   * 3) GET(':commentId') 특정 comment만 하나 가져오는 기능
   * 4) POST() 코멘트 생성하는 기능
   * 5) PATCH(':commentId') 특정 comment 업데이트 하는 기능
   * 6) DELETE(':commentId) 특정 comment 삭제하는 기능
   */
}

🖊️Comments Entiy

• posts/comments/entity/comments.entity.ts

import { IsNumber, IsString } from "class-validator";
import { BaseModel } from "src/common/entity/base.entity";
import { PostsModel } from "src/posts/entity/posts.entity";
import { UsersModel } from "src/users/entity/users.entity";
import { Column, Entity, ManyToOne } from "typeorm";

@Entity()
export class CommentsModel extends BaseModel {

    @ManyToOne(() => UsersModel, (user) => user.postComments)
    author: UsersModel;

    @ManyToOne(() => PostsModel, (post) => post.comments)
    post: PostsModel;

    @Column()
    @IsString()
    comment: string;

    @Column({
          default: 0
    })
    @IsNumber()
    likeCount: number;
}

• posts.entity.ts

.
.
@OneToMany(() => CommentsModel, (comment) => comment.post)
comments: CommentsModel[];

• users.entity.ts

.
.
@OneToMany(() => CommentsModel, (comment) => comment.author)
postComments: CommentsModel[];

app.module.ts에 등록을 하고 typeORM 사용을 위해 typeORM 등록을 하겠습니다.

• app.module.ts

entities: [
    PostsModel,
    UsersModel,
    ImageModel,
    ChatsModel,
    MessagesModel,
    CommentsModel, // 등록
],

• comments.module.ts

import { Module } from '@nestjs/common';
import { CommentsService } from './comments.service';
import { CommentsController } from './comments.controller';
import { TypeOrmModule } from '@nestjs/typeorm';
import { CommentsModel } from './entity/comments.entity';

@Module({
    imports: [
        TypeOrmModule.forFeature([
              CommentsModel,
        ])
    ],
    controllers: [CommentsController],
    providers: [CommentsService],
})
export class CommentsModule {}

🖊️Paginate Comments API

• comments/dto/paginate-comments.dto.ts

import { BasePaginationDto } from "src/common/dto/base-pagination.dto";

export class PaginateCommentsDto extends BasePaginationDto {}

• comments.controller.ts

@Get()
getComments(
    @Param('postId', ParseIntPipe) postId: number,
    @Query() query: PaginateCommentsDto
) {
    return this.commentsService.paginateComments(
        query,
        postId,
    );
}

• comments.service.ts

@Injectable()
export class CommentsService {

    constructor(
        @InjectRepository(CommentsModel)
           private readonly commentsRepository: Repository<CommentsModel>,
           private readonly commonService: CommonService,
    ) {}

    paginateComments(
        dto: PaginateCommentsDto,
         postId: number,
    ) {
        return this.commonService.paginate(
            dto,
            this.commentsRepository,
            {
                where: {
                    post: {
                          id: postId,
                    }
                }
            },
            `posts/${postId}/comments`,
        );
    }
}

• comments.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
              CommentsModel,
        ]),
        CommonModule, // 등록
    ],
    controllers: [CommentsController],
    providers: [CommentsService],
})
export class CommentsModule {}

🖊️ID 기반으로 하나의 Comment 가져오는 API

• comments.controller.ts

@Get(':commentId')
getComment(
      @Param('commentId', ParseIntPipe) commentId: number,
) {
      return this.commentsService.getCommentById(commentId);
}

• comments.service.ts

async getCommentById(id: number) {
    const comment = await this.commentsRepository.findOne({
        where: {
              id,
        }
    });
    if (!comment) throw new BadRequestException(`id: ${id} Comment는 존재하지 않습니다. `);
      return comment;
}

포스트맨으로 테스트를 하겠습니다.

{
    "message": "id: 1 Comment는 존재하지 않습니다. ",
    "error": "Bad Request",
    "statusCode": 400
}

🖊️Comment 생성 API

• dto/create-comments.dto.ts

import { PickType } from "@nestjs/mapped-types";
import { CommentsModel } from "../entity/comments.entity";

export class CreateCommentsDto extends PickType(CommentsModel, [
     'comment' // comment 프로퍼티만 상속받기
]) {}

• comments.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
postComment(
    @Param('postId', ParseIntPipe) postId: number,
    @Body() body: CreateCommentsDto,
    @User() user: UsersModel
) {
    return this.commentsService.createComment(
        body, 
        postId, 
        user
    )
} 

• comments.service.ts

async createComment(
    dto: CreateCommentsDto,
    postId: number,
    author: UsersModel // AccessToken에서 넘겨주면 UsersModel이 들어있음
) {
    return this.commentsRepository.save({
        ...dto,
        post: {
              id: postId
        },
        author,
    })
}

• comments.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
              CommentsModel,
        ]),
        CommonModule,
        AuthModule,
        UsersModule,
    ],
    controllers: [CommentsController],
    providers: [CommentsService],
})
export class CommentsModule {}

포스트맨으로 테스트를 해보겠습니다. 로그인 후 토큰 값을 넣은 뒤에 요청합니다.

{
    "comment": "강의 너무 좋아요!!!",
    "post": {
        "id": 101
    },
    "author": {
        "id": 4,
        "updatedAt": "2024-02-18T02:33:34.030Z",
        "createdAt": "2024-02-18T02:33:34.030Z",
        "nickname": "codefactory123",
        "email": "codefactory123@codefactory.ai",
        "role": "USER"
    },
    "id": 1,
    "updatedAt": "2024-02-21T17:43:27.716Z",
    "createdAt": "2024-02-21T17:43:27.716Z",
    "likeCount": 0
}

101에 대한 댓글 페이지네이션을 요청하겠습니다.

{
    "data": [
        {
            "id": 1,
            "updatedAt": "2024-02-21T17:43:27.716Z",
            "createdAt": "2024-02-21T17:43:27.716Z",
            "comment": "강의 너무 좋아요!!!",
            "likeCount": 0
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

누가 작성했는지까지 포함하겠습니다.

• comments.service.ts

paginateComments(
    dto: PaginateCommentsDto,
    postId: number,
) {
    return this.commonService.paginate(
      dto,
      this.commentsRepository,
      {
          where: {
              post: {
                    id: postId,
              }
          },
          relations: { // 추가
                author: true
          }
      },
      `posts/${postId}/comments`,
    );
}

{
    "data": [
        {
            "id": 1,
            "updatedAt": "2024-02-21T17:43:27.716Z",
            "createdAt": "2024-02-21T17:43:27.716Z",
            "comment": "강의 너무 좋아요!!!",
            "likeCount": 0,
            "author": {
                "id": 4,
                "updatedAt": "2024-02-18T02:33:34.030Z",
                "createdAt": "2024-02-18T02:33:34.030Z",
                "nickname": "codefactory123",
                "email": "codefactory123@codefactory.ai",
                "role": "USER"
            }
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

이번에는 특정 Post의 comment정보를 가져오는 요청을 해보겠습니다.

{
    "id": 1,
    "updatedAt": "2024-02-21T17:43:27.716Z",
    "createdAt": "2024-02-21T17:43:27.716Z",
    "comment": "강의 너무 좋아요!!!",
    "likeCount": 0
}

해당 요청에도 override 기능을 추가해보겠습니다.

• comments.service.ts

async getCommentById(id: number) {
    const comment = await this.commentsRepository.findOne({
        where: {
              id,
        },
        relations: { // 추가
              author: true
        }
    });
    if (!comment) throw new BadRequestException(`id: ${id} Comment는 존재하지 않습니다. `);
    return comment;
}

그리고 override 부분에서 계속해서 author: true가 반복됩니다. 따라서 묶어주도록 하겠습니다. FindManyOptions 기능을 이용하겠습니다.

• comments/const/default-comments-find-options.const.ts

import { FindManyOptions } from "typeorm";
import { CommentsModel } from "../entity/comments.entity";

export const DEFAULT_COMMENT_FIND_OPTIONS: FindManyOptions<CommentsModel> = {
    relations: {
          author: true
    },
}

서비스 코드를 바꿔줍니다.

• comments.service.ts

paginateComments(
    dto: PaginateCommentsDto,
    postId: number,
) {
    return this.commonService.paginate(
        dto,
        this.commentsRepository,
        {
            ...DEFAULT_COMMENT_FIND_OPTIONS,
            where: {
                post: {
                      id: postId,
                }
            },
        },
        `posts/${postId}/comments`,
    );
}

async getCommentById(id: number) {
    const comment = await this.commentsRepository.findOne({
        ...DEFAULT_COMMENT_FIND_OPTIONS,
        where: {
              id,
        }
    });
    if (!comment) throw new BadRequestException(`id: ${id} Comment는 존재하지 않습니다. `);
    return comment;
}

{
    "data": [
        {
            "id": 1,
            "updatedAt": "2024-02-21T17:43:27.716Z",
            "createdAt": "2024-02-21T17:43:27.716Z",
            "comment": "강의 너무 좋아요!!!",
            "likeCount": 0,
            "author": {
                "id": 4,
                "updatedAt": "2024-02-18T02:33:34.030Z",
                "createdAt": "2024-02-18T02:33:34.030Z",
                "nickname": "codefactory123",
                "email": "codefactory123@codefactory.ai",
                "role": "USER"
            }
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

응답 데이터에서 보면 author정보는 사실상 id와 nickname만 필요합니다. 따라서 default option을 바꿔보도록 하겠습니다.

• default-comments-find-options.const.ts

import { FindManyOptions } from "typeorm";
import { CommentsModel } from "../entity/comments.entity";

export const DEFAULT_COMMENT_FIND_OPTIONS: FindManyOptions<CommentsModel> = {
    relations: {
          author: true
    },
    select: {
        author: {
            id: true,
            nickname: true,
        }
    }
}

같은 요청을 보내보겠습니다.

{
    "data": [
        {
            "id": 1,
            "updatedAt": "2024-02-21T17:43:27.716Z",
            "createdAt": "2024-02-21T17:43:27.716Z",
            "comment": "강의 너무 좋아요!!!",
            "likeCount": 0,
            "author": {
                "id": 4,
                "nickname": "codefactory123"
            }
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

🖊️PATCH: Comment API

• dto/update-comments-dto.ts

import { PartialType } from "@nestjs/mapped-types";
import { CreateCommentsDto } from "./create-comments.dto";

// CreateCommentsDto의 부분 상속
export class UpdateCommentsDto extends PartialType(CreateCommentsDto) {}

• comments.controller.ts

@Patch(':commentId')
@UseGuards(AccessTokenGuard)
async patchComment(
    @Param('commentId', ParseIntPipe) commentId: number,
    @Body() body: UpdateCommentsDto,
) {
    return this.commentsService.updateComment(
        body,
        commentId
    )
}

• comments.service.ts

async updateComment(
    dto: UpdateCommentsDto,
    commentId: number,
) {
      const comment = await this.commentsRepository.findOne({
        where: {
              id,
        }
    });
    if (!comment) throw new BadRequestException(`존재하지 않는 댓글입니다. `);

    // preload 기능
    const prevComment = await this.commentsRepository.preload({
        id: commentId, // id 기반의 commentId 들어오게 됨
        ...dto, // 나머지는 dto내용으로 변경
    });

    const newComment = await this.commentsRepository.save(
          prevComment,
    );

    return newComment;
}

포스트맨으로 테스트를 하겠습니다.

{
    "id": 1,
    "updatedAt": "2024-02-21T18:17:05.264Z",
    "createdAt": "2024-02-21T17:43:27.716Z",
    "comment": "NestJS 너무",
    "likeCount": 0
}

GET 요청으로 바꿔졌는지 확인을 해보겠습니다.

{
    "data": [
        {
            "id": 1,
            "updatedAt": "2024-02-21T18:17:05.264Z",
            "createdAt": "2024-02-21T17:43:27.716Z",
            "comment": "NestJS 너무",
            "likeCount": 0,
            "author": {
                "id": 4,
                "nickname": "codefactory123"
            }
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

🖊️DELETE: Comment API

• comments.controller.ts

@Delete(':commentId')
@UseGuards(AccessTokenGuard)
async deleteComment(
      @Param('commentId', ParseIntPipe) commentId: number,
) {
      return this.commentsService.deleteComment(commentId);
}

• comments.service.ts

async deleteComment(
      id: number
) {
    const comment = await this.commentsRepository.findOne({
        where: {
              id,
        }
    });
    if (!comment) throw new BadRequestException(`존재하지 않는 댓글입니다. `);

    await this.commentsRepository.delete(id);
    return id;
}

포스트맨으로 테스트를 해보겠습니다.

{
    "raw": [],
    "affected": 1
}

GET 요청으로 확인하면 4번이 사라진 것을 알 수 있습니다.

🖊️Path Parameter 검증 Middleware

현재 endpoint 경로는 post가 존재하면 에러를 던지는 코드는 존재하지 않습니다. 이 부분은 Middleware로 적용을 해보겠습니다. Middleware는 가장 앞단에서 먼저 필터링을 시작합니다.

컨트롤러에서 전반적으로 post가 존재하지 않으면 전부 BadRequestException을 던지도록 하겠습니다. 먼저 middleware 코드를 작성하겠습니다.

• comments/middleware/post-exists.middleware.ts

import { BadRequestException, Injectable, NestMiddleware } from "@nestjs/common";
import { NextFunction, Request, Response } from "express";
import { PostsService } from "src/posts/posts.service";

@Injectable()
export class PostExistsMiddleware implements NestMiddleware {

    constructor(
        private readonly postService: PostsService, 
    ) {}

    async use(req: Request, res: Response, next: NextFunction) {
        const postId = req.params.postId; // path parameter 안의 postId를 가져올 수 있습니다.
        if (!postId) throw new BadRequestException(`Post ID 파라미터는 필수입니다. `);
        const exists = await this.postService.checkPostExistsById(
              parseInt(postId),
        );
        if (!exists) throw new BadRequestException(`Post가 존재하지 않습니다. `);
        next(); // next를 해줘야 다음단계로 이동
    }
}

• posts.service.ts

async checkPostExistsById(id: number) {
    return this.postsRepository.exists({
        where: {
              id,
        },
    })
}

이제 PostExists Middleware를 등록하겠습니다. Middleware를 등록하려면 등록할 module로 가서 implements를 합니다.

• comments.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
              CommentsModel,
        ]),
        CommonModule,
        AuthModule,
        UsersModule,
        PostsModule, // 등록
    ],
    controllers: [CommentsController],
    providers: [CommentsService],
})
export class CommentsModule implements NestModule {

    configure(consumer: MiddlewareConsumer) {
        consumer
            .apply(PostExistsMiddleware) // 적용할 Middleware
            .forRoutes(CommentsController); // 적용할 Controller 전체
    }
}

포스트맨으로 테스트를 하겠습니다. 존재하지 않는 Post를 조회하겠습니다. 만약 comment와 관련된 endpoint로 199번을 조회하면 전부 동일한 에러 메세지를 보내줄 것입니다.

{
    "message": "Post가 존재하지 않습니다. ",
    "error": "Bad Request",
    "statusCode": 400
}

이런식으로 Middleware를 적용하는 것이 좋은 사례인 것을 알 수 있습니다.

이번에는 Pipe를 사용해보도록 하겠습니다.

REST API에서의 pipe와 Gateway에서의 API는 서로 다르지 않습니다. 공식문에서도 별로 다르지 않다고 합니다.

포스트맨으로 1번 사용자를 연결 후 JSON으로 아무런 값을 주지않고 create_chat을 해보도록 하겠습니다.

먼저 리스닝으로 exception과 receive_message를 활성화 해줍니다.

이렇게 나오면 안됩니다. 왜냐하면 어떠한 값이 뭐가 잘못 되었다고 나와야합니다. 그런데 InternalServerError가 나오게 됩니다.

우리는 이미 main.ts에서 Validation pipe를 전역적으로 작용하도록 만들었습니다. 하지만 작동을 하지 않습니다.

• main.ts

app.useGlobalPipes(new ValidationPipe({
    transform: true, // 변화는 해도 된다.
    transformOptions: {
          enableImplicitConversion: true // 임의로 변환하는 것을 허가한다.
    },
    whitelist: true,
    forbidNonWhitelisted: true,
}));

아쉽게도 글로벌 파이프를 전역적으로 작용하는 것은 오직 REST API 컨트롤러에만 적용이 됩니다. 그래서 우리가 Gateway를 사용할 때는 따로 Validation을 gateway에 추가해줘야 합니다.

따라서 @SubscribeMessage별로 @UsePipes를 적용해야합니다.

• chats.gateway.ts

@UsePipes(new ValidationPipe({
    transform: true, // 변화는 해도 된다.
    transformOptions: {
          enableImplicitConversion: true // 임의로 변환하는 것을 허가한다.
    },
    whitelist: true,
    forbidNonWhitelisted: true,
}))
@SubscribeMessage('create_chat')
async createChat(
    @MessageBody() data: CreateChatDto,
    @ConnectedSocket() socket: Socket,
) {
    const chat = await this.chatsService.createChat(
          data, 
    );
}

포스트맨으로 다시 보내도 에러가 발생합니다.

현재 에러의 위치를 보면 validation.pipe로 나옵니다. 즉, dto에서는 통과가 되었다는 것입니다. 하지만 Bad Request Exception이 메세지로 전달이 되지않고 터져버렸습니다.

왜냐하면 우리는 에러를 던질 때 WsException으로 던져야합니다. 하지만 class-validator는 기본적으로 REST API를 위해서 설계가 된것이기 때문에 모든 Expection들이 HTTP Excetpion을 extends하고 있습니다.

하지만 WsException은 HTTP Exception을 extends하고 있지 않습니다. 그래서 다음과 같은 에러가 발생한 것입니다.

그러면 우리는 HTTP Exception들이 발생했을 때, WsException으로 변환해주는 코드를 작성하면 되는 것입니다.

🖊️Exception Filter 적용

이어서 HTTP Exception들이 발생했을 때, WsException으로 변환해주는 코드를 작성하겠습니다.

Exception Filter에서 HTTP Exception을 모두 잡아서 WsException으로 바꿔주면 에러들을 전부 잡을 수 있습니다.

common 폴더에서 작업을 진행하겠습니다.

• common/exception-filter/socket-catch-http.exception-filter.ts

@Catch(HttpException)
export class SocketCatchHttpExceptionFilter extends BaseWsExceptionFilter<HttpException> {
    // BaseWsExceptionFilter를 상속하면 Ws관련 Exception을 만들 수 있다.

    catch(exception: HttpException, host: ArgumentsHost): void {
        super.catch(exception, host);

        const socket = host.switchToWs().getClient(); // 소켓 가져오기
        socket.emit( // 현재 소켓에다가만 emit하기
            'exception', // 이벤트 이름
            {    
                  // 실제 응답에서 받는 {메세지 형태들}
                  data: exception.getResponse(),
            }
        )
    }
}

Exception Filter를 적용하겠습니다.

• chats.gateway.ts

@UsePipes(new ValidationPipe({
    transform: true,
    transformOptions: {
          enableImplicitConversion: true
    },
    whitelist: true,
    forbidNonWhitelisted: true,
}))
@UseFilters(SocketCatchHttpExceptionFilter) // 적용
@SubscribeMessage('create_chat')
async createChat(
    @MessageBody() data: CreateChatDto,
    @ConnectedSocket() socket: Socket,
) {
    const chat = await this.chatsService.createChat(
          data, 
    );
}

포스트맨으로 테스트를 하겠습니다.

User 1과 User 2모두 리스너를 exception, receive_message를 열겠습니다. 그리고 create_chat을 실행하면 에러가 2개가 나옵니다.

이유는 super.catch() 때문입니다. 따라서 해당 코드를 삭제합니다. 이후에 다시 똑같은 방법으로 테스트를 하게되면

다음 에러 메세지는 User 1번에게만 가게 됩니다. User 2번은 어떠한 에러 메세지를 받지 못합니다. 왜냐하면 연결된 사용자한테만 가는 emit 때문입니다.

즉, Gateway에서는 Pipe를 적용하기 위해서는 각각의 메소드 위에다가 적용을 해줘야합니다.

🖊️Guard 적용

이번에는 Guard를 적용해보겠습니다. REST API에서 적용한 방법과 동일합니다.

• auth/guard/socket/socket-bearer-token.guard.ts

@Injectable()
export class SocketBearerTokenGuard implements CanActivate {

    constructor(
        private readonly authService: AuthService,
         private readonly userService: UsersService,
    ) {}

    async canActivate(context: ExecutionContext): Promise<boolean> {
        // 지금 연결해서 사용하고 있는 소켓
        const socket = context.switchToWs().getClient();

        // 헤더 가져오기
        const headers = socket.handshake.headers;

        // Bearer xxx
        const rawToken = headers['authorization'];
        if (!rawToken) throw new WsException('토큰이 없습니다. ');

        const token = this.authService.extractTokenFromHeader(
            rawToken,
            true
        );

        const payload = this.authService.verifyToken(token);
        const user = await this.userService.getUserByEmail(payload.email);

        socket.user = user;
        socket.token = token;
        socket.tokeType = payload.tokenType;
    }
}

이제 try catch로 묶겠습니다. 왜냐하면 기본적으로 HTTP Exception을 주기 때문에 WsException으로 변경을 해줘야 합니다.

@Injectable()
export class SocketBearerTokenGuard implements CanActivate {

    constructor(
        private readonly authService: AuthService,
         private readonly userService: UsersService,
    ) {}

    async canActivate(context: ExecutionContext): Promise<boolean> {
        const socket = context.switchToWs().getClient();
        const headers = socket.handshake.headers;
        const rawToken = headers['authorization'];
        if (!rawToken) throw new WsException('토큰이 없습니다. ');

        try {
            const token = this.authService.extractTokenFromHeader(
                rawToken,
                true
            );

            const payload = this.authService.verifyToken(token);
            const user = await this.userService.getUserByEmail(payload.email);

            socket.user = user;
            socket.token = token;
            socket.tokeType = payload.tokenType;
            return true;
        } catch (error) {
              throw new WsException('토큰이 유효하지 않습니다.')
        }
    }
}

chats.module.ts에서 provider로 등록을 하겠습니다.

• chats.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
              ChatsModel,
              MessagesModel,
        ]),
        CommonModule,
        AuthModule,
          UsersModule,
    ],
    controllers: [
        ChatsController,
        MessagesController,
    ],
    providers: [
        ChatsGateway,
        ChatsService,
        ChatsMessagesService,
    ],
})
export class ChatsModule {}

이제 chats.gateway.ts에 적용을 하겠습니다.

• chats.gateway.ts

@UsePipes(new ValidationPipe({
    transform: true,
    transformOptions: {
          enableImplicitConversion: true
    },
    whitelist: true,
    forbidNonWhitelisted: true,
}))
@UseFilters(SocketCatchHttpExceptionFilter)
@UseGuards(SocketBearerTokenGuard) // 추가
@SubscribeMessage('create_chat')
async createChat(
    @MessageBody() data: CreateChatDto,
      // 인터섹션: user가 UsersModel이라고 존재한다.
      // 토큰이 통과되면 user가 있다는 것을 알 수 있다.
    @ConnectedSocket() socket: Socket & {user: UsersModel}, 
) {
    const chat = await this.chatsService.createChat(
          data, 
    );
}

포스트맨으로 테스트를 하겠습니다. 로그인을 하지 않고 create_chat을 누르면 예상한대로 나옵니다.

로그인을 하고 응답받은 accessToken을 Headers에 넣어주겠습니다.

따라서 REST API에서 적용한 것처럼 똑같이 Gateway에서도 Guard를 적용할 수 있는 것을 알 수 있습니다.

🖊️decorator 기반 로직 변경

나머지 기능을 완성하겠습니다. enter_chat에도 Guard, Filter, Pipe를 적용하겠습니다. 로그인을 해야만 접근이 가능하도록 만들겠습니다.

또한 send_message에도 동일하게 적용을 하겠습니다.

• chats.gateway.ts

@UsePipes(new ValidationPipe({
    transform: true,
    transformOptions: {
          enableImplicitConversion: true
    },
    whitelist: true,
    forbidNonWhitelisted: true,
}))
@UseFilters(SocketCatchHttpExceptionFilter)
@UseGuards(SocketBearerTokenGuard)
@SubscribeMessage('send_message')
async sendMessage(
.
.
@UsePipes(new ValidationPipe({
    transform: true,
    transformOptions: {
    enableImplicitConversion: true
    },
    whitelist: true,
    forbidNonWhitelisted: true,
}))
@UseFilters(SocketCatchHttpExceptionFilter)
@UseGuards(SocketBearerTokenGuard)
@SubscribeMessage('enter_chat')
async enterChat(

추가적으로 CreateMessageDto에서 authorId를 number로 받고 있었습니다. 이 또한 제거를 하고 직접 받도록 하겠습니다.

• chats/messages/dto/create-message.dto.ts

import { PickType } from "@nestjs/mapped-types";
import { MessagesModel } from "../entities/messages.entity";
import { IsNumber } from "class-validator";

export class CreateMessagesDto extends PickType(MessagesModel, [
      'message',
]) {
    @IsNumber()
    chatId: number;

      // 제거
}

• messages.service.ts

async createMessage(
    dto: CreateMessagesDto,
    authorId: number
) {
    const message = await this.messagesRepository.save({
        chat: {
              id: dto.chatId,
        },
        author: {
              id: authorId, // 변경
        },
        message: dto.message,
    });
    return this.messagesRepository.findOne({
        where: {
              id: message.id,
        },
        relations: {
              chat: true,
        }
    });
}

• chats.gateway.ts

@UsePipes(new ValidationPipe({
    transform: true, // 변화는 해도 된다.
    transformOptions: {
          enableImplicitConversion: true // 임의로 변환하는 것을 허가한다.
    },
    whitelist: true,
    forbidNonWhitelisted: true,
}))
@UseFilters(SocketCatchHttpExceptionFilter)
@UseGuards(SocketBearerTokenGuard)
@SubscribeMessage('send_message')
async sendMessage(
    @MessageBody() dto: CreateMessagesDto,
    @ConnectedSocket() socket: Socket & {user: UsersModel}, // 변경
) {
    const chatExists = await this.chatsService.checkIfChatExists(
          dto.chatId,
    );

    if (!chatExists) {
        throw new WsException(
              `존재하지 않는 채팅방입니다. Chat ID : ${dto.chatId}`,
        );
    }

    const message = await this.messagesService.createMessage(
        dto,
        socket.user.id
    );
    socket.to(message.chat.id.toString()).emit('receive_message', message.message);
}

다음과 같이 바꾸는 이유는 엑세스 토큰으로 부터 사용자 정보를 받아오기 위해서 입니다.

🖊️AccessToken을 매번 검증할때의 문제

지금부터는 accessToken을 적용하는 문제에 대해서 알아보겠습니다.

로그인을 하게 되면 accessToken과 refreshToken을 제공합니다. accessToken의 경우 5분입니다. 그 이후에는 만료가 되어서 다시 refreshToken으로 재발급을 받아야합니다.

포스트맨의 경우 connection을 하게되면 바꿀 수 없게 되어버립니다.

그럼 5분 안으로는 소통이 가능하지만, 그 이후 만료가 되면 토큰이 유효하지 않습니다. 에러를 던지게 됩니다. 그래서 매번 무엇인가를 검증을 한다면 Guard를 사용하는 것이 맞습니다.

하지만 Bearer Token 검증을 통해 사용자와의 socket과 연결에는 매번 Guard를 이용한 검증을 할 필요가 없습니다.

이제부터 사용자를 어떻게 각각의 소켓과 연결하는지를 알아보겠습니다.

🖊️Socket에서 사용자 정보 저장

먼저 chats.gateway.ts에 있는 Guard를 모두 지워줍니다.

• chats.gateway.ts

@WebSocketGateway({
    // ws:localhost:3000/chats
    namespace: '/chats',
})
export class ChatsGateway implements OnGatewayConnection{

    constructor(
        private readonly chatsService: ChatsService,
         private readonly messagesService: ChatsMessagesService
    ){}

    @WebSocketServer()
    server: Server;

    handleConnection(socket: Socket) {
          console.log(`on connect called : ${socket.id}`);
    }

    @UsePipes(new ValidationPipe({
        transform: true,
        transformOptions: {
              enableImplicitConversion: true
        },
        whitelist: true,
        forbidNonWhitelisted: true,
    }))
    @UseFilters(SocketCatchHttpExceptionFilter)
    @SubscribeMessage('enter_chat')
    async enterChat(
        @MessageBody() data: EnterChatDto,
         @ConnectedSocket() socket: Socket & {user: UsersModel},
    ) {  
        for (const chatId of data.chatIds) {
            const exists = await this.chatsService.checkIfChatExists(
                  chatId,
            );

            if (!exists) {
                throw new WsException({
                    code: 100,
                    message: `존재하지 않는 chat 입니다. chatId: ${chatId}`,
                });
            }
        }
        socket.join(data.chatIds.map((x) => x.toString()));
    }

    @UsePipes(new ValidationPipe({
        transform: true,
        transformOptions: {
              enableImplicitConversion: true
        },
        whitelist: true,
        forbidNonWhitelisted: true,
    }))
    @UseFilters(SocketCatchHttpExceptionFilter)
    @SubscribeMessage('create_chat')
    async createChat(
        @MessageBody() data: CreateChatDto,
         @ConnectedSocket() socket: Socket & {user: UsersModel},
    ) {
        const chat = await this.chatsService.createChat(
              data, 
        );
    }

    @UsePipes(new ValidationPipe({
        transform: true,
        transformOptions: {
              enableImplicitConversion: true
        },
        whitelist: true,
        forbidNonWhitelisted: true,
    }))
    @UseFilters(SocketCatchHttpExceptionFilter)
    @SubscribeMessage('send_message')
    async sendMessage(
          @MessageBody() dto: CreateMessagesDto,
           @ConnectedSocket() socket: Socket & {user: UsersModel},
    ) {
        const chatExists = await this.chatsService.checkIfChatExists(
              dto.chatId,
        );

        if (!chatExists) {
            throw new WsException(
                  `존재하지 않는 채팅방입니다. Chat ID : ${dto.chatId}`,
            );
        }
        const message = await this.messagesService.createMessage(
              dto,
              socket.user.id
        );
        socket.to(message.chat.id.toString()).emit('receive_message', message.message);
    }
}

Guard를 지우고 어떻게 사용자 정보를 가지고 올 수 있을까? 

Socket이라는 것은 연결이 되면 서로 Pipe같은 것이 생깁니다. 그래서 한번 연결되어 있으면 그 연결은 지속이 됩니다.

async handleConnection(socket: Socket & {user: UsersModel}) {
    console.log(`on connect called : ${socket.id}`); // 어떤 id 소켓이 연결됨?

      // 임시 테스트
    const user = await this.usersService.getUserByEmail('codefactory@codefactory.ai');
    socket.user = user; // 소켓에 사용자 정보 넣기
}

따라서 1번 연결되고 나면 socket에는 메세지를 보낼 때 계속해서 유지가 됩니다. 이것은 디버깅을 통해서 socket에 들어있는 값을 확인해보면 알 수 있습니다.

따라서 REST API처럼 모든 곳에 Guard를 붙일 필요 없이, handleConnection에서 핸들링만 해주고 socket.user = user;로 넣어주면, 나머지 메세지를 보낼 때 소켓에 들어있는 값을 신뢰할 수 있게 됩니다.

또한 여기서는 중간에 에러가 발생하면 에러를 throw 하는 것보다는 연결을 끊어주겠습니다.

async handleConnection(socket: Socket & {user: UsersModel}) {
    console.log(`on connect called : ${socket.id}`); // 어떤 id 소켓이 연결됨?
    const headers = socket.handshake.headers; // 헤더 가져오기
    const rawToken = headers['authorization']; // Bearer xxx
    if (!rawToken) socket.disconnect(); // 토큰이 없으면 연결 끊기

    try {
        const token = this.authService.extractTokenFromHeader(
            rawToken,
            true
        );

        const payload = this.authService.verifyToken(token);
        const user = await this.usersService.getUserByEmail(payload.email);
        socket.user = user;
        return true;
    } catch (error) {
          socket.disconnect(); // 에러가 나면 연결 끊기
    }
}

포스트맨으로 로그인을 하고 토큰없이 connect를 하면 바로 연결이 끊기는 것을 알 수 있습니다.

🖊️Gateway Lifecycle Hooks

연결되었을 때 handleconnection을 통해서 특정 기능이 발생하도록 만들었습니다. 이것을 Lifecycle Hooks이라고 합니다. Lifecycle Hooks은 2개가 더 있습니다.

OnGatewayInit 입니다. OnGatewayInit는 afterInit 함수를 사용할 수 있게 만들어 줍니다. 이 함수는 실제 서버를 inject 받을 때 사용되는 함수이기도 하고, 그리고 Gateway가 초기화되었을 때 실행할 수 있는 함수 입니다.

• chats.gateway.ts

export class ChatsGateway implements OnGatewayConnection, OnGatewayInit{ // 추가

    constructor(
        private readonly chatsService: ChatsService,
         private readonly messagesService: ChatsMessagesService,
         private readonly usersService: UsersService,
         private readonly authService: AuthService,
    ){}

    @WebSocketServer()
    server: Server;

    afterInit(server: any) { // server: Server; 이것과 동일한 값을 받는다.
          console.log(`after gateway init`); // 로그 확인
    }

after gateway init 이후로 소켓 메세지들이 구독된것을 알 수 있습니다. 그래서 Gateway가 시작했을 때 특정 함수 또는 로직을 실행하고 싶으면 afterInit이라는 Lifecycle Hooks을 사용하면 됩니다.

다음은 연결이 끊긴 이후를 관리하는 OnGatewayDisconnect입니다.

export class ChatsGateway implements OnGatewayConnection, OnGatewayInit, OnGatewayDisconnect{
.
.
handleDisconnect(socket: Socket) {
      console.log(`on disconnect called : ${socket.id}`);
}

포스트맨으로 연결 후 disconnect를 하겠습니다.

이 HTTP통신의 단점은 단방향이라는 것입니다. client쪽에서 반드시 요청을 보내야 서버에서 응답을 보내주게 됩니다.

카카오톡의 경우 누군가가 메세지롤 보면 나는 카카오톡에게 요청을 보내지 않았지만 응답이 자동으로 오게됩니다.

따라서 웹소켓을 사용하게 되면 요청와 응답의 경계가 사라집니다.

웹소켓을 사용하면 파이프가 생기게 됩니다. 이를 통해서 서버에서 어떤일이 발생하면 사용자에게 알려 줄 수 있게 됩니다.

🖊️Socket IO 이론

Socket IO는 Websocket 프로토콜을 사용해서 만든 low-latency(낮은 지연 시간), bidrectional(양방향 소통), event based(이벤트 기반)으로 클라이언트와 서버가 통신 할 수 있게 해주는 기능입니다.

즉, web socket위에 소켓 IO를 올린 것 입니다. 예를 들면 nest.js가 express.js를 사용하는 것과 비슷합니다.

먼저 기본적인 통신 방법에 대해서 알아보겠습니다.

기본적인 통신

• 서버 코드

import { Server } from "socket.io";

const io = new Server(3000); // Socket.io 서버 생성

// 클라이언트가 서버에 연결되면 실행되는 함수 정의
// on 함수를 실행하면 특정 이벤트 (첫 번째 파라미터)가 
// 있을 때 콜백 함수를 실행 할 수 있으며
// 해당 콜백 함수는 메세지를 첫번째 파라미터로 받는다.
// connection 이벤트는 미리 정의된 이벤트로 "연결 됐을때" 실행된다.
io.on("connection", (socket) => {
      // 메세지 보내기
      // 첫번째 파라미터는 이벤트 이름
      // 두번째~이후 무한 파라미터 메시지
    socket.emit("hello_from_server", "this is message for server");

      // hello_from_client 이벤트 메세지 받기(on 리스닝)
      socket.on("hello_from_client", (message) => {
        console.log(message); // 클라이언트로 부터 온 메세지
    });
});

• 클라이언트 코드

ws : websockt 약자

import { io } from "socket.io-client";

const socket = io("ws://localhost:3000"); // Socket.io 서버에 연결

// "hello_from_client" 이벤트를 듣고 있는 소켓에 메세지 보내기
socket.emit("hello_from_client", "this is message for client");

// "hello_from_server" 이벤트로 메세지가 오면 함수 실행(on 리스닝)
socket.on("hello_from_server", (message) => {
    console.log(message); // 서버로 부터 온 메세지
});

웹소켓은 기본적으로 양방향 통신입니다. 하지만 연결을 할 때 만큼은 클라이언트에서 서버에게 연결을 해야합니다. 그 이후에 누가 먼저랄거 없이 메세지를 보내면 됩니다.

위의 코드에서 on은 특정 이벤트를 리스닝(받는)하는 함수입니다. 반대로 emit은 보내는 함수입니다.

따라서 양방향에서 서로 on으로 보내고 emit을 통해서 받으면서 양방향 통신을 하게 됩니다.

Acknowledgment

메세지를 잘 받았다는 OK신호를 보내는 것입니다. 보냈을 경우 상대방이 잘 받았는지 확인을 위해 존재합니다.

• 서버 코드

// "hello" 룸에 "world"라는 메세지를 보낸다.
// 세번째 파라미터는 콜백 함수로 acknowledgment가 오면 실행
socket.emit("hello", "world", (response) => {
    console.log(response); // 수신양호
});

• 클라이언트 코드

// 첫번쨰 파라미터에 이벤트 이름을 입력하고
// 두번째 파라미터에 메세지가 왔을때 실행할 함수를 입력한다.
// 함수는 첫번쨰 파라미터로 메세지, 두번째 파라미터로
// 수신 응답을 할 수 있는 콜백 함수가 주어진다.
socket.on("hello", (message, callback) => {
    console.log(message); // "world"
      callback("수신 양호");
});

Namespace와 Room

이 부분은 소켓을 정리하는 부분입니다.

우리가 처음 시작하면 기본으로 설정하지 않아도 emit을 사용하면 /로 이동을 하게 됩니다.

그리고 각각의 namespace 내부에는 room으로 나눠지게 됩니다. 예를 들면 카카오의 각각의 톡방같은 개념이 Namespace입니다.

namespace가 /인 room1과 namespace가 /chat인 room1은 완전히 서로 다른 것입니다. 왜냐하면 namespace가 다르기 때문입니다. 따라서 완전히 다른 room입니다.

• 서버 코드

// of를 이용하면 namespace를 정할 수 있다.
// namespace는 일반적으로 라우트 형태를 따라 지정한다.
const chatNamespace = io.of("/chat");

// chatNamespace에 연결된 소켓만 아래 코드가 실행된다.
chatNamespace.on("connection", (socket) => {
    // 현재 연결된 socket을 room1에 연결한다.
      // 이 room1은 /chat namespace에만 존재하는 room1이다.
      socket.join("room1");
      chatNamespace.to("room1").emit("hello", "world");
});

// /noti namespace를 생성
const notiNamespace = io.of("/noti");

// /noti namespace에 연결된 소켓만 실행된다.
notiNamesapce.on("connection", (socket) => {
    // 이 room1은 /chat namespace의 room1과 전혀 관련이 없다.
      // 다른 namespace의 room1에는 들어갈 수 없다.
      socket.join("room1");

      // 역시나 /noti namespace의 room1에만 메세지를 보낸다.
      notiNamespace.to("room1").emit("hello", "codefactory");
});

• 클라이언트 코드

// 기본 namespace로 연결한다 -> /
const socket = io("https://localhost:3000");

// chat namespace로 연결한다. -> /chat
const chatSocket = io("https://localhost:3000/chat");

// noti namespace로 연결한다. -> /noti
const chatSocket = io("https://localhost:3000/noti");

// client에서는 room을 정할 수 있는 기능이 없다.
// room은 서버에서만 socket.join()을 실행해서 특정 룸에
// 들어가도록 할 수 있다.

emit & broadcast

broadcast는 나를 제외한 모두에게 메세지를 보내는 것입니다.

// 연결된 모든 socket들에 메세지를 보낸다.
socket.emit("hello", "world");
socket.to("room1").emit("hello", "world"); // 예시

// 나 뺴고 모두에게 메세지를 보낸다.
socket.broadcast.emit("hello", "world");

지금까지는 SocketIO를 생으로 작업하는 코드입니다. 다음부터는 nest.js에서 지원하는 소켓코드를 학습하겠습니다.

🖊️Gateway 생성하고 메세지 리스닝

코드로 websocket을 다뤄보도록 하겠습니다. 아래 3가지(@nestjs/websockets @nestjs/platform-socket.io socket.io)를 설치합니다.

yarn add @nestjs/websockets @nestjs/platform-socket.io socket.io

이후에 package.json으로 이동해서 버전을 맞춰주도록 하겠습니다.

이렇게 해주는 이유는 REST API의 경우에는 상관이 없지만 양방향 통신을 할 경우에는 버전의 호환성 문제가 생기기 때문입니다. 싱크를 맞춰주는 것으로 이해하면 됩니다.

yarn add @nestjs/common @nestjs/core @nestjs/jwt @nestjs/platform-express @nestjs/platform-socket.io @nestjs/typeorm @nestjs/websockets

리소스를 생성하겠습니다. WebSockets으로 하면 훨씬 간단하지만 저희는 직접 REST API로 구현을 해보면서 깊게 이해해보겠습니다.

nest g resource -> chats -> REST API -> no

chats에 Socket IO를 연결하는 gateway파일을 생성하겠습니다.

• chats/chats.gateway.ts

import { WebSocketGateway } from "@nestjs/websockets";

@WebSocketGateway({
    // ws:localhost:3000/chats
    namespace: '/chats',
})
export class ChatGateway {

}

이제 on connect설정을 하겠습니다.

import { OnGatewayConnection, WebSocketGateway } from "@nestjs/websockets";
import { Socket } from "socket.io";

@WebSocketGateway({
    namespace: '/chats',
})
export class ChatGateway {

    handleConnection(socket: Socket) {
          console.log(`on connect called : ${socket.id}`); // 어떤 id 소켓이 연결됨?
    }
}

이벤트 리스너 코드를 작성하겠습니다. 기본 클래식 코드는 socket.on()으로 시작합니다. 하지만 nest.js에서는 어노테이션을 사용해서 간결하게 만들어줍니다.

아래 추가된 코드는 기본 코드와 동일한 의미를 가지는 코드입니다.

@WebSocketGateway({
    namespace: '/chats',
})
export class ChatGateway {

    handleConnection(socket: Socket) {
          console.log(`on connect called : ${socket.id}`);
    }

      // 기본 코드와 동일 -> socket.on('send_message', (message) => {console.log(message)});
    @SubscribeMessage('send_message')
    sendMessage(
        @MessageBody() message: string,
    ) {
          console.log(message);
    }
}

gateway를 만들었으니 chats.module.ts에 등록을 해줘야 합니다.

• chats.module.ts

import { Module } from '@nestjs/common';
import { ChatsService } from './chats.service';
import { ChatsController } from './chats.controller';
import { ChatsGateway } from './chats.gateway';

@Module({
    controllers: [ChatsController],
    providers: [
        ChatsGateway, // 등록
        ChatsService
    ],
})
export class ChatsModule {}

그러면 로그에서 재미있는 것을 발견할 수 있습니다.

ChatsGateway가 send_message를 구독했다는 것을 알 수 있습니다. 이제 포스트맨으로 구독을 테스트 하겠습니다.

new를 누릅니다.

주소: ws://{{host}}/chats

현재 우리는 send_message라는 이벤트에 우리는 subscribe를 했습니다. 여기서 메세지를 보낼려면 client에서는 emit을 해야합니다.

포스트맨으로 client에서 Server에게 emit을 하는 방법은 간단합니다. 아래와 같이 진행하면 됩니다.

그러면 Client 쪽에서 emit을 통해서 보낸 메세지가 Server에서는 on을 통해서 받아지는 것을 알 수 있습니다.

🖊️서버에서 메시지 보내기

Client에서 emit을 통해서 받은 메세지를 Client 전체에다가 메시지를 보낼려면 chats.gateway.ts에서 Server를 inject 해야합니다.

Inject를 하게 되면 nest.js가 알아서 server에 Server 객체를 넣어줍니다. 여기서 server는 우리가 이전에 기본 형태로 만들었던 const io = new Server(3000); 과 동일합니다.

• chats.gateway.ts

import { MessageBody, OnGatewayConnection, SubscribeMessage, WebSocketGateway, WebSocketServer } from "@nestjs/websockets";
import { Socket, Server } from "socket.io";

@WebSocketGateway({
    namespace: '/chats',
})
export class ChatsGateway implements OnGatewayConnection{

      @WebSocketServer()
    server: Server; // Nest.js가 Server 객체를 주입해준다.

    handleConnection(socket: Socket) {
          console.log(`on connect called : ${socket.id}`);
    }

    @SubscribeMessage('send_message')
    sendMessage(
        @MessageBody() message: string,
    ) {
          this.server.emit('receive_message', 'hello_from_server'); // 변경
    }
}

코드로 알 수 있지만, server에서 receive_message 이벤트를 emit해서 hello_from_server를 메세지로 보내주고 있습니다.

포스트맨으로 테스트를 하겠습니다. 포스트맨으로 서버에서 보내는 값을 리스닝을 해보겠습니다.

연결을 해줍니다.

send 메시지를 하자마자 receive 메시지가 온 것을 알 수 있습니다.

이번에는 여러개의 Socket IO를 만들어 보겠습니다. 왜냐하면 서버에서 메시지를 보내면 연결되어 있는 모든 client에게 메시지가 가기 때문입니다.

User 2를 만들고 리스너를 활성화 시킵니다

그리고 User 1은 disconnect를 하고 다시 연결하겠습니다. 여기서 알 수 있는 것은 2개의 소켓은 완전히 다른 것임을 알 수 있습니다.

소켓을 1개더 추가해서 총 3개를 만들겠습니다. 현재 완전히 다른 ID로 소켓이 연결되었습니다. 즉 /chats으로 연결되어 있는 소켓이 3개라는 의미입니다.

만약 User 1으로 이동해서 send_message를 보내게 되면?
-> User 1, User 2, User 3 모두 receive_message를 받게된다!

🖊️Room 활용

이번에는 User가 총 3명이 있는데, 특정 Room에 있는 사용자만 메세지를 받을 수 있도록 만들어 보겠습니다.

• chats/chats.gateway.ts

@WebSocketGateway({
    namespace: '/chats',
})
export class ChatsGateway implements OnGatewayConnection{

    @WebSocketServer()
    server: Server;

    handleConnection(socket: Socket) {
          console.log(`on connect called : ${socket.id}`);
    }

    @SubscribeMessage('enter_chat')
    enterChat(
        // Room의 Id를 리스트로 받는다.
        @MessageBody() data: number[],
        // 지금 현재 연결된 소켓
        @ConnectedSocket() socket: Socket,
    ) {
        for (const chatId of data) {
            // socket.join()
            // join은 string만 받는다.
            socket.join(chatId.toString());
        }
    }

    @SubscribeMessage('send_message')
    sendMessage(
            @MessageBody() message: string,
    ) {
          this.server.emit('receive_message', 'hello_from_server');
    }
}

이제 보내고 싶은 Room에다가 보내는 코드를 추가하겠습니다. 지금 현재의 단점은 sendMessage()를 보면 모든 연결된 소켓에게 전부 메시지를 보내고 있습니다. 따라서 보내고 싶은 곳만 골라서 보내겠습니다.

@SubscribeMessage('send_message')
sendMessage(
      @MessageBody() message: string,
) {
      this.server.in(
          // message.chatId에 해당하는 Room
          message.chatId.toString()
    ).emit('receive_message', 'hello_from_server');
}

포스트맨으로 테스트를 하겠습니다. 서버를 재실행 할때마다 당연히 client 연결도 끊어지기 때문에 다시 연결해 줍니다.

User 1을 1번방에, User 2는 2번방에, User 3은 1번방에 넣겠습니다.

이제 User 1에서 메세지를 보내겠습니다. 메세지를 보내는 형태는 @MessageBody() message: {message: string, chatId: number}, 형태로 바뀌어져서 JSON 형태로 작성을 해줍니다.

1, 3번 User는 메시지를 받고 2번 사용자는 메시지를 안받는 결과가 나왔습니다.

이번에는 client에서 받아온 메세지를 그대로 받아오도록 만들겠습니다.

@SubscribeMessage('send_message')
sendMessage(
      @MessageBody() message: string,
) {
      this.server.in(
          message.chatId.toString()
    ).emit('receive_message', message.message); // 변경
}

이번에는 disconnect 후 다시 연결해서 User 1(1, 2) / User 2(2) / User 3(1)방에 넣도록 하겠습니다.

User 1이 다음과 같이 send_message를 하게되면, User 1번과 User 3번이 메세지를 받습니다.

이번에는 User 1번이 2번 방에 보내보도록 하겠습니다.

User 1과 User 2가 메세지를 받습니다.

이로써 특정 Room에 들어있는 User에게만 고르는 것을 알아보았습니다.

🖊️BroadCasting

BroadCasting을 적용해서 User 1이 1번방 또는 2번방으로 보내면, 나를 제외하고 메세지를 받도록 만들겠습니다.

@SubscribeMessage('send_message')
sendMessage(
      @MessageBody() message: string,
) {
      socket.to(message.chatId.toString()).emit('receive_message', message.message);
}

이전에 구현한 this.server는 연결된 서버 전체를 의미하기 때문에 따로 사용자를 구분하지 않고 모두에게 메시지 전달이 됩니다. 하지만 socket.to의 경우 나를 제외한 사람들에게 메세지가 전달됩니다.

포스트맨으로 테스트를 하겠습니다.

User 1(1, 2) / User 2(2) / User 3(1) 후, 다음과 같이 전송을 하게 되면,

1번 User에게는 receive_message는 오지 않고 3번 User에게 전달됩니다.

즉 여기서 알 수 있는 것은, this.server를 사용하면, in으로 필터링한 모든 소켓들에게 전부 다 보냅니다.

반면 socket을 이용해서 보내면 해당 소켓에 나를 제외한 사람들에게 보내게됩니다.

🖊️Chart Entity

지금부터 chat을 생성할 때는 복잡해집니다. 왜냐하면 해당 Room에 사용자가 존재하는지 이런 것들을 여러가지로 체크해야하기 때문입니다.

그리고 dto를 통해서 생성을 하도록 하겠습니다.

• chats/dto/create-chat.dto.ts

import { IsNumber } from "class-validator";

export class CreateChatDto {

    // 첫 번째 파라미터는 어떤 숫자들인지
    // 두 번쨰 파라미터는 각각 검증할 거야?
    @IsNumber({}, {each: true})
    userIds: number[];
}

• chats/chats.gateway.ts

@SubscribeMessage('create_chat')
createChat(
    @MessageBody() data: CreateChatDto,
    @ConnectedSocket() socket: Socket,
) {

}

그리고 Chats Entity를 생성하겠습니다. 그리고 반대쪽인 UsersModel에도 추가를 하겠습니다.

• chats/entities/chats.entity.ts

@Entity()
export class ChatsModel extends BaseModel {

    // 1명의 사용자는 N개의 채팅방에 들어간다.
    // 1개의 채팅방은 여러 사용자가 있다.
    @ManyToMany(() => UsersModel, (user) => user.chats)
      @JoinTable()
    users: UsersModel[];
}

• users/entities/users.entity.ts

@Entity()
export class UsersModel extends BaseModel {

      .
    .
    @ManyToMany(() => ChatsModel, (chat) => chat.users)
    chats: ChatsModel[];
}

2개중 1곳에 @JoinTable()을 만들어 주겠습니다. 왜냐하면 ManyToMany은 테이블을 3개로 관리합니다. 중간테이블이 추가되는 것입니다.

그리고 까먹지 말고 app.module.ts에 ChatsModel을 등록합니다. 그리고 Chat 서비스코드에 TypeORM을 사용할 것이기 때문에 chats.module.ts에 가서 TypeORM을 등록합니다.

• chats/chats.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
              ChatsModel,
        ])
    ],
    controllers: [ChatsController],
    providers: [
        ChatsGateway,
        ChatsService
    ],
})
export class ChatsModule {}

이제 서비스 코드에서 기능을 구현하겠습니다.

• chats.service.ts

@Injectable()
export class ChatsService {

    constructor(
        @InjectRepository(ChatsModel)
         private readonly chatRepository: Repository<ChatsModel>,
    ) {}


    async createChat(dto: CreateChatDto) {
        // await가 붙어있으면 async 필요
        const chat = await this.chatRepository.save({
            // 1, 2, 3
            // [{id:1}, {id:2}, {id:3}]
            users: dto.userIds.map((id) => ({id})),
        });

        return this.chatRepository.findOne({
            where: {
                  id: chat.id,
            },
        });
    }
}

• chats.gateway.ts

export class ChatsGateway implements OnGatewayConnection{

    constructor(
        private readonly chatsService: ChatsService,
    ){}
.
.
@SubscribeMessage('create_chat')
async createChat(
    @MessageBody() data: CreateChatDto,
    @ConnectedSocket() socket: Socket,
) {
    const chat = await this.chatsService.createChat(
          data, 
    );
}

포스트맨으로 1번 사용자와 2번 사용자가 같이있는 chat 방을 만들어 보도록 하겠습니다.

select * from chats_model_users_users_model;

🖊️Pagination Chat API 생성

채팅방을 페이지네이션하는 기능을 만들겠습니다. dto를 생성하고 서비스 코드에 적용을 하겠습니다.

• chats/dto/paginate-chat.dto.ts

import { BasePaginationDto } from "src/common/dto/base-pagination.dto";

export class PaginateChatDto extends BasePaginationDto {}

• chats.service.ts

@Injectable()
export class ChatsService {

    constructor(
       @InjectRepository(ChatsModel)
       private readonly chatRepository: Repository<ChatsModel>,
       private readonly commonService: CommonService,
    ) {}

      // 페이지네이션 적용
    paginateChats(dto: PaginateChatDto) {
        return this.commonService.paginate(
            dto,
            this.chatRepository,
            {}, // overrideOption
            'chats'
        );
    }

      .
    .

• chats.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
              ChatsModel,
        ]),
        CommonModule, // 추가 -> CommonService 사용하기 때문에
    ],
    controllers: [ChatsController],
    providers: [
        ChatsGateway,
        ChatsService
    ],
})
export class ChatsModule {}

컨트롤러로 이동해서 페이지네이션 API를 작성하겠습니다.

• chats.controller.ts

@Get()
paginateChat(
      @Query() dto: PaginateChatDto
) { 
      return this.chatsService.paginateChats(dto);
}

포스트맨으로 테스트를 하겠습니다.

잘 생성이 되는 것을 알 수 있습니다.

{
    "data": [
        {
            "id": 1,
            "updatedAt": "2024-02-17T15:43:39.735Z",
            "createdAt": "2024-02-17T15:43:39.735Z"
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

하지만 어떤 사용자들이 존재하는지 또한 보고 싶습니다.

• chats.service.ts

paginateChats(dto: PaginateChatDto) {
    return this.commonService.paginate(
      dto,
      this.chatRepository,
      {
          relations: { // 추가
                users: true,
          }
      },
      'chats'
    );
}

{
    "data": [
        {
            "id": 1,
            "updatedAt": "2024-02-17T15:43:39.735Z",
            "createdAt": "2024-02-17T15:43:39.735Z",
            "users": [
                {
                    "id": 1,
                    "updatedAt": "2024-01-26T05:58:10.800Z",
                    "createdAt": "2024-01-26T05:58:10.800Z",
                    "nickname": "codefactory",
                    "email": "codefactory@codefactory.ai",
                    "role": "USER"
                },
                {
                    "id": 2,
                    "updatedAt": "2024-01-26T06:48:51.110Z",
                    "createdAt": "2024-01-26T06:48:51.110Z",
                    "nickname": "codefactory1",
                    "email": "codefactory1@codefactory.ai",
                    "role": "USER"
                }
            ]
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

🖊️Enter Chat 이벤트 업데이트 & WSException 던지기

• chats.gateway.ts

@SubscribeMessage('enter_chat')
enterChat(
    @MessageBody() data: number[],
    @ConnectedSocket() socket: Socket,
) {  
    socket.join(data.map((x) => x.toString())); // 한번에 join
}

다음과 같이 바꿔주도록 하겠습니다. 어차피 이전에 for 루핑을 통한 방법과 동일한 코드입니다. 한번에 모든 방들이 join이 되는 것 입니다.

이제는 enterChat하는 코드를 수정해보겠습니다. 먼저 enterChat에도 dto를 생성하겠습니다.

• chats/dto/enter-chat.dto.ts

import { IsNumber } from "class-validator";

export class EnterChatDto {

    @IsNumber({}, {each: true})
    chatIds: number[];
}

• chats.gateway.ts

@SubscribeMessage('enter_chat')
enterChat(
    @MessageBody() data: EnterChatDto, // 변경
    @ConnectedSocket() socket: Socket,
) {  
    socket.join(data.chatIds.map((x) => x.toString())); // 변경
}

그리고 chat을 join하려고 할때, 굳이 존재하지 않는 chat은 할 필요가 없습니다. 따라서 chat이 존재하는지 존재하지 않는지 확인하는 절차를 추가하겠습니다.

• chats.service.ts

.
.
async checkIfChatExists(chatId: number) {
    const exists = await this.chatRepository.exists({
        where: {
              id: chatId,
        },
    });
    return exists;
}

• chats.gateway.ts

@SubscribeMessage('enter_chat')
async enterChat(
    @MessageBody() data: EnterChatDto,
    @ConnectedSocket() socket: Socket,
) {  
    for (const chatId of data.chatIds) {
        const exists = await this.chatsService.checkIfChatExists(
              chatId,
        );

        if (!exists) throw new WsException({
            code: 100,
            message: `존재하지 않는 chat 입니다. chatId: ${chatId}`,
        });
    }

    socket.join(data.chatIds.map((x) => x.toString()));
}

포스트맨으로 테스트를 하겠습니다. 먼저 User 1 ~ 3번까지 연결을 합니다. 이후에는 존재하지 않는 chatId를 enter_chat 해보겠습니다. 현재 2번 chat은 존재하지 않습니다.

WsException은 exception이라는 이벤트로 받을 수 있습니다. exception으로 리스닝을 해줍니다.

이번에는 올바르게 넣어보도록 하겠습니다.

🖊️메세지 보내기 끝

1개의 Room에는 여러개의 message가 있을 수 있습니다. 따라서 MessagesModel을 생성하겠습니다.

또한 1명의 사용자만이 N개의 message를 작성할 수 있습니다.

• chats/messages/entities/messages.entity.ts

import { ChatsModel } from "src/chats/entities/chats.entity";
import { BaseModel } from "src/common/entity/base.entity";
import { ManyToOne } from "typeorm";

@Entity()
export class MessagesModel extends BaseModel {

    // N개의 메시지가 1개의 Chat방에 연결된다.
    @ManyToOne(() => ChatsModel, (chat) => chat.messages)
    chat: ChatsModel;

      // 1명의 사용자가 N개의 message를 작성한다.
      @ManyToOne(() => UsersModel, (user) => user.messages)
    author: UsersModel;

      @Column()
    @IsString()
    message: string;
}

이제 ChatsModel로도 이동을 해서 @OneToMany를 작성하겠습니다.

• chats/entities/chats.entity.ts

import { BaseModel } from "src/common/entity/base.entity";
import { UsersModel } from "src/users/entities/users.entity";
import { Entity, JoinTable, ManyToMany, OneToMany } from "typeorm";
import { MessagesModel } from "../messages/entities/messages.entity";

@Entity()
export class ChatsModel extends BaseModel {

    @ManyToMany(() => UsersModel, (user) => user.chats)
    @JoinTable()
    users: UsersModel[];

      // 추가
    @OneToMany(() => MessagesModel, (message) => message.chat)
    messages: MessagesModel;
}

• users/entites/users.entity.ts

@Entity()
export class UsersModel extends BaseModel {

      // 추가
    @OneToMany(() => MessagesModel, (message) => message.author)
    messages: MessagesModel;
}

마지막으로 잊지말고 app.module.ts에 MessagesModel을 등록합니다.

message 관련 서비스 코드를 작성하겠습니다.

• chats/messages/messages.service.ts

@Injectable()
export class ChatsMessagesService {

    constructor(
        @InjectRepository(MessagesModel)
         private readonly messagesRepository: Repository<MessagesModel>,
         private readonly commonService: CommonService,
    ) {}
}

메세지를 페이지네이션하는 코드를 만들겠습니다.

@Injectable()
export class ChatsMessagesService {

    constructor(
        @InjectRepository(MessagesModel)
         private readonly messagesRepository: Repository<MessagesModel>,
         private readonly commonService: CommonService,
    ) {}

      paginateMessages(
        dto: BasePaginationDto,
         overrideFindOptions: FindManyOptions<MessagesModel>,
    ) {
        return this.commonService.paginate(
            dto,
            this.messagesRepository,
            overrideFindOptions, // 외부에서도 받도록 만들기
            'message'
        )
    }
}

다음에는 createMessage를 만들겠습니다. 우선은 관련된 dto가 필요합니다.

• chats/messages/dto/create-messages.dto.ts

import { PickType } from "@nestjs/mapped-types";
import { MessagesModel } from "../entities/messages.entity";
import { IsNumber } from "class-validator";

export class CreateMessagesDto extends PickType(MessagesModel, [
    'message', // MessagesModel에서 message를 제외하고는 전부 객체이기 때문에 message만 골라서 상속을 받는다.
]) {
    @IsNumber()
    chatId: number;

    @IsNumber()
    authorId: number; // 원래는 작성자의 이름을 이렇게 주면 안된다. CC) accessToken -> 임시로
}

서비스코드로 이동해서 마저 작성을 하겠습니다.

• chats.service.ts

async createMessage(
      dto: CreateMessagesDto,
) {
    const message = await this.messagesRepository.save({
        chat: {
              id: dto.chatId,
        },
        author: {
              id: dto.authorId,
        },
        message: dto.message,
    });
    return this.messagesRepository.findOne({
        where: {
              id: message.id,
        }
    });
}

chats.module.ts로 이동 후, ChatsMessagesService와 MessagesModel을 등록합니다.

chats.gateway.ts로 이동을 해서 코드를 수정하겠습니다.

• chats.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
            ChatsModel,
            MessagesModel,
        ]),
        CommonModule,
    ],
    controllers: [ChatsController],
    providers: [
        ChatsGateway,
        ChatsService,
        ChatsMessagesService,
    ],
})
export class ChatsModule {}

• chats.gateway.ts

@SubscribeMessage('send_message')
async sendMessage(
    @MessageBody() dto: CreateMessagesDto,
    @ConnectedSocket() socket: Socket,
) {
    const chatExists = await this.chatsService.checkIfChatExists(
          dto.chatId,
    );

    if (!chatExists) {
        throw new WsException(
              `존재하지 않는 채팅방입니다. Chat ID : ${dto.authorId}`,
        );
    }

      // 메세지 생성
    const message = await this.messagesService.createMessage(
          dto,
    );

      // 소켓 속에다가 생성된 메시지를 기반으로, 해당되는 방(message.chat.id)에다가 메시지를 보낸다.
    socket.to(message.chat.id.toString()).emit('receive_message', message.message);
}

메세지를 페이지네이션하는 컨트롤러 코드를 작성하겠습니다.

• messages.controller.ts

@Controller('chats/:cid/messages')
export class MessagesController {

    constructor(
        private readonly messagesService: ChatsMessagesService,
    ) {}

    @Get()
    paginateMessage(
        @Param('cid', ParseIntPipe) id: number,
         dto: BasePaginationDto,
    ) {
        return this.messagesService.paginateMessages(
            dto,
            { // overrideOption
                where: {
                    // 특정 chat에 관련된 id만 필터링됨
                    chat: {
                          id,
                    }
                }
            }
        );
    }
}

• chats.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
            ChatsModel,
            MessagesModel,
        ]),
        CommonModule,
    ],
    controllers: [
        ChatsController,
        MessagesController,
    ],
    providers: [
        ChatsGateway,
        ChatsService,
        ChatsMessagesService,
    ],
})
export class ChatsModule {}

포스트맨으로 테스트를 하겠습니다. 현재는 chat 방이 1, 2 총 2개로 구성되어 있습니다. 사용자 1, 2, 3 을 연결해줍니다.

2번 방에 사용자 1, 2, 3을 전부 넣어줍니다.

{
    "data": [
        {
            "id": 2,
            "updatedAt": "2024-02-17T20:27:53.986Z",
            "createdAt": "2024-02-17T20:27:53.986Z",
            "message": "Hellow Nes Jeans"
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

2번 chat에 해당하는 아이디가 2인 메세지가 1개있는 것을 알 수 있습니다. 만약에 우리가 메세지에 해당되는 chat room까지 보고 싶으면 다음과 같이 코드를 바꾸면 됩니다.

• chats/messages/messages.controller.ts

@Get()
paginateMessage(
    @Param('cid', ParseIntPipe) id: number,
    @Query() dto: BasePaginationDto,
) {
    return this.messagesService.paginateMessages(
        dto,
        {
            where: {
                chat: {
                      id,
                }
            },
              // 추가
            relations: {
                author: true,
                chat: true,
            }
        }
    );
}

{
    "data": [
        {
            "id": 2,
            "updatedAt": "2024-02-17T20:27:53.986Z",
            "createdAt": "2024-02-17T20:27:53.986Z",
            "message": "Hellow Nes Jeans",
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "chat": {
                "id": 2,
                "updatedAt": "2024-02-17T20:01:57.991Z",
                "createdAt": "2024-02-17T20:01:57.991Z"
            }
        }
    ],
    "cursor": {
        "after": null
    },
    "count": 1,
    "next": null
}

메세지의 정보와 누가 어떤 방에서 보냈는지를 알 수 있습니다.

포스트맨에서 다시 한번 테스트를 해보겠습니다.

사용자 1, 2, 3을 전부 2번방에 넣습니다. 그리고 1번 사용자가 메세지를 보냅니다. 결과는 1번 사용자가 보낸 메세지가 2, 3번 사용자에게 도달하게 됩니다.

공식문서

미들웨어는 가장 앞에서 먼저 요청을 받습니다.

Middleware functions can perform the following tasks:

• execute any code.(어떤 코드는 실행가능)
• make changes to the request and the response objects.(무엇인가 추가하거나 삭제하는 가능)
• end the request-response cycle.(가드같은 역할도 가능)
• call the next middleware function in the stack.(여러개의 미들웨어 적용 가능, 적용된 순서로 진행)
• if the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function. Otherwise, the request will be left hanging. (미들웨어를 실행하고 내부에서 다음으로 넘어가려면 반드시 next()를 사용, 그렇지 않으면 그 위치에서 정지)

🖊️Middleware 생성 및 사용

Middleware를 구현하겠습니다. NestMiddleware를 implements를 하면 use라는 함수를 오버라이드 해야합니다.

• common/middleware/log.middleware.ts

import { Injectable, NestMiddleware } from "@nestjs/common";
import { NextFunction } from "express";

@Injectable()
export class LogMiddleware implements NestMiddleware {

    use(req: Request, res: Response, next: NextFunction) {

    }
}

NextFunction은 express에서 가져온 기능인것을 import를 통해서 알 수 있습니다.

NextFunction을 사용하지 않으면 요청이 멈춘다고 했습니다. 따라서 next()를 적용합니다.

import { Injectable, NestMiddleware } from "@nestjs/common";
import { NextFunction } from "express";

@Injectable()
export class LogMiddleware implements NestMiddleware {

    use(req: Request, res: Response, next: NextFunction) {
        console.log(`[REQ] ${req.method} ${req.url} ${new Date().toLocaleString('kr')}`);
        next(); // 적용
    }
}

이제 미들웨어를 적용하겠습니다. 다른 것들은 함수에 어노테이션을 적용을 합니다. 하지만 미들웨어는 모듈에다가 적용을 합니다.

• posts.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
            PostsModel,
            ImageModel,
        ]),
        AuthModule,
        UsersModule,
        CommonModule,
    ],
    controllers: [PostsController],
    providers: [PostsService, PostsImagesService,],
    exports: [PostsService]
})
export class PostsModule implements NestModule{

}

NestModule를 implements하면 configure 메소드로 미들웨어를 consumer 즉 소비해야합니다.

@Module({
    imports: [
        TypeOrmModule.forFeature([
            PostsModel,
            ImageModel,
        ]),
        AuthModule,
        UsersModule,
        CommonModule,
    ],
    controllers: [PostsController],
    providers: [PostsService, PostsImagesService,],
    exports: [PostsService]
})
export class PostsModule implements NestModule{
  configure(consumer: MiddlewareConsumer) { // 미들웨어를 소비(consumer)한다.
    consumer.apply(
      // 적용하고 싶은 미들웨어 넣기
      LogMiddleware,
    )
  }
}

포스트맨으로 GET 요청을 해보도록 하겠습니다. 현재는 @UseInterceptor가 없는 상태입니다. 만약에 @UseInterceptor를 추가한 상태로 요청을 보내면 미들웨어에서 로그를 만들지 않고 @UseInterceptor 내부에서 로그를 만들어 냅니다.

@Get()
getPosts(
      @Query() query: PaginatePostDto,
) {
    //throw new BadRequestException('에러 테스트'); // HttpExceptionFilter 테스트
    return this.postsService.paginatePosts(query);
}

아무것도 나오지 않은 것을 알 수 있습니다. 왜냐하면 저희가 미들웨어를 적용하고 싶은 라우트를 지정하지 않았기 때문입니다. 라우트를 지정해주도록 하겠습니다.

export class PostsModule implements NestModule{

    configure(consumer: MiddlewareConsumer) {
        consumer.apply(
            LogMiddleware,
        ).forRoutes({
            path: 'posts', // posts에 해당하는 path에 적용할 것이다.
            method: RequestMethod.ALL, // 적용을 하고 싶은 메소드에 적용
        })
    }
}

path: 'posts'
path: 'posts*' // 모든 경로
.
.
method: RequestMethod.ALL
method: RequestMethod.GET
method: RequestMethod.POST
.
.

이번에는 path: 'paths'상태에서 특정 id에 해당하는 요청을 보내보도록 하겠습니다.

아무것도 찍히지 않는 것을 알 수 있습니다. 즉, 여기서 알 수 있는 점은 path경로가 정확히 posts인 경우에만 해당이 되는 것입니다.

만약 posts가 있는 모든 경로에 적용을 하고 싶은 경우 path*로 작성해야 합니다.

export class PostsModule implements NestModule{

    configure(consumer: MiddlewareConsumer) {
        consumer.apply(
            LogMiddleware,
        ).forRoutes({
            path: 'posts*', 
            method: RequestMethod.GET,
        })
    }
}

동일하게 Get 요청을 보내보겠습니다.

이 의미는 PostsModule에 작성한 Middleware코드를 AppModule로 옮기고 path를 *로 하게되면 모든 곳에 적용이 가능하다는 것을 알 수 있습니다.

• posts/posts.module.ts

export class PostsModule implements NestModule{
    // implements NestModule
      // 전부 app.module.ts로 옮기기!
}

• app.module.ts

export class AppModule implements NestModule{

    configure(consumer: MiddlewareConsumer) {
        consumer.apply(
            LogMiddleware,
        ).forRoutes({
            path: '*', // 전체 적용
            method: RequestMethod.ALL,
        })
    }
}

따라서 로그인을 하게되어도 로그가 남는 것을 알 수 있습니다. 어떠한 요청에도 전부 로그가 남게 됩니다.

즉, Middleware의 특징은 가장 먼저 적용이 된다는 점입니다. 그리고 우리가 적용을 할 때, 패턴(path, methed 적용)을 가지고 적용할 수 있다는 큰 장점이 있습니다.

따라서 지금 처럼 로그를 콘솔에 단순하게 찍는 것이 아니라, 로그를 모니터링 할 수 있는 것과 연동을 시켜서 Middleware와 연결하면 유용합니다.

추가로 CORS 같은 보안적인 것도 Middleware로 구현이 되어있습니다. 따라섯 순서대로 보안을 적용하고 그 다음에 통과가 되면 Pipe로 이동을 하는 것입니다.

Exception Filter는 로직처리가 되고 진행이 됩니다. 그 후에는 interceptor로 이동하게 됩니다. 즉 interceptor에서도 Exception Filter를 핸들링 할 수 있다는 의미입니다.

Exception Filter는 예외를 필터링 하는 것입니다. 보통 Exception Filter가 유용한 경우는 에러가 생겼을 때 로그를 남기거나 모니터링에 이러한 문제점이 발생한다 라고 알려주기 위해서 사용될 때 의미가 좋습니다.

공식문서

사진으로 알 수 있듯, Filter는 Client Side에 가깝고, Server 쪽이랑은 먼 것을 알 수 있습니다.

Built-in HTTP exceptions# Nest provides a set of standard exceptions that inherit from the base HttpException. These are exposed from the @nestjs/common package, and represent many of the most common HTTP exceptions:

BadRequestException
UnauthorizedException
NotFoundException
ForbiddenException
NotAcceptableException
RequestTimeoutException
ConflictException
GoneException
HttpVersionNotSupportedException
PayloadTooLargeException
UnsupportedMediaTypeException
UnprocessableEntityException
InternalServerErrorException
NotImplementedException
ImATeapotException
MethodNotAllowedException
BadGatewayException
ServiceUnavailableException
GatewayTimeoutException
PreconditionFailedException

여기서 주목해야하는 것은 HttpException 입니다. Exception 목록들은 전부 HttpException를 상속받은 것입니다. 추후에 Exception Filter 클래스를 만들 때, HttpException에 해당하는 Exception만 잡는 코드를 작성할 것입니다.

🖊️HttpExceptionFilter

본격적으로 코드를 작성하고 적용을 해보겠습니다.

• common/exception-filter/http-exception-filter.ts

import { ArgumentsHost, Catch, ExceptionFilter, HttpException } from "@nestjs/common";

@Catch(HttpException) // HttpException에 해당하는 모든 예외를 자는다.
export class HttpExceptionFilter implements ExceptionFilter {

    catch(exception: HttpException, host: ArgumentsHost) {
        const context = host.switchToHttp();
        const response = context.getResponse();
        const request = context.getRequest();
        const status = exception.getStatus();

        response
            .status(status)
            .json({
            statusCode: status,
            message: exception.message,
            timestamp: new Date().toLocaleString('kr'),
            path: request.url, // 어떤 url에서 에러 발생 했는지 알 수 있음
        });
    }
}

• posts.controller.ts

@Get()
@UseInterceptors(LogInterceptor)
@UseFilters(HttpExceptionFilter)
getPosts(
      @Query() query: PaginatePostDto,
) {
    throw new BadRequestException('에러 테스트');
    return this.postsService.paginatePosts(query);
}

포스트맨으로 테스트를 하겠습니다.

{
    "message": "에러 테스트",
    "error": "Bad Request",
    "statusCode": 400
}
.
.
차이비교
.
.
{
    "statusCode": 400,
    "message": "에러 테스트",
    "timestamp": "2024. 2. 16. 오전 7:31:22",
    "path": "/posts?order__createdAt=DESC&take=2"
}

Exception Filter 코드의 경우 보통 중간 부분에 로그를 저장하거나 외부 모니터링 시스템이 API를 콜 하는 코드를 작성합니다. 그리고 이 Exception Filter를 전역적으로 적용하기 위해서 main.ts에 적용을 합니다.

• common/exception-filter/http-exception-filter.ts

import { ArgumentsHost, Catch, ExceptionFilter, HttpException } from "@nestjs/common";

@Catch(HttpException)
export class HttpExceptionFilter implements ExceptionFilter {

    catch(exception: HttpException, host: ArgumentsHost) {
        const context = host.switchToHttp();
        const response = context.getResponse();
        const request = context.getRequest();
        const status = exception.getStatus();

        // 로그 파일을 생성하거나
        // 에러 모니터링 시스템에 API 콜 하기

        response
            .status(status)
            .json({
            statusCode: status,
            message: exception.message,
            timestamp: new Date().toLocaleString('kr'),
            path: request.url,
        });
    }
}

• main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';
import { HttpExceptionFilter } from './common/exception-filter/http-exception-filter';

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    app.useGlobalPipes(new ValidationPipe({
        transform: true,
        transformOptions: {
          enableImplicitConversion: true
        },
        whitelist: true,
        forbidNonWhitelisted: true,
    }));

    app.useGlobalFilters(new HttpExceptionFilter()); // Exception Filter 전역 적용
    await app.listen(3000);
}
bootstrap();

하지만 지금은 사용하지 않으니 main.ts와 컨트롤러에서 강제로 에러를 던진 코드와 @UseFilter를 전부 지우겠습니다.

인터셉터의 경우 요청, 응답일 때 발생합니다. 즉 요청과 응답을 핸들링 할 수 있다는 것입니다.

공식문서

여기서 주목할 점은 각각의 interceptor를 따로 핸들링하는 것이 아니라, 한 곳에서 2개 모두 핸들링이 가능합니다.

bind extra logic before / after method execution
-> 메소드를 실행하기 전과 후 추가 로직을 작성할 수 있다.
transform the result returned from a function
-> 함수에서 받은 값을 변형할 수 있다.
transform the exception thrown from a function
-> 함수에서 던진 에러를 변형할 수 있다.
extend the basic function behavior
-> 기본으로 작성함 함수에 추가로 작성을 할 수 있다.
completely override a function depending on specific conditions (e.g., for caching purposes)
-> 어떤한 함수의 기능을 완전히 오버라이드 할 수 있다.

🖊️Interceptor를 이용해서 logger 구현

전반적으로 사용할 수 있는 interceptor를 만들겠습니다. interceptor를 구현하겠습니다.

• common/interceptor/log.interceptor.ts

import { CallHandler, ExecutionContext, Injectable, NestInterceptor } from "@nestjs/common";
import { Observable } from "rxjs";

@Injectable()
export class LogInterceptor implements NestInterceptor {

    intercept(context: ExecutionContext, next: CallHandler<any>): Observable<any> {
        /**
         * Request 요청이 들어온 timestamp를 찍는다.
         * [REQ] {요청 path} {요청 시간}
         * 
         * 요청이 끝날때 (응답이 나갈때) 다시 timestamp를 찍는다.
         * [RES] {요청 path} {응답 시간} {얼마나 걸렸는지 ms}
         */
        const request = context.switchToHttp().getRequest();
        const path = request.originalUrl; // /posts, /common/image
        const now = new Date();
        console.log(`[REQ] ${path} ${now.toLocaleString('kr')}`); // [REQ] {요청 path} {요청 시간}
    }
}

interceptor 함수 반환 타입의 경우 Observable<any>입니다. Observable은 rxjs에서 제공해주는 stream같은 기능이기 때문에 마음대로 변형이 가능합니다. return next를 추가합니다.

여기서 알 수 있는 것은 return next.handle()전에는 endpoint가 실행되기 전에 미리 실행이 됩니다.

하지만 return next.handle() 이후에는 함수의 로직이 실행되고 응답이 반환됩니다. 따라서 이 부분에서 응답을 가로채서 변형하거나 모니터링을 할 수 있는 것입니다.

import { CallHandler, ExecutionContext, Injectable, NestInterceptor } from "@nestjs/common";
import { Observable } from "rxjs";

@Injectable()
export class LogInterceptor implements NestInterceptor {

    // Observable: Rxjs에서 제공해주는 stream 같은 기능
    intercept(context: ExecutionContext, next: CallHandler<any>): Observable<any> {
        const request = context.switchToHttp().getRequest();
        const path = request.originalUrl;
        const now = new Date();
        console.log(`[REQ] ${path} ${now.toLocaleString('kr')}`);
        // 여기까지는 함수에 interceptor 적용시, 함수 적용에 전에 작동함 -> endpoint 실행되기 전에 미리 실행되는 것

        // return next.handle()을 실행하는 순간 -> 라우트의 로직이 전부 실행되고 응답이 반환된다.
        // observable(응답을 받아서 자유롭게 변형이 가능한 것)로
        return next
              .handle() // 응답값 받을 수 있음
    }
}
.
.
import { CallHandler, ExecutionContext, Injectable, NestInterceptor } from "@nestjs/common";
import { Observable } from "rxjs"; // rxjs는 nest.js 설치할 때부터 설치되어 있다.

@Injectable()
export class LogInterceptor implements NestInterceptor {

    intercept(context: ExecutionContext, next: CallHandler<any>): Observable<any> {
        const request = context.switchToHttp().getRequest();
        const path = request.originalUrl;
        const now = new Date();
        console.log(`[REQ] ${path} ${now.toLocaleString('kr')}`);

        return next
            .handle()
            .pipe( // 원하는 rxjs의 함수들을 무한히 넣을 수 있다. 그리고 이 함수들은 응답에 대해서 순서대로 실행이 된다.
                tap( // 모니터링 기능
                  // observable은 handle에서 받은 응답값이 들어감, 여기서 response를 볼 수 있음
                  (observable) => console.log(observable),
                ),
              );
    }
}

테스트를 위해서 posts 컨트롤러에 어노테이션을 붙입시다.

• posts.controller.ts

@Get()
@UseInterceptors(LogInterceptor) // 추가
getPosts(
      @Query() query: PaginatePostDto,
) {
      return this.postsService.paginatePosts(query);
}

포스트맨으로 해당하는 API에 Get 요청을 보냅니다.

예상대로 [REQ]가 나오는 것을 알 수 있습니다. 이번에는 응답 형태를 바꿔보겠습니다. map()은 응답을 변형하는 기능입니다.

return next
    .handle()
    .pipe(
        tap(
              (observable) => console.log(observable),
        ),
        map( // 응답 변형하는 기능
              (observable) => {
                return {
                    message: '응답이 변경 됐습니다. ',
                    response: observable,
                }
              }
        ),
);

응답이 변경된 것을 알 수 있습니다.

{
    "message": "응답이 변경 됐습니다. ", // 변경
    "response": { // 변경
        "data": [
            {
                "id": 115,
                "updatedAt": "2024-02-13T14:04:28.383Z",
                "createdAt": "2024-02-13T14:04:28.383Z",
                "title": "제목",
                "content": "내용",
                "likeCount": 0,
                "commentCount": 0,
                "author": {
                    "id": 1,
                    "updatedAt": "2024-01-26T05:58:10.800Z",
                    "createdAt": "2024-01-26T05:58:10.800Z",
                    "nickname": "codefactory",
                    "email": "codefactory@codefactory.ai",
                    "role": "USER"
                },
                "images": [
                    {
                        "id": 4,
                        "updatedAt": "2024-02-13T14:04:28.383Z",
                        "createdAt": "2024-02-13T14:04:28.383Z",
                        "order": 0,
                        "type": 0,
                        "path": "/public\\posts\\e3989050-da50-49e3-9dc6-e99afe9612cc.png"
                    }
                ]
            }
        ],
        "cursor": {
            "after": 115
        },
        "count": 1,
        "next": "http://localhost:3000/posts?order__createdAt=DESC&take=1&where__id__less_than=115"
    }
}

만약에 tap()을 1번더 추가를 하게된다면 마지막 부분이 달라지는 것을 알 수 있습니다.

return next
    .handle()
    .pipe(
        tap(
              (observable) => console.log(observable),
        ),
        map(
            (observable) => {
                return {
                    message: '응답이 변경 됐습니다. ',
                    response: observable,
                }
            }
        ),
        tap(
              (observable) => console.log(observable),
        ),
);

[Nest] 3828  - 2024. 02. 16. 오전 12:19:58     LOG [NestApplication] Nest application successfully started +5ms
[REQ] /posts?order__createdAt=DESC&take=1 2024. 2. 16. 오전 12:19:59
{
  data: [
    PostsModel {
      id: 115,
      updatedAt: 2024-02-13T14:04:28.383Z,
      createdAt: 2024-02-13T14:04:28.383Z,
      title: '제목',
      content: '내용',
      likeCount: 0,
      commentCount: 0,
      author: [UsersModel],
      images: [Array]
    }
  ],
  cursor: { after: 115 },
  count: 1,
  next: 'http://localhost:3000/posts?order__createdAt=DESC&take=1&where__id__less_than=115'
}

// 이부분!!!!!!!!!!!!!!!
{
  message: '응답이 변경 됐습니다. ',
  response: {
    data: [ [PostsModel] ],
    cursor: { after: 115 },
    count: 1,
    next: 'http://localhost:3000/posts?order__createdAt=DESC&take=1&where__id__less_than=115'
  }
}

따라서 rxjs에서 제공해주는 함수들을 사용하면 순서대로 되는 것을 알 수 있고 tap의 경우 모니터링을, map의 경우 변형을 할 수 있게됩니다. 지금까지는 rxjs의 기본기 였습니다.

tap과 map을 삭제하고 원래 작성하려던 코드를 작성하겠습니다.

import { CallHandler, ExecutionContext, Injectable, NestInterceptor } from "@nestjs/common";
import { Observable, map, tap } from "rxjs";

@Injectable()
export class LogInterceptor implements NestInterceptor {

    intercept(context: ExecutionContext, next: CallHandler<any>): Observable<any> {

        const now = new Date();
        const request = context.switchToHttp().getRequest();
        const path = request.originalUrl;

        console.log(`[REQ] ${path} ${now.toLocaleString('kr')}`);
        return next
            .handle()
            .pipe( // 변경
                tap(
                  (observable) => console.log(`[REQ] ${path} ${new Date().toLocaleString('kr')} ${new Date().getMilliseconds() - now.getMilliseconds()}ms`),
            ),

        );
    }
}

포트스맨으로 GET요청을 보내면 몇 초가 걸렸는지 나오게 됩니다.

[REQ] /posts?order__createdAt=DESC&take=1 2024. 2. 16. 오전 12:26:17
[REQ] /posts?order__createdAt=DESC&take=1 2024. 2. 16. 오전 12:26:17 54ms

이런 기능을 할 수 있는 것은 요청과 응답 모두 가로채기가 가능한 interceptor만 존재합니다. 만약 rxjs에 관심이 있으면 공식문서를 참고하면 됩니다.

🖊️Transaction interceptor 생성

posts 컨트롤러에서 트랜젝션 생성부분은 반드시 진행되어야 하는 부분입니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {    
      // interceptor request 적용
    const queryRunner = this.dataSource.createQueryRunner();
    await queryRunner.connect();
    await queryRunner.startTransaction();
    // 여기까지

    try {
          // postsPost함수만 적용
        const post = await this.postsService.createPost( 
              userId, body, queryRunner,
        );

        for (let i = 0; i < body.images.length; i++) {
            await this.postsImagesService.createPostImage({
                post,
                order: i,
                path: body.images[i],
                type: ImageModelType.POST_IMAGE,
            }, queryRunner);
        }
          // 여기까지

          // interceptor response 적용
        await queryRunner.commitTransaction();
        await queryRunner.release();

        return this.postsService.getPostById(post.id);
    } catch (error) {
        await queryRunner.rollbackTransaction();
        await queryRunner.release();
        throw new InternalServerErrorException('에러 발생');
    }
      // 여기까지
}

트랜젝션 인터셉터를 만들겠습니다.

• common/interceptor/transaction.interceptor.ts

import { DataSource } from 'typeorm';
import { CallHandler, ExecutionContext, Injectable, NestInterceptor } from "@nestjs/common";
import { Observable, tap } from "rxjs";

@Injectable()
export class TransactionInterceptor implements NestInterceptor {

    constructor(
        private readonly dataSource: DataSource,
    ) {}

    async intercept(context: ExecutionContext, next: CallHandler<any>): Observable<any> {
          const request = context.switchToHttp().getRequest();
          // post 컨트롤러 앞부분 내용 복사해서 가져오기
        const queryRunner = this.dataSource.createQueryRunner();
        await queryRunner.connect();
        await queryRunner.startTransaction();
    }
}
.
.
@Injectable()
export class TransactionInterceptor implements NestInterceptor {

    constructor(
        private readonly dataSource: DataSource,
    ) {}

    async intercept(context: ExecutionContext, next: CallHandler<any>): Observable<any> {
          const request = context.switchToHttp().getRequest();
        const queryRunner = this.dataSource.createQueryRunner();
        await queryRunner.connect();
        await queryRunner.startTransaction();
          return next
               .handle()
               .pipe(
                    tap(async () => { // 여기!!!!
                         await queryRunner.commitTransaction();
                         await queryRunner.release();
                    })
               );
    }
}

아래에 추가된 코드는 postsPost() 컨트롤러에서 정상적으로 모든것이 실행되는 것을 의미하는 코드입니다.

에러가 발생할 수 있으니 에러가 발생할 경우 롤백을 하는 코드를 추가하겠습니다. 그리고 intercept 함수가 async로 구성되어있기 때문에 Promise로 감싸도록 하겠습니다.

@Injectable()
export class TransactionInterceptor implements NestInterceptor {

    constructor(
        private readonly dataSource: DataSource,
    ) {}

    async intercept(context: ExecutionContext, next: CallHandler<any>): Promise<Observable<any>> {
          const request = context.switchToHttp().getRequest();
        const queryRunner = this.dataSource.createQueryRunner();
        await queryRunner.connect();
        await queryRunner.startTransaction();
          return next
               .handle()
               .pipe(
                      // 추가
                      catchError(
                         async (error) => {
                              await queryRunner.rollbackTransaction();
                              await queryRunner.release();
                              throw new InternalServerErrorException(error.message);
                         }
                    ),
                    tap(async () => {
                         await queryRunner.commitTransaction();
                         await queryRunner.release();
                    })
               );
    }
}

현재 작업된 코드를 분석하면 postPost() 컨트롤러의 상단 3개는

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {    
      // interceptor request 적용
    const queryRunner = this.dataSource.createQueryRunner();
    await queryRunner.connect();
    await queryRunner.startTransaction();

트랜젝션 인터셉터 위부분 3줄과 동일한 과정을 진행합니다.

그리고 return next.handle()을 진입하면서 postPost() 메소드 내부 로직이 실행됩니다.

const post = await this.postsService.createPost( 
      userId, body, queryRunner,
);

for (let i = 0; i < body.images.length; i++) {
    await this.postsImagesService.createPostImage({
        post,
        order: i,
        path: body.images[i],
        type: ImageModelType.POST_IMAGE,
    }, queryRunner);
}

그리고 마지막 postPost() 부분은 return next.handle() 이후의 코드들에 해당됩니다.

    await queryRunner.commitTransaction();
    await queryRunner.release();

    return this.postsService.getPostById(post.id);
} catch (error) {
    await queryRunner.rollbackTransaction();
    await queryRunner.release();
    throw new InternalServerErrorException('에러 발생');
}

그리고 postPost()내부 로직을 진행하려면 queryRunner를 넣어줘야 합니다.

request객체는 interceptor에서 계속 전달됩니다. 따라서 queryRunner를 생성하는 순간 함수를 진행하는 순간 request객체에 queryRunner를 넣어주는 것입니다.

• common/interceptor/transaction.interceptor.ts

@Injectable()
export class TransactionInterceptor implements NestInterceptor {

    constructor(
        private readonly dataSource: DataSource,
    ) {}

    async intercept(context: ExecutionContext, next: CallHandler<any>): Promise<Observable<any>> {
          const request = context.switchToHttp().getRequest();
        const queryRunner = this.dataSource.createQueryRunner();
        await queryRunner.connect();
        await queryRunner.startTransaction();
          request.queryRunner = queryRunner; // 내부 로직 실행시키기 위해서 queryRunner 넣어주기
          return next
               .handle()
               .pipe(
                      catchError(
                         async (error) => {
                              await queryRunner.rollbackTransaction();
                              await queryRunner.release();
                              throw new InternalServerErrorException(error.message);
                         }
                    ),
                    tap(async () => {
                         await queryRunner.commitTransaction();
                         await queryRunner.release();
                    })
               );
    }
}

postPost()로 이동을 해서 트랜젝션 관련 코드는 전부 지우겠습니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
@UseInterceptors(TransactionInterceptor) // 추가
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
) {
    const post = await this.postsService.createPost( 
          userId, body, queryRunner,
    );

    for (let i = 0; i < body.images.length; i++) {
        await this.postsImagesService.createPostImage({
            post,
            order: i,
            path: body.images[i],
            type: ImageModelType.POST_IMAGE,
        }, queryRunner);
    }

    return this.postsService.getPostById(post.id);
}

이제 queryRunner를 가져오는 코드를 작성하겠습니다. 물론 request객체를 받아서 넣어줄 수 있습니다. 이전에 User decorator를 만들었던 방법으로 parameter decorator를 만들겠습니다.

• common/decorator/query-runner.decorator.ts

import { ExecutionContext, InternalServerErrorException } from '@nestjs/common';
import { createParamDecorator } from '@nestjs/common';

export const QueryRunner = createParamDecorator ((data, context: ExecutionContext) => {
    const req = context.switchToHttp().getRequest();
    if (!req.queryRunner) throw new InternalServerErrorException(`QueryRunner Decorator를 사용하려면 TransactionInterceptor를 적용해야 합니다.`,)
    return req.QueryRunner;
})

컨트롤러에 코드를 QueryRunner를 불러오는 코드를 추가하겠습니다.

• posts.controller.ts

import { DataSource, QueryRunner as QR } from 'typeorm';
import { QueryRunner } from 'src/common/decorator/query-runner.decorator';
.
.
@Post()
@UseGuards(AccessTokenGuard)
@UseInterceptors(TransactionInterceptor)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
      @QueryRunner() queryRunner: QR,
) {
    const post = await this.postsService.createPost( 
          userId, body, queryRunner,
    );

    for (let i = 0; i < body.images.length; i++) {
        await this.postsImagesService.createPostImage({
            post,
            order: i,
            path: body.images[i],
            type: ImageModelType.POST_IMAGE,
        }, queryRunner);
    }

    return this.postsService.getPostById(post.id);
}

그런데 트랜잭션 타입에 따라서 커밋이 되기전에 return this.postsService.getPostById(post.id); 부분에서 최신값을 가져오지 못할 수 도 있습니다. 따라서 queryRunner를 넘기도록 하겠습니다.

그리고 컨트롤러 코드에 테스트를 위해서 에러를 터트리겠습니다.

• posts.service.ts

async getPostById(id: number, queryRunner?: QueryRunner) {
    const repository = this.getRepository(queryRunner);
    const post = await repository.findOne({
        ...DEFAULT_POST_AND_OPTIONS,
        where: {
              id,
        }
    });
    if (!post) throw new NotFoundException();
    return post;
}

• posts.controller.ts

import { DataSource, QueryRunner as QR } from 'typeorm';
import { QueryRunner } from 'src/common/decorator/query-runner.decorator';
.
.
@Post()
@UseGuards(AccessTokenGuard)
@UseInterceptors(TransactionInterceptor)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
      @QueryRunner() queryRunner: QR,
) {
    const post = await this.postsService.createPost( 
          userId, body, queryRunner,
    );

      throw new InternalServerErrorException('test') // 에러 발생

    for (let i = 0; i < body.images.length; i++) {
        await this.postsImagesService.createPostImage({
            post,
            order: i,
            path: body.images[i],
            type: ImageModelType.POST_IMAGE,
        }, queryRunner);
    }

    return this.postsService.getPostById(post.id, queryRunner);
}

포스트맨으로 로그인과 이미지까지 임시폴더에 저장을 합니다.

{
    "message": "test",
    "error": "Internal Server Error",
    "statusCode": 500
}

Get 요청으로 확인을 해보겠습니다.

마지막 데이터가 원래 149였는데 에러가 발생해서 데이터가 추가되지 않았습니다. 따라서 트랜젝션이 잘 실행되는 것을 알 수 있습니다.

{
    "data": [
        {
            "id": 149,
            "updatedAt": "2024-02-15T13:07:54.548Z",
            "createdAt": "2024-02-15T13:07:54.548Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "images": []
        }
    ],
    "cursor": {
        "after": 149
    },
    "count": 1,
    "next": "http://localhost:3000/posts?order__createdAt=DESC&take=1&where__id__less_than=149"
}

에러 코드를 삭제하고 다시 실행 후, 동일하게 포스트맨을 진행해봅시다.

{
    "id": 150,
    "updatedAt": "2024-02-15T13:10:15.793Z",
    "createdAt": "2024-02-15T13:10:15.793Z",
    "title": "제목",
    "content": "내용",
    "likeCount": 0,
    "commentCount": 0,
    "author": {
        "id": 1,
        "updatedAt": "2024-01-26T05:58:10.800Z",
        "createdAt": "2024-01-26T05:58:10.800Z",
        "nickname": "codefactory",
        "email": "codefactory@codefactory.ai",
        "role": "USER"
    },
    "images": [
        {
            "id": 5,
            "updatedAt": "2024-02-15T13:10:15.872Z",
            "createdAt": "2024-02-15T13:10:15.872Z",
            "order": 0,
            "type": 0,
            "path": "/public\\posts\\1e8aec81-f514-4f8a-b0d1-da643cc79122.png"
        }
    ]
}

Transaction

A model, B model Post API -> A 모델을 저장하고, B 모델을 저장한다.

await repository.save(a);
await repository.save(b); // 이경우는 순서대로 진행이 된다.

만약에 a를 저장하다가 실패하면 b를 저장하면 안될경우 -> all or nothing

transaction
start -> 시작 (실행하는 모든 기능은 transaction에 묶인다)
commit -> 저장 (한번에 저장이 된다.)
rollback -> 원상복구 (start를 하고 commit 전까지 문제가 발생하면 원상복구를 한다.)

🖊️ImageModel 만들기

image는 1개보다는 여러개를 올릴 수 있도록 바꿔보겠습니다. 여러개를 올리므로써 transaction관련 코드를 작성할 수 있습니다. transaction으로 post를 생성하는 것과 이미지를 생성하고 옮기는 코드까지 전부 묶어서 1개라도 에러가 발생하면 rollback하도록 하겠습니다.

posts.entity.ts에서 image필드를 전부 제거합니다. 데이터베이스 컬럼에도 사라졌습니다.

1개의 Post에는 여러개의 Image가 붙을 수 있습니다. 따라서 ImagesModel을 만들고 PostsModel에서 @OneToMany로 묶어줍니다.

여기서는 image가 공유된다는 가정하에 common 폴더에서 작업을 하겠습니다.

여기서 @Transform에서 value는 path에 입력된 값 자체를 의미하고, obj는 ImageModel이 instance화가 되었을 때를 의미합니다.

• image.entity.ts

export enum ImageModelType {
     POST_IMAGE,
}

@Entity()
export class ImageModel extends BaseModel {

    @Column({
          default: 0, // order가 FE로부터오면 그대로 반영, FE로부터 아무런 값이 오지않으면 0하고 생성된 순서대로 만들 것
    })
    @IsInt()
    @IsOptional()
    order: number;

    // UsersModel -> 사용자 프로필 이미지
    // PostsModel -> 포스트 이미지
    @Column({
          enum: ImageModelType
    })
    @IsString()
    @IsEnum(ImageModelType)
    type: ImageModelType;

    @Column()
    @IsString()
    @Transform(({value, obj}) => { // obj: 현재 객체, ImageModel이 instance로 되었을 때
        if (obj.type === ImageModelType.POST_IMAGE) {
            return join(
                POST_IMAGE_PATH, // POST_IMAGE_PATH 경로에 path를 추가
                value,
            )
        } else {
              return value;
        }
    })
    path: string;
}

이제 연관관계를 추가하겠습니다. post는 null이 가능하도록 해야합니다. 왜냐하면 post랑만 연동되는 것이 아닌 user랑만 연동이 될 수 있기 때문입니다.

• image.entity.ts

export enum ImageModelType {
     POST_IMAGE,
}

@Entity()
export class ImageModel extends BaseModel {

    @Column({
          default: 0,
    })
    @IsInt()
    @IsOptional()
    order: number;

    @Column({
          enum: ImageModelType
    })
    @IsString()
    @IsEnum(ImageModelType)
    type: ImageModelType;

    @Column()
    @IsString()
    @Transform(({value, obj}) => {
        if (obj.type === ImageModelType.POST_IMAGE) {
            return join(
                POST_IMAGE_PATH,
                value,
            )
        } else {
              return value;
        }
    })
    path: string;

    @ManyToOne((type) => PostsModel, (post) => post.images)
    post?: PostsModel; // 추가
}

• posts.entity.ts

@Entity()
export class PostsModel extends BaseModel {

    @ManyToOne(() => UsersModel, (user) => user.posts, {
          nullable: false,
    })
    author: UsersModel;

    @Column()
    @IsString({
          message: stringValidationMessage
    }) 
    title: string;

    @Column()
    @IsString({
          message: stringValidationMessage
    }) 
    content: string;

    @Column()
    likeCount: number;

    @Column()
    commentCount: number;

    @OneToMany((type) => ImageModel, (image) => image.post)
    images: ImageModel[]; // 추가
}

마지막으로 app.module.ts에 ImageModel을 추가합니다.

• app.module.ts

TypeOrmModule.forRoot({
    type: 'postgres',
    host: process.env[ENV_DB_HOST_KEY],
    port: parseInt(process.env[ENV_DB_PORT_KEY]),
    username: process.env[ENV_DB_USERNAME_KEY],
    password: process.env[ENV_DB_PASSWORD_KEY],
    database: process.env[ENV_DB_DATABASE_KEY],
    entities: [
        PostsModel,
        UsersModel,
        ImageModel, // 추가
    ],
    synchronize: true,
}),

만약 여기까지 진행을 했는데도 다음과 같은 에러가 나온 경우 dist폴더를 삭제하고 재실행하면 됩니다.

🖊️ImageModel 생성하는 로직 작성

• posts/dto/create-post.dto.ts

export class CreatePostDto extends PickType(PostsModel, ['title', 'content']) {

    @IsString({
          each: true, // 리스트 안에있는 것들을 검증 해야한다.
    })
    @IsOptional()
    images: string[] = []; // 아무것도 없는 경우 empty array
}

여러개의 이미지들을 받을 수 있도록 바꿔줍니다. 또한 리스트에 들어있는 각각의 이미지를 검증해야하기 때문에 each: true를 붙여줍니다.

컨트롤러로 이동 후 몇가지를 변경하겠습니다. 트랜잭션을 진행할 때, post 관련 작업을 먼저 하고, 그 다음에 post가 잘 생성이 되면 image작업을 해야됩니다. 왜냐하면 이미지 작업을 할 때, 이미지를 옮기는 것이 있기 때문입니다. 즉, 이미지를 옮기는 과정을 가장 마지막에 할 것입니다.

왜냐하면 트랜젝션에는 롤백 기능이 있기 때문입니다. 따라서 데이터베이스와 관련이 있는 작업을 먼저 진행하고, 나중에 관련이 없는 파일을 옮기는 것과 같은 것을 마지막에 작업하도록 하겠습니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    const post = await this.postsService.createPost( // 위치 변경
          userId, body,
    );

    await this.postsService.createPostImage(body); // temp -> posts
}
.
.
변경
.
.
@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    const post = await this.postsService.createPost(
          userId, body,
    );

      // 추가
    for (let i = 0; i < body.images.length; i++) {
          await this.postsService.createPostImage(body);
    }
}

• posts.service.ts

async generatePosts(userId: number) {
    for(let i = 0; i < 100; i++) {
        await this.createPost(userId, {
            title: `임의로 생성된 ${i}`,
            content: `임의로 생성된 포수트 내용 ${i}`,
            images: [], // 추가
        });
    }
}

그리고 image생성과 관련해서 dto를 추가로 만들도록 하겠습니다. 왜냐하면 지금 createPostImage()는 image가 1개만 되기 때문입니다.

• posts/image/dto/create-image.dto.ts

export class CreatePostImageDto extends PickType(ImageModel, [
     'path',
     'post',
     'order',
     'type',
]) {}

post의 경우는 컨트롤러에서 직접 주입 받도록 하겠습니다.

@Entity()
export class ImageModel extends BaseModel {

     @Column({
          default: 0,
     })
     @IsInt()
     @IsOptional()
     order: number;

     @Column({
          enum: ImageModelType
     })
     @IsString()
     @IsEnum(ImageModelType)
     type: ImageModelType;

     @Column()
     @IsString()
     @Transform(({value, obj}) => {
          if (obj.type === ImageModelType.POST_IMAGE) {
               return join(
                    POST_IMAGE_PATH,
                    value,
               )
          } else {
               return value;
          }
     })
     path: string;

     @ManyToOne((type) => PostsModel, (post) => post.images)
     post?: PostsModel; // 이거는 직접 주입받자!!
}

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    const post = await this.postsService.createPost(
          userId, body,
    ); // 여기서 post를 직접 주입받는다!

    for (let i = 0; i < body.images.length; i++) {
          await this.postsService.createPostImage(body);
    }
}

다시 서비스로 이동해서 코드를 작성하겠습니다. 또한 이미지 모델을 생성해야하기 때문에 주입을 받도록 하겠습니다. 그리고 posts.module.ts에 imports를 하겠습니다.

• posts.service.ts

constructor(
    @InjectRepository(PostsModel)
    private readonly postsRepository: Repository<PostsModel>,
    @InjectRepository(ImageModel)
      private readonly imageRepository: Repository<ImageModel>,
    private readonly commonService: CommonService,
    private readonly configService: ConfigService,
) {}
.
.
async createPostImage(dto: CreatePostImageDto) { // 변경
    const tempFilePath = join(
        TEMP_FOLDER_PATH,
        dto.path, // 변경 : 왜냐하면 CreatePostImageDto는 각각의 하나가 image 생성
    );

    try {
          await promises.access(tempFilePath);
    } catch (error) {
          throw new BadRequestException('존재하지 않는 파일입니다. ');
    }

    const fileName = basename(tempFilePath);
    const newPath = join(
        POST_IMAGE_PATH,
        fileName,
    );

    await promises.rename(tempFilePath, newPath);
    return true;
}

• posts.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
            PostsModel,
            ImageModel, // 추가
        ]),
        AuthModule,
        UsersModule,
        CommonModule,
    ],
    controllers: [PostsController],
    providers: [PostsService],
    exports: [PostsService]
})
export class PostsModule {}

그리고 createPostImage()안에서 image 모델은 언제 저장하는 것이 가장 좋은지를 생각해야합니다. 무엇인가를 만들때 파일을 temp에서 이동 시키기전에 저장하는 것이 좋다고 생각합니다.

왜냐하면 만약 파일을 이동시키고 에러가 발생하면 다시 원상복구를 해야해서 번거롭기 때문입니다.

• posts.service.ts

async createPostImage(dto: CreatePostImageDto) {
    const tempFilePath = join(
        TEMP_FOLDER_PATH,
        dto.path,
    );

    try {
          await promises.access(tempFilePath);
    } catch (error) {
          throw new BadRequestException('존재하지 않는 파일입니다. ');
    }

    const fileName = basename(tempFilePath);
    const newPath = join(
        POST_IMAGE_PATH,
        fileName,
    );

    // save
    const result = await this.imageRepository.save({
          ...dto, // create하고 save도 가능하고 바로 넣어도 상관없음
    });

    await promises.rename(tempFilePath, newPath);
    return result; // 변경
}

그리고 createPost() 또한 바꿔주도록 하겠습니다. 왜냐하면 image가 CreatePostImage와 ImageModel이 호환 되지않기 때문에 에러가 발생합니다. posts의 엔티티로 가게 되면 image는 리스트 타입으로 되어있습니다. 따라서 images: [] 이렇게 만들어 줍니다.

그리고 createPost를 할 때는 Post 자체만 생성을 하고, 이후에 createPostImage()를 하면서 이미지를 생성합니다. 이때 save 부분에서 image를 저장하는 동시에 자동으로 post와 연결이 됩니다. 왜냐하면 PickType으로 상속을 받기 때문입니다.

async createPost(authorId: number, postDto: CreatePostDto ) {
    const post = this.postsRepository.create({
        author: {
              id: authorId,
        },
        ...postDto,
        images: [], // createPostImage()를 실행하면 post를 생성하고 image가 생성되면서 자동으로 연결이 된다.
        likeCount: 0,
        commentCount: 0,
    });

    const newPost = await this.postsRepository.save(post);
    return newPost;
}

async createPostImage(dto: CreatePostImageDto) {
    const tempFilePath = join(
        TEMP_FOLDER_PATH,
        dto.path,
    );

    try {
        await promises.access(tempFilePath);
    } catch (error) {
          throw new BadRequestException('존재하지 않는 파일입니다. ');
    }

    const fileName = basename(tempFilePath);
    const newPath = join(
        POST_IMAGE_PATH,
        fileName,
    );

    // save
    const result = await this.imageRepository.save({
          ...dto,
    });

    await promises.rename(tempFilePath, newPath);
    return result;
}

컨트롤러를 변경해줍니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
      // 현재 image없이 post만 생성된 상태
    const post = await this.postsService.createPost(
          userId, body,
    );

      // 루핑하면서 image 생성 -> 동시에 post와 연동된다.
    for (let i = 0; i < body.images.length; i++) {
        await this.postsService.createPostImage({
            post,
            order: i,
            path: body.images[i],
            type: ImageModelType.POST_IMAGE,
        });
    }

      // 생성된 post id 반환
      return this.postsService.getPostById(post.id);
}

포스트맨으로 테스트를 해보겠습니다. 먼저 로그인을 하고 1개의 image만 해보도록 하겠습니다.

{
    "fileName": "6ea0ea3f-960b-4f36-a50e-06d93cddf5bd.png"
}

{
    "id": 112,
    "updatedAt": "2024-02-13T05:52:20.390Z",
    "createdAt": "2024-02-13T05:52:20.390Z",
    "title": "제목",
    "content": "내용",
    "likeCount": 0,
    "commentCount": 0,
    "author": {
        "id": 1,
        "updatedAt": "2024-01-26T05:58:10.800Z",
        "createdAt": "2024-01-26T05:58:10.800Z",
        "nickname": "codefactory",
        "email": "codefactory@codefactory.ai",
        "role": "USER"
    }
}

이번에는 1개의 post에 여러개의 이미지를 생성해보겠습니다.

{
    "id": 113,
    "updatedAt": "2024-02-13T05:54:05.084Z",
    "createdAt": "2024-02-13T05:54:05.084Z",
    "title": "제목",
    "content": "내용",
    "likeCount": 0,
    "commentCount": 0,
    "author": {
        "id": 1,
        "updatedAt": "2024-01-26T05:58:10.800Z",
        "createdAt": "2024-01-26T05:58:10.800Z",
        "nickname": "codefactory",
        "email": "codefactory@codefactory.ai",
        "role": "USER"
    }
}

get 요청으로 확인해보도록 하겠습니다.

{
    "data": [
        {
            "id": 113,
            "updatedAt": "2024-02-13T05:54:05.084Z",
            "createdAt": "2024-02-13T05:54:05.084Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },
        {
            "id": 112,
            "updatedAt": "2024-02-13T05:52:20.390Z",
            "createdAt": "2024-02-13T05:52:20.390Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },

image가 보이지 않습니다. 이 문제는 이전에도 여러번 겪은 문제입니다. 왜냐하면 이제는 post 엔티티는 author과 images 모두 relation이기 때문입니다. 이후에 다시 포스트맨으로 요청을 해보겠습니다.

• posts.service.ts

async getPostById(id: number) {
    const post = await this.postsRepository.findOne({
        where: {
              id,
        },
        relations: [
            'author',
            'images' // 추가
        ],
    });
    if (!post) throw new NotFoundException();
    return post;
}
.
.
async paginatePosts(dto: PaginatePostDto) {
    return this.commonService.paginate(
        dto,
        this.postsRepository,
        {
              relations: ['author', 'images'] // 추가
        },
        'posts'
    );
}

{
    "data": [
        {
            "id": 113,
            "updatedAt": "2024-02-13T05:54:05.084Z",
            "createdAt": "2024-02-13T05:54:05.084Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "images": [
                {
                    "id": 2,
                    "updatedAt": "2024-02-13T05:54:05.155Z",
                    "createdAt": "2024-02-13T05:54:05.155Z",
                    "order": 0,
                    "type": 0,
                    "path": "C:\\workspace\\nestjsworkspace\\df_sns_2\\public\\posts\\0a314f62-3bfe-4e2b-8e49-925fbceacf70.png"
                },
                {
                    "id": 3,
                    "updatedAt": "2024-02-13T05:54:05.226Z",
                    "createdAt": "2024-02-13T05:54:05.226Z",
                    "order": 1,
                    "type": 0,
                    "path": "C:\\workspace\\nestjsworkspace\\df_sns_2\\public\\posts\\3d651d58-2939-409f-afc0-6a109816f906.png"
                }
            ]
        },
        {
            "id": 112,
            "updatedAt": "2024-02-13T05:52:20.390Z",
            "createdAt": "2024-02-13T05:52:20.390Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "images": [
                {
                    "id": 1,
                    "updatedAt": "2024-02-13T05:52:20.487Z",
                    "createdAt": "2024-02-13T05:52:20.487Z",
                    "order": 0,
                    "type": 0,
                    "path": "C:\\workspace\\nestjsworkspace\\df_sns_2\\public\\posts\\6ea0ea3f-960b-4f36-a50e-06d93cddf5bd.png"
                }
            ]
        },

public부터 경로가 오도록 만들어 보겠습니다.

• image.entity.ts

@Entity()
export class ImageModel extends BaseModel {

    @Column({
          default: 0,
    })
    @IsInt()
    @IsOptional()
    order: number;

    @Column({
          enum: ImageModelType
    })
    @IsString()
    @IsEnum(ImageModelType)
    type: ImageModelType;

    @Column()
    @IsString()
    @Transform(({value, obj}) => {
        if (obj.type === ImageModelType.POST_IMAGE) {
            return `/${join(
                POST_PUBLIC_IMAGE_PATH, // POST_IMAGE_PATH 경로에 path를 추가
                value,
            )}`
        } else {
              return value;
        }
    })
    path: string;

    @ManyToOne((type) => PostsModel, (post) => post.images)
    post?: PostsModel;
}

{
    "data": [
        {
            "id": 113,
            "updatedAt": "2024-02-13T05:54:05.084Z",
            "createdAt": "2024-02-13T05:54:05.084Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "images": [
                {
                    "id": 2,
                    "updatedAt": "2024-02-13T05:54:05.155Z",
                    "createdAt": "2024-02-13T05:54:05.155Z",
                    "order": 0,
                    "type": 0,
                    "path": "/public\\posts\\0a314f62-3bfe-4e2b-8e49-925fbceacf70.png" // 변경
                },
                {
                    "id": 3,
                    "updatedAt": "2024-02-13T05:54:05.226Z",
                    "createdAt": "2024-02-13T05:54:05.226Z",
                    "order": 1,
                    "type": 0,
                    "path": "/public\\posts\\3d651d58-2939-409f-afc0-6a109816f906.png" // 변경
                }
            ]
        },
        {
            "id": 112,
            "updatedAt": "2024-02-13T05:52:20.390Z",
            "createdAt": "2024-02-13T05:52:20.390Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "images": [
                {
                    "id": 1,
                    "updatedAt": "2024-02-13T05:52:20.487Z",
                    "createdAt": "2024-02-13T05:52:20.487Z",
                    "order": 0,
                    "type": 0,
                    "path": "/public\\posts\\6ea0ea3f-960b-4f36-a50e-06d93cddf5bd.png" // 변경
                }
            ]
        },

/public\\posts\\6ea0ea3f-960b-4f36-a50e-06d93cddf5bd.png
http://localhost:3000/public//posts//6ea0ea3f-960b-4f36-a50e-06d93cddf5bd.png

잘 나오는 것을 알 수 있습니다.

지금부터는 서비스 코드에 고정으로 들어가게 되는 값들이 있습니다. 이것을 정리하도록 하겠습니다.

• posts/const/default-post-find-options.const.ts

import { FindManyOptions } from "typeorm";
import { PostsModel } from "../entities/posts.entity";

export const DEFAULT_POST_AND_OPTIONS: FindManyOptions<PostsModel> = {
    // relations: [
    //      'author', 
    //      'images'
    // ] 이것도 가능하다
    relations: {
        author: true,
        images: true,
    }
}

• posts.service.ts

async getAllPosts() {
    return await this.postsRepository.find({
          ...DEFAULT_POST_AND_OPTIONS,
    });
}

async paginatePosts(dto: PaginatePostDto) {
    return this.commonService.paginate(
        dto,
        this.postsRepository,
        {
              ...DEFAULT_POST_AND_OPTIONS
        },
        'posts'
    );
}

async getPostById(id: number) {
    const post = await this.postsRepository.findOne({
          ...DEFAULT_POST_AND_OPTIONS,
        where: {
              id,
        },
    });
    if (!post) throw new NotFoundException();
    return post;
}

이렇게 함으로써 매번 변경할 필요 없이 DEFAULT_POST_AND_OPTIONS에서 변경을 하면 됩니다.

🖊️Transaction 시작

이제부터는 트랜젝션을 사용하지 않으면 발생하는 전형적인 문제에 대해서 알아보겠습니다. post를 생성하는 코드와 이미지를 만드는 코드를 보면 각각 전부 따로 놀고 있습니다. 강제로 에러를 줘보도록 하겠습니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    const post = await this.postsService.createPost(
          userId, body,
    );

      throw new InternalServerErrorException('@@@@@@@@') // 강제 에러 발생

    for (let i = 0; i < body.images.length; i++) {
        await this.postsService.createPostImage({
            post,
            order: i,
            path: body.images[i],
            type: ImageModelType.POST_IMAGE,
        });
    }

    return this.postsService.getPostById(post.id);
}

그리고 포스트맨으로 보내보도록 하겠습니다. 로그인을 진행하고 /common/image로 temp폴더에 임시 저장까지 한 뒤, /post를 해보겠습니다.

{
    "message": "@@@@@@@@",
    "error": "Internal Server Error",
    "statusCode": 500
}

하지만 post 전체 조호를 클릭하면 다음과 같이 나옵니다. 이 데이터는 존재하면 안되는 데이터 입니다. post까지는 생성을 했는데 이미지를 생성하지 못한것 즉, 제대로 작업되지 않은 것입니다. 따라서 이전 상태로 롤백이 되어야합니다. 버그입니다.

이제 이 기능들을 1개로 묶어서 트랜젝션으로 관리하도록 하겠습니다. 강제로 발생시킨 에러를 다시 지워줍니다.

{
    "data": [
        {
            "id": 114,
            "updatedAt": "2024-02-13T13:21:40.868Z",
            "createdAt": "2024-02-13T13:21:40.868Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "images": []
        },

컨트롤러에서 DataSource를 가져옵니다. DataSource는 nest.js 패키지안에 들어있습니다. DataSource를 만들고 release까지 진행이 되어야합니다.

• posts.controller.ts

constructor(
    private readonly postsService: PostsService,
    private readonly dataSource: DataSource, // 추가
) {}

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    // 트랜젝션과 관련된 모든 쿼리를 담당할 쿼리 러너를 생성한다.
    const queryRunner = this.dataSource.createQueryRunner();

    // 쿼리 러너에 연결한다.
    await queryRunner.connect();

    // 쿼리 러너에서 트랜젝션을 시작한다.
    // 이 시점부터 같은 쿼리 러너를 사용하면
    // 트랜젝션 안에서 데이터베이스 액션을 실행 할 수 있다.
    await queryRunner.startTransaction();

    // 로직 실행 -> tryCatch 내부에 사용하기
    try {
      const post = await this.postsService.createPost( 
        userId, body,
      );

      for (let i = 0; i < body.images.length; i++) {
        await this.postsService.createPostImage({
          post,
          order: i,
          path: body.images[i],
          type: ImageModelType.POST_IMAGE,
        });
      }

      // 정상적으로 진행된 경우, commit -> release
      await queryRunner.commitTransaction();
      await queryRunner.release();

      return this.postsService.getPostById(post.id);
    } catch (error) {
      // 어떤 에러든 에러가 던져지면 트랜젝션을 종료하고 워래 상태로 되돌린다.
      await queryRunner.rollbackTransaction();
      await queryRunner.release();
    }
}

하지만 아직 쿼리 러너의 모든 기능이 트랜젝션이 묶이지 않습니다. 같은 쿼리러너를 사용해야만 트랜젝션에 묶이는 것입니다.

따라서 같은 쿼리러너를 사용한 경우에는 같은 저장소에서 가져오도록 만들고, 아닌 경우는 주입을 받았던 레포지토리를 사용하도록 만들겠습니다.

• psots.service.ts

getRepository(queryRunner?: QueryRunner) {
    // queryRunner가 있는 경우에는 queryRunner 저장소만 사용
    // 아니면 주입받은 저장소 사용
    return queryRunner ? queryRunner.manager.getRepository<PostsModel>(PostsModel) : this.postsRepository;
}

getRepository(queryRunner?: QueryRunner) {
    // queryRunner가 있는 경우에는 queryRunner 저장소만 사용
    // 아니면 주입받은 저장소 사용
    return queryRunner ? queryRunner.manager.getRepository<PostsModel>(PostsModel) : this.postsRepository;
}

async createPost(authorId: number, postDto: CreatePostDto, queryRunner?: QueryRunner) {
    const repository = this.getRepository(queryRunner); // 추가

    const post = repository.create({ // 변경
        author: {
          id: authorId,
        },
        ...postDto,
        images: [],
        likeCount: 0,
        commentCount: 0,
    });

    const newPost = await repository.save(post); // 변경
    return newPost;
}

🖊️Transaction 적용 및 테스트

이제 createPost에서는 queryRunner를 파라미터로 값을 받습니다. 따라서 컨트롤러에 queryRunner를 추가하도록 하겠습니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    const queryRunner = this.dataSource.createQueryRunner();
    await queryRunner.connect();
    await queryRunner.startTransaction();

    try {
      const post = await this.postsService.createPost( 
        userId, body, queryRunner, // 추가
      );

      for (let i = 0; i < body.images.length; i++) {
        await this.postsService.createPostImage({
          post,
          order: i,
          path: body.images[i],
          type: ImageModelType.POST_IMAGE,
        });
      }

      await queryRunner.commitTransaction();
      await queryRunner.release();

      return this.postsService.getPostById(post.id);
    } catch (error) {
      await queryRunner.rollbackTransaction();
      await queryRunner.release();
    }
}

그리고 queryRunner를 필요로 하는 createPostImage 서비스 메소드도 바꾸도록 하겠습니다. createPostImage서비스 코드를 보면 imageRepository를 사용하는 공간이 있습니다. 근데 여기서 우리가 queryRunner를 만들고 하면 복잡해집니다. post관련된 기능과 postImage관련된 기능이 섞이기 때문에 image 폴더에 post의 image기능을 담당하는 코드를 작성하겠습니다.

먼저 posts.service.ts에 있는 createPostImage() 내부의 로직을 그대로 옮겨 붙이고 posts.service.ts에 있는 createPostImage()는 제거하겠습니다.

그리고 추가로 queryRunner를 파라미터로 받겠습니다.

• image/images.service.ts

@Injectable()
export class PostsImagesService{

    constructor(
        @InjectRepository(ImageModel)
        private readonly imageRepository: Repository<ImageModel>,
    ){}

      getRepository(queryRunner?: QueryRunner) {
          return queryRunner ? queryRunner.manager.getRepository<ImageModel>(ImageModel) : this.imageRepository;
     }

    async createPostImage(dto: CreatePostImageDto, queryRunner?: QueryRunner) {
          const repository = this.getRepository(queryRunner); // 추가
        const tempFilePath = join(
            TEMP_FOLDER_PATH,
            dto.path,
        );

        try {
              await promises.access(tempFilePath);
        } catch (error) {
              throw new BadRequestException('존재하지 않는 파일입니다. ');
        }

        const fileName = basename(tempFilePath);
        const newPath = join(
            POST_IMAGE_PATH,
            fileName,
        );

        const result = await repository.save({ // 변경
              ...dto,
        });

        await promises.rename(tempFilePath, newPath);
        return result;
    }
}

그리고 posts의 컨트롤러로 이동을 해서 postsImagesService를 주입하고 module에서도 provider로 제공을 하도록 하겠습니다.

• posts.module.ts

@Module({
    imports: [
        TypeOrmModule.forFeature([
            PostsModel,
            ImageModel,
        ]),
        AuthModule,
        UsersModule,
        CommonModule,
    ],
    controllers: [PostsController],
    providers: [PostsService, PostsImagesService,],
    exports: [PostsService]
})
export class PostsModule {}

• posts.controller.ts

@Controller('posts')
export class PostsController {
    constructor(
        private readonly postsService: PostsService,
        private readonly postsImagesService: PostsImagesService, // 추가
        private readonly dataSource: DataSource,
    ) {}
.
.
@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
      const queryRunner = this.dataSource.createQueryRunner();
      await queryRunner.connect();
      await queryRunner.startTransaction();

      try {
          const post = await this.postsService.createPost( 
                userId, body, queryRunner,
          );

          for (let i = 0; i < body.images.length; i++) {
              await this.postsImagesService.createPostImage({ // 변경
                  post,
                  order: i,
                  path: body.images[i],
                  type: ImageModelType.POST_IMAGE,
              }, queryRunner); // 추가
          }

          await queryRunner.commitTransaction();
          await queryRunner.release();

          return this.postsService.getPostById(post.id);
      } catch (error) {
          await queryRunner.rollbackTransaction();
          await queryRunner.release();
      }
}

포스트맨으로 테스트를 하겠습니다. 로그인을 하고 임시 폴더에 이미지를 저장까지 해놓고 진행하겠습니다.

{
    "id": 115,
    "updatedAt": "2024-02-13T14:04:28.383Z",
    "createdAt": "2024-02-13T14:04:28.383Z",
    "title": "제목",
    "content": "내용",
    "likeCount": 0,
    "commentCount": 0,
    "author": {
        "id": 1,
        "updatedAt": "2024-01-26T05:58:10.800Z",
        "createdAt": "2024-01-26T05:58:10.800Z",
        "nickname": "codefactory",
        "email": "codefactory@codefactory.ai",
        "role": "USER"
    },
    "images": [
        {
            "id": 4,
            "updatedAt": "2024-02-13T14:04:28.383Z",
            "createdAt": "2024-02-13T14:04:28.383Z",
            "order": 0,
            "type": 0,
            "path": "/public\\posts\\e3989050-da50-49e3-9dc6-e99afe9612cc.png"
        }
    ]
}

115번입니다. get 요청을 해도 115번으로 나오고 있습니다.

{
    "data": [
        {
            "id": 115,
            "updatedAt": "2024-02-13T14:04:28.383Z",
            "createdAt": "2024-02-13T14:04:28.383Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "images": [
                {
                    "id": 4,
                    "updatedAt": "2024-02-13T14:04:28.383Z",
                    "createdAt": "2024-02-13T14:04:28.383Z",
                    "order": 0,
                    "type": 0,
                    "path": "/public\\posts\\e3989050-da50-49e3-9dc6-e99afe9612cc.png"
                }
            ]
        },

이번에는 중간에 에러를 만들겠습니다.

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    const queryRunner = this.dataSource.createQueryRunner();
    await queryRunner.connect();
    await queryRunner.startTransaction();

    try {
        const post = await this.postsService.createPost( 
              userId, body, queryRunner,
        );

        throw new InternalServerErrorException('!!!!!!!!!!!!!!!!!!!!!!!');

        for (let i = 0; i < body.images.length; i++) {
            await this.postsImagesService.createPostImage({
                post,
                order: i,
                path: body.images[i],
                type: ImageModelType.POST_IMAGE,
            }, queryRunner);
        }

        await queryRunner.commitTransaction();
        await queryRunner.release();

        return this.postsService.getPostById(post.id);
    } catch (error) {
        await queryRunner.rollbackTransaction();
        await queryRunner.release();
          throw new InternalServerErrorException('에러 발생');
    }
}

똑같이 로그인을 하고 이미지를 임시 폴더에 저장하고 진행하겠습니다.

{
    "message": "에러 발생",
    "error": "Internal Server Error",
    "statusCode": 500
}

전체 조회를 해도 그대로 115번이 존재하는걸 알 수 있습니다. 즉, 안에서 에러가 발생하면서 트랜젝션이 롤백이 된 것입니다.

이제 강제로 만든 에러는 제거합니다.

{
    "data": [
        {
            "id": 115,
            "updatedAt": "2024-02-13T14:04:28.383Z",
            "createdAt": "2024-02-13T14:04:28.383Z",
            "title": "제목",
            "content": "내용",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            },
            "images": [
                {
                    "id": 4,
                    "updatedAt": "2024-02-13T14:04:28.383Z",
                    "createdAt": "2024-02-13T14:04:28.383Z",
                    "order": 0,
                    "type": 0,
                    "path": "/public\\posts\\e3989050-da50-49e3-9dc6-e99afe9612cc.png"
                }
            ]
        },

따라서 서버에서 a, b, c 에러가 날 수 있는 상황이 있으면 무조건 트랜젝션으로 묶어줘야 합니다.

고전적인 방법으로, 제목 내용 이미지를 작성하고 업로드 버튼을 누르면 서버로 전송이 됩니다.

현재 구현돼있는 이미지 업로드 방식

• 제목, 내용, 이미지를 모두 선택한 다음 모든 정보를 한번에 서버로 업로드
• 텍스트는 빠르지만 파일은 오래걸릴 수 있음
• 업로드 버튼을 누를 때, 시간이 오래걸리면 사용자는 불편을 느낌
• 파일 1개가 아닌 여러개면 더욱 오랜시간이 걸림

앞으로 바꿀 방식

• 이미지를 선택할 때마다 업로드 시키기
• 업로드 된 이미지들은 임시 폴더에 잠시 저장 (/public/temp)
• 이미지 업로드를 한 후 응답받은 이미지의 경로만 프론트에서 저장 해둔 후, 포스트를 업로드 할 때 이미지의 경로만 추가
• POST /posts 엔드포인트에 이미지 경로를 함께 보낼경우 해당 이미지를 임시 폴더(/public/temp)에서부터 포스트 폴더(/public/posts)로 이동시키기
• PostEntity의 image 필드에 경로를 추가한다.
• S3 presigned url을 사용하면 많이 사용되는 방식이다.

장단점

🖊️이미지 업로드 엔드포인트 생성

posts 모듈에 있던 MulterModule를 common 모듈로 이동시킵니다. 모든 파일 업로드는 common 모듈에서 진행을 하도록 하겠습니다.

• common.module.ts

import { BadRequestException, Module } from '@nestjs/common';
import { CommonService } from './common.service';
import { CommonController } from './common.controller';
import { MulterModule } from '@nestjs/platform-express';
import { extname } from 'path';
import * as multer from 'multer';
import {v4 as uuid} from 'uuid'; // 일반적으로 많이 사용하는 버전 v4

@Module({
    imports: [
          AuthModule,
        UsersModule,
        MulterModule.register({
            // 파일을 다룰 떄 여러가지 옵션 기능
            limits: {
                // 바이트 단위로 입력
                fileSize: 10000000,
            },
            fileFilter: (req, file, cb) => { // req: 요청 | file: req에 들어있는 파일
                /**
                 * cb(에러, boolean)
                 * 
                 * 첫번째 파라미터에는 에러가 있을경우 에러정보를 넣어준다.
                 * 두번쨰 파라미터는 파일을 받을지 말지 boolean을 넣어준다.
                 */

                // asdasd.jpg -> .jpg
                const extension = extname(file.originalname);

                if (extension !== '.jpg' && extension !== '.jpeg' && extension !== '.png') {
                  return cb(new BadRequestException('jpg/jpeg/png 파일만 없로드 가능합니다. '), false); // cb(에러, boolean)
                }
                return cb(null, true); // 파일을 받는다.
            },
            storage: multer.diskStorage({
                // 파일 저장시 어디로 이동 시킬까?
                destination: function(req, res, cb) { 
                      cb(null, ); // 파일 업로드 위치
                },
                // 파일 이름 뭐로 지을래?
                filename: function(req, file, cb) {
                    // uuid + file의 확장자
                    cb(null, `${uuid()}${extname(file.originalname)}`); // POST_IMAGE_PATH로 이동
                }
            }),
        }),
    ],
    controllers: [CommonController],
    providers: [CommonService],
    exports: [CommonService]
})
export class CommonModule {}

파일 업로드의 위치만 변경하면 됩니다. path.const.ts로 이동해서 임시폴더의 경로를 만들어 주고, public에 temp 폴더를 생성하겠습니다.

• common/const/path.const.ts

import { TEMP_FOLDER_NAME } from './path.const';
import { join } from "path";

export const PROJECT_ROOT_PATH = process.cwd();
export const PUBLIC_FOLDER_NAME = 'public';
export const POSTS_FOLDER_NAME = 'posts';
// 임시 폴더 이름
export const TEMP_FOLDER_NAME = 'temp';

export const PUBLIC_FOLDER_PATH = join(
     PROJECT_ROOT_PATH,
     PUBLIC_FOLDER_NAME
)

export const POST_IMAGE_PATH = join(
     PUBLIC_FOLDER_PATH,
     POSTS_FOLDER_NAME,
)

export const POST_PUBLIC_IMAGE_PATH = join(
     PUBLIC_FOLDER_NAME,
     POSTS_FOLDER_NAME,
)

// 추가
export const TEMP_FOLDER_PATH = join(
     PUBLIC_FOLDER_PATH,
     TEMP_FOLDER_NAME,
)

선 업로드 방식은 먼저 temp 폴더에 전부 저장을 하겠습니다. common.module.ts로 가서 임시 폴더의 경로를 입력하겠습니다. 이제 파일을 업로드하면 전부 temp폴더에 이동을 할 것입니다.

• common.module.ts

@Module({
    imports: [
          AuthModule,
        UsersModule,
        MulterModule.register({
            limits: {
                fileSize: 10000000,
            },
            fileFilter: (req, file, cb) => {
                const extension = extname(file.originalname);

                if (extension !== '.jpg' && extension !== '.jpeg' && extension !== '.png') {
                  return cb(new BadRequestException('jpg/jpeg/png 파일만 없로드 가능합니다. '), false);
                }
                return cb(null, true);
            },
            storage: multer.diskStorage({
                destination: function(req, res, cb) { 
                      cb(null, TEMP_FOLDER_PATH); // 파일 업로드 위치
                },
                filename: function(req, file, cb) {
                    cb(null, `${uuid()}${extname(file.originalname)}`);
                }
            }),
        }),
    ],
    controllers: [CommonController],
    providers: [CommonService],
    exports: [CommonService]
})
export class CommonModule {}

common.module.ts에 작성을 했으니까, controller로 이동해서 작업을 하겠습니다.

• common.controller.ts

@Controller('common')
export class CommonController {

    constructor(private readonly commonService: CommonService) {}

    @Post('image')
      @UseGuards(AccessTokenGuard)
    @UseInterceptors(FileInterceptor('image'))
    postImage(
          @UploadedFile() file: Express.Multer.File,
    ) {
        // 여기까지 왔다면?
    }
}

만약 주석이 달려있는 곳까지 통과를 했다면 common.module.ts의 코드를 전부 통과하고, temp 폴더에 이미지가 존재하는 상태입니다. 마지막은 filename만 반환하면 됩니다.

@Controller('common')
export class CommonController {

    constructor(private readonly commonService: CommonService) {}

    @Post('image')
      @UseGuards(AccessTokenGuard)
    @UseInterceptors(FileInterceptor('image'))
    postImage(
          @UploadedFile() file: Express.Multer.File,
    ) {
        return {
              fileName: file.filename,
        }
    }
}

포스트맨으로 테스트를 해보겠습니다.

{
    "fileName": "e9cdf67e-015f-449d-b0fa-1f654a35b082.png"
}

🖊️POST posts엔드포인트 변경

현재 이미지 name을 받아오는 API를 만들었습니다. 이제 post를 생성할 때, 반환받을 이미지의 이름을 postPosts()에 보내주게 되면 해당 path에 mapping을 하고 temp폴더에 있는 이미지를 post 폴더로 이동시키도록 만들겠습니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
@UseInterceptors(FileInterceptor('image')) // 더 이상 필요 없다. -> 이미지 받는 것은 common에서 처리하기 때문에!
postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    return this.postsService.createPost(
          userId, body, file?.filename,
    );
}
.
.
변경
.
.
@Post()
@UseGuards(AccessTokenGuard)
postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    return this.postsService.createPost(
          userId, body,
    );
}

• posts.service.ts

async createPost(authorId: number, postDto: CreatePostDto) { // 변경
    const post = this.postsRepository.create({
        author: {
              id: authorId,
        },
        ...postDto,
        // 변경
        likeCount: 0,
        commentCount: 0,
    });

    const newPost = await this.postsRepository.save(post);
    return newPost;
}

• posts/dto/create-post.dto.ts

export class CreatePostDto extends PickType(PostsModel, ['title', 'content']) {

     @IsString()
     @IsOptional()
     image?: string;
}

image에 temp 폴더의 이미지 이름을 넣어주게 되면, postPostw() 내부의 createPost()에 CreatePostDto를 통해서 들어가고 생성됩니다.

포스트맨으로 테스트를 해보겠습니다. 로그인을 먼저 하고 common/image를 보내서 temp폴더에 이미지를 이동시킵니다.

{
    "fileName": "36b07d14-7378-4370-a605-58fad992b224.png"
}

그 후, 해당 이미지 이름을 복사해서 /posts에 추가를 합니다.

{
    "title": "Flutter lecture",
    "content": "POST REQUEST",
    "image": "/public\\posts\\36b07d14-7378-4370-a605-58fad992b224.png", // 생성
    "likeCount": 0,
    "commentCount": 0,
    "author": {
        "id": 1
    },
    "id": 110,
    "updatedAt": "2024-02-12T01:48:35.564Z",
    "createdAt": "2024-02-12T01:48:35.564Z"
}

등록이 잘 되었는지 확인을 해보겠습니다.

{
    "data": [
        {
            "id": 110,
            "updatedAt": "2024-02-12T01:48:35.564Z",
            "createdAt": "2024-02-12T01:48:35.564Z",
            "title": "Flutter lecture",
            "content": "POST REQUEST",
            "image": "/public\\posts\\36b07d14-7378-4370-a605-58fad992b224.png",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },

사진이 들어가 있는지 확인을 해보겠습니다.

http://localhost:3000/public//posts//36b07d14-7378-4370-a605-58fad992b224.png

// 20240212195015
// http://localhost:3000/public//posts//36b07d14-7378-4370-a605-58fad992b224.png

{
  "statusCode": 404,
  "message": "ENOENT: no such file or directory, stat 'C:\\workspace\\nestjsworkspace\\df_sns_2\\public\\index.html'"
}

이렇게 에러가 발생한 이유는 temp폴더에 있는 사진을 posts폴더로 아직 옮기지 않았기 때문입니다.

🖊️엔티티가 생성될 때 임시 폴더로부터 이미지 파일 이동시키기

• posts.service.ts

async createPostImage(dto: CreatePostDto) {
    // dto의 이름을 기반으로 파일의 경로를 생성한다.
    const tempFilePath = join( // 이미지의 절대경로를 tempFilePath로
        TEMP_FOLDER_PATH,
        dto.image,
    );
}
.
.
추가
.
.
import { promises } from 'fs'; // fs: file system

async createPostImage(dto: CreatePostDto) {

    const tempFilePath = join(
        TEMP_FOLDER_PATH,
        dto.image,
    );

    try { // import { promises } from 'fs'
        // 파일이 존재하는지 확인
        // 만약에 파일이 존재하지 않으면 에러를 던짐
        await promises.access(tempFilePath);
    } catch (error) {
          throw new BadRequestException('존재하지 않는 파일입니다. ');
    }
}
.
.
완성
.
.
import { basename, join } from 'path';

async createPostImage(dto: CreatePostDto) {

    const tempFilePath = join(
        TEMP_FOLDER_PATH,
        dto.image,
    );

    try {
        await promises.access(tempFilePath);
    } catch (error) {
          throw new BadRequestException('존재하지 않는 파일입니다. ');
    }

    // 파일의 이름만 가져오기
    // /Users/aaa/bbb/ccc/asdad.jpg -> asdad.jpg
    const fileName = basename(tempFilePath);

    // 새로 이동할 포스트 폴더의 경로 + 이미지 이름
    // {프로젝트 경로}/public/posts/asdad.jpg
    const newPath = join(
        POST_IMAGE_PATH,
        fileName,
    );

    // 파일 옮기기
    await promises.rename(tempFilePath, newPath);
    return true;
}

post를 생성하기 전에 만드는 방법으로 컨트롤러 코드를 작성하겠습니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
async postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
    @UploadedFile() file?: Express.Multer.File,
) {
    await this.postsService.createPostImage(body); // temp -> posts
    return this.postsService.createPost(
          userId, body,
    );
}

temp폴더에 존재하는 이미지를 posts폴더로 이동시키고 post를 생성합니다. 포스트맨으로 테스트를 해보겠습니다.

{
    "fileName": "ba9df4fd-f970-4709-91b5-8a36d5251794.png"
}

{
    "title": "Flutter lecture",
    "content": "POST REQUEST",
    "image": "/public\\posts\\ba9df4fd-f970-4709-91b5-8a36d5251794.png",
    "likeCount": 0,
    "commentCount": 0,
    "author": {
        "id": 1
    },
    "id": 111,
    "updatedAt": "2024-02-12T02:18:52.698Z",
    "createdAt": "2024-02-12T02:18:52.698Z"
}

{
    "data": [
        {
            "id": 111,
            "updatedAt": "2024-02-12T02:18:52.698Z",
            "createdAt": "2024-02-12T02:18:52.698Z",
            "title": "Flutter lecture",
            "content": "POST REQUEST",
            "image": "/public\\posts\\ba9df4fd-f970-4709-91b5-8a36d5251794.png",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },

http://localhost:3000/public//posts//ba9df4fd-f970-4709-91b5-8a36d5251794.png

ba9df4fd-f970-4709-91b5-8a36d5251794.png 이미지가 이동된 것을 알 수 있습니다.

지금 과정은 temp폴더에 있는 사진을 옮기면 끝이 나기 때문에 사용자 입장에서는 매우 빠르다고 느끼게 됩니다.

물론 단점으로는 temp폴더에 적재된 이미지들을 저장소를 위해 관리해줘야하는 불편함이 존재합니다. 따라서 기존방법과 새로운 방법을 같이 사용하는 것이 좋습니다.

파일이 잘 올라갔지만, 이 파일을 볼 수 있어야합니다. 따라서 Static File을 이용해서 볼 수 있도록 만들겠습니다. Static File은 이미지를 의미합니다. 이후에 경로를 외부에서도 볼 수 있도록 바꾸는 것입니다. nest.js에서는 이렇게 이미지와 같은 Static File들을 외부에서도 볼 수 있도록 기능을 만들어 놓았습니다. 먼저 패키지를 설치합니다.

yarn add @nestjs/serve-static

app.module.ts에 ServeStaticModule를 추가합니다. rootPath는 파일들을 serving할 최상단의 폴더를 의미합니다. 즉 public을 포함하는 것입니다.

따라서 PUBLIC_FOLDER_PATH를 하게되면 public은 건너뛰고 /posts/4022.jpg이렇게 주소가 만들어집니다. 하지만 이미 우리는 posts 컨트롤러에 해당 URL이 존재하기 때문에 약간의 변경을 주겠습니다.

serveRoot에 /public을 주므로써 /public/posts/4022.jpg만들어지게 됩니다.

• app.module.ts

@Module({
    imports: [
        ConfigModule.forRoot({
            envFilePath: '.env',
            isGlobal: true,
        }),
        TypeOrmModule.forRoot({
            type: 'postgres',
            host: process.env[ENV_DB_HOST_KEY],
            port: parseInt(process.env[ENV_DB_PORT_KEY]),
            username: process.env[ENV_DB_USERNAME_KEY],
            password: process.env[ENV_DB_PASSWORD_KEY],
            database: process.env[ENV_DB_DATABASE_KEY],
            entities: [
                PostsModel,
                UsersModel,
            ],
            synchronize: true,
        }),
        PostsModule,
        UsersModule,
        AuthModule,
        CommonModule,
          // 추가
        ServeStaticModule.forRoot({
            // 4022.jpg      
            rootPath: PUBLIC_FOLDER_PATH, // http://localhost:3000/posts/4022.jpg
            serveRoot: '/public' // http://localhost:3000/public/posts/4022.jpg
        }),
          // 여기까지
    ],
    controllers: [AppController],
    providers: [AppService, {
        provide: APP_INTERCEPTOR,
        useClass: ClassSerializerInterceptor,
    }],
})
export class AppModule {}

포스트맨으로 잘 나오는지 테스트를 하겠습니다.

{
    "data": [
        {
            "id": 109,
            "updatedAt": "2024-02-04T04:30:17.814Z",
            "createdAt": "2024-02-04T04:30:17.814Z",
            "title": "파일 업로드",
            "content": "파일 업로드 테스트",
            "image": "06961c7a-b923-4d24-a13b-d4cc2fa5ee63.png",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },
        .
        .
        {
            "id": 90,
            "updatedAt": "2024-01-28T02:12:54.437Z",
            "createdAt": "2024-01-28T02:12:54.437Z",
            "title": "임의로 생성된 81",
            "content": "임의로 생성된 포수트 내용 81",
            "image": null,
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        }
    ],
    "cursor": {
        "after": 90
    },
    "count": 20,
    "next": "http://localhost:3000/posts?order__createdAt=DESC&take=20&where__id__less_than=90"
}

image를 복사해서 URL에 넣어봅니다.

http://localhost:3000/public/posts/06961c7a-b923-4d24-a13b-d4cc2fa5ee63.png

StaticFile Serving을 해놓을 파일을 등록하면, 그 폴더안에 넣은 모든 파일들은 외부에서 볼 수 있습니다.

🖊️Class Transformer 이용해서 URL에 prefix 추가

{
            "id": 109,
            "updatedAt": "2024-02-04T04:30:17.814Z",
            "createdAt": "2024-02-04T04:30:17.814Z",
            "title": "파일 업로드",
            "content": "파일 업로드 테스트",
            "image": "06961c7a-b923-4d24-a13b-d4cc2fa5ee63.png",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },

image에서 prefix까지 전부 받으면 좋을 것 같습니다. /public/posts까지 붙여서 말이죠.

엔티티에서 프로퍼티를 변경할 수 있는 기능은 class-transformer를 사용하는 것입니다. 이번에는 @Transform()을 배워보도록 하겠습니다.

@Transform 내부에서 value를 받습니다. 이 값은 image 키값에 매칭이되는 value를 의미합니다. 예를 들면 4022.jpg를 의미합니다.

따라서 이 값이 존재하는 경우에만 POST_PUBLIC_IMAGE_PATH와 value를 join한다는 것입니다.

• posts.entity.ts

@Entity()
export class PostsModel extends BaseModel {

    @ManyToOne(() => UsersModel, (user) => user.posts, {
          nullable: false,
    })
    author: UsersModel;

    @Column()
    @IsString({
          message: stringValidationMessage
    }) 
    title: string;

    @Column()
    @IsString({
          message: stringValidationMessage
    }) 
    content: string;

    @Column({
          nullable: true,
    })
    // value가 존재할 경우에만 value 앞에 /public/posts를 붙임, value가 존재하지 않으면 null or undefined
    @Transform(({value}) => value && `/${join(POST_PUBLIC_IMAGE_PATH, value)}`) // value: image에 입력된 값 의미
    image?: string;

    @Column()
    likeCount: number;

    @Column()
    commentCount: number;
}

포스트맨으로 테스트를 하겠습니다.

{
    "data": [
        {
            "id": 109,
            "updatedAt": "2024-02-04T04:30:17.814Z",
            "createdAt": "2024-02-04T04:30:17.814Z",
            "title": "파일 업로드",
            "content": "파일 업로드 테스트",
            "image": "/public\\posts\\06961c7a-b923-4d24-a13b-d4cc2fa5ee63.png",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },
        .
        .
        {
            "id": 90,
            "updatedAt": "2024-01-28T02:12:54.437Z",
            "createdAt": "2024-01-28T02:12:54.437Z",
            "title": "임의로 생성된 81",
            "content": "임의로 생성된 포수트 내용 81",
            "image": null,
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        }
    ],
    "cursor": {
        "after": 90
    },
    "count": 20,
    "next": "http://localhost:3000/posts?order__createdAt=DESC&take=20&where__id__less_than=90"
}

http://localhost:3000/public//posts//06961c7a-b923-4d24-a13b-d4cc2fa5ee63.png

지금까지 파일 업로드의 매우 클래식한 방법을 알아보았습니다. 다음 챕터에서는 현대에서 많이 사용되는 파일 업로드를 사용해 보겠습니다.

@PreUpdate와 @PrePersist는 JPA에서 사용되는 라이프사이클 콜백 어노테이션입니다. 엔티티의 상태가 DB에 저장되기 전에 동작이 수행되도록 지정하는 데 사용됩니다.

@PreUpdate

엔티티의 상태가 업데이트 되기전에 실행되는 메소드입니다.

@Entity
public class YourEntity {

    // fields, getters, setters, etc.

    @PreUpdate
    public void beforeUpdate() {
        // Your logic before the entity is updated
    }
}

@PrePersist

엔티티가 처음으로 저장되기 직전에 호출됩니다. 엔티티가 저장되기 전에 필요한 초기화 작업을 수행하거나 생성일을 설정하는 작업에 사용됩니다.

@Entity
public class YourEntity {

    // fields, getters, setters, etc.

    @PrePersist
    public void beforePersist() {
        // Your logic before the entity is persisted (stored)
    }
}

결론

import java.time.LocalDateTime;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.PrePersist;
import javax.persistence.PreUpdate;

@Entity
public class Book {

    @Id
    private Long id;

    private String title;

    private LocalDateTime createdAt;

    private LocalDateTime updatedAt;

    // Constructors, getters, setters, etc.

    @PrePersist
    public void beforePersist() {
        // 엔터티가 저장되기 전에 호출되는 메서드
        this.createdAt = LocalDateTime.now();
        this.updatedAt = this.createdAt;
    }

    @PreUpdate
    public void beforeUpdate() {
        // 엔터티가 업데이트되기 전에 호출되는 메서드
        this.updatedAt = LocalDateTime.now();
    }
}

@PrePersist는 엔티티가 저장되기 전에 호출되는 메소드이고 @PreUpdate는 엔티티가 업데이트되기 전에 호출되는 메소드입니다.

자바스크립트 진영에서는 이미지를 Multer를 이용해서 쉽게 풀어나갑니다. 따라서 Nest.js에서도 Multer 라이브러리를 사용해서 파일 업로드를 구현하겠습니다. 먼재 4개의 페키지multer @types/multer uuid @types/uuid 를 설치하겠습니다.

// multer + multer의 타입 definition을 제공해주는 타입스크립트 파일 추가
yarn add multer @types/multer uuid @types/uuid

• posts/entities/posts.entity.ts

@Entity()
export class PostsModel extends BaseModel { 

    @ManyToOne(() => UsersModel, (user) => user.posts, {
          nullable: false,
    })
    author: UsersModel;

    @Column()
    @IsString({
          message: stringValidationMessage
    }) 
    title: string;

    @Column()
    @IsString({
          message: stringValidationMessage
    }) 
    content: string;

    @Column({
          nullable: true,
    })
    image?: string; // 추가(null 일수도 있고 아닐수도 있다!)

    @Column()
    likeCount: number;

    @Column()
    commentCount: number;
}

posts.module.ts에 MulterModule을 등록하겠습니다.

• posts.module.ts

import { MulterModule } from '@nestjs/platform-express';

@Module({
    imports: [
        TypeOrmModule.forFeature([
            PostsModel,
        ]),
        AuthModule,
        UsersModule,
        CommonModule,
        MulterModule.register({ // 파일을 다룰 떄 여러가지 옵션 기능
            limits: {
                fileSize: 10000000, // 바이트 단위로 입력
            },
            fileFilter: (req, file, cb) => { // req: 요청 | file: req에 들어있는 파일
                /**
                 * cb(error, boolean)
                 * 
                 * 첫번째 파라미터에는 에러가 있을경우 에러정보를 넣어준다.
                 * 두번쨰 파라미터는 파일을 받을지 말지 boolean을 넣어준다.
                 */
            }
        }),
    ],
    controllers: [PostsController],
    providers: [PostsService],
    exports: [PostsService]
})
export class PostsModule {}

jpg, jpeg, png만 받을 수 있도록 fileFilter를 추가하겠습니다.

MulterModule.register({
    limits: {
          fileSize: 10000000,
    },
      // 추가
    fileFilter: (req, file, cb) => {
        const extension = extname(file.originalname); // asdasd.jpg -> .jpg
        if (extension !== '.jpg' && extension !== '.jpeg' && extension !== '.png') {
              return cb(new BadRequestException('jpg/jpeg/png 파일만 없로드 가능합니다. '), false); // cb(에러, boolean)
        }
        return cb(null, true); // 파일을 받는다.
    },

저장소(폴더) storage 경로를 추가하겠습니다. storage에서의 cb는 2가지 인수로 받는데 error와 definition을 받습니다. fileFilter는 error과 acceptFile을 받습니다.

import * as multer from 'multer';
.
.
MulterModule.register({
    limits: {
        fileSize: 10000000,
    },
    fileFilter: (req, file, cb) => {
        const extension = extname(file.originalname);
        if (extension !== '.jpg' && extension !== '.jpeg' && extension !== '.png') {
              return cb(new BadRequestException('jpg/jpeg/png 파일만 없로드 가능합니다. '), false);
        }
        return cb(null, true);
    },
    storage: multer.diskStorage({
        // 파일 저장시 어디로 이동 시킬까?
        destination: function(req, res, cb) { 
              cb(null, 경로)
        },
    }),
}),

경로를 작성하기에 앞서, 저희는 앞으로 여러 파일과 이미지를 많이 사용할 것이기 때문에, common.const에다가 각각의 path를 정리하겠습니다.

• common/const/path.const.ts

// 서버 프로젝트의 루트 폴더
export const PROJECT_ROOT_PATH = process.cwd(); // current working directory 약자
// 외부에서 접근 가능한 파일들을 모아둔 폴더 이름
export const PUBLIC_FOLDER_NAME = 'public';

그리고 public 폴더를 생성해주고, 계속해서 추가를 하겠습니다.

import { join } from "path";

// /Users/asdqewdsadad/asdasd/bfgb/DF_SNS_2
export const PROJECT_ROOT_PATH = process.cwd(); // 서버 프로젝트의 루트 폴더
export const PUBLIC_FOLDER_NAME = 'public';
export const POSTS_FOLDER_NAME = 'posts'; // 포스트 이미지들을 저장할 폴더 이름

// 실제 공개폴더의 절대경로
// /{프로젝트의 위치}/public
export const PUBLIC_FOLDER_PATH = join( // 경로를 만들어 주는 함수
     // string을 무한히 넣을 수 있다.
     PROJECT_ROOT_PATH,
     PUBLIC_FOLDER_NAME
)

// 포스트 이미지를 저장할 폴더
// /{프로젝트의 위치}/public/posts
export const POST_IMAGE_PATH = join(
     PUBLIC_FOLDER_PATH,
     POSTS_FOLDER_NAME,
)

지금까지 작성한 것은 프로젝트의 위치에서부터 경로를 가져오고 있습니다. 그 의미는 PUBLIC_FOLDER_PATH과 POST_IMAGE_PATH는 완전히 절대경로인 것입니다. 하지만 우리가 요청을 받을 때는 절대경로를 사용하지 않고 /public/posts/xxx.png 이렇게 받을 것입니다. 뒤에 이미지는 다를 수 있으니까 /public/posts까지 작성해 보겠습니다.

import { join } from "path";

export const PROJECT_ROOT_PATH = process.cwd();
export const PUBLIC_FOLDER_NAME = 'public';
export const POSTS_FOLDER_NAME = 'posts';
export const PUBLIC_FOLDER_PATH = join( 
     PROJECT_ROOT_PATH,
     PUBLIC_FOLDER_NAME
)
export const POST_IMAGE_PATH = join(
     PUBLIC_FOLDER_PATH,
     POSTS_FOLDER_NAME,
)

// 절대경로 x
// http://localhost:3000 + /public/posts/xxx.png
export const POST_PUBLIC_IMAGE_PATH = join(
     PUBLIC_FOLDER_NAME,
     POSTS_FOLDER_NAME,
)

/public/posts 뒤에 나오는 xxx.png는 나중에 처리하겠습니다. 왜냐하면 그때마다 확장자가 달라지기 때문입니다.

다시 posts.module.ts로 가서 마저 storage의 cb함수를 작성하겠습니다.

MulterModule.register({
    limits: {
        fileSize: 10000000,
    },
    fileFilter: (req, file, cb) => {
        const extension = extname(file.originalname);
        if (extension !== '.jpg' && extension !== '.jpeg' && extension !== '.png') {
              return cb(new BadRequestException('jpg/jpeg/png 파일만 없로드 가능합니다. '), false);
        }
        return cb(null, true);
    },
    storage: multer.diskStorage({
        destination: function(req, res, cb) { 
              cb(null, POST_IMAGE_PATH); // 여기로 파일을 업로드 한다
        },
    }),
}),

definition에 파일을 업로드시 필요한 filename을 추가하겠습니다.

import {v4 as uuid} from 'uuid'; // uuid 사용시, v4가 일반적
.
.
MulterModule.register({
    limits: {
        fileSize: 10000000,
    },
    fileFilter: (req, file, cb) => {
        const extension = extname(file.originalname);
        if (extension !== '.jpg' && extension !== '.jpeg' && extension !== '.png') {
              return cb(new BadRequestException('jpg/jpeg/png 파일만 없로드 가능합니다. '), false);
        }
        return cb(null, true);
    },
    storage: multer.diskStorage({
        // 파일 저장시 어디로 이동 시킬까?
        destination: function(req, res, cb) { 
              cb(null, POST_IMAGE_PATH); // 파일 업로드 위치
        },
        // 파일 이름 뭐로 지을래?
        filename: function(req, res, cb) {
            // uuid + file의 확장자
            cb(null, `${uuid()}${extname(file.originalname)}`) // POST_IMAGE_PATH로 이동
        }
    }),
}),

🖊️FileInterceptor 적용

컨트롤러에서 파일업로드를 어떻게 받는지 확인해보겠습니다. postsPost는 데이터를 새롭게 추가하는 메소드이기 때문에 @UseInterceptor를 추가합니다. 그리고 내부에는 FileInterceptor를 넣고 파라미터로 파일을 업로드할 필드의 이름을 넣습니다.

만약 image가 되면 image라는 키값에 uuid.png가 value로 매칭이 되고 컨트롤러 로직이 실행됩니다.

즉, 컨트롤러 로직은 @UseInterceptor를 통해서 posts.module.ts에 작성한 로직이 전부 통과되어야 발동하는 것입니다.

• posts.controller.ts

@Post()
@UseGuards(AccessTokenGuard)
@UseInterceptors(FileInterceptor('image')) // 파일을 업로드할 필드의 이름 -> image라는 키값에 넣어서 보냄
postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
) {
    return this.postsService.createPost(
          userId, body
    );
}

그러면 만들어진 파일을 받고 사용하는 코드를 작성하겠습니다.

@Post()
@UseGuards(AccessTokenGuard)
@UseInterceptors(FileInterceptor('image'))
postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
      @UploadedFile() file?: Express.Multer.File, // 추가
) {
    return this.postsService.createPost(
          userId, body
    );
}

객체를 생성할 때 이미지를 넣어야하니까 controller와 posts.service.ts 모두 추가를 하겠습니다.

@Post()
@UseGuards(AccessTokenGuard)
@UseInterceptors(FileInterceptor('image'))
postPosts(
    @User('id') userId: number,
    @Body() body: CreatePostDto,
      @UploadedFile() file?: Express.Multer.File,
) {
    return this.postsService.createPost(
          userId, body, file?.filename, // filename은 file이 null이 아닌 경우에만 들어올 수 있으니까
    );
}

• posts.service.ts

async createPost(authorId: number, postDto: CreatePostDto, image?: string) { // 추가
    const post = this.postsRepository.create({
        author: {
              id: authorId,
        },
        ...postDto,
        image, // 추가
        likeCount: 0,
        commentCount: 0,
    });
    const newPost = await this.postsRepository.save(post);
    return newPost;
}

포스트맨으로 테스트를 해보겠습니다.

{
    "title": "파일 업로드",
    "content": "파일 업로드 테스트",
    "image": "06961c7a-b923-4d24-a13b-d4cc2fa5ee63.png", // uuid
    "likeCount": 0,
    "commentCount": 0,
    "author": {
        "id": 1
    },
    "id": 109,
    "updatedAt": "2024-02-04T04:30:17.814Z",
    "createdAt": "2024-02-04T04:30:17.814Z"
}

실제로 저장이 되었는지 확인해보겠습니다.

{
    "data": [
        {
            "id": 109,
            "updatedAt": "2024-02-04T04:30:17.814Z",
            "createdAt": "2024-02-04T04:30:17.814Z",
            "title": "파일 업로드",
            "content": "파일 업로드 테스트",
            "image": "06961c7a-b923-4d24-a13b-d4cc2fa5ee63.png",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },
        .
        .
        {
            "id": 90,
            "updatedAt": "2024-01-28T02:12:54.437Z",
            "createdAt": "2024-01-28T02:12:54.437Z",
            "title": "임의로 생성된 81",
            "content": "임의로 생성된 포수트 내용 81",
            "image": null,
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        }
    ],
    "cursor": {
        "after": 90
    },
    "count": 20,
    "next": "http://localhost:3000/posts?order__createdAt=DESC&take=20&where__id__less_than=90"
}

• auth/const/auth.const.ts

export const PROTOCOL = 'http';
export const HOST = 'localhost:3000';

지금 우리는 환경변수를 다음과 같이 작성을 했습니다. 매우 중요한 정보이기 때문에 노출이 안되어야 합니다. 따라서 깃허브와 같은 곳에서는 깃허브에 올릴 때, gitignore를 해줘야 합니다.

그리고 nest.js에서는 이런 환경 변수를 잘 다룰 수 있도록 config 모듈을 제공해주고 있습니다. 이 모듈은 기본으로 설치되어 있는 모듈이 아니기 때문에 설치를 해줘야합니다.

yarn add @nestjs/config

일단 환경변수를 어떤 식으로 선언하는지 보도록 하겠습니다. 최상단에 .env파일을 생성합니다.

그리고 .env파일을 생성하면 가장 먼저 해야할 것이 gitignore에 등록을 해줘야 합니다. 깃에서 관리를 하지 못하게 만드는 것입니다. auth/common/const/env.const.ts에 있는 내용을 .env파일에 작성을 해줍니다.

또한 JWT관련 내용도 추가하겠습니다.

• .env

JWT_SECRET=codefactory
HASH_ROUNDS=10
PROTOCOL=http
HOST=localhost:3000

그리고 app.module.ts를 보면 데이터베이스 내용들도 전부 하드코딩으로 박혀있습니다.

TypeOrmModule.forRoot({
    type: 'postgres',
    host: '127.0.0.1',
    port: 5433,
    username: 'postgresql',
    password: 'postgresql',
    database: 'postgresql',
    entities: [
        PostsModel,
        UsersModel,
    ],
    synchronize: true,
}),

이런 정보들도 PROD가 실행되면 보안을 위해서 숨겨야합니다. 이 정보 또한 env 파일로 옮기겠습니다.

• .env

JWT_SECRET=codefactory
HASH_ROUNDS=10

PROTOCOL=http
HOST=localhost:3000

DB_HOST=localhost
DB_PORT=5433
DB_USERNAME=postgresql
DB_PASSWORD=postgresql
DB_DATABASE=postgresql

🖊️환경변수 적용

이제부터는 env파일에 적힌 환경변수를 사용해보겠습니다. 일단 app.module.ts에 Config 모듈을 등록해야합니다.

• app.module.ts

@Module({
    imports: [
          ConfigModule.forRoot({
            envFilePath: '.env', // nest.js에서 사용될 env 닉네임
            isGlobal: true, // AppModule에 설정해주면 어디서든 사용 가능
        }),
        TypeOrmModule.forRoot({
            type: 'postgres',
            host: '127.0.0.1',
            port: 5433,
            username: 'postgresql',
            password: 'postgresql',
            database: 'postgresql',
            entities: [
                PostsModel,
                UsersModel,
            ],
            synchronize: true,
        }),
        PostsModule,
        UsersModule,
        AuthModule,
        CommonModule,
    ],
    controllers: [AppController],
    providers: [AppService, {
        provide: APP_INTERCEPTOR,
        useClass: ClassSerializerInterceptor,
    }],
})
export class AppModule {}

그리고 환경변수들이 사용되는 부분을 전부 바꿔줍니다. 일단 auth.const.ts 파일을 삭제합니다. 그리고 에러가 나오는 부분을 전부 바꾸겠습니다.

• auth.service.ts

@Injectable()
export class AuthService {

     constructor(
          private readonly jwtService: JwtService,
          private readonly usersService: UsersService,
          private readonly configService: ConfigService, // 추가
     ) {}
.
.
verifyToken(token: string) {
    try {
        return this.jwtService.verify(token, { 
              secret: this.configService.get<string>('JWT_SECRET'), // 키값을 넣기 + 어떤 type을 가져올지 명시
        }); 
    } catch (error) {
          throw new UnauthorizedException('토큰이 만료됐거나 잘못된 토큰입니다. ');
    }
}

근데 지금처럼 JWT_SECRET하는 것이 기분이 나쁩니다. 왜냐하면 이전에 작성한 것과 사실상 별 다른게 없기 때문입니다. 오타의 가능성도 있고 키값의 이름이 변경될 수 있기 때문입니다.

따라서 key값들을 정리하도록 하겠습니다. common/const에 새로운 파일을 생성하겠습니다.

• common/const/env-keys.const.ts

// 서버 프로토콜 -> http / https
export const ENV_PROTOCOL_KEY = 'PROTOCOL';
// 서버 호스트 -> localhost:3000
export const ENV_HOST_KEY = 'HOST';
// JWT 토큰 시크릿 -> codefactory
export const ENV_JWT_SECRET_KEY = 'JWT_SECRET';
// JWT 토큰 해시 라운드 수 -> 10
export const ENV_HASH_ROUNDS_KEY = 'HASH_ROUNDS';
// 데이터베이스 호스트 -> localhost
export const ENV_DB_HOST_KEY = 'DB_HOST';
// 데이터베이스 포트 -> 5433
export const ENV_DB_PORT_KEY = 'DB_PORT';
// 데이터베이스 사용자 이름 -> postgresql
export const ENV_DB_USERNAME_KEY = 'DB_USERNAME';
// 데이터베이스 사용자 비밀번호 -> postgresql
export const ENV_DB_PASSWORD_KEY = 'DB_PASSWORD';
// 데이터베이스 이름
export const ENV_DB_DATABASE_KEY = 'DB_DATABASE';

이제 auth.service.ts를 바꿔줍니다.

• auth.service.ts

verifyToken(token: string) {
    try {
        return this.jwtService.verify(token, { 
              secret: this.configService.get<string>(ENV_JWT_SECRET_KEY), // 적용
        }); 
    } catch (error) {
          throw new UnauthorizedException('토큰이 만료됐거나 잘못된 토큰입니다. ');
    }
}
.
.
rotateToken(token: string, isRefreshToken: boolean) {
    const decoded = this.jwtService.verify(token, {
          secret: this.configService.get<string>(ENV_JWT_SECRET_KEY), // 적용
    });

    if (decoded.type !== 'refresh') throw new UnauthorizedException('토큰 재발급은 refresh 토큰으로만 가능합니다.');
    return this.signToken({
      ...decoded,
    }, isRefreshToken);
}
.
.
signToken(user: Pick<UsersModel, 'email' | 'id'>, isRefreshToken: boolean) {
    const payload = {
        email: user.email,
        sub: user.id,
        type: isRefreshToken ? 'refresh' : 'access',
    }
    return this.jwtService.sign(payload, {
        secret: this.configService.get<string>(ENV_JWT_SECRET_KEY), // 변경
        expiresIn: isRefreshToken ? 3600 : 300,
    });
}
.
.
async registerWithEmail(user: RegisterUserDto) {
    const hash = await bcrypt.hash(
        user.password,
        parseInt(this.configService.get<string>(ENV_HASH_ROUNDS_KEY)), // 변경
    );
    const newUser = await this.usersService.createUser({
        ...user,
        password: hash,
    });
    return this.loginUser(newUser);
}

이번에는 env.const.ts를 삭제하겠습니다.

• common.service.ts

@Injectable()
export class CommonService {

      // 추가
    constructor (
        private readonly configService: ConfigService, 
    ) {}
.
.
private async cursorPaginate<T extends BaseModel>(
    dto: BasePaginationDto,
    repository: Repository<T>,
    overrideFindOptions: FindManyOptions<T> = {},
    path: string,
) {

    const findOptions = this.composeFindOptions<T>(dto);
    const results = await repository.find({
        ...findOptions,
        ...overrideFindOptions,
    });

    const lastItem = results.length > 0 && results.length === dto.take ? results[results.length - 1] : null;

      // 변경
    const protocol = this.configService.get<string>(ENV_PROTOCOL_KEY);
    const host = this.configService.get<string>(ENV_HOST_KEY);
    const nextUrl = lastItem && new URL(`${protocol}://${host}/${path}`);
      // 여기까지

• posts.service.ts

@Injectable()
export class PostsService {

    constructor(
    @InjectRepository(PostsModel)
       private readonly postsRepository: Repository<PostsModel>,
       private readonly commonService: CommonService,
       private readonly configService: ConfigService, // 추가
    ) {}
.
.
async cursorPaginatePosts(dto: PaginatePostDto) {
    const where: FindOptionsWhere<PostsModel> = {};
    if (dto.where__id__less_than) {
          where.id = LessThan(dto.where__id__less_than);
    } else if(dto.where__id__more_than) {
          where.id = MoreThan(dto.where__id__more_than);
    }

    const posts = await this.postsRepository.find({
        where,
        order: {
              createdAt: dto.order__createdAt,
        },
        take: dto.take,
    });

    const lastItem = posts.length > 0 && posts.length === dto.take ? posts[posts.length - 1] : null;

      // 변경
    const protocol = this.configService.get<string>(ENV_PROTOCOL_KEY);
    const host = this.configService.get<string>(ENV_HOST_KEY);
    const nextUrl = lastItem && new URL(`${protocol}://${host}/posts`);
      // 여기까지

잘 나오는지 포스트맨으로 테스트를 하겠습니다.

{
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImNvZGVmYWN0b3J5QGNvZGVmYWN0b3J5LmFpIiwic3ViIjoxLCJ0eXBlIjoiYWNjZXNzIiwiaWF0IjoxNzA3MDMzNTgyLCJleHAiOjE3MDcwMzM4ODJ9.28YvVZL4M2jfzIWnFyBvCOLMtvSCujZmRqsIac74YjM",
    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImNvZGVmYWN0b3J5QGNvZGVmYWN0b3J5LmFpIiwic3ViIjoxLCJ0eXBlIjoicmVmcmVzaCIsImlhdCI6MTcwNzAzMzU4MiwiZXhwIjoxNzA3MDM3MTgyfQ.uwOTeY3b70GQwSzPOBaEbH0Ch8Nxpn-u0gdWoHOjrN4"
}

{
    "data": [
        {
            "id": 101,
            "updatedAt": "2024-01-28T02:12:54.520Z",
            "createdAt": "2024-01-28T02:12:54.520Z",
            "title": "임의로 생성된 92",
            "content": "임의로 생성된 포수트 내용 92",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },
        .
        .
        {
            "id": 29,
            "updatedAt": "2024-01-28T02:12:53.979Z",
            "createdAt": "2024-01-28T02:12:53.979Z",
            "title": "임의로 생성된 20",
            "content": "임의로 생성된 포수트 내용 20",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        }
    ],
    "total": 17
}

env 파일을 사용하고도 요청이 잘 오는 것을 확인할 수 있습니다.

🖊️process 객체를 이용한 환경변수 불러오기

이번에는 DB관련 환경변수를 사용하도록 하겠습니다. app.module.ts에서는 configService로 주입을 받아 가져올 수 가 없습니다. 따라서 process라는 글로벌 변수를 사용해서 process.env를 하면 환경변수를 가져올 수 있습니다.

• app.module.ts

@Module({
    imports: [
        ConfigModule.forRoot({
            envFilePath: '.env',
            isGlobal: true,
        }),
        TypeOrmModule.forRoot({
            type: 'postgres',
              // 변경
            host: process.env[ENV_DB_HOST_KEY],
            port: parseInt(process.env[ENV_DB_PORT_KEY]),
            username: process.env[ENV_DB_USERNAME_KEY],
            password: process.env[ENV_DB_PASSWORD_KEY],
            database: process.env[ENV_DB_DATABASE_KEY],
              // 여기까지
            entities: [
                PostsModel,
                UsersModel,
            ],
            synchronize: true,
        }),
        PostsModule,
        UsersModule,
        AuthModule,
        CommonModule,
        ConfigModule,
    ],
    controllers: [AppController],
    providers: [AppService, {
        provide: APP_INTERCEPTOR,
        useClass: ClassSerializerInterceptor,
    }],
})
export class AppModule {}

저장하고 실행하면 터미널이 잘 실행되는 것을 알 수 있습니다. 하지만 잘 못 입력이 된 경우, 에러를 확인하기 위해 password를 빈값으로 해보겠습니다.

@Module({
    imports: [
        ConfigModule.forRoot({
            envFilePath: '.env',
            isGlobal: true,
        }),
        TypeOrmModule.forRoot({
            type: 'postgres',
              // 변경
            host: process.env[ENV_DB_HOST_KEY],
            port: parseInt(process.env[ENV_DB_PORT_KEY]),
            username: process.env[ENV_DB_USERNAME_KEY],
            password: '', // 에러~~~~~~~~~~~~~~~~~~~~
            database: process.env[ENV_DB_DATABASE_KEY],
              // 여기까지
            entities: [
                PostsModel,
                UsersModel,
            ],
            synchronize: true,
        }),
        PostsModule,
        UsersModule,
        AuthModule,
        CommonModule,
        ConfigModule,
    ],
    controllers: [AppController],
    providers: [AppService, {
        provide: APP_INTERCEPTOR,
        useClass: ClassSerializerInterceptor,
    }],
})
export class AppModule {}

페이지네이션 요청도 확인해보겠습니다.

{
    "data": [
        {
            "id": 108,
            "updatedAt": "2024-01-28T02:12:54.578Z",
            "createdAt": "2024-01-28T02:12:54.578Z",
            "title": "임의로 생성된 99",
            "content": "임의로 생성된 포수트 내용 99",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        },
        .
        .
        {
            "id": 89,
            "updatedAt": "2024-01-28T02:12:54.431Z",
            "createdAt": "2024-01-28T02:12:54.431Z",
            "title": "임의로 생성된 80",
            "content": "임의로 생성된 포수트 내용 80",
            "likeCount": 0,
            "commentCount": 0,
            "author": {
                "id": 1,
                "updatedAt": "2024-01-26T05:58:10.800Z",
                "createdAt": "2024-01-26T05:58:10.800Z",
                "nickname": "codefactory",
                "email": "codefactory@codefactory.ai",
                "role": "USER"
            }
        }
    ],
    "cursor": {
        "after": 89
    },
    "count": 20,
    "next": "http://localhost:3000/posts?order__createdAt=DESC&take=20&where__id__less_than=89"
}

환경변수를 불러오는 방법은 2가지가 있습니다. process를 사용하는 방법이 있고, 이 방법보다 좋은 방법인 configService를 주입받아 get함수를 실행해서 가져오는 방법입니다.

identity전략은 DB에 값을 저장하고 나서야 기본 키 값을 구할 수 있습니다.

// IDENTITY 매핑 코드
@Entity
public class Member{

   @Id
   @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
     ...
   }
.
.
.
private static void logic(EntityManager em) {
   Member member = new Member();
   em.persist(member);
   System.out.println("member.id = " + member.getId());
}
// 출력: member.id = 1

이유는 엔티티가 영속 상태가 되기 위해서는 식별자가 필요합니다. IDENTITY 전략의 경우, 식별자 생성을 DB에 저장해야 얻을 수 있으므로 em.persist()를 호출하여 객체를 영속성 상태로 만드는 순간 INSERT SQL이 호출됩니다. 따라서 LAZY LOADING 못합니다.

🖊️sequence

DB 시퀀스는 유일한 값을 순서대로 생성하는 특별한 DB 오브젝트입니다. SEQUENCE 전력은 이 SEQUENCE를 사용해서 기본 키를 생성합니다.

// 시퀀스 DDL
CREATE TABLE MEMBER (
    ID BIGINT NOT NULL PRIMARY KEY,
   DATA VARCHAR(255)
)

// 시퀀스 생성
CREATE SEQUENCE MEMBER_SEQ START WITH 1 INCREMENT BY 1;
.
.
.
// 시퀀스 매핑 코드
@Entity
@SequenceGenerator(
   name = "MEMBER_SEQ_GENERATOR",
   sequenceName = "MEMBER_SEQ", //매핑할 데이터베이스 시퀀스 이름
   initialValue = 1, allocationSize = 1)
public class Member{

   @Id
   @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "MEMBER_SEQ_GENERATOR")
   private Long id;
}

em.persist()를 호출 시, DB 시퀀스를 사용해서 식별자를 조회합니다. 식별자를 엔티티에 할당한 후에 엔티티를 영속성 컨텍스트에 저장합니다. 이 후 트랜잭션을 커밋해서 플러시가 일어났을 경우, 엔티티를 DB에 저장합니다.

IDENTITY과의 차이점은 IDENTITY의 경우 영속성 컨텍스트에 저장하기 위해 INSERT를 바로 날린다는 점입니다.

• name: 식별자 생성기 이름
• sequenceName: DB에 등록된 시퀀스 이름
• initialValueDDL: 생성시에만 사용됨
• allocationSize: 50(시퀀스 한 번 호출에 증가하는 수)
• catalog, schema: DB catalog, schema 이름

allocationSize

결론은 데이터베이스에 여러번 접근하는 것을 방지해서 성능적으로 장점이 있기 때문입니다.

SEQUENCE 전략은 데이터베이스 시퀀스를 통해 식별자를 조회하는 추가 작업이 필요합니다. 따라서 다음과 같이 데이터베이스와 2번의 통신을 합니다.

1. 식별자를 구하려고 데이터베이스 시퀀스를 조회한다. ex) SELECT MEMBER_SEQ.NEXTVAL …
2. 조회한 시퀀스를 기본 값으로 사용해 데이터베이스에 저장한다. ex) INSERT INTO MEMBER …

위와 같이 시퀀스에 접근하는 것을 줄이기 위해 JPA는 @SequenceGenerator.allocationSize를 사용합니다. 간단히 설명하면, 여기에 설정한 값만큼 한 번에 시퀀스 값을 증가시키고 나서 그만큼 메모리에 시퀀스 값을 할당합니다.

예를들어, allocation 값이 50이면 시퀀스를 한 번에 50을 증가시킨 다음에 1 ~ 50까지는 메모리에 시퀀스 값을 할당합니다. 그리고 51이 되면 시퀀스 값을 100으로 증가시킨 다음 51 ~ 100까지 메모리에서 식별자를 할당합니다.

이 최적화 방법은 시퀀스 값을 선점하므로 여러 JVM이 동시에 동작해도 기본 키 값이 충돌하지 않는 장점이 있습니다. 반면에 데이터베이스에 직접 접근해서 데이터를 등록할 때 시퀀스 값이 한 번에 많이 증가한다는 점을 염두해두어야 합니다. 이런 상황이 부담스럽고 INSERT 성능이 중요하지 않으면 allocationSize의 값을 1로 설정하면 됩니다.

GenerationType.IDENTITY는 DB의 자동 증기 기능을 사용하여 주 키를 생성하는 방식이고, DB에 의존적입니다.

GenerationType.SEQUENCE는 DB의 시퀀스를 사용하여 주 키를 생성하는 방식이고, DB에 의존적이지만 시퀀스의 사용을 명시적으로 지정할 수 있습니다.

1. @JsonInclude(JsonInclude.Include.NON_NULL)

Null이 아닌 필드만 JSON으로 포함됩니다. Null인 경우 JSON에서 생략됩니다.

@JsonInclude(JsonInclude.Include.NON_NULL)
public class MyObject {
    private String name;
    private Integer age;
    // getters and setters...
}

2. @JsonInclude(JsonInclude.Include.NON_EMPTY)

Null이 아니고, 빈 문자열("")이 아닌 필드만 포함됩니다. 즉, 문자열 필드가 비어있는 경우에도 JSON에서 생략됩니다.

@JsonInclude(JsonInclude.Include.NON_EMPTY)
public class MyObject {
    private String name;
    private String address;
    // getters and setters...
}

3. @JsonInclude(JsonInclude.Include.NON_DEFAULT)

기본값으로 초기화된 필드만 포함됩니다. 숫자형은 0, boolean은 false가 됩니다.

@JsonInclude(JsonInclude.Include.NON_DEFAULT)
public class MyObject {
    private int id; // 기본값 0
    private boolean active; // 기본값 false
    // getters and setters...
}

4. @JsonInclude(JsonInclude.Include.ALWAYS)

항상 모든 필드를 포함합니다. Null이든 아니든 상관없이 모든 필드를 JSON에 포함합니다.

@JsonInclude(JsonInclude.Include.ALWAYS)
public class MyObject {
    private String name;
    private Integer age;
    // getters and setters...
}

5. 사용자 정의 로직

사용자 정의로직을 제공해서 어떤 필드를 포함시킬지 결정할 수도 있습니다.

@JsonInclude(
    value = JsonInclude.Include.CUSTOM,
    valueFilter = MyCustomFilter.class
)
public class MyObject {
    private String sensitiveData;
    // getters and setters...
}

Spring Security 컨텍스트에서 사용자의 정보를 가져오는 코드입니다.

Spring Security는 인증된 사용자의 정보를 Authenticatoin 객체에 저장합니다.

따라서 SecurityContextHolder.getContext().getAuthentication()는 Authentication을 반환하게 됩니다.

실무에서 BaseEntity 추상클래스가 반드시 가져야하는 필드들입니다.

serialVersionUID: 데이터의 무결성을 지키기 위해서 고유 식별자로 반드시 존재해야합니다. 직렬화와 역직렬화시 매핑을 통해 호환성을 체크합니다.

updateCount: DB row, 즉 객체가 몇 번 바뀌게 되었는지 카운팅을 해주며 버전 정보를 의미합니다. Optimistic Lock을 통해 데이터의 일관성을 체크합니다. 처음과 마지막을 조회하면서 값이 다르면 중간에 다른 스레드가 접근하고 값을 바꾼것으로 인지해 에러를 보냅니다.

createDate: 생성날짜

updateDate: 수정날짜

deleteFlag: 사용유무

createUserId: 누가 생성을 했는지

updateUserId: 누가 업데이트를 했는지

결론

전반적으로 보면 DB에서 데이터를 추적하거나 데이터의 일관성을 지키는 쪽과 관련된 것을 알 수 있습니다.