[React] 프로젝트 생성

잡담

오늘은 페이스북에서 개발한 오픈소스인 React에 대해서 아주 기본적인 내용만 다뤄보려고 합니다. 저도 최근에 수업을 들으면서 정리하고 있는데 컴포넌트 기반 아키텍처를 제공해 유지보수하는데 쉽다고 말하는데 도대체가 아직 왜 쉬운지도 모르겠고 내용을 이해하는 데 있어서 어려움을 겪고 있습니다. 그래서 기본적인 코드를 사용해 가면서 개념을 익히는데 노력하고 있습니다. 아래의 내용은 정말 기본적인 React를 시작할 때 하는 작업인 프로젝트 생성부터 해보려 합니다.

---

 

1. 프로젝트 생성

React의 프로젝트를 생성할 때는 홈페이지를 들어가서 다운로드하거나 하지 않아도 CMD창에 코드 몇 줄 적는 것으로 생성할 수 있습니다. 하지만 여기서 컴퓨터에 미리 설치해 둬야 환경이 있습니다.

 Node.js version 14.0.0 이상
 npm version 5.6 이상

 

다운로드를 완료했다면 아래의 코드를 CMD창에 입력합니다.

npx create-react-app 프로젝트명

제 경우에는 User/YJ경로에 설치하고 test1을 프로젝트명으로 정했습니다. 원하는 위치는 따로 경로를 지정해 줄 수 있습니다. 해당 부분은 다들 아실 거라 생각하고 넘어가겠습니다.(cd명령어를 사용해서 원하는 디렉터리로 이동하면 됨)

프로젝트명을 입력하고 enter 키를 누르면 아래와 같이 다운로드가 진행되는 것을 확인할 수 있습니다.

설치 중

 

---

errno -4058

만약 'npx create-react-app 프로젝트명'을 입력했음에도 설치가 진행되지 않고 위와 같은 오류가 뜬다면 

npm install -g create-react-app

해당 코드를 먼저 입력하고 진행하면 된다. 저도 진행하다가 해당오류가 떴는데 create-react-app 도구를 전역적으로 설치하는 명령어입니다. 처음설치하거나 하면 해당 오류가 뜨는 거 같습니다.

---

 

아래와 같이 Happy hacking이라는 문장이 떴다면 설치가 완료된 것입니다. 

npm start

이제 해당경로에 npm start를 입력하거나 해당 경로로 이동해서 입력하게 되면 

React 마크 및 Learn React 하이퍼링크가 있는 메인창이 열리게 됩니다. 기본적으로 React를 열 때 사용하는 url 및 port는 'http://localhost:3000'입니다. 만약 3000번 포트를 사용하고 있다고 해도 알아서 3001번 등 비어있는 포트를 찾아가서 실행시켜 줍니다.

 

---

2. 프로젝트 구조

React 프로젝트를 생성하고 나면 여러 가지의 폴더와 파일들이 생성되는데 여기에 대해 간단하게 설명하겠습니다. 저 또한 어떤 게 어떤 일을 하는지 잘 이해하고 있지 않기에 검색을 통해서 정리해 보았습니다.

my-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock / package-lock.json

프로젝트를 생성하면 나오는 폴더 및 파일들입니다. 

주요 파일 및 폴더 설명

1. node_modules/

• NPM 패키지들이 설치되는 디렉터리입니다.
• 프로젝트의 모든 의존성이 여기에 설치됩니다.

2. public/

• 정적 파일을 저장하는 디렉터리입니다.
• 이 안의 파일들은 빌드 시 그대로 복사되어 최종 빌드 결과물에 포함됩니다.

public/index.html

• React 애플리케이션의 HTML 템플릿입니다.
• React 컴포넌트는 이 파일의 <div id="root"></div>에 렌더링 됩니다.

3. src/

• 애플리케이션 소스 파일들이 저장되는 디렉터리입니다.
• 모든 React 컴포넌트와 스타일시트, 테스트 파일 등이 여기에 위치합니다.

src/App.js

• 주요 애플리케이션 컴포넌트입니다.
• 이 파일에서 애플리케이션의 UI를 구성하는 다른 컴포넌트들이 포함됩니다.

src/App.css

• App.js 컴포넌트에 대한 스타일시트를 정의합니다.

src/App.test.js

• App.js 컴포넌트의 테스트 파일입니다.
• Jest를 사용하여 기본적인 테스트가 포함되어 있습니다.

src/index.js

• 애플리케이션의 진입점입니다.
• 이 파일에서 ReactDOM을 사용하여 public/index.html의 root div에 React 컴포넌트를 렌더링 합니다.

src/index.css

• 전역 스타일시트를 정의합니다.

4. yarn.lock / package-lock.json

• 프로젝트의 정확한 의존성 트리를 기록합니다.
• 설치된 패키지의 버전을 고정하여 일관성을 유지합니다.
• yarn을 사용하면 yarn.lock이, npm을 사용하면 package-lock.json이 생성됩니다.

이 기본 구조는 React 애플리케이션을 시작하는 데 필요한 모든 것을 포함하며, 개발자가 필요한 기능을 추가하고 프로젝트를 확장할 수 있는 기초를 제공합니다.

 

---

 

잡담

오늘은 React의 프로젝트를 생성하는 방법과 생성 시 만들어지는 파일과 폴더에 대한 간단한 정보를 알아보았습니다. react의 특징으로 컴포넌트 기반 아키텍처, 단방향 데이터 흐름이라던지 JSX를 사용한다던지 등등의 내용이 있는데 말도 어렵고 개념을 이해하기 힘들어서 일단 코드를 작성하면서 사용방법부터 익히는 쪽으로 갈 거 같습니다. 다음에는 React를 이용해서 Html/css를 이용하는 기본적인 화면 구성을 진행해 보도록 하겠습니다.