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

안녕하세요 강사님.

강사님 강의를 토대로 학습하며 개인적으로 진행하고있던 프로젝트에서 문제점이 발생하여 이렇게 질문드립니다.

현재 상황은 다음과 같은 모델이 존재하고, 리액트에서 formdata객체에 모든 데이터를 append해서 post요청을 통해

중첩된 시리얼라이저를 활용한 modelviewset에 create함수를 호출하는 형태로 코드를 작성했습니다.

1)최초에 portfolio 모델을 구성하고 관계를 설정할때, portfolioupload 모델은 유저가 동적으로 필드를 채워나가기 때문에 하나의 컬럼에 총 5가지 필드가 만들어지게 제작하게 되었습니다.(이미지, 텍스트, 비디오, 임베드, 그리드 등의 5가지 선택지가 있고 유저는 그중 한가지를 초이스 하여 필드를 채워나가는 형식/behance의 포트폴리오 업로드 형식을 벤치마킹하려고 노력했습니다) 그렇기 때문에 현재와 같은 portfolio 모델을 구성하게 되었는데, 보다 더 나은 방법이 있었을지 궁금합니다.

2)portfolio 모델과 같이 여러 가지 관계를 형성하고 있는 데이터를 불러와서 리액트에서 사용하려다 보니, 중첩된 시리얼라이저가 필수인것 같아 다음과 같은 시리얼라이저를 작성했습니다. 그러다 보니 query 수가 많아져서 요청이 길어지는 성능 이슈가 발생했습니다. 현재는 django auto prefetch라는 라이브러리를 통해 개선했지만, 저런 데이터구조를 불러올 때 더 좋은 방법이 있을지 궁금합니다.

3)create 함수를 구현할 때 중첩된 객체를 받아서 현재의 코드보다 조금 더 간결하게 구현해 보려고 했었습니다. 따라서 리액트에서 아래와 같은 함수를 통해 중첩된 object를 보내봤지만 drf에서 멀티미디어 콘텐츠를 읽어내지 못했습니다. 아마도 콘텐츠 타입이 aplication/json 때문일 거라 생각했기 때문에 parser를 바꿔보는 등 여러 가지 방법을 시도했고, 모든 게 다 실패해서 현재와 같이 formdata 객체에 모든 데이터를 append 해서 보내는 형태가 되었습니다. 이 과정에서 portfolio 모델에 post 요청을 보내는 데이터의 구조와 drf에서의 데이터 처리가 어떤 방향으로 가는 게 지금보다 더 좋은 생각이었는지, 혹은 중첩된 object를 drf에서 받아서 처리할 방법이 있는지 궁금합니다. 

function formData(formData, filesIgnore = []) {
  let data = new FormData();

  let files = filesIgnore;

  Object.entries(formData).forEach(([key, value]) => {
    if (typeof value === 'object' && !files.includes(key)) {
      data.append(key, JSON.stringify(value) || null);
    } else if (files.includes(key)) {
      data.append(key, value[0] || null);
    } else {
      data.append(key, value || null);
    }
  })
  return data;

}

4) portfolio 모델에서의 update를 구현하려고 보니, react에서 기존 데이터를 보여주기 위해 portfolioserializer를 통해 데이터를 불러오고 유저가 진입한 upload url에 pk가 포함되었는지를 검사해서 미리 input 필드에 데이터를 채워주는 형태의 방법을 사용했습니다. 이런 상황에서 불려와진 image는 storage의 url 형태였고, 유저가 이미지의 순서 변경이나 삭제를 할 경우 추적할 방법이 없어서 데이터의 변경이 안되는 이슈가 발생했습니다. 위 상황에서 저는 get 요청을 할 때 멀티미디어 콘텐츠가 불려와져야 할까? / put 요청으로 보내는 serializer에 해당 정보가 담겨있어야 할까? 라는 고민을 했고 첫 번째 방법은 방법 자체를 찾을 수 없었고, 두번 째 경우는 해당 정보를 어떻게 담아서 어떻게 처리할지 감이 잡히질 않아서 질문을 드리게 되었습니다. 사실 접근 방법이 이게 맞는지조차 의문이 들기에 보통 이런 혼합 데이터의 게시물 수정을 어떻게 구현하시는지 궁금합니다.

5) 업로드 시에 가로 1920px 이상의 이미지들의 resize가 필요해서 찾아보니 백엔드에서 업로드 시에 실행하는 게 보편적이라는 답변을 받았는데, 업로드의 속도를 줄이려면 업로드할 이미지들의 미리 보기 기능에 사용된 image onload 함수에 포함하는 게 더 좋은 방법이 아닌가에대해 고민하게 되었습니다. 어떤 접근 방법이 더 나은 방향인지 궁금합니다.

6)해당 프로젝트는 강의에서 설명 해주신 azure를 통해 배포 / 테스트 중입니다. 포트폴리오 같은 데이터를 업로드할 때 아무래도 이미지, 비디오 등의 데이터량이 많기 때문에 간혹 업로드 용량이 상당해지는 경우가 생기게 되었습니다. 이와 같은 경우에 용량의 총합이 100mb가 넘어가게 되면 데이터 업로드가 안되는 현상이 발생했고, 로컬에서는 정상작동하기에 아마도 서버의 문제일 것 이라고 예상하게 되었는데, 서버가 작아서 발생하는 문제인 건지 아니면 어떤 다른 문제점 혹은 제한을 풀 수 있는 명령어가 존재하는지 궁금합니다.

강사님 강의를 토대로 약 9개월 정도 혼자서 진행한 프로젝트입니다. 상당히 많은 시행착오가 있었고 그때마다 구글링과 강의 다시 보기를 통해 해결해왔었는데, 혼자서 적지 않은 기간을 하다 보니 어떠한 코드 작성에 있어서 구현이 되고안되고 보다는 접근 방법이나 이게 정말 맞는지? 라는 문제가 여러가지 발생했습니다. 그런 부분들이 혼자서는 해결되지 않아 이렇게 질문드립니다. 만약 설명이 부족하거나 질문들에 이해가 안 되시는 점 있으시면 바로바로 추가하겠습니다.