tech.junha.kr

[React 입문]: 쓰는 이유, 특징, CRA, CRA구축

1. React is Javascript UI Library

  • 웹 앱은 app처럼 만들어 놓은 웹 페이지를 말한다.
  • 모바일앱으로 발행이 용이하며, 뛰어난 UX를 자랑한다. (버벅거림이 없고 반응속도 빠름)
  • 이는 비즈니스적 강점, 구매전환율이 높아지는 효과를 불러일으킨다.
  • 컴포넌트를 조합하여 페이지를 구축하기 때문에 유지보수가 편리해진다.

2. 기술적인 세 가지 이유​​

  1. ?: JS언어인데 함수 안에 HTML코드를 작성할 수 있다.(JSX)

  2. ?: 데이터바인딩이 수월하다.

  3. ?: bolierplate(code)과정이 생략된다.

=> 프로젝트를 진행할 때 마다 써줘야 하는 장황한 코드와 셋팅이 줄어, 프로젝트 시작이 빠르다.

  1. ?: 컴포넌트별로 코드를 나눌 수 있다. 사용자 정의 태그를 만들어 방대한 코드를 간결하게 표현할수 있다.

3. CRA

방대한 생태계

React의 특징은 개발에 필요한 모듈의 모든 것을 제공하지 않고, 서드파티(Third party) 라이브러리에 의존한다. 다른 프레임워크에 비해 방대한 생태계가 존재한다. 사용자는 자유롭게 개발에 필요한 모듈을 결정하고 선택할 수 있다는 특징이 있다. 커다란 에코 시스템은 React의 장점으로 보이지만 사용자에게 책임이라는 부담을 지우기도 한다. 따라서 Angular CLI와 마찬가지로 초심자의 빠른 개발환경 구축을 위해서, Create React App이라는 툴체인을 제공하여 진입 장벽을 낮추고 있다. 거대한 생태계에 안에서 필요한 상황에 맞춰서 사용할 수 있는 유연성의 특징을 갖고 있는 리엑트가 시대의 흐름에 맞춰 개발하는 언어로 적합하다고 평가되기도 한다.

*툴체인: 개발 목표에 따라 필요한 여러가지 개발 환경 및 도구를 모아서 한 번에 제공하는 도구

*React의 툴체인: CRA, Nest.js, Gatsby 등

Trans-compile

CRA는 프로젝트를 배포 시 해야 하는 번들링과 Trans-compile 등을 기본적으로 제공한다.

4. react 설치

npm install -g create-react-app
create-react-app .

또는

npx create-react-app .  
npx create-react-app ProjectNameHere
npx create-react-native ProjectNameHere

npx create-react-app --help
npx create-react-app --version

$ npm start

파일&폴더 설명

  • public/index.html: 실제 메인페이지
  • node_modules: 라이브러리 모은 폴더
  • public: static 파일 보관함, 압축되지 않음
  • src: 소스코드 보관함
  • package.json: 설치한 라이브러리 목록

5. create react app 오류

"npmERR! cb.apply is not a function"

node를 새롭게 설치한 후, npm install 명령어를 날리는 순간 에러가 발생하였다.

$ npm install
npm WARN npm npm does not support Node.js v14.15.4
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\minkyu\AppData\Roaming\npm-cache_logs\2021-01-21T14_36_29_321Z-debug.log

해결법

  1. C:\Users\NAME\AppData\Roaming 디렉토리로 이동 후 npm 디렉토리와 npm-cache 디렉토리를 삭제해준다.

  2. npm cache clean --force 명령어로 cache를 삭제해준다.

* 스펠링 주의: import React from "React"; => import React from "re****act";

6. (추가) 바닐라 vs 리액트

바닐라 자바스크립트는 자바스크립트 프레임워크보다 성능이 훨씬 더 빠르다. 단, 올바르게 작성했다는 것을 전제로 한다. 규모가 거대한 프로젝트에서는 구조를 명확히 짜고, 방대한 코드를 작성하기 어렵기 때문에, 바닐라 자바스크립트로 모든 코드를 올바르게 작성하기 힘들다. 따라서 프레임워크로 작성하는 것이 효율적이다. 그리고 최대 몇백 ms 차이로 성능 차이가 나기 때문에 사용자 경험은 큰 차이가 없다. 또한 Server-side-rendering, caching, lazy-loading & compression등의 기술은 오히려 자바스크립트의 기능을 최대한 활용하기 때문에, 오랜 시간에 걸쳐 섬세하게 작성한 바닐라 자바스크립트 코드가 아니라면, 오히려 리액트로 작성한 코드가 퍼포먼스가 더 뛰어나다. 하지만 바닐라 자바스크립트도 능숙히 작성할 줄 안다면, 규모가 작은 프로젝트에도 굳이 리액트를 고집해서 쓸 필요는 없다.