[TIL] 3.17 : React 복습 , Tools

HYl·2022년 3월 17일
0

TIL

목록 보기
2/3

React

  • User Interface를 만들 수 있는 라이브러리이다.
    즉, 웹 UI를 만드는 라이브러리이다.
    한마디로 정의하면 컴포넌트들.
  • 컴포넌트 : 서로 독립적이고, 잘 고립되어져 있고 재사용 가능
  • 사용자가 웹 페이지를 보기 위해서는 우리가 작성한 웹 페이지가 DOM(Document Object Model) Tree로 변환 되는데, 리액트도 DOM Tree와 마찬가지로 Tree 형식으로 만들어져 있다.
    • 리액트만의 Virtual DOM Tree가 있다. 가상의 DOM Tree로 리액트의 컴포넌트들이 메모리상에 보관 되어져 있다.
    • 리액트에 모든 구조들이 DOM Tree에 업데이트 되는 것이 아니라, 컴포넌트에 변동 사항이 생겨서 자식 컴포넌트에 render 함수가 호출이 되면 리액트는 이전의 Virtual DOM Tree와 비교해서 실질적으로 어떤 부분이 업데이트 되어야 하는지 계산을 한 다음 필요한 부분만 DOM Tree에 업데이트 한다.
    • 따라서, render 함수가 호출이 많이 되어도, 실질적으로 보여지는 데이터가 변동되지 않으면 DOM Tree에 전혀 영향이 없다. 성능을 걱정하지 않아도 되는 이유이다.
    • 사용자가 부드럽게 웹 어플레케이션을 이용하기 위해서는 60 frames per seconds (60fps)을 유지해야 하는 데, 즉 1초 안에 60개의 프레임이 업데이트 될 수 있도록 해야 되는데 리액트는 기본적으로 이것을 보장한다.
    • 컴포넌트가 독립적이어서 유닛 테스트 하기에 편리하다.

Tools

Node.js

  • 자바스크립트를 실행할 수 있는 환경
  • 어느 곳에서나 Js로 프로그래밍이 가능하게 하는 프레임워크
  • 백엔드 서버 만들 때, 서버사이드 렌더링 할 때, 등등 이용한다.
  • 브라우저는 자바스크립트 어플리케이션이 작동하는 런타임 환경인데, 예전에는 브라우저가 유일한 Js 런타임 환경이었다면 요즘엔 Node.js를 이용해서 브라우저 밖에서 (즉, 커맨트 툴에서) js 코드를 작동할 수 있다.

Npm

  • 앱 매니저
  • 패키지들을 쉽게 관리할 수 있게 도와주는 것
    명령어 한 번에, 라이브러리 설치, 삭제 및 버전 업데이트 가능
  • npm 이용 시, package.json 파일 생성 되는 데, 이 파일 안에 외부라이브러리와 버전 정보가 들어있다.
  • 설치 및 업데이트만 가능, 라이브러리 실행할 수는 없다.

Npx

  • npm과는 달리, 원하는 라이브러리를 실행할 수 있게 도와주는 것

Yarn

  • npm의 성능 개선 및 보안 문제를 위하여 페이스북사에서 새로운 패키지 매니저를 만들었다.
  • npm 위에서 동작하는 것이어서 npm과 호환 가능하게 사용할 수 있다.
profile
꾸준히 새로운 것을 알아가는 것을 좋아합니다.

0개의 댓글