[01] Node.js 설치 / React 시작하기

이제 리액트를 배워야해서 정리를 하면서, 익혀보도록 하겠다 !

 

시작에 앞서 React 홈페이지에서 시작하는 방법을 쭉 한 번 읽어 보았다.

( React : https://ko.reactjs.org/ )

---

1. Node.js 설치

 

읽다 보니 create react app을 배우기 위해서는 node.js가 필요하다고 한다.

 

그래서, 우리는 다시 돌아와 Node.js부터 설치를 해보자 !!

https://nodejs.org/ko/download/

다운로드 | Node.js

위의 사이트로 이동을 하여 OS에 맞는 Node.js를 설치해 주면 되겠다.

 

설치 후에는 위 이미지와같이 환경변수에 자동으로 등록이 되나, 혹시 모르니 확인 해준다.

또한, 2번 3번 확인해서 나쁠것은 없으니 cmd를 통해서도 확인을 해주자 !

위의 이미지와 같이 node-v, npm -v를 입력함으로써 버전을 확인 할 수 있다.

확인을 하였다면 Node.js 설치는 성공적으로 진행이 되었다.

 

이제 react를 한 번 실행하기 위한 간단한 app을 만들어 보자 !!

---

2. React 시작하기

 

툴은 vscode를 사용한다.

터미널을 새로실행시켜 아래의 명령문을 실행시켜준다.

npm install -g create-react-app

---

* 만약 빨간색 에러가 뜬다면 executionPolicy일 가능성이 높으니.

관리자 권한으로 powerShell을 실행시켜 Get-ExecutionPolicy를 확인해보자

글쓴이처럼 RemoteSigned가 아닌 Restricted가 나타난다면

Set-ExecutionPolicy RemoteSigned 를 실행시켜 바꿔주면 된다 !

Get-ExecutionPolicy
Set-ExecutionPolicy RemoteSigned

( 참조 : https://docs.vmware.com/en/vRealize-Automation/7.6/com.vmware.vra.iaas.hp.doc/GUID-9670AFC5-76B8-4321-822A-BCE05800DB5B.html )

---

위의 문제를 해결하고 나서 다시 아래의 코드를 실행시켜 준다.

npm install -g create-react-app
npx create-react-app my-app

 

두 개의 코드가 정상적으로 실행이 되었다면,

하위 폴더에 my-app 디렉토리가 생성된 것을 확인 할 수 있다.

 

해당 디렉토리로 이동하여 npm start를 해보자.

cd my-app
npm start

 

위의 코드를 실행시키면.

드디어 보고싶었던 리액트 화면이 나타난다.