[React.js] 1주차 - Node.js, React.js

1. Node.js

 

1.1. Node.js 와 javascript

• 자바스크립트 실행 환경(Run Time) = 구동기
• 자바스크립트는 웹 내부에 필요한 간단한 기능만을 개발하기 위한 스크립트 언어였지만, node.js 로 인해 더 많은 걸 할 수 있게 됨

1.2. 패키지 (pakage)

 

일반적으로 프로젝트가 특정 목적을 갖는 프로그램의 단위라면 node.js 에서는 패키지라는 단어를 프로그램의 단위로 사용한다. 

npm(node pakage manager)으로 패키지를 쉽게 설치하고 관리할 수 있다. 

 

 

2. 모듈 (Module)

• 기능 별로 나누어진 파일
• Javascript 의 모듈 시스템: Common JS(CJS), ES Module(ESM)

 

2.1. Common JS (CJS)

function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

// CJS
module.exports = {
    add,
    sub
}

const {add, sub} = require('./math');

 

 

2.2. ES Module (ESM)

 

- named export

 

여러 개의 기능을 내보낼 수 있으며, 이름을 정확히 일치시켜야 한다. 

// 방법1
function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

export { add, sub }

// 방법2
export function add(a, b) {
    return a + b;
}

export function sub(a, b) {
    return a - b;
}

import { add, sub } from "./math.js"; // 확장자까지 꼭 붙여주기

 

- default export

 

default 는 한 모듈당 하나만 가능하며, 가져올 때 이름을 자유롭게 설정할 수 있다. 

export function add(a, b) {
    return a + b;
}

export function sub(a, b) {
    return a - b;
}

export default function multiply(a, b) {
    return a * b;
}

import mul, { add, sub } from "./math.js";

 

 

3. 라이브러리

프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해 놓은 것

 

필요한 라이브러리들은 npm 을 통해 설치할 수 있다. 예시로 randomcolor 라는 라이브러리를 설치해보자.

npm i randomcolor

 

설치를 하고 프로젝트 폴더로 돌아와 pakage.json 파일을 확인해보면 dependencies 필드에 randomcolor 가 추가된 것을 확인할 수 있다. 

 

그리고 node_modules 라는 폴더와 pakage-lock.json 파일이 새롭게 생긴 것을 확인할 수 있는데 

node_modules 는 npm 으로 설치한 라이브러리의 저장소이고, pakage-lock.json 은 설치한 라이브러리에 대해 더 정확 버전과 정보가 기록된 파일이라고 생각하면 된다. 

(pakage.json 에는 ^ 가 붙은 버전으로 정확한 버전이 아니라 대략적인 버전 범위로 기록되어 있다)

 

 

3.1. randomcolor 라이브러리 사용해보기

import randomcolor from 'randomcolor';

const color = randomColor();
console.log(color); // 출력 할 때마다 다른 랜덤컬러 값이 출력됨

 

 

3.2. pakage.json 정보로 라이브러리 다시 설치하기

 

npm install // 또는 npm i

 

만약 node_modules 와 pakage.json 파일이 삭제되었었다면, pakage.json 의 dependencies 의 정보를 기반으로 모든 패키지들을 다시 설치해줄 수 있다. 

 

node_modules 폴더는 용량이 너무 크기 때문에 .gitignore 파일에 추가해 깃 허브에 따로 올리지 않고, pakage.json 파일만 올린다. 

만약 프로젝트 중에 다른 사람들과 node_modules 폴더를 공유해할 일이 생긴다면, npm i 라는 간단한 명령어만 입력해서 필요한 라이브러리를 설치할 수 있다. 

 

 

4. React

• 페이스북(Meta) 이 개발한 오픈소스 JavaScript 라이브러리
• 대규모 웹 서비스의 UI 를 더 편하게 개발하기 위해 만들어진 기술
• 넷플릭스, 페이스북, 인스타그램, 노션

 

4.1. React 의 기술적인 특징

 

1. 컴포넌트 기반으로 UI 를 표현

-> 화면을 구성하는 부분을 컴포넌트로 만들어서 모듈로 관리하기 때문에 중복 코드를 줄일 수 있고, 유지 보수가 쉬움

 

2. 화면 업데이트 구현이 쉬움

-> 리액트는 과정은 생략하고 목적만 간결히 명시하는 선언형 프로그램이기 때문에 업데이트 구현이 쉬움 (Feat. state)

-> 자바스크립트는 명령형 프로그래밍이므로 같은 화면을 구현했을 때, 리액트로 짠 코드가 훨씬 간결함

 

※ 선언형 <-> 명령형

선언형과 반대로 명령형 프로그래밍은 목적을 이루기 위한 모든 일련의 과정을 설명하는 방식

 

3. 화면 업데이트가 빠르게 처리됨

 

브라우저 렌더링 과정 (Critical Rendering Path)

 

1. 브라우저는 HTML, CSS 코드를 자신이 이해하기 쉬운 DOM, CSSOM 로 변환

2. DOM 과 CSSOM 을 합쳐서 Render Tree(웹 페이지의 청사진) 를 만듦

3. 웹 페이지에 Render Tree 의 요소들의 배치를 잡는 Layout 을 수행

4. 요소를 실제로 화면에 그려내는 Painting 수행

 

 

화면의 업데이트는 어떻게 발생? 

 

JavaScript 가 DOM 을 수정하게 되면 업데이트가 발생하고, 브라우저는 브라우저 렌더링의 모든 단계를 다시 진행한다. 만약 JavaScript 가 DOM 을 3000번 수정했다면 브라우저는 3000 번의 렌더링 과정을 거쳐야하는 것이다. 근데, Layout(Reflow)과 Painting(RePaint) 은 오래 걸리는 작업이기 때문에 수정 횟수가 많을수록 성능이 떨어지게 된다. 

 

그래서 자바스크립트는 성능저하를 막기 위해 동시에 발생한 여러 업데이트를 모아뒀다가 다 모였을 때 렌더링을 시키는 방식을 사용하는데, 이런 방법은 서비스의 규모가 커질수록 사용하기 어려워진다. (시간이 너무 오래걸림)

 

 

그렇다면 리액트는?

 

리액트는 Virtual DOM 을 사용해서 자바스크립트가 처리했던 일련의 과정들(동시에 발생한 여러 업데이트를 모았다가 한번에 수정하는)을 자동으로 처리해주기 때문에 빠른 렌더링이 가능하다.

 

Virtual DOM?

 

실제 브라우저가 렌더링하는 DOM 을 자바스크립트 객체로 카피해 논 것이라고 생각하면 된다. 

리액트는 화면의 업데이트가 일어날 때 실제 DOM 을 수정하기 전에 Virtual DOM 을 먼저 수정한다. 발생한 여러 업데이트를 Virtual DOM 에 모두 반영하고, 모인 업데이트들이 반영이 된 Virtual DOM 을 실제 DOM 에 반영해준다. 

 

Virtual DOM 이 업데이트들을 모아놓는 버퍼 역할을 하기 때문에 동시에 아무리 많은 업데이트가 발생해도 최소한의 횟수로 실제 DOM 이 수정되기 때문에 어느 정도의 업데이트 성능을 보장할 수 있다. 

 

 

4.2. React App 생성하기

 

[React/리액트] Vite 설치 및 사용

 

설치 후 pakage.json 파일을 살펴보면

dependencies 필드 안에 react 와 react-dom 패키지가 미리 설치되어 있고, devDependencies 필드 안에 여러 패키지 들이 설치되어 있는 것을 볼 수 있다. DevDependencies 필드는 개발할 때만 필요한 패키지가 저장되는 곳으로 개발 후 배포할 때는 같이 배포되지 않는다. 

 

 

근데 Vite 는 pakage.json 으로 기본 파일 구조만 설정하고 의존성(node_modules) 는 자동으로 설치되지 않기 때문에 아직 디렉토리에 node_modules 폴더가 존재하지 않기 때문에 npm install 명령어를 통해 의존성 설치를 해줘야 한다. 

npm install

 

 

4.3. React 디렉토리 구조

 

- public

• svg, png, img, 폰트, 동영상과 같은 코드가 아닌 정적인 파일들을 보관

- src

• 실제 작성한 코드들을 보관
• src 폴더 안에 있는 assets 폴더에도 정적 파일들을 보관할 수 있지만 public 폴더와 방식이 다름

- .eslintrc.cjs

• 코드 스타일을 설정하는 파일

- index.html 

• 리액트의 기본 틀 역할을 하는 파일

- vite.config.js

• Vite 의 옵션을 설정하는 파일

 

4.4. scripts

 

pakage.json 의 script 필드는 커맨드를 정의해 놓는 필드로, 여기에 명령어를 정의해 놓고 간편하게 리액트를 실행할 수 있다. 

 

디폴트로 아래와 같이 정의되어 있다. (앞에 npm run 또는 yarn 을 붙여서 터미널에서 사용하면 됨)

• dev: 리액트 앱을 개발용으로 실행시켜보는 명령어 (개발 중 실시간 변경사항 반영을 확인하기 위해 사용)
• build: 빌드하는 명령어
• lint: ESLint 를 사용해 프로젝트 코드 스타일, 문법을 체크하는 명령어 
• preview: 빌드된 결과물을 로컬 서버에서 미리보기로 실행하는 명령어 (빌드 후 최종 배포 전에 동작을 미리 확인하기 위해 사용)

 

 

4.5. React App 의 구동원리

 

브라우저가 내 컴퓨터 로컬 주소의 올바른 포트번호로 접속하게 되면 리액트는 index.html 파일을 브라우저에게 보내준다. 

html 파일에서는 script 태그가 /src/main.jsx 파일을 불러오는데, 이 자바스크립트 파일에서 동적으로 화면의 요소들을 추가해 그려준다. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

 

 

main.jsx 에서는 App 컴포넌트의 return 문 안에 있는 html 태그들을 불러와서 render 메서드를 통해 렌더링해서 화면에 보여준다. 

(리액트에서는 html 태그들을 리턴하는 함수를 컴포넌트라고 한다.)

// main.jsx 

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

// App.jsx

function App() { // App 컴포넌트
  const [count, setCount] = useState(0)

  return (
    <>
      생략
    </>
  )
}

export default App

 

 

 

추가) 라이브러리와 프레임워크

 

✅ 프레임워크 (Framework)

• 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 tool 을 제공 (라이브러리들의 모음)
• 개발자는 프레임워크가 제공하는 틀 안에서 방식에 맞춰 작업
• 통제권을 사용자가 아닌 프레임워크가 쥐고 있음

 

✅ 라이브러리 (Library)

• 전체적인 틀이 아닌 하나의 기능만을 도구처럼 제공

 

제어의 역전

프레임워크와 라이브러리의 차이점에 대해 찾아보면 제어의 역전 (Inversion of control) 이라는 말이 굉장히 많이 나오는데, 이는 개발자가 해왔던 일을 프레임워크가 대신 해주기 때문에 제어의 역전이 일어난다고 말하는 것이다. 

 

 

그렇다면 리액트는 프레임워크 ? 라이브러리?

리액트는 라이브러리

 

리액트는 ui 를 만드는 기능만을 제공하기 때문