서론

저번시간에 실행만 시켰는데 갑자기 로그인 서비스를 만든다고 하면 비약이 너무 심하다고 느낄 수 있을 것 같다. 하지만 개념적으로 설명을 하는거보다 바로 기능을 만들면서 이야기 해보면 더 와닿고 이해가 쉬울 것 같다고 생각했다.

따라서 JWT 토큰과 Passport 라이브러리를 이용해서 로그인 서비스를 구현해보면서 Nest 에 대해서 익숙해질 수 있는 시간을 가져보도록 하자

본론

📍 passport 설치하기

우선 nest 에서 passport 라이브러리를 사용하기 위해서 모듈을 다운로드 받아야 되는데 다음과 같이 프로젝트 루트 디렉토리 위치에서 터미널을 열고 명령어를 입력 할 수 있도록 한다.

$ npm install --save @nestjs/passport passport passport-local
$ npm install --save-dev @types/passport-local

간략하게 passport 라이브러리에 대해서 설명하면 인증 미들웨어로 node 환경에서 사용할 수 있는 라이브러리이다. 따라서 인증이라는 관심사를 따로 분리하게 됨으로써 (캡슐화된 passport 라이브러리를 사용함으로써) 코드를 간결하고 유지보수성이 좋은 코드를 만들 수 있도록 도와줍니다.

우선 passport 를 설치했으니 라이브러리를 사용하기 위한 코드를 작성해보도록 하겠다.

📍 로그인 Controller, Service 생성하기

MVC 패턴을 이용해서 코드를 작성해보도록 할 예정이다.

Nest cli를 이용한 코드 생성 방법

그리고 이제 본격적으로 Controller 와 Service 코드를 생성해야 되는데 nest 에서는 cli 로 코드를 생성할 수 있도록 지원해주는데, cli 를 이용해서 생성해보도록 할 예정이고 터미널을 켜고 루트 디렉토리 위치에서 다음과 같이 명령어를 적어준다.

$ nest g module login
$ nest g controller login
$ nest g service login

위와 같이 명령어를 입력하면 login 폴더가 루트 디렉토리에 생성이 되면서 안에는 Module, Controller, Service 코드가 생성되고 Controller, Service 에 대한 spec 이름이 붙은 테스트 코드까지 생성이 된다.

그리고 명령어로 코드를 생성할 경우 모듈 코드 내부에 자동으로 Controller, Service 에 대한 설정도 해주게 되면서 개발자 편의성이 높아진다.

Module 코드에 대한 간략 설명

// login.module.ts

import { Module } from '@nestjs/common';
import { LoginController } from './login.controller';
import { LoginService } from './login.service';

@Module({
  controllers: [LoginController],
  providers: [LoginService],
})
export class LoginModule {}

Module 코드에 controller, provider 에 자동으로 추가가 된다.
(만약 직접 코드를 생성하면 위와 같은 작업을 수동으로 해주어야 한다.)

여기서 Controller 와 Service 코드는 Spring 을 접해보았거나 MVC 패턴에 대해서 공부한 사람들이라면 완벽하게는 몰라도 어떤 뉘앙스인지 파악은 될 것이다.

하지만 nest 에는 Module 코드가 또 존재하는데, 쉽게 얘기하면 @Module 애노테이션에 명시를 해주어야만 명시된 코드들 사이에 자유롭게 클래스를 사용할 수 있다. 다시 말하면 의존성 주입을 하기 위해서는 Module 코드의 @Module 애노테이션에 설정에 맞춰서 클래스를 넣어주어야 합니다.

의존성 주입(Dependency Injection) 은 Spring 에서만 사용되는 개념이 아닌 모든 프로그래밍에서 사용될 수 있는 디자인 패턴으로 nest 에서도 해당 패턴을 이용해서 객체를 생성합니다.

따라서 @Module 애노테이션 설정 값들은 다음과 같습니다.

• imports : 다른 모듈에서 export한 모듈을 사용하기 위해서 해당 부분에 작성합니다.
• controllers : 해당 모듈에서 사용할 controller 클래스를 작성합니다.
• providers: 해당 모듈에서 사용할 service 클래스를 작성합니다.
• exports : 다른 모듈에서 사용하기 위한 클래스를 작성합니다.

이해하기 쉽게 작성한 내용으로 보다 자세한 내용은 해당 링크를 참고해주세요!

Controller 클래스에 라우터 생성하기

이제 테스트를 위해 Controller 에 라우터 하나를 생성해보도록 하자.

import { Controller, Get } from '@nestjs/common';

@Controller('login')
export class LoginController {
  @Get()
  login() {
    return 'login controller test!!';
  }
}

@Controller() : 해당 클래스가 Controller 임을 명시.
(괄호안에 적인 텍스트는 URL 경로를 의미, http://localhost:포트/login 으로 호출하면 해당 클래스로 요청이 온다.)

@Get() : login 으로 요청이 왔을 때 GET 메서드일 경우 해당 메서드를 실행시킨다.
(GET http://localhost:포트/login 요청일 경우 실행, @Get('test') 로 작성할 경우 GET http://localhost:포트/login/test 로 요청이 와야지 login() 메서드가 실행된다.

그리고 포스트맨이 있으면 포스트맨으로 실행해도 되지만 GET 요청은 브라우저를 이용해서 해도 상관 없다. 따라서 코드를 npm run start:dev 명령어를 이용해서 실행시키고 자기의 포트에 맞게 브라우저에 입력해준다. (필자는 8080 포트)

위와 같이 login controller test!! 텍스트가 출력 되었으면 정상적으로 잘 실행이 된 것이다.

여기서 한가지 간과한 부분이 있는데, app.module.ts 코드를 열어보면 로그인과 관련된 코드들이 알아서 설정에 추가된 부분을 볼 수 있다.

/*
 * controller, provider에 Login 관련 클래스를 적지 않아도
 * LoginModule이 import 되어 있어서 실행이 된다...
 * export를 해주지 않아도 되는건 아직 잘 모르겠다...
 */
@Module({
  imports: [ConfigModule.forRoot(), LoginModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

여기서 Login과 관련된 모든 클래스를 제거하고 다시 http://localhost:포트/login 으로 접근하면 404 에러가 발생한다.

그 이유는 간략하게 설명하자면 main.ts 코드가 실행되면서 NestApplication 이 생성이되고 서버가 실행이 되는데, 그 때 AppModule 이 등록되면서 시작한다. 따라서 우리가 프로젝트에서 모듈이 추가될 때 마다 AppModule 에 등록을 해주어야지만 정상적으로 코드를 사용할 수 있게 된다.

npm run start:dev -> main.ts 실행 -> AppModule 등록 (AppModule에 등록된 모드 코드가 등록된다.)

Spring 에서는 @ComponentScan이라는 애노테이션에 프로젝트 시작시 스캔하고자 하는 패키지명을 적어주면 @Controller, @Service, @Repository, @Component 등의 애노테이션이 붙은 클래스들을 자동으로 빈 객체로 등록해서 사용할 수 있도록 해주는데, 아직 내가 아는 바로는 nest 에서는 이 부분을 수동으로 AppModule 에 등록해주어야 하는 것 같다.

service 코드 생성 후 controller에서 사용하기

이번에는 서비스 코드를 작성하고 컨트롤러 코드에서 사용 할 수 있는 방법에 대해서 알아보자.

컨트롤러에서는 라우터 분기 처리만 진행하고 본격적인 비즈니스 로직은 서비스 코드에 작성하는 것이 MVC 패턴의 한 부분이다. 우선은 테스트를 위해서 텍스트를 반환하는 서비스 코드를 생성할 수 있도록 한다.

import { Injectable } from '@nestjs/common';

@Injectable()
export class LoginService {
  login() {
    return 'test';
  }
}

@Injectable() : 의존성 주입을 할 수 있는 클래스라고 명시하는 애노테이션이다.

그리고 서비스 코드를 컨트롤러에서 다음과 같이 호출해보도록 하자.

import { Controller, Get } from '@nestjs/common';
import { LoginService } from './login.service';

@Controller('login')
export class LoginController {
  constructor(private readonly loginService: LoginService) {}

  @Get()
  login() {
    return this.loginService.login();
  }
}

자바 코드에서 의존성 주입을 할 때 생성자에서 주입해주는 것과 마찬가지로 nest 에서도 생성자에서 의존성 주입을 해주는데 constructor(private readonly loginService: LoginService) {} 처럼 명시해주면 @Injectable() 애노테이션으로 인해 의존성 주입이 되어서 서비스 코드를 사용할 수 있게 된다.

코드를 저장하고 다시 실행시키면 다음과 같이 정상적으로 실행된다. (npm start 로 실행하신 경우에는 재시작 해주셔야 합니다.)

여기서 login.module.ts 코드에서 provider 에 명시된 loginService 를 삭제하고 실행하면 어떻게 될까?

import { Module } from '@nestjs/common';
import { LoginController } from './login.controller';

@Module({
  controllers: [LoginController],
  providers: [], // loginService 삭제
})
export class LoginModule {}

그러면 다음과 같은 에러가 발생한다.

Error: Nest can't resolve dependencies of the LoginController (?). Please make sure that the argument LoginService at index [0] is available in the LoginModule context.

Potential solutions:
- If LoginService is a provider, is it part of the current LoginModule?
- If LoginService is exported from a separate @Module, is that module imported within LoginModule?
  @Module({

해석하자면 LoginController 코드에서 의존성 주입을 해주고 싶은데 LoginModule 의 Provider 에 정의된 서비스가 없다는 의미이다.

아까 위에서도 말했듯이 모듈에 정의된 클래스들끼리 자유롭게 클래스를 의존성 주입해서 사용하려면 모듈 코드에 잘 정의해주어야 한다.

결론

간략하게 설명을 했음에도 불구하고 내용이 길어져서 이번 포스팅은 여기서 마무리 하고, 다음 포스팅에 이어서 본격적으로 Passport, jwt 라이브러리를 사용하고 로그인 기능을 구현하는 내용을 작성해보도록 하도록 하겠다.

아직 공부중이라 완벽하게 아는 내용이 아니고, 잘못 공부해서 잘못 알고 있는 부분들도 있을 수 있는데 지적해주시면 수정 할 수 있도록 하겠습니다.

이만 총총.. 🏃🏻‍♀️