개발 환경 설정 및 Project 생성

필요 Tool (Windows 기준으로 설명하며, Mac도 크게 다르지 않음)

 

Node.js (https://nodejs.org/ko/)

---

 

VS Code (https://code.visualstudio.com/)

---

Project 생성

• 작업대상 폴더에서 Terminal을 열고 npx create-react-app project_name 을 입력한다.
• html에 직접 react project를 구현할 수 있으나 너무 번거롭기 때문에 create-react-app 라이브러리를 사용한다. (https://create-react-app.dev/)
• 허가되지 않은 script... 에러가 발생하는 경우 관리자 권한으로 Powershell을 실행하고 Set-ExecutionPolicy Unrestricted를 실행하고 재시도.

npx create-react-app project_name

---

Project 열기

VS Code에서 폴더 열기를 통해 생성한 프로젝트 폴더를 연다.

• 메인 페이지는 App.js 파일이다.
• 실행은 Terminal에서 npm start를 입력하면 react 페이지가 구동된다.

npm start

---

React Project 구성

• node_modules : react 구성요소 파일
• public : 이미지 등 static 파일을 모아두는 곳
• src : 소스코드 뭉치