[javascript] Parcel에서 드래그 앤 드롭을 구현하는 방법은?

22 Nov 2023

javascript

Parcel 초기화 먼저, Parcel 프로젝트를 초기화합니다. 프로젝트 디렉토리에서 터미널을 열고 다음 명령어를 실행합니다:
```
npm init -y
```
필요한 패키지 설치 드래그 앤 드롭 기능을 구현하기 위해 Parcel에서 제공하는 @parcel/transformer-raw 패키지를 설치해야 합니다. 다음 명령어를 사용해 패키지를 설치합니다:
```
npm install --save-dev @parcel/transformer-raw
```
HTML 파일 작성 HTML 파일에 드롭 영역을 만들어야 합니다. 다음과 같은 예시 코드를 사용하여 드롭 영역을 생성합니다: ```html <!DOCTYPE html>

Parcel Drag and Drop

파일을 드래그하여 여기에 놓으세요.

4. JavaScript 파일 작성
`main.js` 파일을 생성하여 드래그 앤 드롭 동작을 구현합니다:
```javascript
// 드롭 영역의 DOM 요소를 선택합니다.
const dropArea = document.querySelector(".drop-area");

// 드래그 앤 드롭 이벤트 핸들러를 설정합니다.
dropArea.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropArea.addEventListener("drop", (event) => {
  event.preventDefault();

  // 드롭된 파일의 정보를 가져옵니다.
  const file = event.dataTransfer.files[0];

  // 파일 이름을 출력합니다.
  console.log("Dropped file:", file.name);
});

Parcel 빌드 프로젝트를 빌드하여 Parcel로 번들링합니다. 다음 명령어를 실행합니다:
```
npx parcel build index.html --no-source-maps
```
결과 확인 빌드가 완료되면 dist 폴더에 번들링된 파일이 생성됩니다. 웹 브라우저에서 index.html 파일을 열고, 파일을 드래그하여 드롭 영역에 놓으면 콘솔에 파일 이름이 출력되는 것을 확인할 수 있습니다.

이제 Parcel을 사용하여 드래그 앤 드롭 기능을 구현하는 방법을 알게 되었습니다. 자세한 내용은 Parcel 문서를 참조하시기 바랍니다.