[javascript] Parcel에서 로딩 스피너를 추가하는 방법은?

22 Nov 2023

javascript

로딩 스피너를 추가하는 방법은 다음과 같습니다:

우선, 로딩 스피너를 표시할 HTML 파일을 엽니다.
<body> 태그 안에 로딩 스피너를 위한 요소를 추가합니다. 예를 들어, <div> 태그로 감싸진 스피너를 생성할 수 있습니다: ```html

3. CSS를 사용하여 로딩 스피너를 디자인합니다. 간단한 예시로, 다음과 같은 스타일을 추가해보겠습니다:
```css
#loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

자바스크립트를 사용하여 로딩 스피너를 제어하는 코드를 추가합니다. Parcel은 parcel-plugin-inject 플러그인을 사용하여 자바스크립트를 번들에 주입할 수 있습니다. 다음은 번들에 주입될 코드입니다:
```
document.addEventListener("DOMContentLoaded", function() {
  var loader = document.getElementById("loader");
  loader.style.display = "none";
});
```
이 코드는 페이지가 로드되면 loader 요소의 디스플레이 속성을 “none”으로 설정하여 로딩 스피너를 숨깁니다.
위의 코드를 parcel-plugin-inject 플러그인을 사용하여 Parcel에 주입합니다. package.json 파일을 수정하여 플러그인을 설치하고 설정할 수 있습니다. 다음은 package.json 파일의 예시입니다:
```
{
  "name": "my-parcel-app",
  "version": "1.0.0",
  "scripts": {
 "start": "parcel index.html"
  },
  "devDependencies": {
 "parcel-plugin-inject": "^2.0.0"
  },
  "parcel-plugin-inject": {
 "injector": "./injector.js"
  }
}
```
위의 예시에서 "injector" 키의 값을 "./injector.js"로 설정하여 injector.js 파일에 위의 자바스크립트 코드를 작성해야 한다는 것을 나타냅니다.
프로젝트의 루트 디렉토리에 injector.js 파일을 생성하고, 다음과 같은 내용을 추가합니다:
```
module.exports = function() {
  return {
 appTransform: {
   "index.html": {
     match: "</body>",
     prepend:
       '<script src="./loader.js"></script><script src="./inject.js"></script>',
   },
 },
  };
};
```
위의 코드는 loader.js 및 inject.js라는 자바스크립트 파일을 번들에 주입합니다. loader.js 파일에는 앞서 작성한 로딩 스피너에 대한 CSS 코드를 포함해야 합니다. inject.js 파일에는 앞서 작성한 자바스크립트 코드가 있어야 합니다.
loader.js 파일을 생성하고, 로딩 스피너에 대한 CSS 코드를 추가합니다.
inject.js 파일을 생성하고, 앞서 작성한 자바스크립트 코드를 추가합니다.
npm start 명령어를 실행하여 앱을 실행합니다. 이후 브라우저에서 앱을 로드할 때 로딩 스피너가 표시됩니다.

위의 단계를 따르면 Parcel 앱에 로딩 스피너를 추가할 수 있습니다. 로딩 스피너는 앱이 로드되는 동안 사용자에게 진행 상황을 시각적으로 전달하는 데 도움이 됩니다.

참고 자료: