[React] 리액트 프로젝트 생성하기 (Create React App)

Create React App(CRA)를 사용하면 초기 설정에 시간을 낭비할 필요가 없다. 

복잡한 환경 설정 없이 빠르게 리액트 프로젝트를 시작할 수 있으며
리액트 개발을 위한 기본적인 환경을 갖추고 있어, 개발자가 코드 작성에 집중할 수 있다.

---

⚛️ create-react-app을 이용한 프로젝트 생성

🛠️ 개발 환경

1. VSCode 다운로드 : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

2. Node.js 설치 : https://nodejs.org/

Node.js — Run JavaScript Everywhere

 

node 설치 이유

• 자바스크립트 런타임: Node.js는 서버 사이드에서 자바스크립트를 실행할 수 있게 해주는 런타임 환경이다. 리액트는 자바스크립트로 작성되므로, Node.js가 필요하다.
• 패키지 관리: Node.js는 npm(Node Package Manager)을 포함하고 있어, 다양한 라이브러리(예: 리액트, Axios 등)를 쉽게 설치하고 관리할 수 있다.
• 개발 도구: Create React App과 같은 도구를 사용하여 리액트 프로젝트를 생성하고 설정할 때 필요하다.

 

먼저, node와 npm이 설치되어 있는지 확인한 뒤, 설치되어 있지 않다면 다운로드하면 된다. (Node.js를 설치하면 npm도 자동으로 설치된다.)

⭐️ 설치 확인 (버전 확인)

node -v
npm -v

---

✅ Create React App 사용하여 프로젝트 생성

1. 터미널 열어 프로젝트를 생성할 위치로 이동
2. 프로젝트 생성

npx create-react-app my-app-name

 

🍯Tip1. 스프링부트 사용 시, 스프링부트 프로젝트 내부에 리액트 프로젝트를 생성할 수 있다.

아래 경로에 프로젝트를 생성하면 된다.

만약 Git을 이용해 스프링부트 프로젝트와 리액트 프로젝트를 별도로 관리하고 싶다면, 스프링 프로젝트의 .gitignore 파일에 frontend와 관련된 내용을 추가해 주면 된다. 이렇게 하면 프론트엔드와 백엔드의 버전 관리를 독립적으로 할 수 있고, 필요한 경우에는 통합하여 관리할 수 있다.

 

🍯Tip2. “name can no longer contain capital letters”

CRA : name can no longer contain capital letters

"Create React App"을 사용하여 프로젝트를 생성할 때, 프로젝트 이름에 대문자가 포함되면 오류가 발생한다. 리액트 프로젝트 이름은 소문자와 하이픈(-)만 사용할 수 있다.

---

🏁 프로젝트 생성 완료 !

프로젝트 생성이 끝났다. 리액트 프로젝트 생성은 정말 간단하다.

Happy hacking! 문구가 보이면 정상적으로 설치된 것이다. (즐겁고 멋지게 문제를 해결하세요! 라는 뜻으로 썼다고 한다.)

Happy hacking!

---

🏃‍♀️ 프로젝트 실행

VSCode에서 생성한 프로젝트를 열고, 아래 명령어를 입력하여 실행하면 http://localhost:3000 주소로 리액트 앱이 열린다.

npm start

http://localhost:3000 리액트 앱 실행

---

Create React App은 리액트 개발을 시작하는 데 있어 매우 유용하고 효율적인 도구인 것 같다. 복잡한 초기 설정과 환경 구성에 프로젝트 시작을 망설일 때도 있는데, 이 과정을 단순화해서 더 빠르게 애플리케이션을 구축할 수 있도록 도와주는 강력한 도구인 것 같다. 이제 코드에 집중해야지~ Happy Coding🍀