[React] React 시작하기

Facebook 이 만든 자바스크립트 라이브러리로, 사용자 인터페이스를 만들 때 사용한다.

 

• 왜? React인가?
• React 작업환경 구성 
  • React 테스트 환경 구성 중 [Yarn start not found] 에러 발생 
  • VSCode 터미널 권한 정책 문제 

 

왜? React인가?

기존에는 Javascript를 사용하여 DOM을 변형하는 방식으로 사용자 인터페이스를 구현했다.

허나 이렇게 DOM을 직접적으로 건드리면 코드가 복잡해진다.

 

그래서 Ember, Backbone, AngularJS의 경우엔 

자바스크립트의 특정 값이 바뀌면 특정 DOM의 값이 변경되어 업데이트하는 방법으로 간소화시켰다.

 

React의 경우에는 상태가 바뀌었을 때 모든 것을 새로 만들어서 보여준다.

가상의 DOM(Virtual DOM)을 통해서 실제 DOM과 가상의 DOM을 비교해서 차이점을 감지한 후 실제 DOM에 반영시킨다.

이를 통하여, 필요한 변화만 반영하므로 어떻게 업데이트를 할 것인가 고민하지 않아 속도가 빨라진다.

 

---

React 작업환경 구성

1. nodejs 

2. yarn

3. vs code 

4. git bash 

 

nodejs 

nodejs는 브라우저 환경이 아니어도 자바스크립트를 사용할 수 있게 도와주는 자바스크립트 런타임이다.

(webpack, babel과 같은 도구들이 자바스크립트 런타임 노드JS 기반으로 만들어져 있다.)

 

yarn 

자바스크립트 패키징 매니저 도구로, npm와 같은 패키지 설치 모듈이며, npm보다 속도면에서 빠르다.

* yarn 오류 시에 manifest 관련 에러 문구가 뜨면 package.json 파일을 확인하면 된다. 

 

 

nodejs, yarn 설치 후 터미널에서 create-react-app project-name 명령어를 입력하여 리액트 앱을 설치한다.

npx create-react-app my-app

 

---

React 테스트 환경 구성 중 [Yarn start not found] 에러 발생

npx create-react-app 으로 리액트 앱을 설치하고 yarn start 를 했더니 yarn start not found 에러가 발생했다.

기존에 create-react-app을 전역으로 설치한 것이 문제였다. 

npm uninstall -g create-react-app npx 

항상 최신 버전을 사용 하도록 글로벌 패키지를 제거한 후 다시 yarn 을 시작했더니 문제가 해결 되었다. 

npm uninstall -g create-react-app npx

npx create-react-app my-app

cd my-app

yarn start

---

위의 방법도 있고, npm으로 설치하는 방법도 있다.

npm으로 설치 시 위의 설치 코드보다 설치 시간이 다소 걸렸다. 

npm itit react-app my-app

npm start

 

---

VSCode 터미널 권한 정책 문제 

nodejs, yarn 설치 후 VSCode 에서 yarn 을 실행하려고 하는데, 스크립트가 인식되지 않는다고 오류가 났다.

[], PSSecurityException

 

터미널의 실행 정책을 변경하여 해결하였다.

// 현재 정책 확인 명령어 
C:\User\executionpolicy
 
Restricted   : 스크립트를 실행할 수 없다.
Unrestricted : 서명되지 않은 스크립트를 실핼할 수 있다.
 
// 정책 변경 명령어 
C:\User\set-executionpolicy    Unrestricted