React Tutorial 실습 - Spinbox 로 React 겉핥기

개요

Modern JavaScript 개발에 대해 간략하게 학습한다.
Webpack, Babel 개발환경에 대해 알아본다.
React를 활용하여 간단한 Spinnbox 컴포넌트를 만들어본다.

시작하기

Modern JavaScript 는 그냥 JavaScript랑 무엇이 다른가?

가시적으로 일단, 사용하는 규격이 달라졌다. ECMA Script 5 → ECMA Script 6 (통칭 ES6)
물론 ES6 버젼이 나온게 2017년이므로 2020년인 지금 계속해서 버젼업 되어 ES8 등이 나오고 있다.
ES를 규격이라 표현하였는데, 이러한 규격을 실무적으로 사용할 수 있도록 구현한 언어가 JavaScript이다.
JavaScript 를 더 이상 Web Browser 상에서 Dynamic 한 컴포넌트를 만드는데만 사용하지 않고, NodeJS(서버), ReactNative(어플리케이션), WebVR(가상현실) 등 다양한 분야에서 활용한다.
NPM, Bower 같은 의존성 라이브러리 통합 설치환경을 제공하여 컴포넌트 설치 및 번들링

참조문서

Webpack은 무엇인가?

Webpack 이란 쉽게 말해 번들링을 해주는 전처리기라 볼 수 있다.
C++, Java 와 같은 언어는 컴파일러가 존재하여 여러가지 파일(.cpp, .java)에 소스코드가 분산, 정리된 형태로 저장되고 컴파일러가 하나의 .exe 파일로 만들어주는 과정을 거쳐 사용자에게 프로그램이 배포된다.
JavaScript 언어는 인터프리터 언어로서 별도의 컴파일러 없이 인터넷 브라우저가 .js 파일을 호출하면 소스코드 원문 그대로 클라이언트(사용자)에게 전달되어 실행된다.
인터프린터 언어로써 개발자가 쉽게 학습하고 배포가 편리하다는 장점이 있지만 단점 또한 존재한다.
- 사용자가 소스코드 원문을 열람할 수 있어 해킹(또는 리버스 엔지니어링)에 취약하다.
- 하나로 묶어주지 않고 여러개의 파일을 호출하게 될 경우 네트워크 지연이 발생된다.
- 여담이지만, 인터넷 브라우저는 한 도메인에서 한번에 4개의 파일만 호출할 수 있다. 각 1kb짜리 .js 파일을 10개 내려받는데 걸리는 시간은 10kb 짜리 .js 파일을 하나 내려받는데 걸리는 시간보다 오래걸린다.
- 이런 네트워크 지연을 최대한 줄이기 위해 Domain Sharding, Image Sprite 등 다양한 기술을 사용한다.
웹서비스에서 필요한 모든 JavaScript 소스코드를 한 .js 파일에 담아서 배포한다면 네트워크 지연을 해소하는데 많은 도움이 될 것이다.
Webpack 은 여러 .js 소스코드 파일을 하나의 파일로 합쳐주고, 합치는 과정에서 minify, uglify를 진행하여 클라이언트가 쉽게 소스코드의 의미를 파악하지 못하도록 해킹을 방지하는 역할을 수행한다.
또한, 코드를 합쳐주면서 각 코드 속 변수의 Scope를 구분해주어, 각 변수가 서로 뒤엉키는 일이 없도록 방지하는 기능을 제공한다.

NAVER Blog (Webpack)	건국대 종정시 (non-Webpack)

난독화되어 코드의 의미를 파악하기 힘듬	특수키 사용 방지를 목적으로 하는 코드 파악 가능

참조문서

Domain Sharding 이란?

Babel 은 무엇인가?

앞서 Modern JavaScript의 차이점은 ECMA Script 6를 사용하는데 있다고 하였다.
하지만 Internet Explorer 8과 같은 옛날 브라우저를 포함하여 아직 ES6를 완벽하게 지원하지 않는 브라우저에서 ES6 규격으로 작성된 JavaScript를 실행한다면 많은 오류가 발생할 것이다.
따라서 Webpack 과 같은 번들링 전처리기에서 파일을 번들링하며 ES6 문법을 ES5 문법으로 변환해주는 작업이 필요한데 이를 Babel 이 담당하게된다.
여러가지 버젼과 기능을 제공하지만 우선 간략하게 이 정도만 학습하면 될 것 같다.
- ECMA Script 6 → ECMA Script 5 변환
- React JSX 문법 → ECMA Script 5 변환

React 시작하기

React 개발환경 구축

컴퓨터에 NodeJS, NPM 모듈은 설치되어있다고 가정한다.
Git Bash 또한 설치되어있어야한다.

적당한 빈 폴더에서 아래 명령어를 실행한다. 단, 폴더 이름으로 react 또는 다른 라이브러리 이름과 동일하게 해선 안된다.

$ npm init -y

위 명령에서 달러기호($)는 제외하고 복사한다. 보통 달러($) 또는 샾(#) 기호는 Linux, Unix 운영체제의 CLI 명령어임을 나타내는 말머리이다.

명령어를 실행했다면 폴더에 package.json 파일이 생성된 것을 확인할 수 있다. 해당 파일은 앞으로 실습해볼 프로젝트에 대한 요약정보와 실행방법 및 의존성 라이브러리 목록을 포함하게된다. Modern JavaScript에서 개발된 대부분의 프로젝트는 해당 파일을 열람하여 실행방법을 유추하거나 만든이, 라이센스, 의존성 라이브러리 등 다양한 정보를 파악할 수 있다.

1. `npm` 의존성 라이브러리 설치

아래 명령어를 복사/붙여넣기 하여 의존성 라이브러리를 설치한다.

$ npm install --save @babel/core @babel/preset-env @babel/preset-react react react-dom babel-loader webpack webpack-cli

2. `webpack.config.js` 파일 추가

Github Gist - Webpack 예제 페이지를 방문하여 소스코드를 webpack.config.js 파일로 저장한다.

webpack.config.js 파일은 Webpack 프로세서가 어떤 파일들을 번들링하는지, 어디에 번들링이 완료된 파일을 저장해야하는지 지정하고, 번들링 과정을 어떻게 처리해야하는지 명시하는 역할을 한다.

3. `.babelrc` 파일 추가

.babelrc 파일을 생성하고 아래 텍스트를 붙여넣는다.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

.babelrc 파일은 Webpack 프로세서가 번들링을 하는 와중에 소스코드를 어떻게 해석해야하는지 안내하는 역할을 한다. 읽어들인 소스코드 파일을 ECMA Script 6 에서 ECMA Script 5 으로 변환하는 방법이나, React JSX 문법으로 작성된 파일을 ECMA Script 5 으로 변환하는 방법을 지도한다.

4. `package.json` 파일 수정

package.json 파일을 열어보면 아래와 같은 텍스트를 찾을 수 있을 것이다.

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
...

위 텍스트를 아래와 같이 바꾼다.

...
"scripts": {
    "cleanup": "rm -rf dist && mkdir dist",
    "build": "npm run cleanup && ./node_modules/.bin/webpack --mode=none",
    "build:watch": "npm run cleanup && ./node_modules/.bin/webpack --mode=none --watch"
},
...

package.json 파일의 'script' 항목에 작성된 명령어는 아래와 같이 커맨드라인 환경에서 호출할 수 있다. $ npm run cleanup $ npm run build:watch

React 특징점 알아보기

참조문서 : Spinbox로 React 겉핥기

React 에 대해 세가지로 정리하자면 다음과 같다.

JSX (JavaScript XML) 사용
Virtual DOM
단방향 데이터 플로우(Unidirectional Data Flow)

JSX 란?

기존 jQuery 라이브러리를 사용해 DOM 을 조작한다면 .js 파일에서 HTML 언어를 string 으로 저장해서 관리했기 때문에 HTML 마크업을 관리하기도 어렵고 소스코드 자체가 읽기 어려워지는, 더러워지는 문제가 있었다. React 의 탄생배경은 MVC 패턴에서 View 에 집중하려는 노력에 있는데, JavaScript 상에서 HTML 마크업을 보다 편리하고 가독성있게, 직관적으로 관리할 수 있도록 만드는데 많은 도움이 된다. JavaScript 상에서 HTML 마크업을 거의 그대로 사용할 수 있다.

Virtual DOM

JSX 으로 작성된된 React 컴포넌트는 브라우저에 표현된 DOM Element 와 일대일로 대응하지만 완전히 동일하지는 않다. 랜더링된 React 컴포넌트에서 dataset 이나 innerHTML 같은 속성을 변경하더라도 곧 다시 React 원본 컴포넌트대로 덮어씌워진다. 이는 데이터 무결성을 보장하고 아래 서술할 일방향 데이터 플로우를 만들기 위함이다.

단방향 데이터 블로우

React 컴포넌트 속 state 객체에 담긴 데이터를 토대로 랜더링이 이루어진다. state 객체 값을 바꾸지 않고 랜더링 완료된 DOM Element를 바꾸어봤자 React가 다시 랜더링 될 때 덮어씌워진다.

React를 활용해서 Spinbox 컴포넌트 만들기

프로젝트 파일 구성

project-root/
├── src/
│   ├── index.js
│   └── spinbox.component.js
├── package.json
├── webpack.config.js
└── .babelrc

위 형태로 파일이 구성된다.
.babelrc 파일은 파일명이 없고 확장자가 babelrc 인게 맞다.
src 폴더를 새로 만들고 해당 폴더 안에 JavaScript 소스코드를 넣어둔다.
Webpack 프로세서가 src/ 폴더 속 소스코드를 불러와서 dist/ 폴더 안에 번들링 하게된다.

전체 소스코드

Github Gist - 전체 소스코드

위 소스코드를 각 파일을 생성하여 붙여넣는다. 시간이 촉박하지 않다면 코드에 익숙해지기 위해 복사/붙여넣기 보다는 한줄 한줄 따라서 쳐보는 것을 추천한다.

index.html

어느정도 미려한 컴포넌트 디자인를 위해 KUNG 디자인 스타일시트 라이브러리를 활용한다.
dist/index.js 파일을 읽어들이는데, Weback 프로세서가 src/ 폴더 속 소스코드를 번들링한다면 dist/ 폴더에 저장할 것이고 - 따라서 HTML 에서는 dist/ 경로로 파일을 불러온다.

index.js

document DOM이 모두 랜더링 되었을 때 이벤트를 등록해서 React 랜더링을 시작한다.
ReactDOM 라이브러리를 사용하여 React 컴포넌트를 HTML으로 변경하여 랜더링하게 된다.
querySelector 메소드는 HTML의 document 객체 속 nodeElement 를 탐색하는 메소드이다.

spinbox.component.js

React 컴포넌트를 JSX 문법으로 작성한다.
React 컴포넌트 LifeCycle 에 대해서 간단히 알아본다.
className, style 속성에 대해서 HTML 속성과 다른점을 알아본다. ex) marginLeft > marginHorizontal
onClick 속성에 대해 알아본다. (ES6, React 속에서 함수 지정에 대하여)
this.state, VirtualDOM, 단방향 데이터 플로우에 대해 알아본다.

grammar-team / whale-grammar