[javascript] Parcel에서 그리드 시스템 라이브러리를 사용하는 방법은?

22 Nov 2023

javascript

프로젝트 세팅: 프로젝트 폴더를 생성한 후, 터미널에서 해당 폴더로 이동합니다. 다음 명령어를 사용하여 Parcel을 설치합니다.
```
npm install -g parcel-bundler
```
그리드 시스템 라이브러리 설치: 그리드 시스템을 사용하기 위해 라이브러리를 설치해야 합니다. 대표적으로 Bootstrap, Foundation, Bulma 등이 있습니다. 이 예시에서는 Bootstrap을 사용하도록 하겠습니다. 다음 명령어를 사용하여 Bootstrap을 설치합니다.
```
npm install bootstrap
```

HTML 파일 생성: 프로젝트 폴더 안에 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/bootstrap/dist/css/bootstrap.min.css">
    <title>Parcel Grid System Example</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>Hello, World!</h1>
            </div>
            <div class="col-md-6">
                <p>This is an example of using the grid system with Parcel.</p>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

JavaScript 파일 생성: 프로젝트 폴더 안에 index.js 파일을 생성합니다.

import 'bootstrap/dist/js/bootstrap.min';
// Additional JavaScript code can be added here

프로젝트 실행: 터미널에서 다음 명령어를 실행하여 개발 서버를 시작합니다.
```
parcel index.html
```
웹 브라우저에서 http://localhost:1234로 접속하여 그리드 시스템이 적용된 웹 페이지를 확인할 수 있습니다.

Parcel을 사용하여 그리드 시스템 라이브러리를 적용하는 방법에 대해 알아보았습니다. 추가적으로 프로젝트에 필요한 다른 라이브러리나 커스터마이징된 스타일을 적용하는 작업도 가능합니다.