React 애플리케이션을 만들때, 가장 많이 사용되는 도구 중 하나가 'Create React App'이다. 이 도구는 React 개발 환경을 손쉽게 설정해주며, 여러가지 유용한 기능을 기본으로 제공한다. 하지만, Parcle 번들러를 이용하여 더 간단한 설정으로 가벼운 설정과 빠른 빌드업을 하여 프로젝트를 관리할 수 있다.
Create React App으로 React 프로젝트 생성
프로젝트 생성
npx create-react-app myreact01-cramyreact01-cra라는 이름의 프로젝트를 생성한다. 필요한 패키지와 기본 React 파일 구조가 생성된다.
명령어
npm run start위 명렁어를 사용하여 개발 서버를 실행하여, 브라우저에서 애플리케이션을 확인할 수 있게 한다. 기본적으로 'localhost:3000'으로 실행된다.
npm run build프로덕션 환경에 배포할 준비가 되면 빌드를 진행하여, 폴더에 최적화된 정적 파일들이 생성되고 이 파일들을 이용하여 서버에 배포한다.
npm run testJest를 사용하여 테스트 환경을 제공한다.
npm run eject - 모든 설정을 직접 관리해야하기에 비추천모든 설정을 직저 관리하고 싶다면 위 명령어를 통해서 할 수 있지만, 이 명령어는 비추천되며 한번 실행하면 되돌릴 수 없으며, Webpack, Babel, ESLint 등의 설정 파일을 프로젝트 루트에 노출 시킨다.
서버 실행 후, 화면
Parcle 번들러로 SAP 프로젝트 생성
프로젝트 폴드 생성 및 초기화
mkdir myreact02-parcel
cd myreact02-parcel
npm install --save-dev parcel@2
npm install react@18 react-dom@18
프로젝트 구조 설정
src 디렉토리를 만들고, 그 안에 index.html과 index.js 파일을 생성한다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="root"></div>
<script type="module" src="index.js"></script>
</body>
</html>
index.js
import {createRoot} from "react-dom/client";
function App() {
return (
<div>
<h1>Hello React.</h1>
</div>
);
}
// js 단에서 리액트 컴포넌트를 렌더링할 요소를 지정
const rootEl = document.getElementById("root");
const root = createRoot(rootEl)
root.render(<App />);
package.json 파일 수정
처음 package 파일을 보면 scripts 부분이 없을 텐데 아래처럼 진입점을 생성해주면 된다.
port의 경우 create-react-app으로 생성하면 3000번 포트가 디폴트 값인데, parcel 번들러로 생성하면 디폴트 포트가 1234로 되어있다.
{
"scripts": {
"start": "parcel src/index.html"
//"start": "parcel src/index.html --port:3000"
},
"devDependencies": {
"parcel": "^2.12.0",
"process": "^0.11.10"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}
서버 실행 후, 화면
npm run start위 명령어를 통해서 서버를 실행해주면 아래와 같이 리엑트 서버가 동작한다.
'FrontEnd > React' 카테고리의 다른 글
| [React] 클릭시 url 이동 - useNavigate (0) | 2024.08.26 |
|---|---|
| [React] 순수 함수 (0) | 2024.08.13 |
| React 폴더, 컴포넌트, 함수 명명 규칙 (0) | 2024.03.15 |
| React 기본 명령어 (0) | 2024.03.15 |
| React의 기초개념 5가지 (0) | 2024.03.15 |
