인프런 커뮤니티 질문&답변

반가우면반갑다고해님의 프로필 이미지

작성한 질문수

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Frontend 업로드 구현

Upload, 파일사이즈 코드 질문있습니다.

해결된 질문

작성

·

77

0

안녕하세요

import GraphQLUpload from 'graphql-upload'
import mutations from './mutations'
import queries from './queries'

const resolvers = {
  Upload: GraphQLUpload,
  Mutation: mutations,
  Query: queries,
}

export default resolvers
  1. 위에서 Upload: GraphQLUpload, 이 코드가 어디서 쓰이는지 궁금합니다.

    혹시 뮤테이션문에서 Upload 타입으로 쓰일까요?


    아래의 Upload 가 위의 코드의 Upload일까요ㅠㅠ

const UPLOAD_FILE = gql`
  mutation ($file: Upload) {
    uploadFile(file: $file) {
      fileName
      fileType
      filePath
    }
  }
`

  1. 스트림으로 파일을 처리하는 방식과 browser-image-compression 라이브러리로 이미지를 압축해서 서버에올리는것과 어떤 차이가 있는지 궁금합니다.

    스트림으로 파이프 연결해서 하는방식은 처음 써봐서 생소해서그런지 좀 헤매고있습니다 ㅠㅠ..



    보통 프론트쪽에서 browser-image-compression 라이브러리를 사용해서 이미지를 압축하고 서버에 전송하여 서버에서는 s3에 올리는식으로했었거든요..

    강사님이 스트림 사용하신이유는 파일전송은 용량이크기때문에 일정크기로 작게나누어 서버로 전송하여 메모리효율성과 성능을 향상시키기위해서 하신걸로 알고있는데요, 그러면
    스트림 + browser-image-compression 라이브러리를 같이사용해서 서버에 전송후 s3로 업로드하면 금상첨화일까요?

    어떻게하는게 좋을까요?..

    최대한 질문을 간소하게하려고했는데 죄송합니다..

답변 1

1

Indie Coder님의 프로필 이미지
Indie Coder
지식공유자

2024. 08. 01. 15:50

  1. mutation schema를 보면 file의 타입이 sclar로 정의된 Upload로 만든 것을 볼 수 있습니다.

여기서 이 Upload를 graphql-upload의 GraphQLUpload로 맵핑 시켜주어야 하는데

이를 위해 필요한 코드가 바로 Upload: GraphQLUpload, 이부분입니다.

  scalar Upload 

  type File {
    fileName: String
    fileType: String
    filePath: String
  }

  type Mutation {
    addCategory(categoryName: String): ID
    updateCategory(_id: ID, categoryName: String): ID
    deleteCategory(_id: ID): ID
    addItem(itemName: String, itemPrice: Int, itemImage: String, itemCategoryId: ID):  Item
    updateItem(_id: ID, itemName: String, itemPrice: Int, itemImage: String, itemCategoryId: ID): Item
    deleteItem(_id: ID): ID
    uploadFile(file: Upload): File
  }

 

  1. 스트림

스트림의 경우 메모리 효율성 보다는 nodejs의 스레드의 한계 때문에 사용하는 개념입니다.

node는 기본적으로 멀티스레드가 아닌 단일 스레드이기 때문에 파일 처리와 같이 많은 시간이 걸리는 작업을 할 경우 작업을 하는 일꾼인 스레드가 이를 계속 잡고 있으면 모든 기능이 정지해 버리는 상태가 될 수 있습니다.

그래서 파일 업로드와 같은 작업의 경우 한번에 모든 일처리를 끝내기 보다 작은 사이즈로 잘라서 조금씩 처리하는 것이 효율적이게 됩니다.

프론트엔드의 경우는 브라우저에서 작동하지만 업로드된 이미지 처리의 경우는 서버에서 작동하게 되는데 특정 작업으로 서버의 스레드가 멈추게 되면 서비스 전체가 멈추게 될 위험이 있기 때문에 스트림과 같은 기능이 필요한 것입니다.

또 압축의 경우 이와는 조금 다른 개념이기때문에 효율을 높이기 위해서라면 이둘을 같이 사용할 수 있다면 해보는 것도 좋을 것 같습니다.

반가우면반갑다고해님의 프로필 이미지

2024. 08. 01. 16:04

답변 감사합니다!