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

3장

1. Nods.js

Node.js 등장 이전에는 웹 브라우저가 유일한 자바스크립트 런타임이었습니다. 따라서 자바스크립트는 웹 브라우저 외에서는 사용할 수 없었습니다. 그러나 독립적인 자바스크립트 런타임인 Node.js가 등장한 이후에는 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었습니다. 결국 자바스크립트를 이용해 웹 서버나 모바일 애플리케이션을 개발하는 등 자바스크립트의 활용 범위가 넓어졌고, 이를 사용하는 개발자도 많이 늘어나게 되었습니다.

2. Nods.js 환경 설치

- 윈도우 사용자 계정 이름 바꾸기

 PC의 사용자 계정명이 한글로 되어 있다면, Node.js 설치 및 향후 이용 과정에서 문제가 발생할 수 있습니다. 따라서 Node.js 설치 전에 윈도우의 사용자 계정을 영문명으로 변경해야 합니다.

1.  윈도우에서 [시작]-[설정]을 클릭해 제어판을 엽니다. 계속해서 제어판에서 ‘계정’ 항목을 클릭합니다.

2.  사용자 정보가 나옵니다. 이때 본인의 계정 이름이 영어로 되어 있다면 굳이 변경하지 않아도 됩니다. 한글 계정이라면 왼쪽 메뉴에 있는 ‘가족 및 다른 사용자’를 클릭합니다. 그리고 다시 오른쪽 페이지에서 ‘이 PC에 다른 사용자 추가’ 항목의 + 버튼을 클릭합니다.

3.    ‘이 사람은 어떻게 로그인합니까?’ 대화상자가 나옵니다. 대화상자 하단에 파란색 글자로 표시되어 있는 ‘이 사람의 로그인 정보를 가지고 있지 않습니다.’를 클릭합니다.

4.    ‘아래 사항에 동의함’이라는 개인 정보 제공을 요구하는 대화상자가 나옵니다. 두 개의 항목 오른쪽에 있는 ‘자세히’ 항목을 클릭해야 <동의> 버튼이 활성화됩니다. 개인 정보 요구 항목을 모두 읽은 다음, <동의> 버튼을 클릭합니다.

5.    계정 만들기 대화상자가 나오면 아래의 ‘Microsoft 계정 없이 사용자 추가’ 항목을 클릭합니다.

6.    ‘이 PC의 사용자 만들기’ 대화상자가 나옵니다. 여기서 사용자 이름을 여러분이 원하는 영문명으로 지정하면 됩니다. 모두 지정하고 <다음> 버튼을 클릭합니다.

7.    제어판의 ‘가족 및 다른 사용자’ 항목이 다시 나옵니다. 앞에서 지정한 이름으로 새로운 사용자가 추가되었는지 확인합니다.

 

- Node.js 설치

Node.js는 다음 주소의 공식 홈페이지에서 다운로드할 수 있습니다. (https://nodejs.org/ko)

두 개의 버튼 중 왼쪽에 있는 <…LTS> 버튼을 클릭하면 설치 파일이 자동으로 다운로드 됩니다.

 

Node.js 설치 과정은 다음 순서로 진행하면 됩니다.

1. 설치 프로그램이 정상적으로 실행된다면 [설치 마법사] 대화상자가 나옵니다. <Next> 버튼을 클릭합니다.
2. Node.js의 라이선스에 동의하라는 대화상자가 나타납니다. 하단의 체크박스를 선택해 라이선스에 동의하고 <Next> 버튼을 클릭합니다.
3. Node.js를 설치할 경로를 정하는 대화상자가 나타납니다. 기본 경로로 설치할 것을 권장합니다. <Next> 버튼을 클릭합니다.
4. Node.js와 함께 설치할 기능들을 설정하는 대화상자가 나타납니다. 기본 설정 그대로 <Next> 버튼을 클릭합니다.
5. “필요한 도구를 자동으로 설치하겠느냐?”고 묻는 대화상자가 나타납니다. 여러가지 편리한 도구를 자동으로 설치해 주기 때문에 별도의 설정 문제를 걱정하지 않아도 됩니다. 따라서 Node.js에 익숙하지 않은 사용자라 면 이 기능을 설치하는 게 좋습니다. 체크박스를 선택한 다음, <Next> 버튼을 클릭합니다.
6. 이제 Node.js를 설치할 준비를 모두 끝마쳤습니다. <Install> 버튼을 클릭합니다.
7. Node.js 설치가 진행됩니다. 1분에서 5분 정도의 시간이 걸립니다. 설치 시간이 너무 오래 걸리거나 오류가 발생한다면 네트워크 환경이 원활한 곳에서 다시 시도하기 바랍니다.

 

3. 비주얼 스튜디오 코드

비주얼 스튜디오 코드는 마이크로소프트가 개발한 오픈소스 코드 에디터입니다.

비주얼 스튜디오 공식 홈페이지 https://code.visualstudio.com/ 에 들어가서 홈페이지에 중간에 있는 <Download for …> 버튼을 클릭해 설치 파일을 다운로드합니다.

 

1. 설치 프로그램을 실행하면 라이선스 계약에 동의하는지 묻는 대화상자가 나타납니다. 비주얼 스튜디오 코드 역시 MIT 라이선스를 따르는 오픈소스 프로젝트로 누구나 무료로 사용할 수 있습니다. 라이선스 약관에 동의한 후 <다음> 버튼을 클릭합니다.

2. 프로그램을 설치할 경로를 결정하는 대화상자입니다. 기본으로 설정된 곳에 설치할 것을 권장합니다. <다음> 버튼을 클릭합니다.

3.[시작] 메뉴에 등록할 프로그램 이름을 설정하는 대화상자입니다. 별도 수정 없이 <다음> 버튼을 클릭합니다.

4.비주얼 스튜디오 코드를 설치하면서 추가로 수행할 작업을 선택하는 대화상자입니다. 기본값으로 아래 2개의 체크박스에 이미 표시되어 있습니다. 수정 없이 기본 설정을 유지한 채, <다음> 버튼을 클릭합니다.

5.설치 준비가 모두 완료되었습니다. <설치> 버튼을 클릭해 설치합니다.

6.설치가 실행되고 나서 3~5분이 지나면 모두 완료됩니다. 만약 문제가 발생했다면 설치 파일을 다시 다운로드 받아 이 과정을 처음부터 다시 진행하길 바랍니다.

7.설치가 모두 완료되었습니다. <종료> 버튼을 클릭해 종료합니다.

 

 

- 한국어 설정을 위한 확장 기능 설치

비주얼 스튜디오 코드의 기본 언어 설정은 영어입니다. 언어 설정을 한국어로 변경하기 위해 확장 기능(Extension)을 설치하겠습니다. 설치할 확장 기능은 한국어 팩(Korea Lanaguage Pack for Visual Studio Code)입니다.

설치가 완료된 비주얼 스튜디오 코드를 실행합니다. 정상적으로 설치되었다면 윈도우 [시작] 메뉴에서 [Visual Studio Code]를 클릭하면 됩니다.

비주얼 스튜디오 코드의 첫 화면이 실행됩니다.

그림과 같이 화면 맨 왼쪽에 나열된 5개의 아이콘 중 마지막에 있는 Extensions 아이콘을 클릭합니다.

그러면 확장 기능을 검색하는 Search Extensions in Marketplace 검색 폼이 나옵니다. 이 검색 폼에서 korean을 입력했을 때, 최상단에 나오는 아이템을 클릭하면 한국어 팩을 설치할 수 있습니다.

오른쪽에 나타난 페이 지에서 <Install> 버튼을 클릭해 확장 기능을 설치합니다. 

확장 기능에서 korean으로 검색 확장 기능을 설치하면 <Install> 대신 <Uninstall> 버튼이 표시됩니다.

4. Node.js 패키지

-패키지 만들기

패키지는 여러 파일을 마치 하나의 파일처럼 다룰 수 있게 해주는 관리 단위입니다. 그런데 패키지 단위로 여러 파일을 관리하려면 최상위 폴더인 ‘루트 폴더’가 필요합니다. 미리 만들어둔 chapter3 폴더를 루트 폴더로 이용하겠습니다.

-터미널에서 다음 명령어를 입력합니다.

 

npm init

 

npm init는 Node.js 패키지를 초기화하는 명령어입니다. 초기화란 Node.js 패키지를 구성하는 데 필요한 최소한의 구성 요소를 자동으로 생성하는 과정입니다.

-npm init를 실행하면 패키지 이름을 입력하라는 프롬프트가 나타납니다.

폴더 이름과 동일하게 chapter3을 입력하고 <엔터> 키를 누릅니다.

 

-패키지 이름을 입력하고 나면 버전, 설명등의 패키지 구성에 필요한 사항을 계속 물어봅니다. 어떤 텍스트도 입력하지 않고 모든 물음에 대해 <엔터> 키를 누릅니다. 구성을 완료하면 Is This OK? 라는 문구와 함께 설정할 패키지의 속성들을 보여줍니다. yes를 입력하고 <엔터> 키를 눌러 패키지 초기화를 완료합니다.

 

-패키지 구성이 완료되면 비주얼 스튜디오코드 탐색기 창 루트 폴더(chapter3)아래에 package.json이라는 파일이 생성됩니다.

 

초기화된 패키지의 package.json에는 기본적으로 다음 항목들이 존재합니다.

• name: 패키지 이름 

• version: 패키지 버전 

• description: 패키지 설명(보통 패키지로 구성한 프로그램의 목적을 작성) 

• main: 패키지의 소스 코드 파일 중 메인 역할을 담당하는 소스 코드 파일 

• scripts: 패키지를 쉽게 다루기 위해 지정한 매크로 명령어 

• author: 패키지를 만든 사람 

• license: 패키지의 라이선스

이렇듯 package.json은 패키지의 메타 정보를 저장하는 파일입니다. Node.js는 package.json에서 패키지 정보를 확인하여 적절한 방식으로 프로그램을 가동합니다.

 

 

-패키지 스크립트 사용하기

Node.js 패키지의 package.json에는 scripts라는 항목이 있습니다. 이 scripts 항목은 복잡한 명령어를 간단한 명령어로 변경하는 일종의 매크로 기능을 지원합니다.

 

현재 패키지의 루트 폴더 아래에 index.js라는 파일을 생성하고 다음과 같이 코드를 작성합니다. 새 파일 아이콘 (새파일.png)을 클릭해 파일을 생성합니다.

console.log("index run");

 

현재 루트 폴더의 파일 구성

CHAPTER3

  - index.js

  - package.json

  - sample.js

 

작성한 index.js를 실행하기 위해 package.json의 scripts 항목을 이용하면 아주 간단하게 index.js를 실행할 수 있습니다.

 

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

 

{

  (...)

  "scripts": {

  "start": "node index.js",

  "test": "echo \"Error: no test specified\" && exit 1"

  },

  (...)

}

 

다음 명령어를 터미널에 입력합니다.

npm run start

 

npm run 명령은 뒤에 나오는 스크립트를 실행합니다. 즉, npm run start를 입력하면 package.json에 기록한 scripts에서 일치하는 명령어를 찾아 실행합니다. start 항목에 node index.js라고 지정했기 때문에 해당 명령어를 실행합니다.

index.js가 실행되어 터미널에 문자열 index run을 출력합니다.

 

5.Node.js 모듈 시스템

여러개의 파일로 이루어진 패키지에서 각각의 파일이 다른 파일을 불러와 사용하는 모듈 시스템에 대해 알아보겠습니다.

 

-모듈과 모듈 시스템

모듈이란 독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들을 말합니다. 모듈은 모니터나 마우스 같은 컴퓨터의 주변장치에 비유할 수 있습니다. 모니터나 마우스는 독립적으로 존재할 수 있기 때문에 사용자의 컴퓨터에서 분리해 다른 컴퓨터에 연결할 수 있습니다.

 

마찬가지로 프로그래밍에서 모듈은 마치 컴퓨터 부품처럼 독립적으로 존재하는 것으로, 다른 프로그램의 부품으로 활용할 수 있습니다.

 

자바스크립트에서는 독립된 하나의 파일을 ‘모듈’이라고 부릅니다.

모듈을 사용하는 방법을 ‘모듈 시스템’이라고 합니다. 자바스크립트에는 다양한 모듈 시스템이 있습니다.

 

 

-ES 모듈 시스템

ES 모듈 시스템은 ECMAScript 모듈 시스템의 약자로, 줄여서 ESM이라고 합니다. ESM은 가장 최근에 개발된 모듈 시스템으로, 리액트, Vue와 같은 최신 프론트엔드 기술은 모두 ESM을 채택하고 있습니다.

ESM 사용 설정하기

Node.js는 기본적으로 ESM이 아닌 CJS 모듈 시스템을 사용합니다. 따라서 ESM 모듈 시스템을 사용하려면, package.json에서 설정을 변경해야 합니다.

2{
3  "name": "chapter3",
4  "version": "1.0.0",
5  "description": "",
6  "main": "index.js",
7  "scripts": {
8    "start": "node index.js",
9    "test": "echo \"Error: no test specified\" && exit 1"
10  },
11  "author": "",
12  "license": "ISC",
13  "type": "module" ①
14}

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

 

개별 내보내기- export 키워드를 변수나 함수 선언 앞에 붙이면 해당 값을 모듈에서 내보낼 수 있습니다.

 

개별 불러오기- ESM은 C, 자바, 파이썬처럼 import 문으로 모듈에서 값을 불러옵니다.

 

전부 불러오기- ESM에서는 불러올 값이 많다면, import * as A from B 형식으로 모듈이 내보낸 값을 한 번에 불러올 수 있습니다.

 

기본값으로 내보내기- ESM에서는 export 키워드 다음에 default를 붙여 모듈의 기본값으로 내보낼 수 있습니다.

 

6. 라이브러리 사용하기

미리 npmjs.com에 접속해 라이브러리를 탐색하고 설치합니다.

 

라이브러리 설치 이후 패키지의 변화

라이브러리를 설치하면 chapter3 패키지에는 다음과 같이 3가지 변화가 일어납니다.

• 패키지 루트에 lodash 라이브러리를 저장하는 ‘node_modules’ 폴더가 생성됩니다. 

• package.json에 lodash 라이브러리의 정보를 저장하는 dependencies 항목이 추 가됩니다.

• 패키지 루트 아래에 package-lock.json이라는 이름의 파일이 생성됩니다. 

 

외부 라이브러리를 설치했으니 라이브러리 lodash를 직접 사용해 보겠습니다. 다음과 같이 index.js를 수정하고 npm run start로 실행합니다.

1import lodash from "lodash"; ①
2
3const arr = [1, 1, 1, 2, 2, 1, 1, 4, 4, 3, 2];
4const uniqueArr = lodash.uniqBy(arr); ②
5
6console.log(uniqueArr);
7
8// [1, 2, 4, 3]

① 라이브러리를 불러올 때는 경로와 확장자를 명시하지 않아도 됩니다. lodash 라이브러리를 불러와 내보내기한 기본값을 변수 lodash에 저장합니다.  ② lodash의 uniqBy 메서드는 인수로 전달한 배열에서 중복값을 제거하고 반환합니다.

 

lodash는 uniqBy 메서드 외에도 배열과 객체를 위한 수많은 기능을 제공합니다.

 

4장

1. 리액트의 특징

 

-리액트의 탄생

리액트는 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리 가운데 하나입니다. 페이스북, 인스타그램, 넷플릭스 등 유명한 서비스를 개발한 기술이며, 지금도 전 세계 개발자들의 사랑을 받는 개발 도구입니다.

StateOfJavaScript에서는 리액트가 2016년부터 2021년까지 가장 많은 프로그래머가 사용하는 프론트엔드 기술이라는 통계를 공개한 바 있습니다.

리액트는 페이스북 개발팀이 만들어 2013년 오픈소스로 세상에 공개되었습니다.

리액트는 변화가 자주 일어나는 대규모 애플리케이션을 구축할 때 필요한 여러 기능을 구비하고 있습니다.

 

 

-컴포넌트 기반의 유연성

리액트는 유연성이 있기 때문에 새로운 기능을 추가하거나 기능을 업그레이드할 때 코드를 많이 수정하지 않아도 됩니다.

 

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

리액트는 모듈화를 이용해 중복 코드를 제거합니다. 즉, 여러 페이지에서 공통으로 사용하는 코드를 ‘컴포넌트’ 단위의 모듈로 만들어 놓고 필요할 때 호출해 사용합니다.

컴포넌트는 리액트를 대표하는 중요 개념 중 하나인데, 이 개념에는 ‘페이지를 구성하는 요소’라는 의미가 포함되어 있습니다. 예를 들어 <header> 태그를 컴포넌트로 만들면 다음과 같습니다.

 

function MyHeader() {

  return (

    <header>

      <h1>안녕하세요 수정된 이정환입니다.</h1>

    </header>

  );

}

자바스크립트 함수 MyHeader는 <header> 태그를 반환합니다. 이렇게 HTML 요소를 반환하는 함수를 리액트에서는 ‘컴포넌트’라고 합니다.

만약 <header> 태그가 필요한 페이지가 있다면 언제든지 이 컴포넌트를 불러와 사용하면 됩니다.

 

<!DOCTYPE html>

<html>

  <body>

    <!-- MyHeader.js에서 불러온 header 요소 -->

    <MyHeader /> ①

    <article>

      <h3>여기는 HOME입니다</h3>

    </article>

  </body>

</html>

 

- 쉽고 간단한 업데이트

웹에서 페이지를 업데이트하려면 문서 객체 모델(Document Object Model, DOM)을 조작해야 합니다. 문서 객체 모델은 줄여서 돔(Dom)이라고 부릅니다. 앞으로는 문서 객체 모델을 돔이라고 하겠습니다. 돔은 HTML 코드를 트리 형태로 변환한 구성물입니다.

돔은 웹 브라우저가 직접 생성하며, HTML 코드를 렌더링하기 위해 만듭니다. 렌더링(Rendering)이란 브라우저가 웹의 3가지 언어 HTML, CSS, 자바스크립트를 해석해 페이지의 요소를 실제로 그려내는 과정입니다.

 

리액트는 사용자의 특정 행동(예를 들어 좋아요 버튼 클릭)이 일어나거나 데이터가 바뀌어 업데이트가 필요하면, 어떤 요소를 어떻게 업데이트할지 고민하지 않습니다. 교체가 필요한 요소는 삭제하고, 새롭게 수정 사항을 반영한 요소를 다시 만들어 통째로 업데이트합니다. 리액트의 이런 동작 방식은 마치 자동차가 고장 나면 일일이 망가진 부품을 찾아내 수리하기보다 아예 새 차로 바꾸는 행위와 비슷합니다.

따라서 리액트를 이용하면 어떤 부분을 어떻게 업데이트할지 고민하지 않아도 간단하게 페이지를 업데이트할 수 있습니다. 그래서 복잡한 인터렉션을 지원하는 웹 서비스 개발에 더 집중할 수 있습니다.

 

-브라우저의 랜더링 과정

4단계

 

- 버추얼 돔을 이용한 효율적인 업데이트

페인팅과 레이아웃을 여러 번 수행하지 않으려면 여러 번의 업데이트를 모았다가 업데이트가 필요할 때 한 번에 처리하는 편이 효율적입니다. 리액트는 이를 위해 버추얼 돔(Virtual DOM)을 활용합니다. 버추얼 돔은 가상의 돔이라는 뜻으로, 실제 돔의 사본입니다.

위의 예를 보면 버추얼 돔을 3번 변경할 동안 실제 돔에는 아무런 변화가 없습니다. 변경 사항이 모두 종료되면, 변경 사항을 모았다가 한 번에 실제 돔을 업데이트합니다. 결과적으로 리액트에서는 여러 번의 업데이트를 모아 한 번에 수행하므로, 업데이트가 잦아도 브라우저의 성능을 떨어뜨리지 않습니다.

 

2.   리액트 앱 만들기

리액트 앱은 리액트로 만든 웹 서비스입니다. 리액트 웹이 아닌 앱으로 부르는 까닭은 리액트로 만든 웹 서비스는 마치 애플리케이션처럼 다양한 상호작용을 제공하기 때문입니다.

 

- Create React App으로 리액트 앱 만들기

리액트 앱을 만들기 위해 Create React App이라는 Node.js 라이브러리를 이용할 예정입니다. Create React App은 복잡한 설정 없이 리액트 앱을 만들어 주는 라이브러리입니다.

리액트 앱을 생성하기 위해 루트 폴더를 먼저 만들겠습니다. 문서(Documents) 폴더 아래에 chapter4 폴더를 생성한 다음 비주얼 스튜디오 코드에서 이 폴더를 엽니다.

chapter4 폴더를 열었다면 이제 Create React App으로 리액트 앱을 생성합니다. 단축키 <Ctrl>+<J>를 눌러 비주얼 스튜디오 코드의 터미널을 열고 다음 명령어를 입력합니다.

1npx create-react-app . //점(.)은 현재 폴더를 의미합니다.

이 코드는 현재 폴더에 새로운 리액트 앱을 만들라는 명령어입니다.

 

기본으로 설정된 리액트 앱을 자동으로 만드는 작업이 시작됩니다. 생성 시간은 평균 5분 내외입니다.

만약 이때 Need to install the following packages: ...라는 메시지가 나오면 y를 입력하면 됩니다.

 

리액트 앱이 만들어지면 다음 그림처럼 Success! Created...라는 메시지와 함께 리액트 앱을 사용하기 위한 다양 한 명령어가 출력됩니다.

 

- 리액트 앱의 구성요소

Create React App으로 생성한 리액트앱 또한 Node.js 패키지입니다. 따라서 이 루트 폴더 아래에는 package.json, package-lock.json, node_modules 같은 Node.js 패키지 구성 파일이 존재합니다.

그런데 3장에서 살펴본 외부 라이브러리를 설치하는 폴더 node_modules 외에도 public, src와 같은 폴더도 보입니다.

이 폴더는 Create React App이 자동으로 생성한 폴더들입니다. Create React App은 리액트 앱을 생성함과 동시에 앱이 동작하는 데 필요한 파일과 폴더를 자동으로 생성합니다. 이런 파일과 폴더 모음을 다른 말로 ‘템플릿(Template)’이라고 합니다.

그 중 public 폴더는 리액트에서 공통으로 사용하는 폰트 파일, 이미지 파일 등을 저장하는 폴더입니다. favicon.ico, index.html, logo192.png, logo512.png, manifest.json, robots.txt 등의 파일들이 기본으로 포함되어 있습니다.

src 폴더는 소스(source) 폴더라는 뜻으로 프로그래밍 소스를 저장하는 폴더입니다. 이 폴더는 리액트를 사용하는 동안 자바스크립트 파일들을 한데 모아놓는 곳으로, 프로젝트에서 사용할 소스 파일을 저장합니다.

 

-리액트 앱 실행

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

 

package.json의 scripts에는 start 명령으로 리액트 앱을 실행하는 스크립트가 있습니다. 비주얼 스튜디오 코드 터미널에서 다음 명령을 입력해 start 스크립트를 실행합니다.

1npm run start

이 스크립트를 실행하면 리액트 앱을 실행합니다.

자동으로 크롬 웹 브라우저에서 새 탭이 열리면서 리액트 앱의 주소인 http://localhost:3000에 접속합니다.

 

비주얼 스튜디오 코드 터미널에서 실행 중인 리액트 앱을 종료하는 방법 역시 간단합니다.

터미널에서 키보드 <Ctrl>+<C>를 누르면 일괄 작업을 끝내시겠습니까 (Y/ N)?라는 메시지가 출력됩니다. 현재 작업(리액트 앱)을 종료할 것인지 묻는데, 이때 y를 입력하면 종료됩니다. 리액트 앱을 종료하면 터미널에서 프롬프트가 다시 활성화됩니다. 

 

리액트 앱을 종료하면, 브라우저에서 주소 http://localhost:3000과의 접속 또한 자동으로 종료됩니다. 따라서 브라우저에서 새로고침하면 사이트에 연결할 수 없음 페이지가 나옵니다.

 

3.   리액트 앱의 동작원리

 

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 컴포넌트가 렌더링됩니다.

---

Quiz 

1. Node.js 환경을 원활하게 사용하려면 윈도우 계정 이름이 ( 영어 )로 되어 있어야 한다.

 

2.  (패키지)는 여러 파일을 마치 하나의 파일처럼 다룰 수 있게 해주는 관리 단위입니다

 

3. (모듈)이란 독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들을 말합니다.

   자바스크립트에서는 독립된 하나의 파일을 (모듈)이라고 부릅니다.

   모듈을 사용하는 방법을 (모듈 시스템)이라고 합니다.

 

4.

(개별 내보내기)- export 키워드를 변수나 함수 선언 앞에 붙이면 해당 값을 모듈에서 내보낼 수 있습니다.

 

(개별 불러오기)- ESM은 C, 자바, 파이썬처럼 import 문으로 모듈에서 값을 불러옵니다.

 

(전부 불러오기)- ESM에서는 불러올 값이 많다면, import * as A from B 형식으로 모듈이 내보낸 값을 한 번에 불러올 수 있습니다.

 

(기본값으로 내보내기)- ESM에서는 export 키워드 다음에 default를 붙여 모듈의 기본값으로 내보낼 수 있습니다.

 

5. (리액트)는 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리 가운데 하나입니다. 페이스북, 인스타그램, 넷플릭스 등 유명한 서비스를 개발한 기술이며, 지금도 전 세계 개발자들의 사랑을 받는 개발 도구입니다.

 

6. 리액트는 모듈화를 이용해 중복 코드를 제거합니다. 즉, 여러 페이지에서 공통으로 사용하는 코드를 (컴포넌트) 단위의 모듈로 만들어 놓고 필요할 때 호출해 사용합니다.

 

7. 페인팅과 레이아웃을 여러 번 수행하지 않으려면 여러 번의 업데이트를 모았다가 업데이트가 필요할 때 한 번에 처리하는 편이 효율적입니다. 리액트는 이를 위해 (버추얼 돔)을 활용합니다. 이는 가상의 돔이라는 뜻으로, 실제 돔의 사본입니다.

 

코드 작성

 

1. ESM을 사용 할 수 있도록 코드를 변경하여라.

{
  "name": "chapter3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

{
  "name": "chapter3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module" ①
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

2. 다음 컴포넌트를 불러와 사용하는 코드 예를 작성하세요.

function MyCom() {
  return (
    <header>
      <h1>안녕하세요 코너입니다.</h1>
    </header>
  );
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<!DOCTYPE html>
<html>
  <body>
    <!-- MyCom.js에서 불러온 header 요소 -->
    <MyCom /> ①
    <article>
      <h3>예시입니다.</h3>
    </article>
  </body>
</html>

---

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

Corner React.js 1

Editor: dalpaeng4