[React.js]3장. Node.js ~ 4장. 리액트 시작하기

3장 . Node.js

1. Node.js에 대하여

Node.js는 또 하나의 자바스크립트 런타임입니다.

    Node.js 등장 이전 - 웹브라우저로만 자바스크립트 사용 가능

    Node.js - 모든 환경에서 자바스크립트 실행 가능

---

Node.js 환경 설정하기

• 사용자 계정명은 영문으로 하는 것이 오류를 줄여줍니다.
• Node.js를 설치합니다. (안정적인 버전인 LTS버전을 사용합니다)
• 명령 프롬프트 창에서 Node.js와 npm(패키지 관리 도구)버전 설치를 확인합니다.
• 비주얼 스튜디오 코드를 사용하여 작업합니다.

---

2. Node.js 패키지

패키지 만들기 - 패키지는 여러 파일을 하나의 파일처럼 다룰 수 있게 해주는 관리 단위입니다.

 

패키지 초기화

1. Node.js 패키지를 초기화(최소한의 구성요소 자동 생성)하는 명령어를 입력합니다.
2. npm init
3. Package name을 입력합니다.
4. 패키지 구성에 필요한 사항을 묻는 말에 엔터키 -->  yes 입력 --> 엔터키 로 응답
5. 초기화된 패키지에는 package.json 파일이 생깁니다.

package.json의 구성요소

• name : 패키지 이름
• version : 패키지 버전
• description : 패키지 설명(보통 패키지로 구성한 프로그램의 목적을 작성)
• main : 패키지의 소스 코드 파일 중 메인 역할을 담당하는 소스 코드 파일
• scripts: 패키지를 쉽게 다루기 위해 지정한 매크로 명령어
• author: 패키지를 만든 사람
• license: 패키지의 라이선스

5. 패키지 스크립트를 사용하여 복잡한 명령어를 간단한 명령어로 변경합니다.

console.log("index run");

   

    package.json의 scripts 항목을 다음과 같이 수정합니다.

    간단하게 명령을 내릴 수 있도록 package.json의 scripts 항목에 start를 새롭게 추가한 것입니다.

{
  (...)
  "scripts": {
  "start": "node index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  (...)
}

   

    npm run 명령은 뒤에 나오는 스크립트를 실행합니다.

    'npm run start'는 package.json에 기록한 scripts에서 일치하는 명령어를 찾아 실행하라는 것입니다.

npm run start

---

3. Node.js 모듈 시스템

모듈 시스템은 여러개의 파일로 구성된 패키지에서 각 파일이 다른 파일을 불러와 사용하는 것입니다.

 

     모듈 : 독립된 하나의 파일. 재사용이 가능.

     모듈 시스템 : 모듈을 사용하는 방법. 다양한 종류.

 

모듈이 필요한 이유는  특정 파일의 값이나 함수를 다른 파일에서 공유하기 위함입니다.

 

ES모듈 시스템은  ECMAScript 모듈 시스템(ESM)라고 합니다.

Node.js는 기본적으로 ESM이 아닌, CJS 모듈 시스템을 사용합니다.

 

ESM 모듈 시스템을 사용하려면, package.json에서 설정을 변경해야 합니다.

   -  Package.json에서 "type": "module" 항목을 추가하면, Node.js 패키지는 모듈 시스템으로 ESM을 사용하게 됩니다.

 

모듈을 활용하려면 '내보내는 공유 설정 작업'이 선행되어야 합니다.

ESM에서는 아래와 같이 export 키워드를 변수나 함수 선언 앞에 붙여 해당 값을 모듈에서 내보낼 수 있습니다.

export const PI = 3.141592;

export function getArea(radius) {
  return PI * radius * radius;
}

export function getCircumference(radius) {
  return 2 * PI * radius;
}

 

이를 한번에 내보내고자 한다면,

const PI = 3.141592;

function getArea(radius) {
  return PI * radius * radius;
}

function getCircumference(radius) {
  return 2 * PI * radius;
}

export { PI, getArea, getCircumference };

 이렇게 사용합니다.

 

이것을 불러올 때는 import 문으로 모듈에서 값을 불러옵니다.

import { PI, getArea, getCircumference } from "./circle.js";
console.log(PI, getArea(1), getCircumference(1));

 

        위의 코드는 모듈 circle.js에서 3개의 값 PI, getArea, getCircumference를 불러온다는 것입니다.

 

그 다음, 터미널에서 npm run start 명령어로 index.js를 실행하면 해당 값을 정상적으로 불러오는지 확인할 수 있습니다.

npm run start

 

전부 불러오기는 import * as A from B 형식을 사용합니다.

import * as circle from "./circle.js"; 
console.log(circle.PI, circle.getArea(1), circle.getCircumference(1));

 

export 키워드 다음에 default를 붙이면 모듈의 기본값으로 내보낼 수 있습니다.

export default 10;

 

모듈에서 기본값으로 내보내면 다른 모듈이 이 값을 불러올 때 다른 이름을 붙여도 상관이 없습니다.

즉, export default 명령으로 기본값으로 내보내면 자유롭게 이름을 지정해 불러올 수 있는 것입니다.

 

---

4. 라이브러리 사용하기

Node.js 패키지에서는 외부 패키지(라이브러리)를 설치해 사용할 수 있습니다.

 

     외부 패키지 : 자신이 만든 Node.js 패키지를 서버에 올려 다른 사람도 사용할 수 있도록 배포한 파일

외부 패키지(라이브러리)를 이용하면 모든 기능을 사용자가 직접 개발하지 않아도 됩니다.

 

https://www.npmjs.com/를 통해 다양한 라이브러리를 탐색할 수 있습니다.

 

패키지에 라이브러리를 설치하면 package.json파일이 자동으로 생성됩니다. 이 파일을 통해 설치된 라이브러리의 버전을 알 수 있습니다.

 

 

 

---

4장 . 리액트 시작하기

1. 리액트의 특징

리액트는 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리 중 하나입니다.

 

• 컴포넌트 기반의 유연한 구조

    공통으로 사용하는 코드를 컴포넌트로 만들어 필요할 때 호출하여 사용합니다.

 

• 쉽고 간단한 업데이트

    웹에서 페이지를 업데이트하려면 돔(DOM)을 조작하여야 합니다.

    돔은 HTML코드를 트리 형태로 변환한 것인데, 트리 구조는 구성이 복잡하면 원하는 요소를 찾기 어렵다는 단점이 있습니다.

    업데이트가 필요하면, 리액트는 교체가 필요한 요소를 삭제하고 새롭게 수정한 요소를 다시 만들어 통째로 업데이트합니다.

    이로 인해, 간단하게 페이지를 업데이트할 수 있게 되는 것입니다.

• 빠른 업데이트

    돔이 변경되면 브라우저는 업데이트를 위해 렌더링 과정을 다시 반복합니다.

    렌더링 과정에서 레이아웃과 페인팅 과정은 많은 연산을 동반하기 때문에, 업데이트의 양이 많아지면 브라우저의 성능이 떨어지게 되고 랙이나 응답 불능 상태에 빠질 수 있습니다. 효율적인 수행을 위해서는 업데이트를 모아서 한번에 처리하는 것이 좋으므로, 리액트는 이를 위해 버추얼 돔(Virtual DOM)을 업데이트하여 변경 사항을 모아 한번에 실제 돔을 업데이트합니다.

---

2. 리액트 앱 만들기

리액트 앱 : 리액트로 만든 웹 서비스 (마치 앱과 같이 사용자와 다양한 상호작용을 하기 때문에 앱이라 부릅니다)

 

Create React App(쉽게 프로젝트를 생성하도록 돕는 라이브러리 = 보일러 플레이트)으로 리액트 앱 만들기

• Create React App으로 리액트 앱을 생성합니다.
• 비주얼 스튜디오 코드의 터미널에 아래의 명령어를 입력하여 새로운 리액트 앱을 만듭니다.

npx create-react-app .

• 이 루트 폴더 아래에는 package.json, package-lock.json, node_modules 같은 Node.js 패키지 구성 파일이 존재합니다. package.json의 ‘dependencies’ 항목에는 설치된 라이브러리와 리액트 버전에 대한 정보가 있으며, public 폴더에는 리액트에서 공통으로 사용하는 폰트 파일, 이미지 파일 등이 저장되어 있고, src 폴더에는 프로젝트 소스파일이 저장되어 있습니다.

---

3. 리액트 앱 실행하기

리액트 앱을 실행하는 명령어는 package.json의 scripts에 작성되어 있습니다.

 

npm run start

로 start 스크립트를 실행합니다.

 

그럼 자동으로 웹 브라우저 http://localhost:3000에 접속하게 됩니다.

---

4. 리액트 앱 종료하기

터미널에서 키보드 <Ctrl>+<C>를 눌러 일괄 작업을 끝낼 수 있습니다.

---

5. 리액트 앱의  동작 원리

Create React App으로 만든 리액트 앱에는 웹 서버가 내장되어 있어, start 명령을 실행하면 내장된 웹 서버 주소로 브라우저가 자동으로 접속합니다.

Create React App으로 생성한 리액트 앱의 주소는 기본적으로 http://localhost:3000으로 설정되어 있습니다.

      : 뒤의 3000은 Create React App으로 만든 리액트 앱의 기본 포트 (port)번호입니다.

비주얼 스튜디오 코드에서 src 폴더의 App.js 속 App 함수의 return 문을 수정하고 <Ctrl>+<S>로 저장하면, 웹 브라우저 속 내용(렌더링 결과)이 변경을 반영하여 나타납니다.

 

 

세부적인 동작 순서는 다음과 같습니다.

1. localhost:3000으로 접속을 요청하면 public 폴더의 Index.html을 반환
2. index.html에 src 폴더의 index.js와 bundle.js를 불러와 <script> 태그에서 자동으로 추가
3. bundle.js가 실행되어 index.js에서 작성한 코드가 실행
4. Index.js가 ReactDOM.createRoot 메서드로 돔에서 리액트 앱의 루트가 될 요소를 지정
5. render 메서드로 돔의 루트 아래에 자식 컴포넌트를 추가. App 컴포넌트가 렌더링

 

---

출처: 이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023).

Corner React.js
Editor: J