04. Node.js 설치
Node.js란?
리액트 프로젝트를 만들기 위해서는 Node.js와 npm을 먼저 설치해야 함
Node.js를 설치하면 자동으로 npm도 같이 설치됨
Node.js란 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산 할 수 있게 해줌
React 설치 시 Node.js가 필요한 이유
리액트 앱은 웹 브라우저에서 실행되는 코드여서 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 필요
이 때 필요한 개발 도구에는 바벨, 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때 마다 웹 브라우저를 리로딩하는 등 여러기능을 지닌 웹팩 등이 있음
05. 브라우저가 그려지는 원리 및 가상돔
리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것
웹 페이지 빌드 과정 (Critical Rendering Path, CRP)
브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있음
웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정
- DOM tree 생성: 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 결정함
- Render tree 생성: 브라우저가 DOM과 CSSDOM을 결합하는 단계이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력. 즉, 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함
- Layout (reflow): 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계
- Paint: 실제 화면에 그리는 단계
❗️문제점
어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 Render Tree가 재생성 됨. 즉, 모든 요소들의 스타일을 다시 계산하고 Layout, Repaint 과정을 다시 거쳐야 함
인터렉션이 적은 웹이면 괜찮지만 만약 인터렉션이 많다면?
불필요하게 DOM을 조작하는 비용이 너무 크게됨
-> 이러한 문제로 인해 나오게 된 것이 가상 돔, Virtual Dom
가상 돔 Virtual Dom이란?
가상 돔이란 실제 DOM을 메모리에 복사해둔 것으로 생각하면 됨
가상돔의 작동 원리
데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용 시켜줌. 바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜 주는 것을 재조정(reconfiliation)이라고 부름
가상돔의 장점
만약 한번에 많은 요소가 변하였다고 하더라도 한 번에 묶어서 실제 돔 수정은 한 번만 처리하므로 돔을 조작하는 비용이 줄어들게 됨
06. Create React App을 이용해서 리액트 설치하기
요즘에는 'npx create-react-app <폴더이름>'이라는 명령어로 간단하게 리액트를 설치할 수 있음
이전에 래액트 앱을 설치하던 방법
이전에는 Webpack이나 Babel 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었음
Webpack이란?
웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리
Webpack의 장점
- 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있음
- 웹팩이 파일을 압축해주므로 개발 단계에서 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉬움
Babel이란?
최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜주는 라이브러리
create-react-app
create-react-app을 사용하면 webpack이나 babel을 따로 설치하고 설정할 필요없이 자동으로 설정이 되므로 간단하게 리액트를 설치할 수 있음
npx란?
npx는 노드 패키지 실행을 도와주는 도구로, create-react-app 이란 npm 레지스트리에 있는 패키지를 react-app 폴더에서 실행해서 리액트를 설치해 주는 것
npm 레지스트리
다양한 라이브러리들이 저장되어 있는 곳, create-react-app 패키지도 포함되어 있음
npx vs npm
npx는 단지 실행을 도와주는 도구, npm은 실제로 로컬에 설치를 해주는 도구
08. Create React App으로 설치 된 리액트 기본 구조 살펴보기
이름이 수정되면 안되는 파일들
- public/index.html -> 페이지 템플릿
- src/index.js -> 자바스크립트 시작점
public 폴더 내부의 파일만 public/index.html에서 사용할 수 있음
src 폴더 내부에 JS 파일과 CSS 파일들을 넣으면 된다
webpack은 src 폴더 내에 있는 파일들만 처리하기 때문에 이 폴더 외부에 있는 파일들은 webpack에 의해 처리되지 않음
index.html
index.html은 관습적으로 사용되어온 것으로, 방문자가 사이트를 요청할 때 다른 페이지가 지정되지 않은 경우 웹 사이트에 표시될 기본 페이지에 사용되는 가장 일반적인 이름
즉, index.html은 웹 사이트의 홈페이지에 사용된 이름이다
www.abc.com 이라고 된 것은 사실 www.abc.com/index.html 이다
src 폴더
대부분의 리액트 소스 코드들은 이곳에 작성
Package.json 파일
해당 프로젝트에 대한 정보들이 들어있음. 포로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있음
앱을 시작할 때 사용할 스크립트, 앱을 빌드할때, 테스트할 때 사용할 스크립트 등이 명시되어 있음
프로젝트에서 자주 실행해야하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } // -> npm start 라고 하면 앱이 시작고 npm build라고 하면 앱이 빌드 됨
소스 코드를 입력할 때 문법이나 코드 포멧을 체크해주는 것에 대한 설정을 명시함
"eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }
