리액트 개념, NPM, 웹팩, 개발 환경 구축

211118 - 리액트 개념, NPM, 웹팩, 개발 환경 구축

---

리액트의 개념과 장점

화면 출력에 특화된 프레임워크임.

• 컴포넌트(독립적인 코드 블록)를 조합하여 화면을 빠르게 구성할 수 있다.
• 화면 출력 속도가 빠르다.(게임 엔진처럼?)
  • 자바스크립트의 제이쿼리, 핸들바 라이브러리를 생각해보자. 얘네는 화면 일부를 수정하면 화면 전체를 다시 그린다.(트리 구조로 생각했을때 부모가 수정되면 자식 노드도 수정된다는 것이다. 부모 노드만 수정해야함에도!)
    • 페이스북 페이지에서 화면 전체를 수정하지 않기 위해 알림 부분만 수정하려다보니(전체 새로고침을 피하려다보니) 알림 숫자가 일치하지 않는 기묘한 문제가 있었다고 한다. 이 문제를 해결하기 위해 '게임 엔진 원리'를 도입하게 된다.
    • 게임 엔진은 다음 장면에 필요한 화면을 미리 그려둔다. 이처럼 다음 화면에 나타날 화면의 일부 노드를 미리 그려 놓고, 변경될 화면의 일부 노드만 수정하는 가상 화면Virtual Dom기줄을 만들었다. https://github.com/FEDevelopers/tech.description/wiki/가상-돔과-돔의-차이점

---

NPM으로 관리하는 자바스크립트 라이브러리

개발자끼리 프로젝트를 공유할 때 라이브러리를 전송하지 않고 설치될 라이브러리 정보가 저장된 package.json 과 핵심 코드만을 전달하면 된다. 실제 라이브버리는 node_modules 에 저장된다. npm을 개선한 yarn을 많이 사용하기도 한다.(동작 방식은 비슷하다.)

---

웹팩

프레임워크는 .js, .css 같은 기존 웹 문서 파일을 사용하지 않는다. 예를 들어 트위터 부트스트랩 템플릿은 웹 문서 스타일을 .css 가 아닌 .sass 파일로 작성하는데, 웹 브라우저는 이 파일을 해석하지 못하므로 웹팩이 그 역할을 해줘야 한다.

웹팩은 프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환해준다.

웹팩은 js, png, jpg같은 파일을 자르거나 묶어주는 역할도 한다. 그래서 프로젝트 용량을 줄여준다.

웹팩은 간단한 노드 기반의 웹 서버를 구동하기도 한다.

---

참고서적

Do it 리액트 프로그래밍 정석