Nest.js & Next.js - 3. 사용자 조회 기능 구현

2020-02-01

이전 포스팅을 통해 nest-next example이 어떻게 구성되어 있고 간단하게 내부 코드도 살펴보았다.
이제 이를 기반으로 간단한 사용자 목록 조회 기능을 구현해보자.

Server code (Nest.js)

새로운 기능은 /src/user 디렉토리에 작업한다.

먼저 사용자 ID를 생성하기 위해서 uuid package를 받는다.

1 2	npm i uuid npm i -D @types/uuid

그리고 사용자 엔티티인 User class를 생성한다.

// /src/user/user.entity.ts
export class User {
  id: string;
  name: string;
  age: number;

  constructor(id: string, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }
}

이제 이를 기반으로 controller와 service를 만들어보자.

단순 조회 기능만 구현할 것이기 때문에 UserService는 아래와 같이 단순하게 구현하였다.

// /src/user/user.service.ts
import {Injectable} from "@nestjs/common";
import {User} from "./user.entity";
import { v4 as uuid } from 'uuid';

@Injectable()
export class UserService {
  private users = [
    new User(uuid(), 'devson', 30),
    new User(uuid(), 'chris', 28),
    new User(uuid(), 'iris', 30)
  ]

  getUsers(): User[] {
    return this.users;
  }
}

그리고 UserController를 만든다.
render할 페이지는 /pages/views/user/user-list로 하겠다.

// /src/user/user.controller.ts
import {Controller, Get, Render} from "@nestjs/common";
import {UserService} from "./user.service";
import {User} from "./user.entity";

@Controller('users')
export class UserController {
  constructor(
    private readonly userService: UserService
  ) {}

  @Render('user/user-list')
  @Get()
  userList(): User[] {
    const users = this.userService.getUsers();
    return { users };
  }
}

새로 만든 UserController와 UserService를 Module에 등록한다.

domain 별로 나눠서 module을 나누는 것이 component 관리에 있어 효율적인 방법이므로
새로운 UserModule을 만들도록 하겠다.

// /src/user/user.module.ts
import {Module} from "@nestjs/common";
import {UserController} from "./user.controller";
import {UserService} from "./user.service";

@Module({
  controllers: [UserController],
  providers: [UserService]
})
export class UserModule{}

We want to emphasize that modules are strongly recommended as an effective way to organize your components.

참고: https://docs.nestjs.com/modules

그리고 앞에서 새로 만든 UserModule을 AppModule에 추가한다.

// /src/appplication.module.ts
import { Module } from '@nestjs/common';
import { RenderModule } from 'nest-next';
import { AppController } from './app.controller';
import {UserModule} from "./user/user.module";

@Module({
  imports: [
    RenderModule,
    UserModule // UserModule 추가
  ],
  controllers: [AppController]
})
export class AppModule {}

최종적으로 다음과 같이 파일이 생성되었다.

Client code (Next.js)

앞서 UserController에서 지정한 것과 같이
/pages/views/user 디렉토리에 user-list.tsx 파일을 생성하여 작업한다.

// /pages/views/user/user-list.tsx
import React from "react";
import {NextPageContext} from "next";

interface UserListProps {
  users: User[];
}

interface User {
  id: string;
  name: string;
  age: number;
}

function UserList({ users }: UserListProps) {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>NAME</th>
          <th>AGE</th>
        </tr>
      </thead>
      <tbody>
        {
          // Server로 부터 받아온 사용자 목록을 화면에 보여준다
          users.map(user => (
            <tr>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.age}</td>
            </tr>
          ))
        }
      </tbody>
    </table>
  )
}

UserList.getInitialProps = (ctx: NextPageContext) => {
  // Server에서 사용자 목록을 가져온다
  const { users } = ctx.query;
  return { users };
};

export default UserList;

단순하게 서버에서 조회하여 넘겨준 사용자 목록을 table에 보여주는 기능이다.

이러면 사용자 목록 조회 기능에 대한 코드 작성이 끝난 것이다.
실행하여 정상적으로 동작하는지 확인해보자

1	npm run dev

http://localhost:3000/users 접속

지금까지 nest-next 패키지를 사용하여 Nest.js와 Next.js를 연동하는 방법을 알아보았다.

예제 코드는 여기에서 확인할 수 있다.

coding hathenom

jsNest.js

Nest.js & Next.js - 3. 사용자 조회 기능 구현

Server code (Nest.js)

Client code (Next.js)