React 개발환경 구축

1. Visual Studio Code(vscode) 설치 or IntelliJ(인텔리제이) 설치

https://code.visualstudio.com/Download

https://www.jetbrains.com/ko-kr/idea/
본인의 운영체제에 맞춰서 설치하세요

2. Node.js 설치

https://nodejs.org/ko

왼쪽에 있는 안정적, 신뢰도 높음으로 설치하세요

• Node.js 설치가 다 끝난 후 cmd(윈도우키 + R누르고 cmd 입력) 창으로 잘깔렸는지 확인하세요

• Node.js, npm 버전 확인

node -v(node.js 버전 확인) -> v18.16.0
npm -v(npm 버전 확인) -> 9.5.1

3. npm으로 React 설치

1, 2번 다 잘됬으면 바탕화면에 폴더하나 만들죠 (폴더명은 알아서하세요 영어로 만들어야합니다.)
그런 다음 vscode 또는 IntelliJ 실행하세요

vscode 사용자는 File -> Open Folder -> 만든폴더열기
그런 다음에 Terminal -> New Terminal 클릭하세요 그러면 하단에 터미널 창이 나올겁니다

인텔리제이 사용자는 좌측상단에 메뉴누르고 Open.. 눌러서 바탕화면에있는 폴더 여세요
그런 다음에 폴더를 우클릭하고 Open in -> Terminal로 하면 하단에 터미널 창이 나올겁니다.

vscode든 인텔리제이든 터미널 창에서 아래에 "npx create-react-app" 폴더이름 을 쳐줍시다

npx create-react-app 새로만들 폴더이름
ex) npx create-react-app codingnojam

그러면 아래와 같이 알아서 설치해줍니다.

vscode 터미널창

그런다음 설치가 다된 사람들은 아래에 명령어를 쳐주세요

cd 새로만든 폴더이름
ex) 아까 npx create-react-app 새로만들 폴더이름 했었죠? 그거 치시면 됩니다.
저는 codingnojam 으로 만들었으닌깐 cd codingnojam 칩니다.

자 이제 마지막 리액트 설치 다했으닌깐 리액트 클라이언트 실행을 할 명령어 쳐줍니다.

npm start

위에 명령어 치면 이런 페이지 나옵니다. 이러면 리액트 코딩공부할 준비가 된겁니다.

인텔리제이 사용자도 똑같습니다.

리액트 설치 다되면 아래 명령어 치세요

cd codingnojam
ex) cd 만든 폴더이름

그런 다음 아래 명령어 치고 화면 나오면 끝입니다.

npm start

4. 설치하는데 오류가떠요

1. "npx command not found ..." 에러

• 터미널 껐다 켜보세요
• node.js 버전 확인 및 다시 설치
• C드라이브에 설치되어있는지 확인하세요

2. 맥북 "permission 없음" 에러뜸

• 프로젝트 생성 시 이러한 에러가 뜨면 터미널에
• sudo npx create-react-app blog 입력한다음
• 비번입력하라고 하면 맥북 비번 입력

3. 윈도우 "허가되지 않은 스크립트 입니다." 에러

• 윈도우 하단 검색메뉴에 Powershell 검색 → 우클릭 → 관리자 권한으로 실행한 뒤
  Set-ExecutionPolicy Unrestricted 입력 그리고 뭐라고뭐라고 선택하라고 하면 y 입력

4. The engine "node" is incompatible with this module 에러

• npx로 설치 시 이런 에러가 있을 수 있음
• node.js 버전이 낮거나 너무 높다는 뜻
• node.js를 요구하는 버전으로 재설치
• 그냥 C드라이브에서 node.js 폴더 찾아서 삭제하고 다시설치하세요 그게 마음편합니다.

이 이상 에러가 더 뜬다? 저도 몰라요 구글 검색해보세요