5주차 회의록

11월 22일 (월)

이번주 개발 계획

Folder를 명시한 스키마 구조
- 각각의 폴더도 DB의 도큐먼트로 관리해야 한다.
중요 문서함
- star 필드 하나 추가
중복된 파일/폴더 업로드 방지
1. 파일/ 폴더명을 임의로 변경
  - 저장할때부터 파일의 이름을 변경해서 저장 ~~2. 파일/ 폴더명 업로드 차단~~
mongo DB indexing

(6주차)

UX/UI 디테일
- 버튼들 커서 변경
- 로그인시, 비밀번호에서 엔터 누르면 post 요청
- Select and Drag하면서 스크롤 내리면 드래그박스가 따라오지 않는 문제
- 아주 조금만 드래그돼도, 드래그로 판단되는 부분
클라이언트 파일 생성/수정 시간 버그 수정 - 해결

MongoDB 도큐먼트 예시

기본적인 파일의 도큐먼트 구조

/test1/file.txt

{
    _id: "6193bb2896a9733ec7929210",
    osLink: "https://oslink~~",
    directory: "/test1",
    name: "file.txt",
    size: 2048,
    ownerId: "ownerLoginId",
    contentType: "text/plain",
    isDeleted: false,
    isStar: false,
    createdAt: "2021-11-16T14:07:36.957+00:00",
    updatedAt: "2021-11-18T15:02:54.451+00:00"
}

기본적인 폴더의 도큐먼트 구조

/test1/test2

// directories: [ "/test1/test2" ]

폴더를 들고와야 됨
1. directory 필드의 /test1, name 필드의 test2랑 정확히 일치하는 것
  - 인풋값 파싱이 필요함.
폴더가 포함하고있는 하위 파일/폴더를 들고와야 됨 3. directory 필드의 ^/test1/test2.* 를 regex 들고와야 됨

{
    _id: "6193bb2896a9733ec7929210",
    osLink: "",
    directory: "/test1",
    name: "test2",
    size: 0,
    ownerId: "ownerLoginId",
    contentType: "folder",
    isDeleted: false,
    isStar: false,
    createdAt: "2021-11-16T14:07:36.957+00:00",
    updatedAt: "2021-11-18T15:02:54.451+00:00"
}

휴지통에 있는 파일의 도큐먼트 구조

/test1/file.txt

{
    _id: "6193bb2896a9733ec7929210",
    osLink: "https://oslink~~",
    directory: "/test1",
    name: "file.txt",
    size: 2048,
    ownerId: "ownerLoginId",
    contentType: "text/plain",
    isDeleted: true,
    isStar: false,
    createdAt: "2021-11-16T14:07:36.957+00:00",
    updatedAt: "2021-11-18T15:02:54.451+00:00",
    deletedAt: "2021-11-18T15:02:54.451+00:00"
}

중요문서로 등록된 파일의 도큐먼트 구조

/test1/file.txt

{
    _id: "6193bb2896a9733ec7929210",
    osLink: "https://oslink~~",
    directory: "/test1",
    name: "file.txt",
    size: 2048,
    ownerId: "ownerLoginId",
    contentType: "text/plain",
    isDeleted: false,
    isStar: true,
    createdAt: "2021-11-16T14:07:36.957+00:00",
    updatedAt: "2021-11-18T15:02:54.451+00:00"
}

짜잘한거/공통된거 빼고 중요한 부분만

/folder1/file.txt 파일인 경우

{
    osLink: "https://oslink~~",
    directory: "/folder1",
    name: "file.txt",
    size: 2048,
    contentType: "text/plain"
}

/folder1/folder2 폴더인 경우

{
    osLink: "",
    directory: "/folder1",
    name: "folder2",
    size: 0,
    contentType: "folder"
}

변경될 함수들

router 계층
- POST cloud/upload (동환)
  - 바꿀게 없내..?
  - 빈폴더 기능이랑 별개로 비동기 처리를 변경할 필요가 있음
    - for await이라 DB에 파일 넣는 과정들이 동시에 이루어지지 않음
    - Promise.all 패턴으로 바꾸자...
- PUT cloud/files (동환)
  - moveTrashFolders 부분을 수정해야할 것 같다.
  - 구현하면서 파악해보자
- DELETE cloud/files (동환)
  - removeFolders 부분을 수정해야할 것 같다.
  - 구현하면서 파악해보자
- GET cloud/download (영화)
  - Folder 여부 확인 후 Folder는 따로 mkdir 하기
- GET user/files (영화) url 변경하기(GET cloud/files)
  - 현재 디렉토리에 있는 파일은 그대로
  - 현재 디렉토리에 있는 폴더는 Folder여부 확인 후 따로 파싱하기
- GET user/directory
service 계층
- /cloud/download/getDownloadListMetadata (영화)
  - 빈 폴더 생성 후 다운로드
- /cloud/directory/getFilteredFiles, getFiles (영화)
  - 폴더만 따로 파싱하기
- /cloud/file/uploadFile (동환)
  - 파일을 업로드하는 과정에서 해당 파일이 해당되는 디렉토리들을 만들어줘야 한다.
  - ex) /folder1/folder2/test.txt
    - /folder1, /folder1/folder2 디렉토리 도큐먼트가 없다면 만들어야 한다.
- /cloud/file/(moveTrashFolders, restoreTrashFolders, removeTrashFolders) (동환)
  - 기존 방식을 유지하는 방향으로 진행
  1. 폴더를 들고와야 됨
    - directory 필드의 /test1, name 필드의 test2랑 정확히 일치하는 것
      - 인풋값 파싱이 필요함.
  2. 폴더가 포함하고있는 하위 파일/폴더를 들고와야 됨
    - directory 필드의 ^/test1/test2.* 를 regex 들고와야 됨
- makeTree

새로 만들 함수

router 계층
- 빈 폴더 만들기 요청을 받을 라우터 추가
service 계층
- 빈 폴더를 mongoDB 도큐먼트로 추가해줄 함수 추가?

11월 25일 (목)

오늘의 할 일

폴더 이동 구현 완료
새 폴더 이름 중복 방지 적용
자잘한 UX 처리
- 버튼 커서 처리
- 로그인, 회원 가입 폼 상단으로 이동
- 로그인 화면에서 비밀번호까지 입력하고 엔터누르면 폼 전송
- contextmenu UI 수정
- 로그아웃 UI 위치 수정
- 화면이 작아질 때, 레이아웃이 깨지는 것
  - min-width를 걸어주면 될 것 같다.
(FE) 매직넘버? 빼기
API 문서 추가
Demo 영상 제작
Gather town 꾸미기 (logo, 소개 등)

다음 주 할 일

스트레스 테스트
파일 구조 리팩토링
- 적절하지 않은 폴더에 있는 파일들 정리
잡다한 리팩토링
- 디렉토리 트리 계속 백엔드에서 안가져오게 코드 개선
- (FE) api들 api 폴더로 이동
- 안쓰는 함수 매개변수 or 변수 등등 정리
- 적절하지 않은 변수명 or 함수명 변경?
- (FE) 사이드바를 포함하지 않고 라우팅
  - 메인페이지 <-> 휴지통 <-> 중요문서함들의 사이드바는 모두 같은 사이드바를 사용해도 됨
UX
- 드래그가 아주 조금만 돼도, 드래그로 판단하는 것? (이건 기능 구현인데?)
- 새 폴더 추가할때 엔터쳐도 추가되도록
버그 수정
에러 핸들링
Docs 정리
PPT 제작
데모 영상 제작
- Short version, Full version
- 무중단 배포 container 바뀌는것 (동영상으로..?)
예상 질문 뽑아서 정리

다음주 얘기 해볼거

NewFolderModal.tsx의 41번째 줄 getNotOverlappedName 함수를 프론트에서 해야하나?

다음주 할 이야기를 위해서 다음주에 해결

선택된 파일들이 모두 중요문서이면, 중요문서함 추가 버튼을 disabled
getNotOverlappedName 함수를 재귀적으로 DB에 접근하는 게 아니라 정규식을 써서 한번에 다 들고 온 후 비교?
- 현재는 file(1).txt가 있으면, file(2).txt를 DB에 접근해서 찾아보는 식의 순차적 접근이다.
- 이를 파일명(number).확장자와 같은 형식을 가지는 파일들을 한번에 가져온 후, 넘버링을 한다.

이번주 프로젝트 회고

기능
- 메타 데이터 저장 구조 변경에 대한 설명
- 우클릭 시 contextmenu를 선택할 수 있음
- 새 폴더 추가 기능
- 파일 및 폴더 경로 이동
- 중요 문서함
- 중복된 이름을 가진 파일 및 폴더를 처리
  - 파일명 뒤에 정해진 형태로 넘버링을 했다?
리팩토링
- 비동기 로직 처리: For of로 처리되던 것을 Promise.all로 처리하여 성능 개선
- 드래그 박스를 그려주는 작업을 스로틀을 적용하여 이벤트 실행 간격을 조절함으로써 성능 개선
- 선택된 파일을 저장하는 자료구조를 Array에서 Map으로 변경함으로써 성능 개선
  - 삽입 및 삭제의 비용을 줄였다.
UX 개선
- 상호작용 가능한 버튼 혹은 Anchor 등에 커서 효과를 달아줌
- 파일 리스트에서 드래그를 하면서 스크롤을 이동할 시, 드래그 박스가 따라오도록 구현함
- 로그인 및 회원가입, 새 폴더 만들기(입력) 모달 등에서 Input을 입력한 후 엔터를 누르면 Form을 전송하도록 구현함

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

5주차 회의록

11월 22일 (월)

이번주 개발 계획

MongoDB 도큐먼트 예시

변경될 함수들

새로 만들 함수

11월 25일 (목)

오늘의 할 일

다음 주 할 일

다음주 얘기 해볼거

이번주 프로젝트 회고

Clone this wiki locally