fileList State는 기존에 localStorage에 fileList 키값으로 저장되어있는 값들을 불러옵니다. 파일이 없는경우, 빈 배열로 시작하게 됩니다.
이 컴포넌트에선 크게 3가지 로직으로 구성되어 진행됩니다.
먼저 첫번째, selectFiles는 유저가 직접 파일 선택창에서 파일을 선택하고 '확인' 버튼을 눌렀을 때 실행되는 로직입니다. selectFiles는 선택된 파일들을 기존에 filesList의 정보에 이어붙이게 만들었습니다. 그리고 newFileList라는 배열에 선택된 파일들을 담습니다.
두번째로, DragDrop 로직입니다. 유저가 파일선택창에서 input범위에 파일을 끌어다 놓았을 때, 파일을 추가하는 함수로 만들어져있습니다. 이 함수도 마찬가지로 선택되어 끌어다진 파일들을 fileList에 추가하고, newFileList 배열에도 추가합니다.
파일이 선택, 끌어다지면 fileList가 map을 통해
현재 두 로직에 쓰인 파일들을 로컬스토리지에 저장하려는 로직이 미완성 상태입니다.
마지막으로 ProgressBar입니다. 현재 업로드의 진행상태를 알 수 있도록 만들어진 ProgressBar는 axios의 명령어인 'onUploadProgress'를 사용하였습니다. 추가된 파일은 154번째 줄, onChange함수의 e 로 인식되어 onUploadProgress의 파라미터로 사용됩니다. 이벤트로 들어온 파일들은 데이터 총량(e.total), 전송된 데이터량(e.loaded)로 수치화할 수 있고, 이후 innerHTML로 동적인 변수로 활용할 수 있습니다. 얼마나 진행되었는지, 업로드 진행현황을 유저가 한눈에 알아볼 수 있게 된 것입니다. 이후 통신에 성공하면 response로 들어오는 메세지를 alert으로 '몇개의 파일을 업로드하였습니다.' 라는 알림을 띄울 수 있습니다. progressBar의 진행을 나타내는 progressBar width 값도, ProgressPercent State로 수치화하여 동적으로 관리하고 있습니다.
DB에 같은 이름의 파일이 존재하는지 확인가능합니다. 이 기능은 위에서 이야기했던 selectFiles와 DragDrop 두 함수에 모두 넣었습니다. 파일을 '선택'해도, '드래그앤드랍'으로 파일을 추가해도 모두 중복체크가 가능해야하기 때문입니다. selectFiles와 DragDrop 함수 안에 axios.get 함수가 있습니다. 이 통신은 선택된 파일들이 DB에 있는지 체크하는 엔드포인트로 이어지게됩니다. 이 통신으로 file.name이 DB에 존재한다면 setIsSameFile를 통해 isSameFile State에 저장되게 됩니다. 이후 279번째 줄에 있는 isSameFile.includes('${item.name}`) ? (삼항) : (연산자) 를 통해 "저장되어있는 파일 이름입니다." 텍스트를 띄우게 됩니다.
getByteSize 함수를 이용하여 파일의 용량에 따라 가독성이 있는 용량단위로 자동 변환되도록 구현하였습니다.
처음 progressBar는 전체 파일을 하나로 묶어 전체진행률을 퍼센트로 나타내고 있었습니다. 때문에 개별 파일의 진행률은 파악할 수 없었고, 전체 데이터의 송신을 기점으로 response를 한개만 받고 있었습니다. 두번째 수정 progress에서는 모든 파일을 하나씩 formData로 묶어서 한 파일씩 전송하게 만들었습니다. 그 이유는 각 파일들의 진행률을 나타내는 것이 사용자 경험 측면에선 훨씬 알아보기 쉽다고 생각했기 때문입니다. 하지만 초기 progressBar형식에 비해 업로드 속도가 5배정도 떨어졌었는데, 그 이유는 업로드할 파일들을 하나씩 formData로 압축해서 서버에 업로드하는 행동을 반복했기 때문이였습니다. 그래서 다시한번 바꾼 코드에서는 '전송 버튼을 누르면 모든 파일이 한번에 업로드가 시작된다.', '업로드 중인 모든 파일의 진행률을 따로따로 관리하여 각 파일의 progressBar에 출력한다.' 이렇게 두가지 전제조건을 두고 코드를 만들었습니다.
'전송 버튼을 누르면 모든 파일이 한번에 업로드가 시작된다.' '업로드 중인 모든 파일의 진행률을 따로따로 관리하여 각 파일의 progressBar에 출력한다.'
현재 코드에서 주목할 점은 sendFormData함수의 axios onUploadProgress 입니다. progressEvent가 발생하면(업로드가 시작되면), setProgressList 함수를 통해 각 파일의 업로드를 추적, 표기할 수 있습니다. sendFormData가 실행되면 formData.append를 통해 file과 index가 함께 formData에 들어가게 됩니다. 이후 onUploadProgress에서 index라는 string을 각 배열을 순회하며 찾게되고, 이후 updatedProgressList가 각 파일의 업로드를 관찰하게 됩니다. updatedProgressList는 다시 setProgressList를 통해 ProgressList State를 재설정하게 됩니다. 이후 map함수 안에 있는 314줄에 ProgressBar의 width 값을 progress[i]로 부여하면 각 파일의 업로드를 추적할 수 있는 것입니다.
- 전송 중단기능
- 로그인, 회원가입을 통한 토큰을 이용한 유저조회 (현재는 토큰을 직접 넣어둠)