[React_study] 리액트 React 설치 & 개발환경 셋팅

* 개발환경셋팅

• Node.js LTS버전 설치 (13버전 이하 아니면 17버전은 사용 지양)
• Vscode

* 리액트 프로젝트 생성 명령어

npx create-react-app <app name>

• src폴더안에 있는 App.js가 메인페이지이다.

* 리액트 실행 (미리보기)

• Terminal창에 아래의 명령어 입력
• localhost:3000으로 페이지가 열린다.
• 페이지가 자동으로 열린다. 열리지 않으면 크롬 브라우저에서 직접 열면된다.

npm start

 

* 프로젝트 파일들 설명

• node_modules폴더 : 라이브러리 코드 보관함
• public폴더 : static파일 모아 놓는 곳
• src폴더 : 코드 짜는 곳
• App.js : main page
• package.json : 프로젝트 정보 (프로젝트 이름, 라이브러리 이름 및 버전)
  • 자동으로 생성되므로 따로 내용을 수정하거나 건들 필요 없다.

* .js파일에 html을 짜도 잘 되는 이유는??

• App.js에 있던 html요소들을 index.html이라는 메인페이지에 넣어주라고 index.js안에서 코드가 구성이 되어 있다.

---

* 프로젝트 구성중 발생 할 수 있는 error

*  "npx command not found" 에러

- 터미널 리부팅 

- nodejs 제대로 설치 확인

- 버전 확인 

 

 

* Mac "permission denied" 에러

- sudo npx create-react-app <app name>

- 비번입력 요청시 맥북 비번 입력

 

* Window '허가되지 않은 스크립트" 에러

- Powershell 관리자 권한으로 실행

- Set-ExecutionPolicy Unrestricted 명령어 입력

 

* The engine "node" is incompatible with this module 에러 

- npx로 설치시 발생할 수 있는 error

- node의 버전이 낮거나 너무 높다는 뜻

- node를 요구하는 버전으로 재설치하면 된다.

 

* Cannot create a project named "설정하려고 했던 프로젝트명" because of npm naming restrictions:

  * name can no longer contain capital letters

Please choose a different project name.

 

- 프로젝트명에 대소문자 또는 특수기호를 입력하지 말라는 뜻

- 리액트 프로젝트명에는 대문자나 특수기호 입력했는지 꼭 확인