[React] 개발환경

배우기 전에 앞서 중요한 건 개발환경을 만드는 것이다.

우선적으로 VSCode 와 Node.js 최신 버전으로 설치

create-react-app (리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구)을 설치하기 위해서.
NPM(Node Package Manager)을 통해 설치하는데 이것이 nodejs에 포함
npm : 패키지(모듈)의 설치 및 관리를 쉽게 하기 위해 도와주는 매니저(관리 도구)

 

작업을 하고자 하는 폴더를 대상으로 VSCode 실행 후, 터미널에서

npx create-react-app 프로젝트명 적으면 리액트 앱이 생성

npx : npm 5.2.0 버전부터 추가된 도구로, npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI 도구로 실행에 초점이 맞추어져 있다

 

생성된 프로젝트 내에서 npm start 명령어를 입력하게되면,

기본적인 환경설정이 끝이난다.

실행된 React

 

여러가지 파일들이 있는데, 

node_modules 폴더 : 라이브러리를 모아놓은 폴더

public 폴더 : static 파일 보관

   ┖ index.html : app.js을 넣어서 구현

src 폴더 : 소스 코드 보관

   ┖ app.js : 메인페이지에 들어갈 HTML 코드

package.json : 설치한 라이브러리 목록

 

---

React란,

 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리

“컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는 역할

싱글 페이지 애플리케이션의 UI를 생성하는데 집중한 라이브러리로 HTML을 포함하는 JSX이라는 간단한 문법과 단방향 데이터 바인딩을 사용하고 Virtual DOM(가상 돔)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화

Virtual DOM : 웹 애플리케이션의 성능을 극대화
React에 대한 자세한 설명

react VSCode에서 사용, 디버깅 등

 

React 하기 전 알아두면 좋을 6가지 : 해당 사이트