카테고리 없음

image 관리 (React.js + node.js)

곽빵 2021. 12. 25. 15:24

개요

 image 관리 풀스택 강의를 들으면서 기록하고 싶은 자잘한 내용들(큼직만한 애들은 따로 기술)

 

1. 이미지 이름 관리

해당 코드는 multer, uuid, mime이라는 모듈을 이용해 이미지를 고유의 이름으로 저장하는 코드인데

굳이 mime을 쓰지 않아도 이미지의 originalname에 이미지의 이름이 들어있는데 왜 mime을 쓰냐고 하면 mimetype에 

적혀있는게 '이미지의 mimetype으로써 '더 정확'하기 때문이다. 

const multer = require('multer')
const { v4: uuid } = require('uuid')
const mime = require("mime-types")

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, "./uploads"), // 파일에 따라 저장되는 폴더를 다르게 할 수 있다.
  filename: (req, file, cb) => 
    cb(null, `${uuid()}.${mime.extension(file.mimetype)}`) // 파일에 따라 저장되는 파일이름을 다르게 할 수 있다.
})

 

2. 이미지 업로드의 타이밍

  1. image들과 title, description, caption을 유저가 submit을 하는 순간 한꺼번에 보낸다
  2. 유저가 image를 화면에 업로드 하는 순간 서버로 바로 이미지를 보내고 나머지는 submit을 하는 순간 보낸다

무엇을 개발하느냐에 따라 다릅니다.

페이스북, 트위터, 블로그, 이커머스 등을 개발하게 되면 후자의 방법이 적합합니다. 많은 사람들에게 많은 이미지들이 노출되니 리사이징은 당연히 필요하겠죠. 2번째 방법으로 하면 submit 버튼을 누를 시점에 이미 리사이징이 완료 됬을 가능성이 높아요. 근데 이미지 리사이징이야 어짜피 거의 바로 처리가 되고요. 제일 큰 장점은 업로드 하는 사람 입장에서 2번째의 방법이 업로드가 훨씬 빠르다는거죠. 페이스북, 트위터 같이 게시글을 자주 올리는 서비스인데 업로드가 느리면 UX가 안좋을 수 있겠죠. 다만 이 경우 이미지를 올렸는데 게시글을 작성 도중 취소하면 S3에서 해당 이미지를 삭제해주는 기능 추가가 필요하다는게 번거러운점이 있어요. 그 외 다른 변수들이 있을 수도 있어요. 예를 들어 게시글 작성 취소가 아니라 그냥 브라우저를 종료할 수도 있어요. 물론 이런 상황이 크진 않고 S3에 일부 누락된 이미지가 존재한다고 해도 사실 큰 문제는 아닙니다. 근데 만약 서비스 특성상 이런 누락이 엄청 많아질 수 있을 것으로 추정된다? 그러면 또 조치가 필요하겠죠.

 

submit 버튼 누를 때 이미지 업로드를 하는 경우는 대용량 업로드일 때 많이 하는거 같아요. 드랍박스 같은걸 개발한다던지. 혹은 용량이 큰 영상 업로드를 한다던지요.

 

저희는 이미지 파일만 다루었는데 만약 유투브처럼 고해상도 영상 업로드를 받는다면 단 한개의 영상 파일이더라도 상당히 부담이 크겠죠? 그리고 영상은 제가 다루어보진 않았지만 화질에 따른 영상 "리사이징"과 같은 가공이분명 있을거에요. 이건 이미지 리사이징보다 비용이 훨씬 클거고요. 그래서 유투브는 페이스북처럼 컨텐츠를 올리는 sns지만 파일 용량이 크기 때문에 업로드 유저가 조금 불편하더라도 1번째 방법을 하고 있을것 같아요.

참고로 인프런 같은 경우에도 1번째 방법으로 강의를 업로드 해요. 그리고 업로드 하고 바로 해당 강의를 보려고 하면 아예 재생이 안되고 한 1~2분 동안 가공중이라고 떴었어요.

 

3. 이미지를 삭제하지 않고 나중을 위해 남겨놓고 싶어서 isAcitivited 플래그를 이용해서 비활성 시키는 방법은 어떤가요?

 

사진을 계속 저장하면 문제가 될 것 같은 경우들을 먼저 몇가지 알려드릴게요. 약정상 선택지 없이 무조건 삭제해야할 수도 있어요. 그리고 아무리 S3버킷 같은 파일저장소가 저렴하다고 하더라도 파일을 저장해두면 조금이라도 비용이 발생하겠죠. 서비스 특성상 S3비용이 부담스러울 정도로 정말 많은 사진(파일)들이 업로드된다면 삭제를 하는것도 고려해볼 수 있을 것 같아요.

반대로 rrallvv .J님 생각처럼 이미지 또한 좋은 데이터가 될 수 있어요. 좋은 데이터란 딥러닝 학습을 위한 재료로 생각이 되는데요. 모든 데이터가 딥러닝(머신러닝)을 위한 좋은 자료가 되지는 않아요.  딥러닝의 학습은 사람이 학습하는 원리와 매우 비슷해요. "이런 환경"(Input)일 때 "이런 결과"(Output)를 내더라! 이렇게 패턴을 찾아내는거에요. Input, Output양쪽의 데이터가 다 있어야 학습이 가능해져요. 근데 아쉽게도 Input 혹은 Output 한쪽에서 데이터가 누락되어서 사용할 수 없는 경우가 많아요. Input은 변수가 정말 다양한데 핵심 변수 기록을 놓쳤을 수도 있고요. 여기서 만약 사진 데이터를 삭제한다면 사진을 활용한 딥러닝을 구현한다고 했을 때 치명적인 데이터 손실이 생길 수 있어요. 데이터베이스에 있는 데이터들도 마찬가지로(훨씬 더) 취약합니다. 데이터베이스의 데이터는 mutable하니깐요. 최종 결과값도 중요하지만 삭제되기 전, 업데이트 되기 전 어떤 값들이 어떻게 변화되어 왔는지 히스토리를 아는게 정말 중요한데 Update, Delete과정에서 히스토리 데이터가 모두 누락되죠. 이러한 데이터의 경우 Apache Kafka 같은 도구를 이용한 Event Driven Architecture(EDA)를 구축하게 되면 문제를 해결할 수 있어요. EDA는 여러 장점이 있는데요. 보통 MSA를 하기 위해 도입되는 핵심 아키텍처에요. 같이 딸려 오는 장점 중 하나가 모든 행동(C,R,U,D,...)들을 각각 event로 immutable하게 저장해줍니다. 오래 된 이벤트들은 S3에 저렴하게 저장해도 되고요. 이건 저장해도 용량이 파일보다 훨씬 적고 값어치는 훨씬 높을 수 있어서 비용 걱정은 안해도 된다고 봐요.

보관 비용이 얼마나 들 것인가? 나중에 활용 가치가 있을 가능성이 얼마나 되는가? 법적 문제는 없는가?

잘 고민해보시고 진행하시면 될 듯합니다! 아 그리고 참고로 딥러닝(머신러닝) 분야를 추상적인 개념정도만 알아도 중요한 데이터인지 아닌지 판단이 가능하실거에요. 데이터만 잘 축적해두시면 나중에 필요하실 때 딥러닝 공부해서 적용해보시면 되고요!

 

도구(stack)보다는 Event Driven Architecture를 공부해보세요. Kafka는 EDA를 구현하는데 사용하는 대표적인 도구일뿐이에요. Kafka를 대체할 수 있는 도구들은 많아요. Redis Stream, NATS Streaming 등등

전 원래 NATS Streaming을 사용했었는데요. Kubernetes에 마이크로 서비스들과 NATS Streaming을 배포해서 사용했었어요.

저 같은 경우 최근에 Kafka에 관심을 갖게된 이유는 아무래도 많이 사용되고 있고 무엇보다 Confluent라는 클라우드사 때문입니다. Atlas 덕분에 인프라 걱정없이 몽고디비를 편하게 사용하고 있는데요. Kafka도 Confluent가 그런 역할을 해주는 것 같더라고요. Confluent에도 좋은 자료들을 많이 공유하는 것 같은데 보시면 좋을것 같아요.

참고로 MSA는 백엔드 서비스를 여러개로 나눠서 배포하는걸 말하는데요. 근데 정작 중요한건 그러면 백엔드 로직과 데이터를 어떻게 나눌거냐에요. 마이크로 서비스들끼리 서로 API호출을 하게 할까? 호출하려고 하는 서비스에 장애가 발생해서 응답을 안하면? 디비를 공유? 근데 그러면 디비부하가 병목이 되서 서비스를 나누는게 의미가 없지 않을까? 그러면 디비를 나눌까? 나눈다면 populate/조인이 안되는데 이걸 어떻게 해야할까? 이런식으로 고려해야할 문제들이 엄청 많아져요. 그래서 이런 사항들이 충분히 고려되지 않은 상황에서 요즘 트렌드에 따라 MSA를 적용하면 실패하는 경우가 많습니다. 근데 지금 보여드린 질문들을 보면 MSA가 아닌 Monolith에서도 가능해요. 중요한건 비즈니스 로직을 어떻게 모듈화해서 관리하느냐에요. 여기서 중요한 역할을 하는게 Event Driven Architecture에요. 일단 도구보다는 EDA를 이해하시고 EDA를 하기 위해 필요한 요소들이 무엇인지 파악해보세요. 그 다음에 관련 도구들을 나열해보시고 요구사항을 충족하는 도구들을 추려내면 됩니다 :)

아래는 eventstore라는 도구를 제공하는 기업인데요. 해당 도구를 사용해보진 않았지만 좋은 블로그들이 많았어요

 

출처: inflearn 이미지 관리 풀스택 강의