July 15, 2019 9:00 AM (GMT+9) → July 17, 2019 3:00 PM (GMT+9)
프로젝트에서 '현대적인' 파일 업로드 기능이 필요해서 이를 위한 모듈을 만들어 보았다. '현대적인' 파일 업로드 기능의 요구사항은 다음과 같다.
drag and drop(드래그 앤 드롭) 방식을 적용할 것
서버에 파일 전송 시, 사용자가 진행상황을 확인할 수 있을 것
ex. progress bar
프론트엔드 구현 시 라이브러리를 사용하지 말 것(즉, VanillaJS로 구현할 것)
단적으로 말해서, Google 드라이브처럼 작동하도록 만들면 된다. 이를 구현하기 위한 개발환경은 다음과 같이 구성했다.
모질라 공식 문서 사이트에서 드래그 앤 드롭을 찾아보니 별도의 API 문서화 되어있고, 감사하게 번역도 잘 되어있다. 문서를 읽어보면 브라우저 기본 스펙으로 드래그 앤 드롭 기능을 제공한다는 사실을 알 수 있다. 그리고 다음과 같이 드래그 앤 드롭 영역을 정의하는 예제 코드도 알려준다.