Skip to content

3주차 회의록

Jump to bottom
DongHwan Kim edited this page Nov 11, 2021 · 3 revisions

11월 8일 (3주차 계획)

  • 월: Object Storage 구축 및 연동, 로그인 버그 수정, 도메인
  • 화: [FE] 드롭다운 레이아웃, [FE/BE] 현재 사용량 및 최대 사용량 API 및 UI, [FE/BE] 유효성검사, [FE] multipart 전송, [BE] multer로 파일 받는 API
  • 수: 폴더 업로드, [FE] 디렉토리 구조 파싱, [BE] 단일 파일 Object Storage에 저장 API, [BE]폴더를 포함한 파일들(metadata) MongoDB 저장
    • 1순위: 파일 업로드(MongoDB + Object Storage) API 완성
    • 2순위: 폴더 업로드 끝내기?
  • 목:
    • download API
    • 파일 선택기능 구현
    • UI/UX 디테일 추가 (포인터 커서, Enter키로 로그인)
  • 금: 데모
  • 주말: CI/CD 공부 공유/ 다운로드 동시 구현

파일 저장 Flow

  1. 클라이언트에서 파일 저장 요청 (multipart/?)
  2. multer를 사용하여 backend server의 디스크에 파일 형태로 저장
    • 디스크에 저장되는 파일의 이름은 유니크한 해쉬값
  3. 오브젝트 스토리지에 실제 파일 저장
    • 오브젝트 스토리지에 저장되는 파일의 키값은 유니크한 해쉬값
  4. 저장된 링크를 몽고db 적당한 포맷으로 저장
  5. backend server의 디스크에 저장된 파일 삭제

Object Storage를 다루는 과정에서 발생한 버그

  1. BucketAlreadyExists: The requested bucket name is not available. The bucket namespace is shared by all users of the system. Please select a different name and try again.

버킷 네임이 중복되어 발생한 문제.
버킷 네임이 사용자에 종속된 것이 아닌 스토리지 전체에 종속된 것이다.

  1. CredentialsError: Missing credentials in config

dotenv의 config 실행 위치 문제였다.
환경변수를 사용하는 모듈의 로딩(import)이 config() 함수의 실행위치보다 앞에 있었다.
그래서 환경변수의 값이 undefined되어 발생한 문제이다.

  1. aws-sdk 버전 문제

typescript로 aws S3를 사용할 때, endpoint의 타입에 관련된 문제였다.
구버전에서는 S3의 endpoint 필드가 string타입으로 지정되어 있어, Endpoint 객체를 넣을 수 없었다.
단, 이 문제는 aws-sdk 버전이 업그레이드되면서 해결된 문제였었다.
aws-sdk 버전 2.348.0이 아닌 2.1023.0을 사용하면 별도의 추가 코드 없이 해결 가능하다.

11월 9일 (화)

초기 로그인 여부 확인을 어떻게?

라우터에서 동기적으로 동작

  • ex) 네이버 접속 시 빈화면 렌더 후 유저 정보 표시?

11월 10일 (수)

폴더를 보낼때 메타데이터 관리

mongodb에 저장되는 파일의 경로
/{rootDirectory}/{relativePath}

// Multer File 형식
 {
    fieldname: 'uploadFiles',
    originalname: 'test.txt',
    encoding: '7bit',
    mimetype: 'text/plain',
    destination: '/Users/kim-yeonghwa/Desktop/2021-BoostCamp-WebFullStack/Membership/web18-BooStore/backend/temp/',
    filename: '1636520581282test1234-test.txt',
    path: '/Users/kim-yeonghwa/Desktop/2021-BoostCamp-WebFullStack/Membership/web18-BooStore/backend/temp/1636520581282test1234-test.txt',
    size: 0
  }
]
// Req.body
[Object: null prototype] {
  relativePath: '{"test.txt":"","test1.txt":"","test2.txt":""}',
  rootDirectory: '/test/'
}
[
  {
    fieldname: 'uploadFiles',
    originalname: 'test1.txt',
    encoding: '7bit',
    mimetype: 'text/plain',
    destination: '/Users/kim-yeonghwa/Desktop/2021-BoostCamp-WebFullStack/Membership/web18-BooStore/backend/temp/',
    filename: '1636520762763test1234-test1.txt',
    path: '/Users/kim-yeonghwa/Desktop/2021-BoostCamp-WebFullStack/Membership/web18-BooStore/backend/temp/1636520762763test1234-test1.txt',
    size: 0
  }
]
[Object: null prototype] {
  relativePath: '{"test1.txt":"test/test1.txt","test2.txt":"test/test2.txt","test.txt":"test/test.txt"}',
  rootDirectory: '/'
}

[root/folder1/folder2]/test1.txt
[root/folder1/folder2]/test2.txt
[root/folder1]/test0.txt
{ name: test1.txt dir: root/folder1/folder2/ O(1)..... metadatas... }

dir == //^경로//

// folder1 // folder2 // folder2/folder11 // folder3/folder // 정규식 쓰면 가져올 수 있음 // ownerId, dir

// subdocument vs 별개의 document?

/folder1/

O(1) * 10.....

문제 : 큰 파일 혹은 많은 파일을 보낸경우

한번에 올릴 수 있는 파일 개수: 4000개
최대로 보낼 수 있는 파일 한개의 용량 : 일단 두지말자

큰 파일

  • 오래걸렸지만 일단 가진다.

  • 로딩이 되는걸 보여주고 싶다.

    1. 한번에 보낼 수 있는 용량을 좀 많이 제한(100MB)해서 로딩자체 시간을 줄인다.
    1. 보낼때, 작게 나누어 보낸다?

  • 보낼 때, 파일 개수가 많으면 여러번의 요청으로 나누어 보낸다.

    • 그리고 각각의 요청이 완료될때마다 로딩(프로그래스바)를 업데이트

  • 단일 파일의 용량은 줄인다?

  1. 메타데이터 받아오는데 걸리는 시간
  2. Multer가 디스크에 파일을 저장하는 시간
    • WEB을 통해 클라이언트로부터 서버까지 파일이 이동하는 시간
    • Multer가 디스크에 실제로 저장하는 시간
  3. 디스크에서 파일을 받아와 Object Storage & MongoDB에 저장하는 시간

실제 파일 이동하는게 부하가 좀 있다. 그럼 클라이언트에서 Object Storage로 바로 데이터를 보내는 건 어떤가?

파일 보내기 로딩창

파일 업로드 요청을 하나씩 보내어, 완료되면 프로그래스바 업데이트 전송 완료 퍼센트는 용량을 기준으로 결정한다.

11월 10일 할일

  • 상위 디렉토리 가는 버튼 및 이벤트 추가 ( 윤영 )
  • 파일 리스트 출력 ( 영화 )
    • 서버: 현재 디렉토리의 파일 및 폴더를 보내주는 API 제작
    • 클라이언트: 서버의 응답을 통해 렌더링
  • 대용량 보낼 때 로직......... ( 동환 ) flow image 만들기 (11/11)
    • 로딩바 모달 (위치는?)

발표 때 보여줄 것

  • 업로드 기능
    • 프론트 (메인 화면에 나타나는 것)
    • 서버로 보내서 mongodb와 object storage에 저장
  • 스트레스 테스트 과정?
    • 시나리오1. 총 100MB 가량의 7000개의 파일들을 보내보았음
    • 시나리오2. 단일 500MB 가량의 파일을 보내보았음
    • 시나리오3. 총 500MB 가량의 1000개의 이미지파일들을 보내보았음
  • Upload Flow Chart

까먹지 않으려고 적는것 - 서버 다시 켤 떄 로그아웃 되는 것 처리..

  • 세션 저장 위치를 메모리가 아닌 mongodb와 연동해야 함

리팩토링 관련

  • Container-Presenter Pattern
  • 안티패턴? 리뷰 부탁
  • 컴포넌트 분리할 수 있으면 분리

11월 11일 (목)

오늘 할거

  • 폴더 선택 시, 하위 디렉토리 이동 (윤영)
  • 파일 선택기능 구현 (동환)
  • 파일 올리기, 폴더 올리기 드롭다운 (동환)
  • 파일 리스트 API 수정 (영화)
  • 파일 리스트 레이아웃 수정 (영화)
  • API 위키 (다같이)
  • Upload Flow Image (다같이)
  • PR할 거리 작성
  • 디자인 조금만 수정
contentType: image/jpeg
contentType: folder

File.tsx에 컴포넌트 이름 FileList로 되있는거 수정하기 나중에 데모전에 기본 디렉토리 루트디렉토리로 변경

Clone this wiki locally