[javascript] Parcel에서 Material-UI를 사용하는 방법은?

22 Nov 2023

javascript

Parcel 프로젝트 생성하기

Parcel을 사용하기 위해 먼저 프로젝트를 생성해야 합니다. 명령줄에서 다음 명령을 실행하여 프로젝트 폴더를 생성합니다.

mkdir my-app
cd my-app

그리고 나서 아래의 명령을 실행하여 프로젝트에 Parcel을 설치합니다.

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

React 및 Material-UI 설치하기

이제 React와 Material-UI를 설치해야 합니다. 다음 명령을 실행하여 필요한 종속성을 설치합니다.

npm install react react-dom @material-ui/core

index.html 생성하기

Parcel에서는 index.html 파일이 번들링되는 엔트리 포인트로 사용됩니다. 프로젝트 폴더에 index.html 파일을 생성하고 아래의 내용을 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Parcel with Material-UI</title>
    <link href="node_modules/@material-ui/core/dist/css/material-ui.min.css" rel="stylesheet">
</head>
<body>
    <div id="root"></div>
    <script src="src/index.js"></script>
</body>
</html>

index.js 파일 생성하기

프로젝트 폴더에 src 폴더를 생성한 후, 그 안에 index.js 파일을 생성합니다. 아래의 내용을 복사하여 index.js 파일에 붙여넣습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

const App = () => (
  <Button variant="contained" color="primary">
    Hello Material-UI!
  </Button>
);

ReactDOM.render(<App />, document.getElementById('root'));

개발 서버 시작하기

이제 Parcel을 사용하여 개발 서버를 시작할 수 있습니다. 프로젝트 폴더의 루트에서 다음 명령을 실행합니다.

npx parcel index.html

Parcel이 애플리케이션을 번들링하고 개발 서버를 시작할 것입니다. 브라우저에서 http://localhost:1234로 접속하여 결과를 확인할 수 있습니다.

이제 Parcel을 사용하여 Material-UI를 설정하는 방법을 알게 되었습니다. 이 방법을 사용하여 반응형 웹 애플리케이션을 구축해 보세요.