[javascript] Parcel로 어떻게 프로젝트를 시작하나요?

22 Nov 2023

javascript

Parcel은 플러그인 설정이 필요 없는 최신 JavaScript 번들러입니다. 복잡한 설정 없이 간단한 몇 가지 단계로 프로젝트를 시작할 수 있습니다. 이 글에서는 Parcel을 사용하여 JavaScript 프로젝트를 어떻게 시작할지 알아보도록 하겠습니다.

선행 작업

Parcel을 사용하기 위해선 Node.js가 설치되어 있어야 합니다. Node.js가 설치되어 있지 않다면 공식 홈페이지에서 최신 버전을 다운로드하여 설치하세요.

프로젝트 초기화

먼저 터미널을 열고 원하는 프로젝트 디렉토리로 이동합니다. 그리고 아래 명령어를 입력하여 프로젝트를 초기화합니다.

mkdir my-project
cd my-project

프로젝트에 Parcel 설치

프로젝트 디렉토리에서 다음 명령어를 이용해 Parcel을 설치합니다.

npm init -y
npm install parcel-bundler --save-dev

HTML 파일 생성

프로젝트 루트 디렉토리에 index.html 파일을 생성합니다. 다음과 같은 기본 구조를 가지도록 작성합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Parcel Project</title>
</head>

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

</html>

JavaScript 파일 생성

프로젝트 루트 디렉토리에 src 디렉토리를 생성하고, 그 안에 index.js 파일을 생성합니다. 이 파일은 프로젝트의 진입점이 되는 파일로서, 필요한 JavaScript 코드를 작성합니다.

console.log("Hello, Parcel!");

프로젝트 빌드

이제 모든 설정이 완료되었으므로, 프로젝트를 빌드하여 실행할 수 있습니다. 터미널에서 다음 명령어를 실행합니다.

npx parcel index.html

Parcel은 의존성을 자동으로 관리하고 번들링 작업을 수행하여 빌드합니다. 빌드가 완료되면 터미널에 아래와 같은 메시지가 표시됩니다.

Server running at http://localhost:1234
✨  Built in 2.78s.

이제 브라우저에서 http://localhost:1234로 접속하면 프로젝트가 실행되는 것을 확인할 수 있습니다.

결론

Parcel을 사용하면 쉽고 빠르게 JavaScript 프로젝트를 시작할 수 있습니다. 복잡한 설정 없이 몇 가지 단계만으로 프로젝트를 초기화하고 빌드할 수 있습니다. Parcel의 강력한 기능을 더 알아보고 싶다면 공식 홈페이지를 참고하세요.