[BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스

Programming Project 작업실/내용 정리

[BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - 회원 가입

주니쓰🧑‍💻 2022. 4. 11. 01:37

728x90

Project Git Hub

🗂 목차

● [BackEnd][Node.js][nest.js-PJ] 사내 개발자 커뮤니티 서비스 - 초기 구성(Pipe, TypeORM, Configuration, Swagger, Logger)

● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - 회원 가입

● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - JWT를 이용한 Login

● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - Passport, JWT를 이용한 인가 처리

● [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - Custom Decorator

● [BackEnd][Node.js][nest.js-PJ] 사내 개발자 커뮤니티 서비스 - 게시판 만들기 : 초기 구성(Entity, Controller,Module,Repository,Service)

📚 부록

● [Node.js] Node.js 기초
● [JavaScript] 기본 문법
● [BackEnd][Node.js] 사내 개발자 커뮤니티 서비스 - 초기 구성
● [BackEnd][Node.js] 사내 개발자 커뮤니티 서비스 - 초기 구성 : DB 연결
● [BackEnd][Node.js] 사내 개발자 커뮤니티 서비스 - 초기 구성 : DB 연결(Sequelize)
● [Web] URL의 이해
● [Spring] Spring이란?
●[Node.js][Nest.js] 유효성 검사와 Data 형식 변환하기 - Pipe
●[Node.js][Nest.js] Configuration (설정)
●[Node.js][Nest.js]TypeORM
● [Node.js][Nest.js] Logger 기능
●[JavaScript] Promise와 async 그리고 await
● [Nest.js] API 설계 - 요청, 응답 객체 (Request, Response Object)
● [정보보안] JWT(JSON Web Token) 이란?
● [Nest.js] Middle Ware(미들웨어)

🤔 내가 만난 Error

● [Node.js][Error] Cannot find module '.dotenv'

🚀 회원 가입 기능 구현

🔽 초기 구성

이번 `Nest.js`를 통한 Project는 기존에 `Spring Boot`로 구성하고 있던 Project를 따라해보면서 공부해 보는데 그 초점이 맞춰진 Project인 것이에요.

따라서 이미 Table이 존재하고, 이 Table을 이용해서 Project를 진행해보고자 하는 것이에요.

📦 Nest CLI를 통한 초기 구성 - Module

명령어

nest g module {Module-Name}

`Nest CLI`를 통해 위와 같이 Module을 생성하면 Directory를 만들지 않아도 알아서 만들어 지는 것이에요.

📦 Nest CLI를 통한 초기 구성 - Controller

명령어

nest g controller {Contorller-Name} {--no-spec}

$ nest g controller {Controller-Name} {--no-spec}

📦 Nest CLI를 통한 초기 구성 - Service

명령어

nest g service {Service-Name} {--no-spec}

$ nest g service {Service-name} {--no-spec}

명령어에 대한 내용은 `이 곳`에 준비 해 두었어요!

📦 User Entity 만들기

최초 `User Entity`는 위와 같이 생성해 준 것이에요.

📦 Reposiroty 만들기

`Repository`는 위와 같이 만들어 준 것이에요.

참고로 `Repository`와 `Eentity`는 명령어가 아닌 직접 `TypeScript File`을 만들어서 진행한 것이에요.

이번에는 생성된 `User Repository`가 다른 곳에서도 이용될 수 있게 하기 위해서 `auth Module`에 `import`를 시켜줄 것이에요.

9번째 줄과 같이 `TypeOrmModule forFeture()`를 이용하여 `auth Module`안에 매개 변수로 `UserRepository`인스턴스를 전달하여 등록해 준 것이에요.

참고로 명령어로 만들었던 `Controller`와 `Service`는 자동으로 등록 되어 있는 것이에요.

이번에는 `User Repository`를 `auth Service`에서 이용하기 위해 `DI(Dependency Injection)` 해 줄 것이에요.

위와 같이 `생성자 주입`을 통해 `User Repositoy`를 `DI(Dependency Injection)` 해 준 것이에요.

🔽 기능 구현

📦 DTO 만들기

최초 `Client`가 `Request(요청)`을 보낼 때 그것을 담을 그릇을 만들어 줄 것이에요.

위와 같이 `Pipe`를 이용한 `유효성 검사(Validation)` 까지 진행할 수 있는 DTO를 만들어 준 것이에요.

`Pipe`에 대해 알고 싶으신 분들을 위해 `이 곳`에 준비 해 둔 것이에요.

► 변경 사항

변경 사항에 대해 알아보면 먼저 `@ApiProperty` Decorator(JAVA = Annotaion)을 추가 해 줬는데,

Swagger에서 위와 같이 각 Property(JAVA = Member 변수)에 대한 설명이 나올 수 있도록 하기 위함이에요.

그리고, `Pipe`를 이용한 유효성 검사를 위해 `@IsNotEmpty() = 비어 있는 값에 대한 유효성 검사`, `@IsString() = 입력값이 문자열인지 검사`, `@IsEmail = 입력값이 Mail 형태인지 검사`를 사용해 준 것이에요.

📦 Repository 구현

회원가입이란 기능은 `CRUD`에서 `C(Create)`에 해당하기 때문에 `Repository`에서 Data Base에게 Insert Query를 날릴 수 있도록 해 줘야 하는 것이에요.

28번째 줄에 요청 내용을 담은 DTO에 들어 있을 내용들을 각각의 상수형 변수에 담아주는 것이에요.

그런 뒤 `create()`을 이용해서 그 각각의 변수들은 상수형 객체 user를 새롭게 만들어 준 것이에요.

그리고, `save()`를 통해 Data Base에 Insert Query가 날아가는데, 해당 객체를 담아 날아가게 만들어 준 것이에요.

여기서 `Promise`, `async`, `await`에 대한 내용은 `이 곳`에 준비 해 둔 것이에요.

반환 Type에 `Promise`를 넣고, 어떤 반환값도 없을 것이기 때문에 `<void>`를 넣어준 것이에요.

Data Base의 작업이 처리 될 때까지 `await`을 만난 `JavaScript`는 작업이 끝날 때까지 대기 상태로 있다가 Data Base작업이 끝나면 그 값을 반환 해 주는 것이에요.

► 변경 사항

주니하랑은 정상적으로 처리가 되었다면 `Response(응답) Data`를 얻고 싶은 것이에요.

그래서 반환 Type(220번째 줄 - Promise<{...}>)를 통해 `return(238 번째 줄)`에 값이 반환되도록 해준 것이에요.

📦 Service 구현

`Service`는 비즈니스 로직 처리를 위한 Layer인 것이에요. 이곳에서는 딱히 처리할 것이 없어 바로 `Repository`를 호출하고, 반환 값을 반환해 주는 것이에요.

📦 Contoller 구현

`Spring Boot`에서 API URI를 설정하기 위해서는 최초 Class 이름 위에 `@RequestMapping`을 이용해서 `/api/user`와 같이 입력을 해주었는데, `Nest.js`에서는 URI 맨 앞에 '/'를 제거해서 입력해 줘야 한다는 것을 기억해야 하는 것이에요.

29 ~ 30번째 줄은 Swagger 설정 부분이에요.

29번째 줄 `@ApiOeration`은 위와 같이 '회원 인증 / 인가 API'라는 표시가 있는 것처럼 해당 API 설명을 입력해 주는 부분인 것이에요.

30번째 줄은 `Response`에 HTTP Status Code에 따라 해당 Code가 어떤 내용인지를 설명해 주는 부분인 것이에요.

<위에 부분에서 수정 되었습니다!>

93번째 줄에 `@Post`를 통해 해당 Method는 HTTP Method Post로 동작하게 만들었고, URI 마지막에 `/signup`이 들어와야 호출 되게 해 준것이에요. 그런 뒤 매개 변수로 회원 가입 시 작성해야 할 내용을 담은 DTO를 받고, `@Res()`를 받는데, 이 내용은 `이 곳`에 따로 준비 해 둔 것이요.

이를 통해 101번째 줄에 반환을 할 때 `res.status()`를 통해 Http Status Code와 `JSON` 형태로 Data를 보낼 수 있는 것이에요.

99번째 줄을 보면 먼저 `DI(Dependency Injection)`한 `Service`의 signUp()을 호출해서 DTO를 보내고, 해당 작업이 처리 될 때까지 대기 시키기 위해 `await`을 선언한 것이에요. 그렇게 반환값이 오게 되면 `UserEntity` Type의 상수형 객체 user에 값이 담기게 되는 것이에요.

자료형 Type이 들어가는 곳에 여러 변수가 있는데, 이 부분은 Respository에서 HTTP Response에 맞게 답변을 주기 위해서 작업을 했기 때문인 것이에요.

🔽 결과

📦 POSTMAN

잘 동작하는지 Postman을 통해 Test 해 볼 것이에요.

아주 잘 되고 있는 것을 확인할 수 있는 것이에요.

Data Base를 확인 해 보니 9번째 줄에 정상적으로 Data가 입력 된 것이에요.

🚀 유효성 검사

위와 같이 DTO가 변경된 것이에요.

유효성 검사를 위해 세 가지가 더 추가가 되었는데, `@MinLength() = 최소 입력되어야 하는 문자의 개수`, `@MaxLenth() = 최대 입력할 수 있는 문자의 개수`, `@Mathces() = 정규 표현식을 이용한 입력 가능한 문자 등록`을 추가한 것이에요. 그리고 `@Mathces() = 정규 표현식을 이용한 입력 가능한 문자 등록`에서 `message`를 통해 유효성 검사가 위반되면 경고 Message를 등록할 수 있는 것이에요.

정규 표현식과 같은 것에 대한 내용은 `Spring Boot` Project를 하면서 `이 곳`에 준비 해 둔 것이에요.

`Controller`에서 `Pipe`를 이용한 유효성 검사를 사용하기 위해서는 93번째 줄에 매개 변수 쪽을 보면 `@Body()`안에 `ValidationPipe`를 꼭 넣어줘야 하는 것이에요.

위와 같이 해줘야 `Request(요청)`이 들어왔을 때, Method가 동작하기 전에 DTO에 입력된 Decorator를 참고하여 Validation을 하는 것이에요.

🔽 결과

📦 POSTMAN

위와 같이 정상적으로 유효성 검사가 진행되는 것을 알 수 있는 것이에요.

🚀 ID Unique Value Config

이번에는 회원 가입을 할 때, 별명, ID가 이미 등록되어 있다면 `Error`를 반환할 수 있는 기능을 구현할 것이에요.

이 방법을 구현하기 위해서는 두 가지 방법을 생각 해 볼 수 있는 것이에요.

● `Repository`에서 `findOne()`을 이용해서 이미 같은 Data가 있는지를 확인하고, 없다면 Data 저장.
- 단점 : Data Base에 두번 접근.
● Data Base Level에서 만약 같은 값을 가진 회원이 있다면 `Error`를 던져주는 방법.

먼저 두번째 방법에 대해 알아보도록 할 것이에요.

최초 `user.entity.ts`에 Class 위에 `@Unique()`를 이용하여 중복을 막고자하는 값들을 넣어주면 되는 것이에요.

`Repository`에서 문제가 발생 했을 때, try - catch 구문을 이용해서 `Error` Mesaage를 Handling할 수 있는 것이에요.

주니하랑은 `Spring Boot` Project에서 첫번째 방법과 같이 유효성 검사를 구성한 것이에요.

물론 SQL 문이 두번 날아가는 문제가 있지만, 일단 `Spring Boot`와 동일하게 만들어 보도록 할 것이에요.

참고로 ID, 별명, Email, 핸드폰 번호까지 모두 중복 체크를 하기 때문에 ID에 대한 내용만 정리 해 보도록 하겠습니다.

   /**
     * 회원 가입 전 등록된 ID 정보 인지 확인
     * @param authDuplicateByUserIdDto - 회원 가입 전 등록 되어 있는 ID 인지 확인을 위한 이용자 입력 정보 DTO
     * @return User - 해당 회원의 정보 반환
     * @see ""
     */

    async duplicateUserID(authDuplicateByUserIdDto: AuthDuplicateByUserIdDto): Promise<{ messageKo: string; statusCode: number; data: User; messageEn: string }> {

        this.logger.log("UserRepository의 duplicateUserID(authDuplicateByUserIdDto: AuthDuplicateByUserIdDto)이 호출 되었습니다!");
        this.logger.log(`Service로 부터 전달된 DTO 내용 : ${authDuplicateByUserIdDto.toString()}`);
        this.logger.log(`DB에 Select()문을 통해 해당 ID가 존재하는지 검사 하겠습니다!`);

        const { username } = authDuplicateByUserIdDto;

        this.logger.log(`username : ${username}`)

        const findByUserID = await this.findOne({
            where: { username : username}
        });

        this.logger.log(`DB에서 조회된 값 : ${findByUserID}`);

        if (findByUserID) {

            this.logger.log("이미 존재하는 ID 입니다! 409 Code와 함께 \"이미 존재하는 값 입니다!\" 반환 하겠습니다!")

            return {
                statusCode: 409,
                messageKo: "이미 존재하는 값 입니다!",
                messageEn: "Conflict",
                data: findByUserID,
            };

        } else {

            this.logger.log("중복 되는 값이 없습니다! 200 Code와 함께 \"사용 가능!\" 반환 하겠습니다!");

            return {
                statusCode: 200,
                messageKo: "사용 가능!",
                messageEn: "OK",
                data: findByUserID,
            };
        } // if (findByUserID === null || findByUserID === undefined) 끝
    }   // duplicateUserID(authDuplicateByUserIdDto: AuthDuplicateByUserIdDto) 끝

먼저 `Repository`부터 살펴 볼 것이에요. 최초 39번째 줄에 보면 입력으로 들어온 DTO에서 `username` 내용을 빼기 위해 상수형 변수 username에 값을 넣어준 것이에요.

그런 뒤 `findOne() = select * from user where username = ${username]`을 이용해서 DB에서 Client가 ID 중복체크를 위해 전달한 값 ID 값이 있는지 조회하도록 한 것이에요.

`findOne()`에 보면 options로 `where`를 통해 `username`을 조회하는데, [where : { username : username}] 부분은 상수 형 변수 username이 가진 값을 가지고 조회하라고 한 것이에요.

이렇게 안하면 엉뚱하게 `userId` Column에서 찾고 있더라구요.

💡 참고 사항
TypeORM SQL Show
JPA에서 Console을 통해 SQL문이 어떻게 던져지는지를 보기 위해 설정하는 방법이 있는 것이에요.
MyBatis 역시 마찬가지이구요.

TypeORM도 이 기능이 있는데,

typeorm.config.ts

위의 그림 14번째 줄처럼 logging을 all로 해주면 Error는 물론이고, SQL 문이 어떻게 던져지는지 보여주는 것이에요.

SQL Logging

   /**
     * 회원 가입 전 등록된 ID 정보 인지 확인
     * @param authDuplicateByUserIdDto - 회원 가입 전 등록 되어 있는 ID 인지 확인을 위한 이용자 입력 정보 DTO
     * @return User - 해당 회원의 정보 반환
     * @see ""
     */

    async duplicateUserID(authDuplicateByUserIdDto: AuthDuplicateByUserIdDto): Promise<{ messageKo: string; statusCode: number; data: User; messageEn: string }> {

        this.logger.log("UserRepository의 duplicateUserID(authDuplicateByUserIdDto: AuthDuplicateByUserIdDto)이 호출 되었습니다!");
        this.logger.log(`Service로 부터 전달된 DTO 내용 : ${authDuplicateByUserIdDto.toString()}`);
        this.logger.log(`DB에 Select()문을 통해 해당 ID가 존재하는지 검사 하겠습니다!`);

        const { username } = authDuplicateByUserIdDto;

        this.logger.log(`username : ${username}`)

        const findByUserID = await this.findOne({
            where: { username : username}
        });

        this.logger.log(`DB에서 조회된 값 : ${findByUserID}`);

        if (findByUserID) {

            this.logger.log("이미 존재하는 ID 입니다! 409 Code와 함께 \"이미 존재하는 값 입니다!\" 반환 하겠습니다!")

            return {
                statusCode: 409,
                messageKo: "이미 존재하는 값 입니다!",
                messageEn: "Conflict",
                data: findByUserID,
            };

        } else {

            this.logger.log("중복 되는 값이 없습니다! 200 Code와 함께 \"사용 가능!\" 반환 하겠습니다!");

            return {
                statusCode: 200,
                messageKo: "사용 가능!",
                messageEn: "OK",
                data: findByUserID,
            };
        } // if (findByUserID === null || findByUserID === undefined) 끝
    }   // duplicateUserID(authDuplicateByUserIdDto: AuthDuplicateByUserIdDto) 끝

DB에서 조회된 값은 상수형 변수 findByUserID에 담기게 되는 것이에요.

그런 뒤 49번째 줄에 DB에서 조회된 값이 있는지 확인을 하는데, 있다면 이미 존재하는 값이라고 반환을 주고, 없다면 사용 가능하다고 알려주도록 구현을 한 것이에요.

이렇게 구현한 이유는 `Spring Boot` Project 기반에 `Vue.js` Project에서 `Spring Boot`와 동일하게 API를 이용할 수 있도록 하기 위함인 것이에요.

일단 비즈니스 로직이 `Repository`에서 실시하고, `Service`는 단순히 `Repository`에 해당 Method만 호출하고 있는데, 이렇게 할 수 밖에 없었던 이유가 DB에서 조회된 값에 대해 Null 값 확인을 해서 있는지 없는지를 확인해야 하는데,

`Service`에서 이 Logic을 구현하면 `Repository`에서 넘어온 값에 자꾸 `Promise Object` 가 담겨서 전달이 되는 것이에요. DB에 결과값이 있던 없던지요.

그래서 Optional처럼 뭔가 변경해서 처리를 해야 하는건지 아니면 Method가 존재하는지 3시간이 넘게 찾아봤지만! 🤬

안나와서 일단 이렇게 구현한 것이에요.

`Controller`는 단순히 `Service`를 호출하고, `Route` 기능에 충실하게 구현한 것이에요.

주목해야 할 점은 `Repository`에서 result Object에 반환할 Data들을 담았었는데, 이 때문에 이 곳 `Controller`에서는 반환을 `Promise<any>`로 해 준 것이에요.

🔽 결과

보시면 아시겠지만, `TypeORM`, `Nest.js`을 처음 써 보는 주니하랑은 엄청나게 삽질을 한 것이에요. 😤

📦 POSTMAN

DB에 존재하는 Data를 조회하면 위와 같이 이미 존재한다고 알려주는 것이에요.

이렇게 Validation 처리도 완료 하였구요.

Data Base에 해당 값이 없으면 사용 가능하다고 알려주는 것이에요.

📦 Vue.js

🚀 비밀번호 암호화

위에 Logic을 구현하면서 아직 비밀번호를 암호화해서 DB에 저장하는 Logic을 구현하지 않은 것이에요.

`Spring Boot`에서는 `Spring Security`의 Interface 객체인 `PasswordEncoder()`를 이용하는데, `Nest.js`에서는 `bcryptjs`을 이용해서 해보려고 하는 것이에요.

🔽 설치

📦 bcryptjs

명령어

npm install bcryptjs --save

이용자의 비밀번호가 평문으로 저장되는 것은 말도 안되는 것이에요.

비밀번호를 암호화 열쇠(Encryption Key)와 함께 암호화(양방향)으로 저장하는 방법이 있는데, 이것도 좋은 방법은 아니에요.

어떠한 암호를 이용해서 비밀번호를 암호화 하고, 그 암호를 이용하여 복호화도 가능한 개념이 양방향 암호화 알고리즘인 것이에요. 이 알고리즘은 대부분 오픈 되어 있기 때문에 암호화 열쇠(Encryption Key)가 악의적인 사용자에게 탈취되어 복호화가 될 가능성이 아주 높은 것이에요.

또 다른 방법은 `Hash 알고리즘`을 이용한 단방향 암호화 알고리즘을 이용하는 것이에요.

이 개념은 한번 암호화가 되면 복호화를 할 수 없도록 만드는 개념인 것이에요.

대표적으로 이용되는 것이 우리가 사용하는 운영체제(Linux, Window)에 계정을 만들 때와 Login 할 때 이용되는 것이에요.

`Hash 알고리즘`은 `Rainbow Table Attack`으로 암호화 값을 비교하는 방법으로 공격을 할 수 있는데, 대부분 이용자들은 거의 비슷한 암호를 사용하기 마련이에요. `A 이용자`, `B 이용자`가 둘 다 1234라는 암호를 이용할 때, `Hash` 알고리즘을 통해 암호화를 하게 되면 동일한 암호값이 나오는 문제가 발생하는 것이에요.

이를 방지하기 위한 개념이 소금의 영어 단어 `salt`와 평문 비밀번호를 합친 뒤에 Hash 알고리즘에 함께 암호화를 하여 동일한 평문값을 입력해도 다른 값이 나올 수 있도록 하는 방법을 이용하는 것이에요.

위에서 이야기 했던 운영체제는 이 `salt`를 이용해서 암호화를 하고 있답니다!

`bcryptjs`는 위에서 이야기한 `Hash` 알고리즘과 `salt` 개념을 이용한 암호화 지원 Module인 것이에요.

🔽 구현하기

최초 9번째 줄처럼 `bcryptjs` Module을 `Import` 해줘야 하는 것이에요.

230번째 줄을 보면 `bcrypt Module`안에 `genSalt()`를 호출하여 Salt값을 만든 뒤 이를 상수형 변수 `salt`에 넣어주는 것이에요.

그런 뒤 235번째 줄에 `bcrypt Module`안에 `hash()`를 호출하면서 이용자의 비밀번호와 `salt` 값을 같이 전달해주어 `Hash 암호화`가 진행 되도록 해 준 것이고, 그 값을 상수형 변수 `hashPassword`에 넣어 준 것이에요.

240번째 줄에 상수형 변수 `user`에 이용자가 회원 가입 시 입력했던 값들을 가지고 새로운 객체를 만들어 주는데, 이때 이용자의 비밀번호화 암호화 되도록 설정해 준 것이에요.

🔽 결과

📦 POSTMAN

정상적으로 값이 들어간 것이에요.

📦 Vue.js

Vue.js를 통해서도 정상적으로 처리가 완료 되는 것이에요!

💡 참고 사항

그래서 안전할까?

위에 방법은 완전하게 안전하지 않습니다.
그 이유는 Client에서 Server에게 비밀번호를 전달할 때, 평문값으로 비밀번호가 전달되기 때문 입니다.
악의적인 이용자가 Man in the Middle Attack(중간자 공격)을 통해 탈취를 하거나, Sniping을 통해 도청을 하면 비밀번호를 쉽게 탈취할 수 있는 것이에요.

그래서 이를 막기 위해서 SSL/TLS를 쓰는 것이고, 지금 주니하랑 Blog 주소창을 보시면 https://로 시작되는 것을 볼 수 있는 것 입니다.

다음 포스팅은 Login 기능을 가지고 공부해 보도록 할 것이에요.

이전 글 : [BackEnd][Node.js][nest.js-PJ] 사내 개발자 커뮤니티 서비스 - 초기 구성(Pipe, TypeORM, Configuration, Swagger, Logger)

다음 글 : [BackEnd][Node.js][Nest.js] 사내 개발자 커뮤니티 서비스 - JWT를 이용한 Login

728x90

저작자표시 비영리 변경금지