React 사용 환경 설정

 

 

1. Node.js 설치

 

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

 

 

 

 

위 사이트를 들어갔을때 나오는 페이지에서 다운로드를 했다.

 

 

다운로드한 파일을 더블 클릭하고 전부 Next 를 누른 다음 Install 하여 설치하였다.

 

 

 

npm -v
node -v
npx -v

 

명령 프롬프트에서 다운 되었는지 버전을 확인했다.

 

▼ npx 가 없을 경우

npx가 없을 경우에 npm으로 'React 개발환경 설치를 위한 create-react-app' 을 먼저 실행한다.

   > npm install -g create-react-app

: 폴더에 상관없이 어디서든 create-react-app 명령을 사용할 수 있도록 함.

   > create-react-app -V 

: 설치를 확인.   V는 대문자.

 

 

 

2. React work directory 생성

 

 

실습할 때 사용할 폴더에 새로운 directory 를 만들었다.

 

 

명령 프롬프트에서 작업 경로를 이동한 후 dir 확인을 한번 해준다.

 

 

3. Application (응용 프로그램) 작성하기

 

 

현재는 npx를 사용하여 create-react-app을 실행하는 것이 권장되는 방법이다. 

npx create-react-app my-app1

 

나는 npx create-react-app my-app1 과 같은 명령어를 사용하여 React application을 생성했다.

그리고 나서 Ok to proceed? (y) 질문에서 y 를 입력 하고 enter 한다.

 

 

잘 완료 되었는지 my-app1에서 dir /w 명령하여 확인해보았다.

 

 

명령프롬프트에 npm start 를 입력하면 React application이 실행된다.

 

여기서 웹 서버를 죽이고 싶을때에는 

 

 

명령 프롬프트에서 Ctrl + C 를 누르고 일괄 작업을 끝내시겠습니까? 에서 Y 를 입력해주면 된다.

 

 

 

4. VS Code에서 웹 서버 (React Application) 실행하기

 

 

비주얼 스튜디오 코드에서 터미널 > 새 터미널을 클릭하면 프로그램 내에서 터미널을 실행 할 수 있다.

 

 

 

 

터미널에서 위와 똑같이 npm start 를 입력하고 실행하면 

 

 

잘 실행이 된다~!  환경 설정 끝~!

 

 

5. VS Code 터미널 실행 안됨 이슈

 

 

사실 처음에 실행했을때에는 실행이 되지 않았다.

이 에러가 발생하는 이유는 스크립트 권한이 제한 되어있기 때문이다.

 

이를 해결하기 위해,

 

관리자 권한으로 PowerShell 을 실행한 후 커맨드 창에

ExecutionPolicy

 

를 입력하면 "Restricted"라는 결과가 나오는데 이는 스크립트 코드가 제한되어있다는 뜻이다.

 

해당 커맨드 창에

Set-ExecutionPolicy RemoteSigned(권장) 또는
Set-ExecutionPolicy Unrestricted

 

를 입력하고 다시  "ExecutionPolicy"를 입력하면 RemoteSigned 라는 결과가 나오게 되고 이는 스크립트를 실행 가능하다는 뜻이다.

 

이후에 다시 VS Code의 터미널에서 npm start를 입력하니 application이 잘 실행 되었다!