[Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ① 초기구성

 

카카오페이 | 마음 놓고 금융하다

 

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

 

관련 소스 코드:

GitHub - junyharang/nestTs-jwt-multer: Nest.ts를 이용한 JWT 인증, 인가와 파일 처리 연습

 

🗂 목차

✅ [Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ① 초기구성
✅ [Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ② 회원가입과 인증(feat. Access Token & Refresh Token)
✅ [Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ③ Multer를 이용한 이미지 처리
✅ 

 

 

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

 

 

🚀 JWT를 이용한 인증, 인가 그리고 Multi part 이야기

    🔽 ① 초기구성

        📦 개요

이번 글은 Nest.ts(Type Script & Nest.js)를 이용한 Back-end 구성에서 JWT(Json Web Token)를 이용하여 인증, 인가 그리고 Multi part를 이용한 File(파일) 처리에 대해 실습해 보려고 해요.

Nest.js는 무엇인지에 대해 궁금하신가요? 그렇다면 이 곳에 관심을 주세요.

[Nest.js] 개념 정리

이번 실습에서는 구체적으로 JWT를 이용한 인증, 인가와 두 개의 게시판 API를 만들어 Multi part를 이용해서 파일 처리를 할 수 있는 API를 만들어 보려고해요.

    🔽 초기 구성

        📦 실습 환경

🔍 MacOS (M3 MacBook Pro Sonoma 14.2.1)
🔍 TypeScript
🔍 Nest.js
🔍 Embedded SQLite DBMS
🔍 MariaDB 10.11.2
🔍 TypeORM 0.3.19
🔍 InteliJ (2023.2.5 Ultimate)

 

 

 

 

        📦 소개

주니는 이 전에 Nest.js를 이용하여 GraphQL(그래프큐엘)을 실습해 본 적이 있어요.

[Nest.js] 초기 환경 구성 (feat. TypeORM, QueryBuilder, GraphQL, Apollo)

이 때 구성했던 방법들을 이용하여 다시 Project(프로젝트) 기본 구성을 진행하고, 추가적으로 필요한 것들을 이용해 보려고 해요.

        📦 프로젝트 구성

주니는 InteliJ를 이용하여 Nest.js 프로젝트 구성을 진행해 볼게요.

최초 NVM, Node.js, NPM을 설치해 주어야 해요.

이 내용에 대해서는 이 곳에 관심을 주세요.

[M1 Mac] NVM, Node.js, NPM 설치

 

위의 내용들을 하면서 몇가지 추가되는 부분만 이 곳에 정리해 보도록 할게요.

이번에 할 작업은 Local(로컬), Development(개발), Production(운영) 등의 각각의 환경을 나누고, 거기에 맞는 Database(데이터베이스)를 사용하는 등의 환경을 나누는 작업을 해보려고 해요.

Nest.js에서는 @nestjs/config package(패키지)를 통해 환경에 맞는 env 파일을 Load(로드)하는 Config Module을 제공하고 있어요.

npm i -D @nestjs/config

 

npm i config

npm i @types/config

npm i -D corss-env

728x90

npm i fs js-yaml path

config/environment/.env.local.yml

 

config/environment/.env.dev.yml

위와 같이 각각의 환경에 따른 값들을 가지고 있는 yaml 파일을 만들어 줍니다.

config/environment/configuration.ts

이제 위 코드를 통해 환경 설정 파일 (.env.local.yml, .env.dev.yml, .env.prod.yml)을 읽어 드리고,
해당 설정을 반환하는 Function(함수)에 대해 알아볼게요.

최초 8번째 줄을 통해 현재 구동 환경이 로컬, 개발, 운영 환경 중 하나인지를 확인하고,
해당하지 않으면 assert()를 통해 Exception이 터지도록 해 주었어요.

10번째 줄은 join()을 이용하여 현재 작업 디렉터리 즉 프로젝트 Root Dirctory를 기준으로(process.cwd()), common/config/environment 안에 있는 설정 파일(.yml) 경로를 생성해 주었어요.
그런 뒤 해당 경로 값을 configFilePath 상수 변수에 넣어주었어요.

12번째 줄은 readFileSync()를 사용하여 .yml 파일을 동기적으로 읽고, yaml.load()로 설정값들을 Parsing(파싱)하도록 해 주었는데, 이 때, 반환된 .yml의 Data(데이터)는 Record<String, any> 형태로
Casting(캐스팅 - 자료형 변환) 되도록 해 주었어요.

13번째 줄에서는 environmentConfig 객체에 server Property(프로퍼티)에 environment 프로퍼티를 추가하고,
해당 값은 구동되는 환경에 따라 결정되도록 설정해 준 부분이에요.

마지막으로 15번째 줄에 연산 결과를 반환하는데, 파싱된 .yml 데이터와 추가로 설정된 server.environment 값을 포함하는 객체를 반환하도록 해 주었어요.

위 코드는 환경 설정을 Load(로드)하고, 각 설정 파일에 따라 서버 환경을 설정하는데 사용하기 위한 내용이에요.
특히 서버 환경은 environmentConfig.server.environment에 저장되어 재사용 될 수 있도록 해 주었어요.

src/app.module.ts

위 코드는 Nest.js 애플리케이션에서 설정을 다루기 위해 @nestjs/config 모듈을 사용하는 부분이에요.

1번째 줄에 @nestjs/config 모듈을 Import(임포트) 해 주고, 이를 통해 설정 관리를 할 수 있도록 해 주었어요.

9 ~ 13번째 줄에서 10번째 줄은 설정이 캐시되어 여러번 로드되지 않도록 설정해 준 부분이에요.
이는 성능 향상을 할 수 있는 설정이에요.

11번째 줄을 true로 설정했다는 건 애플리케이션 전역에서 설정을 사용하도록 설정하는 부분이에요.
이 설정을 사용하면 다른 모듈에서 configModule을 추가하지 않아도 된답니다.

12번째 줄에는 애플리케이션을 시작할 때 설정을 로드하게 되는데, 이 때 사용할 설정 Provider(프로바이더)를 제공하는 부분이에요. 위에서 만든 configuration()을 불러 이 곳에 넣어준 것이에요.

이 코드는 Nest.js 애플리케이션에서 설정을 효과적으로 관리하고, 애플리케이션 전역에서 설정을 사용할 수 있도록 구성해 준 부분이에요. 

src/main.ts

반응형

그런 뒤 위와 같이 main.ts를 구성해 주었는데, 위에서 만든 configuration()을 호출하여 serverConfig 상수 변수에 담고, 이를 통해 환경 값을 가져올 수 있도록 구성해 주었어요.

package.json

위 npm script(스크립트)는 Nest.js Application(애플리케이션)을 각각의 환경에서 빌드하고, local과 dev 환경의 경우 Webpack을 사용하여 Bundling(번들링)하며, --watch Option(옵션)을 통해 파일 변경을 감지하여 자동으로 빌드하는 역할을 해 주도록 한 부분이에요.

13번째 줄에 대해 분석해 보면 npm run start:local 명령어를 프로젝트 디렉터리에서 입력하게 되면 로컬 환경으로 구동될 수 있도록 설정해 준 부분이에요.

cross-env NODE_EVN=local은 cross-env 패키지를 사용하여 환경 변수 NODE_ENV를 설정하도록 한 부분이에요.
여기서는 local로 설정되어 로컬 환경으로 애플리케이션을 구동하도록 해 준 부분이에요.

nest build는 Nest.js 애플리케이션 Build(빌드) 명령어에요. 이 명령어는 src 디렉터리의 Type Script Code를 Compile (컴파일)하여 dist 디렉터리에 Java Script로 Code를 생성하게 하는 명령어에요.

--webpack 옵션은 Nest.js 내부적으로 사용하는 기본적인 Webpack 설정 대신, 개발자 정의 Webpcak 설정 파일을 사용하겠다는 의미를 가지고 있는 옵션이에요. 이 때, 뒤에 webpack-hmr.config.js 파일을 Webpack 설정 파일로 쓰겠다는 의미이고, webpack-hmr-config.js는 환경에 따라 다르게 설정된 Webpack 설정을 지정하는 역할을 할 것이에요.

--watch 옵션은 파일의 변경을 감지하여 자동으로 빌드하도록 하는 옵션이에요.
이 옵션이 활성화되면 파일 변경 시 자동으로 애플리케이션을 Re Build(재빌드) 하기 때문에 개발 중에 효율적으로 사용할 수 있는 부분이에요.

다만, 이 부분에 유의사항은 반드시 운영 환경에서는 적용되면 안된다는 것이에요.

이렇게 스크립트를 실행하게 되면 Nest.js 애플리케이션이 각각의 환경에 맞춰 빌드되고, 지정된 Webpack 설정을 사용하여 번들링되며, 파일 변경을 감지하여 자동을 빌드되게 돼요.

Local 환경 구동

 

NestJS로 배우는 백엔드 프로그래밍:타입스크립트 환경의 차세대 서버 프레임워크를 만나다

 

        📦 프로젝트 구성 - mariadb 연결

npm i mysql2 --save

src/app.module.ts

15 ~ 23번째 줄을 분석해 볼게요.
위 내용은 TypeORM 모듈을 사용하여 Nest.js 애플리케이션에서 데이터베이스 연결을 위한 설정 부분이에요.

15번째 줄은 TypeOrmModule을 애플리케이션에 설정하기 위한 부분이에요.

16번째 줄은 데이터베이스 유형을 설정하는 부분으로 configuration()에 구현된 데이터베이스 설정 부분중 type 내용을 가져오도록 해 준 부분이에요.

17번째 줄은 데이터베이스 호스트 설정 부분이에요.

18번째 줄은 데이터베이스 이름 설정 부분이에요.

19번째 줄은 데이터베이스 서버 포트 설정 부분이에요.

20번째 줄은 데이터베이스 계정의 ID를 설정하는 부분이에요.

21번째 줄은 데이터베이스 계정의 비밀번호를 설정하는 부분이에요.

22번째 줄은 Entity(엔티티) 설정 부분으로 TypeORM이 참조할 엔티티들의 경로를 설정하는 부분이에요.
이 부분에서 __dirname은 현재 파일이 속한 디렉터리를 나타내는 부분이고, 그 뒤에 내용은 해당 디렉터리와 하위 디렉터리에 있는 모든 파일 중 *.entity.ts 또는 *.entity.js로 끝나는 파일들을 엔티티로 인식하라고 해 준 부분이에요.

위 설정을 통해 TypeORM은 애플리케이션에서 지정된 데이터베이스에 연결하고, 설정된 엔티티들을 인식하여 데이터베이스와의 상호 작용을 할 수 있도록 해 주는 부분이에요.

이러한 방식으로 TypeORM은 설정과 엔티티들을 기반으로 데이터베이스와의 통합을 간편하게 수행할 수 있답니다.

 

 

Dev 환경 구동

개발 환경의 Database 내에 test DB를 아직 안 만들어서 찾을 수 없어 문제가 발생한 거에요.
즉, 설정은 잘 되었다는 의미에요.

test DB를 만들고 나서 다시 기동해 볼게요.

nrpm run start:dev

잘 기동 되는 것을 확인할 수 있어요.

 

 

 

        📦 프로젝트 구성 - Swagger 설정

Swagger 설정 방법에 대해서는 이 전에 작성했던 이 곳에 관심을 주세요.

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

 

Local 환경

 

Dev 환경

 

 

        📦 프로젝트 구성 - JWT Package 설치

npm i @nestjs/jwt --save

 

 

 

 

        📦 프로젝트 구성 - Multer Package 설치

npm i @types/multer --save

 

이렇게 실습해 볼 내용에 대해 미리 준비해 보았어요.
이제 본격적으로 다음 글부터 기능 구현을 진행해 볼게요.

 

 

관련 소스 코드:

GitHub - junyharang/nestTs-jwt-multer: Nest.ts를 이용한 JWT 인증, 인가와 파일 처리 연습

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

 

카카오페이 | 마음 놓고 금융하다