React (리액트)에 대해서

 

Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다.

 

---

 

리액트의 정체

 

• 프론트엔드의 프레임워크 중 하나
• 현재 주목받는 프레임워크 중 프레임워크 다운로드 현황 그래프에서 가장 우세한 프레임워크
• 페이스북을 개발할 때 사용한 기술이며, 공개 소프트웨어
• 가장 큰 특징은 "화면 출력에 특화된 프레임워크"

 

---

리액트의 장점

 

1. 컴포넌트로 화면 구성을 효율적으로 할 수 있음.

1. 컴포넌트 (component) 라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성
2. 컴포넌트를 구성하는 코드는 조립하기 쉬운 형태를 가지고 있기 때문에 원하는 화면을 쉽게 만들 수 있음
"컴포넌트를 만드는 과정은 레고 블록을 조립한다"라고 이해하면 쉬움
3. 가상 화면 기술을 도입하여 화면 출력 속도를 높이고 코드의 복잡성도 줄임
4. 커뮤니티가 활발해 단점이 금방 해결된다

 

2. 게임 원진 원리를 도입하여 화면 출력 속도가 빠르다.

자바스크립트의 라이브러리 예시

- 자바스크립트에는 제이쿼리와 핸들바 라는 라이브러리가 있음
> 이 라이브러리는 아주 간결한 코드로 화면을 구성할 수 있지만, 치명적인 단점을 갖고 있음
> 화면이 커질수록 화면을 그리는 시간도 길어지는 단점 보유

( 화면의 일부분만 수정되어도 화면 전체를 다시 그린다는 것 )

페이스북에서 이를 예제로 발생한 오류

- 페이스북에는 알림 숫자가 일치하지 않는 고질적인 오류가 있었음
> 화면 전체를 다시 출력하지 않기 위해 알림 숫자를 표시하는 부분만 수정하다 보니 발생한 문제

게임 원진 원리를 도입한 이유

- 대부분의 게임 엔진은 다음 장면에 필요한 화면을 미리 그려두는 방법으로 화면을 빠르게 전환
> 이 방법을 리액트에 도입함

- 다음에 나타날 화면의 일부 (노드) 를 미리 그려놓고 변경된 화면의 일부 (노드) 만 수정하는 " 가상 화면 (Virtual DOM)" 기술을 만듬

 

---

 

노드 패키지 매니저 (npm)

 

노드 패키지 매니저 (npm)란?

노드 패키지 매니저 (npm) 은 https://www.npmjs.com 에서 필요한 라이브러리를 내려받아 설치하고 삭제하는 등의 관리를 해주는 프로그램

 

노드 패키지 매니저 (npm) 동작 방식

1. 실제로 node_modules 폴더에 라이브러리를 내려받아 저장함
2. package.json 이라는 파일에 설치 된 라이브러리 정보를 적어 저장함
> 실제 라이브러리와 라이브러리 명세 파일을 따로 관리하는 것

라이브러리 명세를 따로 관리하는 이유?

1. node_modules 에 저장되는 라이브러리의 용량이 굉장히 크기 때문에
> 개발자 A가 개발자 B에게 프로젝트를 공유할 때 용량이 큰 라이브러리까지 전송할 필요가 없음
> 라이브러리 명세와 핵심 코드만 전달하면 됨
> 개발자 B 는 package.json 의 목록을 이용하여 손쉽게 라이브러리를 내려 받을 수 있음.

 

---

 

웹팩 (Web Pack)

 

자세한 설명은 아래 글을 참고

https://qowbtm45.tistory.com/36

개발환경 설정 - Webpack

 

웹팩이란

- 프로젝트에 사용 된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구
- js, png, jpg 등과 같은 파일을 적절한 크기로 자르거나 묶어주는 역할도 함

 

(웹팩의 작동구조) 출처 : https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html

 

웹팩을 사용하는 이유

1. 프레임워크가 .js , .css, .jpg 와 같은 기존 웹 문서 파일을 사용하지 않기 때문에
> 트위터 부트스트랩 템플릿은 웹 문서 스타일을 .css 가 아닌 .sass 파일로 작성함
> 웹 브라우저가 .sass 파일을 해석하지 못하므로 중간에 누군가 이 파일을 해석해줘야함

2. 불필요한 파일을 제외하거나 압축하여 프로젝트의 용량을 줄여줌
3. 간단한 노드 기반의 웹 서버를 구동하기도 함

( 그런 파일을 해석해주는 역할을 하는 도구가 웹 팩 )