리액트를 시작하는 방법은 두 가지가 있습니다. create-react-app을 사용해 새 프로젝트를 만들거나, 기존 프로젝트에 리액트를 추가하는 것입니다.
하지만 리액트를 설치하기 전에, 먼저 Node.js라는 프로그램을 설치해야 합니다.
노드는 Chrome V8 JavaScript 엔진으로 빌드된 자바스크립트 런타임입니다. 쉽게 말하면 노드는 자바스크립트를 브라우저 없이 컴퓨터에서 실행할 수 있게 하는 자바스크립트 실행기입니다.
노드의 대표적인 특징
- 자바스크립트 런타임 (JavaScript Runtime)
- 이벤트 기반 프로그래밍 (Event-Driven Programming)
- 논블로킹 (Non-Blocking)
- 싱글 스레드 (Single Thread)
자바스크립트 런타임
런타임은 특정 언어를 실행할 수 있는 환경을 뜻합니다. 대표적인 자바스크립트 런타임은 Chrome, Safafi 같은 웹 브라우저들입니다.
이벤트 기반 프로그래밍
이벤트 기반 프로그래밍은 이벤트가 발생하면 뭘 할지 미리 등록하고, 순서대로 실행하는 프로그래밍 방식입니다. 노드는 이벤트가 끝날 때까지 이벤트 처리를 위한 작업을 반복하는데, 이걸 이벤트 루프라고 합니다.
논 블로킹
논 블로킹은 비동기 방식으로 이벤트를 처리한다는 뜻입니다. 비동기는 이전 작업이 완료될 때까지 대기하지 않고 동시에 작업을 수행합니다.
동기적 처리 예시
📌 input
console.log("1st");
console.log("2nd");
console.log("3rd");
📌 output
1st
2nd
3rd
비동기적 처리 예시
📌 input
console.log("1st");
setTimeout(() => {
console.log("2nd");
},0);
console.log("3rd");
📌 output
1st
3rd
2nd
setTimeout() 함수의 지연시간이 0이기 때문에 1st, 2nd, 3rd 순으로 찍힐 거라 예상했지만, 예상외로 1st, 3rd, 2nd가 찍혔습니다. 이유는 비동기적 코드는 동기적 코드가 전부 실행되고 나면 실행되기 때문입니다.
싱글 스레드
스레드는 프로세스가 동시에 처리가능한 작업의 개수입니다. 프로세스가 스레드를 여러 개 생성해 동시에 작업하면 멀티 스레드, 하나만 생성하면 싱글스레드입니다.
언뜻 들으면 멀티 스레드가 좋아 보이지만, 스레드가 늘어날수록 CPU를 더 사용하고, 요청이 적으면 놀고 있는 스레드가 발생합니다. 노드는 싱글 스레드지만, 논 블로킹 방식을 사용해 작업이 완료될 때까지 기다리지 않고 다음 작업을 수행합니다.
노드의 장단점
노드는 싱글 스레드, 논 블로킹 모델을 사용하기 때문에 I/O 요청이 많으면 노드를 서버로 사용하는 게 좋습니다. 반대로 CPU 연산을 많이 하는 작업에 노드는 적합하지 않습니다. 작업을 처리할 스레드가 하나이기 때문입니다.
요약하면 노드는 개수는 많지만 크기가 작은 데이터를 주고받는 작업(채팅 앱, 주식 차트, 데이터베이스 등)에 적합합니다.
노드의 4가지 특징
- 멀티 스레드에 비해 적은 CPU를 사용한다.
- I/O 요청이 많은 프로젝트에 적합하다.
- 별도로 웹서버를 설치할 필요가 없다.
- JSON과 쉽게 호환된다.
레퍼런스
'Web' 카테고리의 다른 글
imgur 이미지 403 에러 뜰 때 (0) | 2023.10.31 |
---|---|
<a> 태그에 noopener, noreferrer 사용하는 이유 (0) | 2023.10.09 |
웹 폰트(Web Font) 개념 정리 (0) | 2023.07.31 |
SSR과 CSR 비교하기 (0) | 2023.03.03 |