Parcel은 간편하게 웹 애플리케이션을 개발할 수 있도록 도와주는 패키지 번들러입니다. Parcel을 사용하면 여러 페이지 애플리케이션을 쉽게 개발할 수 있습니다. 이번 포스트에서는 Parcel을 사용하여 여러 페이지 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.
1. 프로젝트 초기화
먼저, 새로운 프로젝트를 초기화해야 합니다. 아래의 명령을 사용하여 프로젝트 폴더를 생성하고, npm을 이용해 Parcel을 설치합니다.
mkdir my-app
cd my-app
npm init -y
npm install parcel-bundler --save-dev
2. HTML 파일 생성
페이지를 구성하는 HTML 파일들을 생성합니다. 예를 들어, index.html과 about.html 두 개의 HTML 파일을 생성합니다.
3. CSS 및 JavaScript 파일 생성
각 페이지에 필요한 CSS 파일 및 JavaScript 파일을 생성합니다. 예를 들어, style.css와 script.js 파일을 생성합니다. 이 파일들은 각 HTML 파일에서 import하여 사용할 수 있습니다.
4. Entry 포인트 설정하기
Parcel은 모든 파일들을 자동으로 인식하지만, 각 페이지별로 따로 번들링하기 위해서는 Entry 포인트를 설정해야 합니다. package.json 파일에 src 폴더를 만들고, 각각의 HTML 파일을 Entry 포인트로 설정합니다.
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"devDependencies": {
"parcel-bundler": "^1.12.4"
}
}
5. 애플리케이션 실행
이제 애플리케이션을 실행할 준비가 되었습니다. 아래의 명령을 사용하여 개발 서버를 실행합니다.
npm run dev
Parcel은 자동으로 애플리케이션을 번들링하고, 개발 서버를 열어주며, 변경 사항을 실시간으로 감지하여 다시 빌드합니다. 브라우저에서 http://localhost:1234을 열어 프로젝트를 확인할 수 있습니다.
6. 애플리케이션 빌드
개발이 완료되었다면 애플리케이션을 빌드하여 배포할 수 있습니다. 아래의 명령을 사용하여 애플리케이션을 빌드합니다.
npm run build
Parcel은 애플리케이션을 최적화하고 번들링된 파일들을 dist 폴더에 생성합니다. 이 파일들을 서버에 배포하면 애플리케이션을 사용할 수 있습니다.
결론
Parcel을 사용하면 여러 페이지 애플리케이션을 쉽고 편리하게 개발할 수 있습니다. 번들링 설정을 따로 하지 않고도 파일 간의 의존성을 자동으로 인식하여 개발 및 배포가 가능합니다. Parcel은 많은 기능과 확장성을 제공하므로, 웹 개발 프로젝트에서 사용해보시길 권장합니다.