상세 컨텐츠

본문 제목

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

23-24/React.js 3

by 롱롱😋 2023. 10. 13. 12:09

본문

728x90

 

Node.js의 개념

  • 자바스크립트 런타임 : 자바스크립트를 실행하는, 자바스크립트의 구동 환경 (ex: 웹 브라우저) 
  • Node.js 등장 이후 어떤 환경에서도 자바스크립트 실행이 가능해졌다.

 

 

Node.js로 자바스크립트 실행

1. 비주얼 스튜디오 코드에 sample.js 파일을 생성한다.

2. 코드 작성 후, Ctrl + S로 작성한 코드를 저장한다.  

3. Ctrl + J로 비주얼 스튜디오 코드의 터미널을 오픈한다.  

4. 경로가 해당 폴더에 있는 것을 확인한 후, 터미널에 명령어를 입력한다.   

node sample.js

// js파일을 node.js로 실행하는 명령어

 

 

Node.js 패키지 만들기

  • 패키지 : Node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위 

1. 패키지 단위로 관리하기 위한 루트 폴더를 생성한다.

2. 비주얼 스튜디오 터미널에서 다음 명령어를 입력한다.

npm init 

// Node.js를 초기화하는 명령어 
// 초기화: Node.js 패키지를 구성하는 데 필요한 최소한의 구성 요소를 자동으로 생성하는 과정

3. 모든 질문에 Enter 키를 누른다.

4. Is This OK? 문구가 나올 시 yes입력 후 Enter 키를 누른다.

 

 

패키지 스크립트 사용하기

1. 루트 폴더에 있는 package.json의 scripts 항목을 다음과 같이 수정한다.

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

2. 비주얼 스튜디오 터미널에서 다음 명령어를 입력한다.

npm run start

// npm run : 뒤에 나오는 스크립트 실행 
// 즉, npm run start는 package.json에 기록한 scripts에서 일치하는 명령어를 찾아 실행 
// start 항목에 node index.js라고 지정했으므로 해당 명령어 실행

 

 

Node.js 모듈 시스템

  • 모듈 : 독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들
  • 모듈 시스템 : 모듈을 사용하는 방법 

    ES 모듈 시스템
    • ECMSccript은 모듈 시스템의 약자, 줄여서 ESM이다.
    • 가장 최근에 개발된 모듈 시스템이다.
    • 최신 프론트엔드 기술은 모두 ESM을 채택한다.

package.json에 아래 코드를 작성하면 Node.js 패키지는 모듈 시스템으로 ESM을 사용

{
  "name": "week04",
  "version": "1.0.0",
  "description": "",
  "main": "Study04.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module" // 해당 줄의 코드를 추가 
}

 

 

개별 내보내기

  • 자바스크립트에서 모듈은 하나의 파일이다. 
  • 독립적이고 재사용이 가능한 자바스크립트 파일은 다른 파일에서 불러와 사용할 수 있다. 
  • 이를 위해서는 내보내(export)는 공유 설정 작업이 선행되어야 한다.
  • 아래 두 코드는 동일한 결과를 실행한다. 
// circle.js 
// ESM에서는 export 키워드를 변수나 함수 선언 앞에 붙이면 해당 값을 모듈에서 내보낼 수 있다.

export const PI = 3.141592; 

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

export function getCircumference(radius) {
    return 2 * PI * radius; 
}
// circle.js 
// 한 번에 여러 값을 내보낼 수 있다.

const PI = 3.141592; 

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

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

export {PI, getArea,  getCircumference};

 

 

개별 불러오기

  • import 문으로 모듈에서 값을 불러온다.
// index.js

import {PI, getArea,  getCircumference} from "./circle.js";

console.log(PI, getArea(1), getCircumference(1));

// 터미널에서 npm run start로 실행 시 해당 값을 정상적으로 볼 수 있음

 

 

전부 불러오기

  • 불러올 값이 많다면, import * as A from B 형식으로 모듈이 내보낸 값을 한 번에 불러오는 것이 가능하다.
// index.js

import *  as circle from "./circle.js";

console.log(circle.PI, circle.getArea(1), circle.getCircumference(1));

 

 

기본값으로 내보내기

  • 모듈의 기본값으로 내보내면 다른 모듈이 이 값을 불러올 때 다른 이름을 붙여도 상관없다.
  • export default 명령어로 내보내면 자유로운 이름 지정이 가능하다.
// circle.js 

const PI = 3.141592; 

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

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

export default {PI, getArea,  getCircumference};
// index.js

import circle from "./circle.js";

console.log(circle.PI, circle.getArea(1), circle.getCircumference(1));

 

 

라이브러리 사용하기

    • 라이브러리 : 프로그램을 개발할 때 공통으로 사용할 수 있는 기능들을 모아 모듈화한 것
    • 외부 패키지라 불리며, 특정 기능만을 수행   

      라이브러리 설치하기
      1. https://www.npmjs.com/ 사이트로 이동한다.
      2. 검색창에 원하는 라이브러리를 검색하고 터미널에 해당 설치 명렁어를 입력한다. 
      3. 설치가 끝내면 added 1 package라는 메세지를 출력한다.
      4. 이후 패키지를 공유할 때, node_modules는 공유할 필요 없이, package.json, package-lock.json만 공유하면 라이브러리 재설치가 가능하다.
// lodash 라이브러리 사용 예시 

import lodash from "lodash"; 

const arr = [1,1,1,2,2,1,1,4,4,3,2]; 
const uniqueArr = lodash.uniqBy(arr); 

console.log(uniqueArr);

 

리액트의 특징 1 : 컴포넌트 기반의 유연성 

  • 컴포넌트 : HTML 요소를 반환하는 함수  

    컴포넌트를 통한 중복 코드 제거
    • 여러 HTML 파일에 중복된 코드 <header>가 있다고 가정해 보자.
    • 아래의 예와 같이 컴포넌트를 작성한다.
    • <header> 태그가 필요한 페이지가 있다면 해당 컴포넌트를 호출한다.
    // 컴포넌트 작성 

function MyHeader() {
	return (
    <header>
    	<h1>안녕하세요.</h1>
    <header>
  );
}
     
     
    <!--컴포넌트 호출-->

<!DOCTYPE html>
<body>
    <!-- MyHeader 컴포넌트를 호출하여 <header>태그 불러오기 -->
	<MyHeader />
</body>
</html>

 

리액트의 특징 2 : 쉽고 간단한 업데이트

      • 업데이트 : 웹 페이지의 정보를 교체하는 일 (ex: 인스타그램의 '좋아요' 기능)
      • 돔(DOM) : 문서 객체 모델로, HTML코드를 트리 형태로 변환한 구성물  

        기존의 업데이트 방식
        1. HTML코드를 DOM으로 변환한다.
        2. 돔이 제공하는 돔 API를 이용하여 돔에 접근한다.
        3. 요소를 수정, 추가, 삭제한다.

        리액트의 업데이트 방식
        1. 교체가 필요한 요소는 삭제한다.
        2. 새롭게 수정 사항을 반영한 요소를 다시 제작한다.
        3. 이를 통째로 업데이트한다.

 

리액트의 특징 3 : 빠른 업데이트

        • 업데이트 : 브라우저가 페이지를 다시 렌더링하는 행위 
        • 렌더링 : 브라우저가 웹의 3가지 언어(HTML, CSS, JS)를 해석해 페이지의 요소를 실제로 그려내는 과정
        • 버추얼 돔 : 가상의 돔, 실제 돔의 사본

          기존의 업데이트 방식
          1. HTML코드를 DOM으로 변환, CSS 코드를 해석해 스타일 규칙으로 변환한다.  
          2. 돔과 스타일 규칙을 합쳐 렌더 트리를 제작한다.
          3. 렌더 트리 정보를 픽셀 단위로 계산한다. (레이아웃) 
          4. 해당 정보를 바탕으로 요소를 실제로 페이지에 그린다. (페인팅) 

          리액트의 업데이트 방식
          1. 버추얼 돔을 업데이트하여 실제 변경 사항을 모은다.
          2. 변경 사항이 종료되면, 한 번에 실제 돔을 업데이트한다.

 

리액트 앱 만들기 

1. 문서 폴더 아래에 루트 폴더 생성 후, 비주얼 스튜디오 코드에서 루트 폴더를 연다.

 

2. 비주얼 스튜디오 코드의 터미널을 열고 다음 명령어를 실행한다.

npx create-react-app .

// 점(.)은 현재 폴더를 의미
// 즉, 현재 폴더에 리액트 앱을 만들라는 명령어

 

 

리액트 앱 실행하기

1. 비주얼 스튜디오 코드의 터미널을 열고 다음 명령어를 실행한다. 

npm run start

2. 리액트 앱의 주소 http://localhost:3000에 접속한다.

 

3. 터미널에서 Ctrl + C를 누르면 리액트 앱을 종료한다.

 

 

리액트 앱의 동작 원리

  • 웹 서버 : 브라우저의 요청에 따라 필요한 웹 페이지를 보내주는 컴퓨터 

1. npx create-react-app으로 생성한 리액트 앱의 주소는 기본적으로 http://localhost:3000으로 설정되어 있다.

2. 브라우저가 자동으로 리액트 서버에 http://localhost:3000을 요청한다.

 

 

리액트 앱의 동작 원리 상세 보기

1. localhost:3000으로 접속을 요청하면 public폴더의 index.html을 반환한다.

2. index.html은 src 폴더의 index.js와 해당 파일이 가져오는 자바스크립트 파일을 한데 묶어 놓은 bundle.js를 불러온다.

3. bundle.js가 실행되어 index.js에서 작성한 코드가 실행된다.

4. index.js는 ReactDOM.creatRoot 메서드로 돔에서 리액트 앱의 루트가 될 요소를 지정한다.

5. render 메서드를 사용해 돔의 루트 아래에 자식 컴포넌트를 추가한다.

6. App 컴포넌트가 렌더링된다.

 



Quiz

  1. 웹 브라우저, Node.js와 같이 자바스크립트를 실행하는 환경을  (자바스크립트 런타임)이라고 한다. 
  2. Node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위를 (패키지 )라고 한다.
  3. 독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들을 (모듈)이라고 한다.
  4. 프로그램을 개발할 때 공통으로 사용할 수 있는 기능들을 모아 모듈화한 것을 (라이브러리 )라고 한다. 
  5. ESM에서는 (export 키워드)를 변수나 함수 선언 앞에 붙이면 해당 값을 모듈에서 내보낼 수 있고, 이는 (import 문)으로 모듈에서 값을 불러올 수 있다. 
  6. HTML 요소를 반환하는 함수를 (컴포넌트)라고 한다. 
  7. 브라우저의 요청에 따라 필요한 웹 페이지를 보내주는 컴퓨터를 (웹 서버)라고 한다. 

 

<프로그래밍 문제>

1. 다음과 같이 circle.js 파일을 작성하였을 때, index.js에서 해당 모듈을 받는 코드를 작성하시오. (복수 정답 인정)

const PI = 3.141592; 

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

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

export default {PI, getArea,  getCircumference};

 

 

2. <p> 태그에 감싸진 채로 Hello world를 출력하는 컴포넌트를 작성하시오. 

 

 

 

 

 

1. 

import {PI, getArea,  getCircumference} from "./circle.js";

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

console.log(circle.PI, circle.getArea(1), circle.getCircumference(1));

 

2. 

function HelloP() {
	return (
    	<p>Hello world</p>
  );
}

 

 

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

Corner React.js 3 

Editor: lyonglyong

728x90

'23-24 > React.js 3' 카테고리의 다른 글

[리액트 스타터3] project 1 [카운터] 앱 만들기 6장. 라이프 사이클과 리액트 개발자 도구  (0) 2023.11.17
[리액트 스타터3] 5장. 리액트의 기본 기능 다루기 2  (0) 2023.11.10
[React.js 3] 5장. 리액트의 기본 기능 다루기 1  (1) 2023.11.03
[React.js 3] 2장. 자바스크립트 실전  (0) 2023.10.06
[React.js 3] 1장. 자바스크립트 기초  (0) 2023.09.29

관련글 더보기

티스토리툴바