[javascript] Parcel에서 슬라이더 라이브러리를 사용하는 방법은?

22 Nov 2023

javascript

프로젝트를 초기화합니다. 새로운 프로젝트 디렉토리를 생성하고 해당 디렉토리에서 터미널을 엽니다.
다음 명령을 실행하여 Parcel을 전역으로 설치합니다.

npm install -g parcel-bundler

다음 명령을 실행하여 프로젝트에 필요한 슬라이더 라이브러리를 설치합니다. 여기서는 Swiper를 예로 들겠습니다.

npm install swiper

HTML 파일과 JavaScript 파일을 생성합니다. 프로젝트 디렉토리에 index.html 파일을 생성하고 다음 코드를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="node_modules/swiper/swiper-bundle.min.css">
  <title>Parcel Slider Example</title>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <script src="index.js"></script>
</body>
</html>

같은 디렉토리에 index.js 파일을 생성하고 다음 코드를 추가합니다.

import Swiper from 'swiper';

new Swiper('.swiper-container', {
  // 슬라이더 설정
});

터미널에서 다음 명령을 실행하여 애플리케이션을 빌드하고 실행합니다.

parcel index.html

브라우저에서 http://localhost:1234로 이동하면 슬라이더가 동작하는 것을 확인할 수 있습니다.

이제 Parcel에서 슬라이더 라이브러리를 사용하는 방법을 알게 되었습니다. 슬라이더 라이브러리를 사용할 때는 해당 라이브러리의 문서를 참조하여 추가적인 설정과 사용법을 확인하는 것이 좋습니다.