[Nest.js] JWT를 이용한 인증, 인가 그리고 Multi part 이야기 - ③ Multer를 이용한 이미지 처리

 

 

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

 

 

 

 

 

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

 

🗂 목차

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

 

 

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

 

 

 

🚀 Multi part를 이용한 이미지 처리

    🔽 개요

        📦 소개

Multi part(멀티 파트)는 Client(클라이언트)와 Server(서버) 사이에 전송되는 HTTP Request(요청) 또는 Response(응답)에서 여러 종류의 Data(데이터)를 동시에 전송하기 위해 사용되는 방식을 이야기해요.

일반적으로 File Upload(파일 업로드)와 관련된 데이터 전송 때 많이 사용하고 있어요.

HTTP Protocol(프로토콜)은 기본적으로 Text(글자) 기반의 요청과 응답을 처리해요.
하지만, 파일과 같은 Binary(이진) 데이터를 전송해야 할 때 이진 데이터를 글자 형식으로 Encoding(인코딩)하는 것은 비효율적이고, 제한 사항이 있는 것이에요.

멀티 파트 요청은 Content-Type Header(헤더)에 multipart/form-data 값을 가지며, 여러개의 Part(파트)로 구성돼요.
각 파트는 개별적인 데이터 조각으로 파일이나, 글자 데이터 등을 포함할 수 있어요.
또한, 각 파트는 헤더와 Body(본문)으로 구성되어 있으며, 헤더에는 파트의 Meta data(메타 데이터)가 포함되어 있고, 본문에는 실제 데이터가 들어가는 방식이에요.

멀티 파트 요청을 처리하기 위해서는 서버 측에서 멀티 파트 데이터를 Parsing(파싱)하는 Logic(로직)이 필요해요.
일반적으로 멀티 파트 요청을 처리하는 Library(라이브러리)나, Framework(프레임워크)를 사용하여 멀티 파트 데이터를 추출하고, 처리하게 된답니다.

참고로 Spring MVC에서는 MultipartResolver라는 객체를 사용하여 멀티 파트 요청을 처리하고 있어요.

주니는 두 가지 방법을 이용해서 멀티 파트 처리를 구현해 보려고 해요.
최초 단일 파일 처리는 Router(라우터) Handler(핸들러)에 Decorator(데코레이터)를 이용해서 Option(옵션)을 설정하는 방식으로 처리해 볼 것이고,

두번째 다수의 파일 처리는 multer.options 라는 옵션 파일을 만들어 공통적으로 이용할 수 있는 방법으로 처리해 보려고 해요.

 

 

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

 

 

 

 

    🔽 단일 파일 처리

        📦 Entity

src/api/common/file/model/entity/file.entity.ts

src/api/common/file/model/entity/file.entity.ts

Entity는 모든 멀티 파트를 통해 들어오는 File(파일) 정보를 모두 저장할 수 있도록 구성해 주었어요.
사실 이렇게 다 Database(데이터 베이스)에 저장할 필요는 없고, 고유 번호(ID)와 image url만 처리해도 되며, 필요한 경우 원본 파일 이름과 재 구성된 파일 이름 정보만 처리해도 무방하지만, 주니는 실습을 위해 위와 같이 구성해 주었어요.

 

 

 

        📦 Controller

src/api/common/file/controller/file.controller.ts

src/api/common/file/controller/file.controller.ts

라우터 핸들러에 대해 분석해 볼게요.
최초 해당 클래스의 URN Prifix는 file로 정의해 주었어요.

그렇다면 http://localhost:8181/file 로 정의가 될 거에요.

16번째 줄에 생성자를 통해 FileService를 주입 받는데, 주니는 SOLID 5원칙 준수를 위해 Interface(인터페이스)와 Implementation(구현체)를 분리하여 만들었기 때문에 위와 같이 주입하여 주었어요.

18, 21번째 줄은 Swagger(스웨거) 데코레이터로 18 ~ 20번째 줄 내용은 스웨거 문서에서 API의 요약 정보 제공을 위하여 작성해 주었어요.

그리고, 21 ~ 24번째 줄에 내용은 로직이 성공적으로 처리 되었을 때, 성공에 대한 Response(응답)을 어떻게 내려줄 것인지에 대해 설명하는 부분이고, 여기서는 파일 업로드 성공에 대한 설명과 응답 형식을 정의해 주었어요.

25번째 줄은 REST API 형식을 위해 HTTP POST Method로 Endpoint URN을 /uploads/image로 구성해 주었어요.
이렇게 되면 해당 핸들러를 호출하기 위해서는 http://localhost:8181/file/uploads/image라는 URL로 POST 요청을 보내줘야 해요.

26 ~ 39번째 줄 까지가 멀티 파트를 위한 설정 부분이에요.
26번째 줄에 데코레이터는 NestJS에서 Interceptor(인터셉터)를 사용할 때, 적용하는 데코레이터에요.
여기서는 FileInterceptor를 사용하여 Image File(이미지 파일)을 처리하는데, 업로드된 파일을 다루기 위해 diskStorage를 구성하도록 만든 부분이에요.

27 ~ 38번째 줄에 대해 분석해 보면 FileInterceptor는 이미지 파일 업로드 처리를 위해 정의한 부분이고, fieldName 즉, 첫번째 매개 변수는 업로드된 파일의 Field(필드) 이름을 나타내 주는 부분이에요.

두번째 매개 변수 localOptions에 storage 속성은 업로드된 파일의 저장소를 지정하는 부분이고, 주니는 Disk Storage(디스크 스토리지)를 사용하겠다고 정의해 주었고, 파일은 현재 프로젝트 내에 ./local/storage/images 경로로 지정해 주었어요.

30번째 줄 filename()은 각 파일에 대한 고유 이름을 생성하기 위한 부분이고, 주니는 Random(랜덤)으로 32자의 임의의 문자열과 업로드된 파일 원본 이름의 확장자를 조합하여 만들도록 구성해 주었어요.

40 ~ 42번째 줄이 본격적인 핸들러 정의 부분인데, 여기서 매개 변수에 데코레이터 @UploadedFile()은 업로드된 파일에 접근할 수 있게 하기 위해 정의한 부분이고, Express.Multer.File은 업로드된 이미지 파일을 받기 위해 정의해 준 부분이에요.

그리고 해당 핸들러는 fileService.uploadImage()를 호출하여 이미지 업로드 작업을 처리하고, 결과로 Promise로 Wrapping(래핑)된 DefaultResponse 객체를 반환하도록 해 주었어요.

정리하면 해당 핸들러는 이미지 업로드에 대한 기본적인 구조를 사용하도록 만들어진 핸들러이고, 랜덤한 파일 이름 생성, 디스크 스토리지 설정, 스웨거 문서화 등을 통해 단일 이미지 저장에 대한 기능을 정의한 메서드에요.

 

 

        📦 Service

Service 로직의 인터페이스 코드 부분은 캡쳐하지 않을게요.
자세한 내용은 주니의 깃헙에서 확인하실 수 있어요.

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

 

src/api/common/file/service/file.service-impl.ts

Business Logic(비즈니스 로직)은 위와 같이 구성해 주었어요.

최초 13번째 줄 생성자에서 TypeORM을 이용하기 위해 fileRepository를 주입 시켜 주었어요.

uploadImage()는 멀티 파트를 이용해 전달된 파일을 매개 변수로 받게 되고, 처리가 끝난 뒤 DefaultResponse 객체로 반환되는데, 이 때, data Type으로 저장된 이미지의 고유번호와 URL을 전달할 수 있도록 처리해 주었어요.

동기식 처리가 필요하기 때문에 async - await이 사용되었고, 이 때문에 Promise<>로 래핑하여 반환해주었어요.

16번째 줄은 매개 변수로 전달된 파일이 Null인지 확인하고 있어요.

Null이 아니라면 TypeORM의 save()를 이용하여 이미지 정보를 데이터 베이스에 저장하는데, 멀티 파트로 전달되는 모든 내용을 저장할 수 있도록 처리해 주었어요.

참고로 30번째 줄에 URL은 configuration()을 이용하여 .env.yml에 서버 URL 값과 PORT 번호를 가져오게 해 주었어요.

데이터 베이스 저장 전 전달된 파일 정보를 Entity로 변경하기 위해 21번째 줄과 같이 생성자를 호출해서 각각의 내용을 넣고, 객체를 만들어 준 뒤 이 Entity를 save()에게 전달하여 저장될 수 있도록 처리해 준 부분이에요.

그런뒤 34 ~ 37번째와 같이 응답 데이터를 만들기 위해 imageContent라는 객체를 만들고, 그 안에 이미지 고유번호와 URL이 식별 가능하게 Key - Value 형태로 넣어주고, 이를 반환하도록 해 주었어요.

 

 

 

        📦 Module

src/api/common/file/module/file.module.ts

Module(모듈)은 위와 같이 컨트롤러와 서비스를 정의해 주었고,
TypeORM에 Entity를 File로 바라볼 수 있도록 설정해 주었어요.

src/app.module.ts

그리고 app.module에 위와 같이 FileModule을 정의해 주었어요.

 

 

 

 

    🔽 잘 만들었나? 🤔

        📦 Postman

위의 로직이 정상 구동되는지 Postman을 이용하여 확인해 볼게요.

Postman

위와 같이 HTTP Request Body에 image라는 Key로 Value를 이미지 파일로 넣어주면 정상적으로 처리된 걸 확인할 수 있어요.

Disk Storage

실제 이미지 파일은 지정해 준 경로에 잘 저장된 것도 확인할 수 있어요.

Database

데이터베이스에도 값이 잘 저장된 걸 확인할 수 있어요.

 

 

 

 

    🔽  다중 파일 처리

        📦 Controller

이번에는 여러 파일을 한번에 처리할 수 있는 기능을 만들어 볼게요.
위에서도 이야기 했듯 이번에는 옵션 처리를 공통으로 관리할 수 있는 파일을 만들어 구성해 보도록 할게요.

src/api/common/file/controller/file.controller.ts

단일 파일 처리 핸들러보다 코드 길이가 많이 짧은걸 알 수 있어요.
그 이유는 바로 52번째 줄에 multerDiskOptions 덕분이에요.

단일 파일 처리와 다른점은 52번째 줄에 FilesInterceptor의 fieldName이 images 이기 때문에 HTTP Request Body에 Key 이름을 image가 아닌 images로 넣어줘야 한다는 것이에요.

또한, 이 핸들러는 여러건의 파일을 받아야 하기 때문에 매개 변수 자료형 타입이 Array로 감싸져 있는 것을 확인할 수 있어요.

52번째 줄에서 FilesInterceptor(...)는 다중 파일 업로드를 처리하는 인터셉터를 정의한 부분으로 images 문자열은 업로드된 파일들의 필드 이름을 나타내는 부분이고, multerDiskOptions는 밑에서 이야기할 Options 에서 만든 multerDiskOptions 객체를 사용하기 위해 정의해 준 부분이에요.

그리고, 53번째 줄 내용은 uploadImages()의 매개 변수에 파일 업로드된 이미지들을 바인딩하기 위해 명시한 데코레이터에요.

54번째 줄 메서드의 매개 변수 내용은 업로드된 이미지 파일들에 접근할 수 있는 매개 변수를 정의해 준 부분이에요.

 

 

        📦 Options

src/api/common/file/config/multer.options.ts

728x90

src/api/common/file/config/multer.options.ts

이 부분이 파일 처리에 대해 공통으로 정의할 사항을 모아두고 사용할 수 있는 파일이에요.
multerDiskOptions{}는 멀티 파트를 이용할때, 디스크에 저장하는 것에 대해 옵션을 정의할 수 있는 거라고 생각하면 돼요.

해당 옵션은 MemoryOption도 존재하는데, 이는 파일을 디스크 즉, 보조 기억 장치가 아닌 RAM(램) 주 기억 장치에 저장할 때 사용해요.

주 기억 장치에 이미지 저장할 일이 있을까 싶어 이 부분에 대해서는 실습하지 않도록 할게요.

본격적으로 위 코드에 대해 분석해 보도록 할게요.

이 코드는 multer를 사용하여 파일 업로드 시 필요한 다양한 설정을 포함하고 있는데, 주로 File filter(파일 필터), 저장소(destination 및 파일 이름 설정), 업로드 제한 사항(limits)를 구성하는 방식이에요.

최초 7번째 줄에 fileFilter()는 업로드 되는 파일의 필터링을 담당하는 함수에요.
이 코드에서는 이미지 확장자로 .jpg, .jpeg, .png 확장자만 허용하도록 설정해 주었어요.
만약 허용되지 않는 파일 형식이 업로드 요청이 오면 HttpException을 터트려 Client(클라이언트)에게 반환될 거에요.

25번째 줄 storage는 diskStorage()를 사용하여 파일의 저장소(destination)와 파일 이름(filename)을 설정할 수 있어요.

destination()은 파일이 저장될 경로를 설정하는데, 29번째 줄에 해당 경로에 디렉터리가 현재 존재하는지 확인하고, 없으면 31번째 줄을 통해 각 디렉터리들을 생성해 주도록 설정해 주었어요.

filename()은 업로드 요청에 대한 파일의 이름을 설정하는 부분이에요. 여기서는 현재 시간(timestamp)과 업로드 요청된 파일의 원본 이름의 확장자를 조합하여 이름을 만들도록 해 주었어요.

limits 객체는 업로드될 파일 관련 제한 사항을 설정해 줄 수 있는 부분이에요.

이      름	설       명
fieldNameSize	Field 이름의 최대 크기 설정 (기본값 100 bytes)
fieldSize	Field Size 최대값 (기본값 1MB)
fields	File 형식이 아닌 Field의 최대 개수 (기본값 무제한)
fileSize	Multipart 형식 Form의 최대 용량. (기본값 무제한) 즉, 파일의 허용 크기 설정.
files	Multipart 형식 Form의 File Field 최대 허용 개수 (기본값 무제한)

반응형

위와 같이 설정된 multerDiskOptions 객체는 NestJS에서 사용되며, 핸들러에서 FileInterceptor 데코레이터를 이용하여 해당 객체를 명시해 주면 사용할 수 있고, 이러한 설정을 통해 업로드된 파일의 형식, 경로, 이름 및 제한 사항을 하나의 파일로 효과적으로 관리할 수 있어요.

 

 

 

        📦 Service

src/api/common/file/service/file.service-impl.ts

비즈니스 로직 코드에 대해 분석해 볼게요.

최초 43번째 줄에서 매개 변수로 전달된 파일의 배열이 Null이거나, 길이가 0인지를 확인하고 있어요.
아니라면 result라는 배열을 하나 만들어 준 뒤 향상된 For 문을 통해 images의 요소 하나하나를 꺼내면서 반복문을 돌게 해 주었어요.

50번째 줄에서 데이터 베이스에 하나의 이미지 정보를 저장하기 위해 TypeORM의 save()를 호출하여 new 연산자로 File 객체의 생성자를 호출한 다음 저장할 이미지 정보를 각각 넣어 객체화 해 주고, Entity 객체를 save()에 넣어 데이터 베이스에 저장하게 해 준 뒤 저장된 결과를 saveFile에 담기도록 해 주었어요.

그런 뒤 64번째 줄에서 해당 saveFile 객체에 담긴 Entity가 Null인지 확인해 주고, 아니라면 imageContent라는 객체를 만들어 이미지 고유번호와 URL을 식별 가능하게 정의하여 넣어준 뒤 imageContent 객체를 result 배열에 넣어 주도록 하였고, 이를 계속 반복해서 처리하도록 해 주었어요.

반복문이 모두 끝나면 정상 처리 되었다고 판단할 수 있기 때문에 result[]와 함께 정상 처리 정보를 반환하도록 해 주었어요.

 

 

 

    🔽 잘 만들었나? 🤔

        📦 Postman

Postman

Postman을 통해 HTTP Request Body에 form-data 형식으로 images라는 Key로 두 장의 이미지가 전송될 수 있도록 한 뒤 요청을 보내니 정상 처리 된 것을 확인할 수 있어요.

Disk Storage

파일도 디스크에 잘 저장된 걸 확인할 수 있어요.

Database

 

Database

위와 같이 데이터 베이스에도 정상적으로 잘 저장된 걸 확인할 수 있어요.

 

 

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

 

 

 

 

    🔽 저장된 이미지 이용하기 - URL을 이용한 이미지 바로 출력

        📦 개요

이번에는 저장된 이미지를 바로 출력해 볼 수 있는 기능을 구현해 보도록 할게요.
HTTP Method GET을 이용하여 Parameter(파라미터)로 이미지 이름을 보내면 출력될 수 있는 기능이에요.

 

        📦 Controller

src/api/common/file/controller/file.controller.ts

위 코드는 하나의 이미지 이름(확장자 포함)을 보내주면 바로 해당 사진을 볼 수 있도록 해주는 핸들러에요.
만약 여러 건의 이미지를 처리하고 싶다면 이름을 배열로 받던지 해보면 될 거 같아요.

주니는 하나의 이미지 요청에 대해서만 처리해 볼게요.

해당 핸들러는 URL 파라미터로 이미지의 이름을 받고, 응답 객체를 받는걸 확인할 수 있어요.
응답 객체를 받는 이유는 이 객체를 이용해서 보낼 응답을 Customizing (목적에 맞게 변경)하기 위함이에요.

 

 

 

 

        📦 Service

src/api/common/file/service/file.service-impl.ts

로직은 생각보다 간단해요.

매개 변수로 전달된 이미지 이름이 Null인지 확인하고, Null이 아니면 로직이 처리되는데,
이 때, Express 응답 객체 response의 sendFile()을 호출하여 매개 변수로 파일 이름과 options(파일 전송과 관련된 여러 옵션 설정하는 객체)로 root Key 값의 객체를 전달해 주는데, 이는 파일을 찾을 기준 경로를 정의해 준 것으로 ./local/storage/images에서 파일을 찾으라는 의미에요.

sendFile()은 Server(서버) 측에서 클라이언트에게 이미지 파일 전송 시 사용되는데, 클라이언트는 서버에게 파일 이름을 포함한 이미지 요청을 보내게 되면 서버는 해당 파일을 찾아 response.sendFile()을 통해 클라이언트에게 이미지를 찾아 전송하는 것이에요.

클라이언트는 이를 받아 이미지를 표시할 수 있게 된답니다.

 

 

 

 

    🔽 잘 만들었나? 🤔

        📦 Postman

Postman

그래서 위와 같이 Postman을 이용하여 파일 이름을 파라미터로 보내보면 해당 이미지가 바로 출력되는 걸 알 수 있어요.

 

 

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

 

 

 

    🔽 저장된 이미지 이용하기 - image 고유 번호를 입력하여 정보 얻어 오기

        📦 개요

이번에는 클라이언트가 GET 요청으로 image 고유 번호를 보냈을 때, 해당 이미지 URL을 반환하는 기능을 구현해 보려고 해요.

이 또한, 단일 이미지 처리와 다중 이미지 처리로 나누어서 이야기 해 볼게요.

 

 

        📦 Controller - 단일 이미지 처리

src/api/common/file/controller/file.controller.ts

위 핸들러는 imageId를 URL 파라미터로 받아 동작하는 핸들러에요.
반환되는 정보는 이미지 URL을 반환해 보도록 할게요.

 

 

        📦 Service - 단일 이미지 처리

src/api/common/file/service/file.service-impl.ts

비즈니스 로직은 최초 87번째 줄에서 imageId가 0보다 작거나 같은지 혹은 Null인지를 확인하고 있어요.
둘 다 모두 True가 아니라면 91번째 줄을 통해 imageId를 id 변수명으로 바꾸고, 그걸 TypeORM findOne()을 통해 매개 변수로 전달하여 데이터 베이스에 해당 이미지 고유번호로 저장된 이미지 정보를 가져오게 했어요.

만약 데이터 베이스에 존재하지 않는다면 (95번째 줄) 존재 하지 않는다는 에러 내용을 반환하게 해주고, 존재 한다면 해당 이미지 URL을 반환하도록 해 주었어요.

 

 

 

    🔽 잘 만들었나? 🤔

        📦 Postman

Postman

Postman을 이용하여 URL 파라미터의 찾을 이미지의 고유번호를 넣고, GET 요청을 보내면 위와 같이 이미지 URL을 반환받는걸 확인할 수 있어요.

 

 

 

 

        📦 Controller - 다중 이미지 처리

이번에는 여러 이미지 정보를 가져올 수 있는 기능을 구현해 볼게요.

src/api/common/file/controller/file.controller.ts

이 핸들러는 이미지 고유 번호를 여러개 받을 수 있도록 배열을 받도록 해 주었는데, 단일 이미지 처리와는 달리 Query String으로 GET 요청을 받도록 해 주었어요.

그리고, 반환되는 것도 이미지 URL이 여러개 반환될 수 있도록 배열에 담겨 반환될 수 있도록 해 주었어요.

        📦 Service - 다중 이미지 처리

src/api/common/file/service/file.service-impl.ts

비즈니스 로직은 최초 매개 변수로 전달된 이미지 고유 번호가 담긴 배열이 Null이거나, 길이가 0인지를 확인하고, 아니라면 응답값으로 전달할 객체 images를 만드는데, 이 객체는 이미지 URL을 문자열로 담을 배열 객체로 선언해 주었어요.

그런 뒤 109 ~ 116번째 줄까지 향상된 For문을 사용하여 이미지 고유 번호 요소 하나하나를 꺼내 반복문을 돌게 하는데, 110번째 줄에서 한 개의 이미지 고유번호를 꺼내 데이터 베이스에서 조회되도록 TypeORM의 findOne()을 이용하여 찾게 하고, 찾은 이미지 정보를 image 상수 변수에 담기도록 하였어요.

그런 뒤 그 객체가 Null이 아닌지 확인(111번째 줄)하고, 아니라면 images 객체 배열에 담아 주었어요.

그런 뒤 반복문이 끝나면 정상 처리된 정보와 함께 images 객체 배열을 반환해 주는 로직이에요.

 

 

 

    🔽 잘 만들었나? 🤔

        📦 Postman

Postman

위와 같이 GET 요청시 Query String으로 요청을 보내고, 파라미터 이름을 imagesId로 한 뒤
,(쉼표)를 기준으로 이미지 고유 번호를 값으로 넣어 요청을 보내면 정상 처리 되는 걸 확인할 수 있어요.

 

 

 

여기까지 NestJS의 Multer를 이용하여 이미지 처리 하는 방법에 대해 공부하고, 실습해 보았어요.
다음 글에선 본격적으로 게시판 형식의 기능 두 개를 만들고, JWT 인가를 이용해 권한을 확인하고,
글자와 이미지 등을 모두 처리할 수 있는 방법에 대해 구현하고, 실습해 보도록 할게요.

 

 

 

 

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

 

 

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

 

 

 

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