About React

임채현·2022년 1월 10일
0

Intro

Web Application의 발전

웹의 발전: 3세대 웹(프론트와 백의 분리)
복잡성 증가 -> 기술발전
웹과 사용자들이 상호작용하면서 사용자들이 원하는 기능은 점점 더 많아지고 프론트엔드 개발자들은 새로운 기술의 필요성을 느낀다.
그렇게 만들어진 것이 프론트엔드 프레임워크(Angular, vue 등)
DOM/eventj query로 발전하였지만 DOM구조에서 벗어나지 못하는 한계점을 지닌다.

Library & Framework

Angular, vue는 framework이고 react는 library이다.

  • Angular
    • 2010년 google에서 개발한 프레임워크로 TypeScript기반이다.
    • Frontend App 개발이 가능하며 프레임워크의 특징중 하나인 매우 다양한 기능이 내장되어 있다.
    • 무겁고 배우기 어렵다는 단점이 있다.
  • Vue
    • 2014년 Evan You라는 개인이 개발한 프레임워크
    • 코드가 깔끔하고 배우기 쉬워 러닝커프가 짧다.
    • 빠르게 성장하는 중
  • React
    • 지속적인 데이터 변화속 대규모 어플리케이션을 구축하자는 목표하에 Facebook에서 개발한 라이브러리
    • MVC(Model-View-Controller) Architecture로 오로지 View(화면에 보여지는 것)만을 담당한다.
      • 따라서 third-party 라이브러리와 함께 사용된다.

프레임워크와 라이브러리의 차이

프레임워크와 라이브러리의 차이에 대한 예시를 들자면 프레임워크는 마스터셰프키친 주방이고 라이브러리는 도구라고 생각하면 된다.
마스터셰프키친 주방에서는 필요한 도구들과 환경들을 모두 제공해주지만 우리가 임의로 원하는 도구들로 바꿀 수 없다. 거기서 제공하는 것에 한하여 사용을 하여야한다.
하지만 라이브러리와 같은 도구만 가지고 있다면 도구는 쉽게 바꿀 수 있다. 그리고 다른 도구들을 원하는 것으로 가지고 올 수도 있다. 하지만 마스터셰프키친처럼 방대한 환경을 제공하지는 못한다.

React

React의 정의

  • 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
    • 사용자와 기계(웹)이 의사소통 할 수 있게 해주는 장치를 UI라 한다. (의사소통: 입력과 출력)
  • React의 가장 큰 이점 중 하나는 UI를 자동으로 업데이트해준다는 것
  • 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트함
  • 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술
    • dom 조작은 크게 layout(화면의 배치를 잡는 과정)과 paint(화면의 색을 칠하는 과정)으로 나뉜다.
    • React는 실제 DOM을 매번 조작하는 것은 비효율적이기 때문에 가상의 DOM을 구축하여 변화가 필요할 때마다 필요한 부분을 모두 수정하고 실제 DOM에는 한번의 수정을 가하는 방식으로 최적화를 구현한다.

선언전(What) vs 절차적(how)

절차적은 어떻게 하는것인지를 설명한다면 선언적은 원하는 결과의 그림을 보여주는것
예를 들면 로봇에게 청소를 시키는 경우를 생각해보자

  • 절차적으로 프로그래밍을 하면 다음과 같다.
    1. 쓰레기를 발견하라
    2. 주워라
    3. 쓰레기통에 버려라
    4. 바닥을 쓸어라
    5. 걸레로 바닥을 닦아라
  • 선언적으로 프로그래밍을 하는 경우는
    1. 청소가 완벽히 된 방의 모습을 보여주고 로봇에게 전달한다.
      절차는 과정에 대해 중점을 둔 반면 선언은 결과에 중점을 둔다.
      우리가 원하는 모습의 결과를 React에게 전달해준다면 React는 알아서 자기의 방식으로 결과를 만들어준다.
      이렇게 개발과정에서도 React를 사용할경우 웹이 어떻게 생겼는지에 대해서만 생각을 해주면 되기 때문에 절차적 방식보다 선언적 방식이 선호된다.
      유지보수성도 선언적 방식이 훨씬 좋다.

Node.js, npm, CRA

Node.js

노드는 자바스크립트 실행 환경이다.
자바스크립트는 텍스트의 형태를 띄는데 이 텍스트를 컴퓨터가 해석하고 실행할 수 있는 도구를 자바스크립트 실행환경이라 한다. 대표적인 자바스크립트 실행환경은 우리가 잘 아는 브라우저이다.
하지만 우리는 브라우저가 아닌 다른곳에서도 실행하고 싶기 때문에 Node를 사용한다.
Node는 자바스크립트의 탈웹이라고도 칭할 수 있다.
우리가 프로젝트를 만들때는 웹브라우저에서 만드는것이 아닌 컴퓨터에서 만들어서 깃에 푸쉬하거는 과정을 거치기 때문에 node가 필요하다!
우리는 react를 실행할 환경인 CRA의 다양한 패키지들이 노드를 기반으로 하고 있기 때문에 node를 설치하여야한다.

npm

Node 기반의 패키지를 사용하기 위해서는 npm(node package manager)이라는 패키지 도구가 필요하다.
package는 노드로 실행할 수 있는 하나하나의 프로그램(react, babel, webpack)등이 있다.
Node는 스마트폰, npm은 웹스토어라고 할 수 있다.

CRA

CRA는 리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구(toolchain)이다.

쉽게 비유하자면 듀토리얼 없이 본겜을 시작하는 경우라고 생각하면 된다.

처음 시작하는 단계에서는 직접 개발환경을 구축하기가 매우 힘들기 때문에 리액트 팀에서 만들어준 개발환경이다.
CRA에는 바벨이나 웹팩과 같은 리액트 앱 실행에 필요한 다양한 패키지가 포함되어 있으며 ES6 문법, CSS후처리등 필수적인 개발환경도 구축해준다.

CRA의 구성

1) node.module

  • CRA를 구축하는 개발환경이 담긴 패키지 소스가 존재하는 코드
  • 이 폴더가 CRA의 뇌라고도 할 수 있다.

2) package.json

  • CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
  • 모든 프로젝트마다 package.json 하나씩 존재한다.
  • dependencies
    • 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
    • 실제 코드는 node.modules폴더에 존재

package.json의 핵심 중 하나는 git.ignore과 연계하여 사용할 수 있다는 것!

  • node.modules 폴더는 너무 무겁기 때문에 local에서는 저장하는게 당연할 수 있어도 github와 같은 곳에 올릴 때 용량을 불필요하게 너무 차지한다.
  • 따라서 우리는 git에 푸쉬할 떄 git.ignore을 통해 node.modules와 같은 무거운 파일을 제외해준다.
  • package.json에 정보만 담아 push하고 다른 사람이 pull하면 npm install을 통해 package.json의 기록된 정보를 토대로 패키지를 설치할 수 있다.

3) git.ignore

  • git.ignore을 통해 git에 올리고 싶지 않은 폴더와 파일을 관리할 수 있다.
  • 주로 node.modules와 같은 용량이 큰 폴더나 개인정보나 기업비밀과 같은 암호성(유출되면 큰일나는)이 높은 폴더들을 포함한다.
profile
열심히 살고 싶은 임채현입니다.

0개의 댓글