[React 기초] React 개발 환경

React 

:페이스북 인터페이스를 만들기 위한 자바스크립트 UI라이브러리

:컴포넌트 단위로 ui구성을 도와주는 라이브러리

 

-Jquery vs React : 제이쿼리의 경우 변경된 내용이 있을 때 마다 전체 브라우저를 매번 새롭게 반영하지만 리액트는 변화를 가상 돔에 기록하고 모은 후에 모든 변경이 완료되면 한번에 반영한다.

 

 

Node.js 설치하기 / npm & npx

 

◾Node.js : 브라우저 외부에서 JS를 실행할 수 있는 환경

:리액트 설치시 필요한 이유

리액트 앱은 웹 브라우저에서 실행되는 코드여서 node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 주요 도구들이 node.js를 사용하기 때문에 필요함. 이 때 사용하는 개발 도구는 바벨, 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때마다 웹 브라우저를 리로딩하는 등 여러기능을 지닌 웹팩 등이 있음.

 

◾npm : 노드 패키지를 관리해주는 매니저. node.js로 만들어진 프로그램을 쉽게 설치해줌.

◾npx: 임시로 실행할 때 사용 후 패키지나 프로그램을 지움. 컴퓨터 공간을 낭비하지 않고

        실행할 때마다 새로 다운로드 하므로 최신 상태를 사용가능하다는 장점이 있다.

        글로벌에 깔려있지 않지만 글로벌에 있는 것 처럼 실행하게 도와준다.

 

https://nodejs.org/ko/

Node.js

 

위의 사이트에서 LTS(안정화된 버전)으로 설치

설치 잘 되었는지 확인하려면 cmd 에서 

npm -v

입력 후 버전정보가 나오면 잘 설치된 상태!

 

Create React App 설치하기

-create react app: 리액트의 대표적인 보일러 플레이트(어느정도 환경이 구성된 프로젝트) 

◾npm으로 설치하는 방법

vs코드 터미널에

npm install -g create-react-app 

입력

잘 설치 되었는지 확인하려면 

create-react-app -V 입력 후 버전 정보나오면 성공.

 

💡-g는 global의 약자로 현재 컴퓨터 어디에서는 create react app을 실행할 수 있게 설치하는 옵션.

💡권한 문제로 설치 에러가 나면 sudo npm install -g creat-react-app 입력 후 설치

 

 

◾Npx로 설치하는 방법:

npx create-react-app my-app 입력 후 실행.

 

 

◾설치 후 작업할 폴더 생성 후 cmd에 cd입력한 다음 폴더를 드래그 해서 경로 입력.

  create-react-app . 입력 후 엔터!

 

◾리액트 앱을 브라우저를 통해서 확인하는 방법 : 터미널에 npm(npx) run start 입력!

 앱 실행을 멈추려면 ctrl + c 입력 / 실행 종료 후에는 새로고침해도 앱실행이 되지 않음.

 

 ◾SPA, Babel, Webpack 이란 ?

-하나의 html, js 를 가진 어플리케이션

-babel: 자바스크립트 코드를 변환해주는 트랜스파일러 (ex. es6 → es5 / jsx → js)

-webpack: 자바스크립트 파일을 압축하거나 난독화하는등을 도와주는 파일단위를 다루는 모듈번들러

 

 ◾ES Lint, Prettier 구성

- eslint: 코드 규칙을 정하고 규칙에 어긋난 코드를 검사해줌,프로젝트 코드의 균일화 (.eslintrc 라는 설정파일을 추가해주어야한다)

- prettier: 코드 포맷 규칙을 정한다. ES Lint 와 함께 사용하면 규칙에 맞게 이쁘게 코드를 포맷팅 할 수 있다. (.prettierc 라는 설정파일을 추가해주어야한다.)