- Before, React & Babel & Webpack 에 대해 아는 것
(1) React
: ES6문법을 사용하는 자바스크립트이며, 라이프 싸이클(ComponentDidMount ... 등)을 통해 데이터 흐름을 조작할 수 있습니다. React 는 메인 함수 하나를 기반으로 동작하는 것이 아닌 컴포넌트 단위로 개발함으로써 재사용성이 뛰어납니다.
(2) Babel
: ES6 문법인 React 를 화면 로딩 시 번역하여 보여 주는 것.
(3) Webpack
: React 프로젝트 빌드 도구.
- 정의와 개념, 쓰임!
(1) React
- 페이스북이 개발한 UI 라이브러리로써 재사용이 가능한 UI 를 사용할 수 있께 해줍니다
- 스스로 상태를 관리하는 캡슐화된 컴포넌트 기반으로 소스의 가독성이 매우 높고 간단하여
쉬운 유지보수가 가능해집니다.
- JSX 사용. JSX 는 Javascript 의 확장 문법입니다.
DOM 엘리먼트들을 만들 때 Javascript 형식으로 작성해야 하는 것을, XML 과 비슷한 형태로
작성할 수 있게 해줍니다. 필수는 아니지만, 사용하면 굉장히 편함.
- Virtual DOM 을 사용한 어플리케이션의 성능 향상.
Virtual DOM 이라는 개념을 사용하여 상태변화에 있어서 선택적으로 UI 를 렌더링함.
따라서, 최소한의 DOM 처리로 컴포넌트들을 렌더링할 수 있게 해줍니다.
* DOM이란?
- Document Object Model.
- 이는 객체를 통하여 구조화된 문서를 표현하는 방법이며, XML 또는 HTML 로 작성됩니다.
- 웹 브라우저는 이 DOM 을 활용하여 객체에 Javascript 와 CSS 를 적용합니다.
- DOM 은 트리 형태로 되어있어서, 특정 Node 를 찾을 수도 있고, 수정, 제거, 삽입 가능합니다.
- 문제점 : 동적 UI 에 최적화되어 있지 않다는 것입니다. HTML 은 자체적으로 정적이구요.(자바스크립트나
jQuery 를 통해 손을 볼 순 있지만요.) 하지만 요즘의 큰 규모의 웹 어플리케이션(ex. 페북,트윝)을 보면
스크롤 내릴수록 수많은 데이터가 로딩됩니다. 이 데이터들을 DOM 에 직접 접근하여 변경 시
느려지는 이슈가 발생할 수 있습니다. 브라우저 딴에서 DOM 의 변화가 일어나면,
브라우저가 CSS 를 다시 연산(repaint)하고, 레이아웃을 구성(reflow)하고, 웹 페이지를 repaint 하는데,
이 과정에서 시간이 허비되어 성능 이슈(느려짐)이 발생하는 것입니다.
즉, 성능 개선을 위해 reflow 횟수를 줄이기 위하여 코드를 최적화 해야 합니다.
DOM 조작을 아예 안할 순 없으니, 최소한의 DOM 조작을 통한 개선을 해야하는 것이죠.
* Vitrual DOM이란?
- 실제 DOM 에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성합니다.
이는 마치 실제 DOM 의 가벼운 사본같은 것입니다.
- React 에서 상태 변환되어 브라우저상의 실제 DOM 업데이트 할 때 3가지 절차를 밟아요
1. 데이터가 업데이트되면 전체 UI 를 Virtual DOM 에 리렌더링
2. 이전 Virtual DOM 과 현재 Virtual DOM 을 비교
3. 바뀐 부분만 실제 DOM 에 적용
- 즉, 컴포넌트가 업데이트 될 때, 레이아웃 계산이 한번만 이뤄집니다.
- Virtual DOM 을 사용하는 이유 : 지속해서 데이터가 변화하는 대규모 어플리케이션 구축에 맞기 때문
업데이트 처리에 대한 간결함.
- React 버전 v15 부터 IE8 이하 버전을 지원하지 않습니다.
- 어플리케이션의 View 레이어만 다루므로 Ajax, Router 등의 기능은 직접 구현하거나 다른 모듈을 설치하여
사용해야 합니다.
(2) Babel
- Babel is a Javascript Compiler
- React 가 사용하는 Render() 함수 내 JSX 문법을 Javascript 문법으로 변환시켜 주는 역할을 합니다.
(3) Webpack
- webpack 이라는 도구는 import(혹은 require)한 모듈들을 불러와서
한 파일로 합치는 번들링(bundling) 작업을 합니다.
보통, 클라이언트 사이드에선 html 태그에서 script를 통하여 여러파일을 불러오는 방식을 사용합니다.
하지만 node.js 에선 [ var React = require('react'); ] 사용하여 모듈을 불러오고,
ECMAScript2015(ES6) 문법에선 [ import React from 'react'; ] 를 사용하구요.
- return (<h1>HelloWorld</h1>) 이런식의 HTML 같은 코드가 ' 또는 " 이 없이 사용되는 건 JSX 코드입니다.
이 코드는 webpack 에서 번들링 과정을 거치면서 webpack 에서 사용하는 babel-loader 를 통해
Javascript 로 변환됩니다.
+ 실무 프로젝트 개발 경험 중 UMD(Universal Module Definition) 방식을 사용하여 메모리 절약했던 방법
(1) UMD(Universal Module Definition)
- 해당 프로젝트의 UI 구성은 Work Portal UI 를 기반으로 앱 컴포넌트들이 추가되는 형식이었습니다.
각 앱 컴포넌트들은 공통 모듈을 Sinopia(사내 UI Module Repositry)에서 import 하여 사용하였습니다.
허나, 수 십 가지의 앱 컴포넌트들이 같은 공통 모듈을 import 하였기 떄문에 중복된 자원을
처리해야 했습니다.
이에 대한 대안으로써 UMD 방식을 사용하였고, 공통 모듈을 번들링한 파일을 서버에 별도로 구성 및 업로드하여
html 파일 내에서 URL을 통해 참조할 수 있도록 구성하였습니다.
이러한 처리로 중복된 자원을 절약할 수 있었고, 화면 초기 진입 시 URL 참조에 소요되는 소스 로딩 시간을 제외하면
이후 모듈 참조에도 빠른 속도를 낼 수 있었습니다.