[React] React 시작하기 & node 다운받기

 

 

1. 기본지식

 

1) node.js 

자바스크립트는 브라우저에서만 실행되는 언어였다. 점점 자바스크립트가 널리 사용되면서 '웹 개발 말고 다른 곳에서도 사용할 수 있지 않을까'라는 이야기가 나오게 되었다. 그래서 브라우저에서 뿐만 아니라 자체적으로 프로그램을 만들어서 실행할 수 있도록 나온 기술이 node.js이다. node.js는 서버 프로그램을 개발할 때 많이 사용된다.

 

node.js는 화면을 그려주는 역할이 없기 때문에 웹 빌드 도구 (Babel, webpack)을 이용해서 브라우저가 이해할 수 있는 언어로 바꾸주는 작업이 필수적으로 들어간다.

 

 

2) npm

node package manager의 약자로 node 프로젝트의 패키지(외부 라이브러리)를 관리해주는 저장소 역할을 한다.

브라우저의 경우 자바스크립트를 불러올 때 <script>를 이용해서 외부 자바스크립트 파일을 그 때 그 때 다운 받는다.

하지만 node의 경우 외부 자바스크립트 파일을 npm이 맡아서 관해 npm에서 외부 라이브러리를 한 번에 다 저장해놓은 후 관리해준다.

 

 

2. 다운받기

 

1) node.js 다운받기

Download | Node.js

 

다운 완료

node.js를 다운받으면 npm이 같이 다운된다.

 

 

3. React 시작하기

 

1) create-react-app 설치

npm install -g create-react-app

전체 외부 라이브러리를 관장하는 npm에게 create-react-app을 다운받게 명령한다.

-g의 뜻은 다른 프로젝트들에 공통적으로 쓰이는 패키지를 전역(global)으로 다운 받아서 관리할 수 있다는 의미다.

 

node.js는 화면을 그려주는 역할이 없기 때문에 웹 빌드 도구 (더 어려운 Babel, webpack)을 이용한다고 했는데, create-react-app을 사용하면 더욱 쉽게 프로젝트를 만들 수 있다.

 

 

2) react-app 만들기

create-react-app .

create-react-app은 react-app을 만들어라! 라는 명령어다.

.은 현재 위치라는 뜻이다.

즉, 현재 위치에 react-app을 만들어라! 라는 뜻이다.

 

react-app 설치 완료

 

npx create-react-app my-app

혹은 npx(실행까지) 명령어를 통해 만들 수도 있다.

 

 

3) react-app 프로젝트 실행

npm start

react-app을 실행시켜서 웹에다가 띄운다.

 

뽀잉뽀잉

localhost:3000으로 접속하게 되고, localhost는 현재 내가 사용하고 있는 컴퓨터를 의미한다.

 

 

4. React 특징

 

1. 컴포넌트 (Component)

UI요소들을 잘게 쪼개서 컴포넌트로 만들고 페이지에서 합친다.

컴포넌트를 나눠서 개발하면 다른 곳에서 추가적으로 해당 컴포넌트가 필요할 때 재활용이 가능하다.

 

 

2. 가상 DOM

DOM은 브라우저에서 최종적으로 화면에 그려주는 HTML 결과물을 의미한다.

DOM을 조작하기 위해 사용되는 언어가 자바스크립트이다. 조금 더 편하게 jQuery를 이용해서 조작할 수도 있다.

DOM 조작이 잦고 복잡한 상호작용이 있는 경우에는 jQuery만으로는 한계가 있기 때문에 가상 DOM을 도입한다.

 

기존 DOM은 잦은 변화들을 그 때 그 때 반영해 화면을 자주 변화시켰다.

하지만 가상 DOM은 잦은 변화들을 모두 가상으로 계산하고 최종적으로 1번만 DOM을 변화시킨다.

 

DOM에 변화생기면, 렌더트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산됩니다) 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복되는거죠.

복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생해요. 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만듭니다.

자, 이 이부분에서 Virtual DOM 이 빛을 발합니다! 만약에 뷰에 변화가 있다면, 그 변화는 실제 DOM 에 적용되기전에 가상의 DOM 에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해줍니다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것 이지요.

https://velopert.com/3236

 

 

3. 빌드

React는 자바스크립트 위주로 코드를 짜게 된다. 그러나 결국에는 HTML, CSS, JS 형태로 변환된다.

변환을 가능하게 하는 건 React가 웹팩, 바벨이라는 빌드도구를 사용하고 있기 때문이다.

 

 

 

출처 : https://www.inflearn.com/course/%EC%98%AC%EC%9D%B8%EC%9B%90-%EA%B0%9C%EB%B0%9C%ED%81%B4%EB%9E%98%EC%8A%A4

비전공자를 위한 진짜 입문 올인원 개발 부트캠프 - 인프런 | 강의