이번 포스트에서는 create-react-app을 이용하여 리액트에서 프로젝트를 생성하고, 필요한 파일만 남기는 방법에 대해 다루어보겠습니다.
create-react-app
create-react-app은 리액트에서 제공하는 React 어플리케이션을 생성하기 위한 툴입니다.
npx 명령어를 통해 create-react-app을 실행할 수 있는데, 이를 위해서는 NodeJS가 설치되어 있어야 합니다.
따라서 NodeJS가 설치되어 있지 않다면 공식 사이트로 가서 안정적인 버전의 NodeJS를 설치해주면 됩니다.
NodeJS를 설치하였다면 이제 터미널 등에서 프로젝트를 생성할 폴더로 이동하고, 다음의 명령어를 실행하면 됩니다.
npx create-react-app (프로젝트 이름)
그럼 (프로젝트 이름)이라는 이름으로 구성된 프로젝트 폴더가 생성됩니다.
프로젝트 기본 구조 살펴보기
폴더 안의 프로젝트 구조는 다음과 같은 형태를 가지고 있을 것입니다.
여기서 간단한 프로젝트를 만드는 데 대부분의 파일은 필요 없습니다.
기본적인 것부터 살펴보기 위해서, 다음과 같이 필수적인 파일만 남겨둘 수 있습니다.
node_modules는 프로젝트에 필요한 모듈들을 저장하는 폴더이므로 삭제하면 안됩니다.
우리는 프로젝트를 업로드할 때 node_modules에 있는 모듈들을 모두 업로드하지 않고, package.json이라는 파일에 '이 프로젝트에 어떤 모듈들이 필요한지'에 대한 정보만을 저장하여 업로드할 수 있습니다.
따라서 package.json 파일도 삭제하면 안됩니다.
.gitignore 파일은 프로젝트를 업로드할 때 보안과 관련되거나 중요한 정보를 온라인 저장소에 노출시키지 않는 등 업로드하지 않아야 하는 파일의 목록을 관리하는 파일입니다.
필수적인 코드만 남기기
다음으로 index.html은 다음과 같이 반드시 필요한 코드만 남깁니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
이 코드에서 주의할 점은 body의 id="root"인 div 하나를 남겨야 한다는 것입니다.
element가 하나라도 있어야 프로젝트에서 렌더링이 잘 작동하는지 확인할 수 있습니다.
다음으로 index.js는 다음과 같이 매우 중요한 코드만 남깁니다.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
여기서 <React.StrictMode>는 React의 개발 모드에서 검사를 엄격히하여 발생할 수 있는 문제들을 잡아내고 알려주는 역할을 합니다.
따라서 반드시 필요한 것은 아니지만 여기서는 그냥 두도록 합시다.
마지막으로 App.js는 다음과 같이 작성합니다.
function App() {
return <div>Hello</div>;
}
export default App;
아까 html 태그로 남겨둔 <div id="root>에 Hello라는 텍스트를 작성해 봅시다.
이제 웹에서 어떻게 작동하는지 웹 화면을 확인해볼까요?
프로젝트 실행해 보기
프로젝트의 실행을 위해서는 터미널에 npm start를 입력해주면 됩니다.
물론 이와 관련된 명령어를 package.json 파일에서 설정할 수 있습니다.
npm start는 다음과 같이 프로젝트 생성 처음부터 기본으로 작성되어 있는 명령어입니다.
이제 npm start를 터미널에 쳐서 프로젝트가 제대로 작동하는지 확인해봅시다.
실행 결과는 다음과 같습니다.
'http://localhost:3000/'의 주소에 접속되며 프로젝트가 잘 작동하는 것을 확인할 수 있습니다.
여기서 3000은 React 프로젝트가 작동하는 포트의 번호로, 임의로 빈 포트인 3000을 설정한 것입니다.
이렇게 해서 create-react-app을 이용해 React의 프로젝트를 생성해 보고, 간단한 코드만 남겨 프로젝트가 제대로 작동하는지 확인해 볼 수 있었습니다.
'웹 개발 > React' 카테고리의 다른 글
| React(리액트) props(속성) 활용과 예시 (+ propTypes) (1) | 2024.02.18 |
|---|---|
| React(리액트) 컴포넌트 분할/조각화를 통해 코드 가독성 높이기 (0) | 2024.02.17 |
| React(리액트) State를 이용해 단위 변환기 구현하기 (0) | 2024.02.16 |
| React(리액트) 컴포넌트와 이벤트 간단하게 만들고 렌더링하기 (0) | 2024.02.12 |