1. 리액트와 자바스크립트
1-1. 자바스크립트의 역사
초창기 호황에서 불운의 시대로
1990년대 자바스크립트 초창기, 웹 페이지 곳곳에 애니메이션 이미지를 배치하거나 텍스트를 빛나게 하는 등 주로 시각적 효과에 대한 제작이 급증함.
무겁고 촌스러운 페이지가 양산됨.
크로스 브라우저 문제와 잇따른 보안 취약점 보고로 인해 자바스크립트의 관심도가 하락함.
Ajax를 통한 자바스크립트의 부활
Ajax(Asynchronous Javascript + XML)는 "브라우저에서 데스크톱 앱과 같은 페이지를 만드는 기술"의 총칭이다.
이 시기에 ECMA 인터내셔널의 주도로 자바스크립트 표준화가 진행되고 브라우저 벤더들의 기능 확장 전쟁이 진정되면서 크로스 브라우저 문제가 완화됨.
인터넷 자체의 보급으로 보안에 대한 관심이 높아지면서 보안 허점도 줄어듦.
자바스크립트가 HTML/CSS를 보완하는 조연에서 주연으로 바뀜.
HTML5의 시대로
브라우저 네이티브 기능만으로 앱을 개발할 수 있는 기반, 자바스크립트 API(Web API)가 마련됨.
- Geolocation API
- Web Storage
- File API
- Canvas
- Web Workers
- WebSocket
HTML5와 HTML Living Standard
참고로 현재 HTML5라는 규격은 없다. 2021년 W3C에서 HTML 관련 규격을 완전히 폐지하고 WHATWG가 HTML LS로 표준화 작업을 이어받았기 때문이다.
HTML LS는 버전 번호 등의 개념이 없고, 매일 개정 작업을 진행하고 있다.
1-2. jQuery에서 차세대 라이브러리로
2000년대부터 10년 가까이 사실상 표준의 지위를 지키고 있는 것이 제이쿼리다.
jQuery의 매력과 한계
제이쿼리는 자바스크립트의 UI 개발을 폭넓게 지원하는 훌륭한 라이브러리다.
목적에 특화된 플러그인이 수천 수만개가 준비되어 있어서 골라 사용할 수 있다.
하지만, 프론트엔드 개발이 고도화되면서 부족한 면이 눈에 띄게 많아졌다.
데이터를 가져와서 페이지에 반영하기 위해 제이쿼리는 다음의 과정을 거친다.
- 문서 트리에서 입력값을 가져오고
- Ajax 통신을 하고
- 결과를 HTML 엘리먼트 요소로 가공하여 페이지에 삽입한다.
따라서 입출력을 할 때 항상 페이지의 구조를 의식해야 한다.
매번 페이지 조작을 반복하는 SPA의 경우 제이쿼리로 구현하는 것은 현실적이지 않다.
그래서 자바스크립트 객체와 페이지를 연결하는 라이브러리가 필요하게 되었다.
앱 전체를 조망하여 페이지가 변화하면 객체에 반영하고, 반대로 객체가 변화하면 페이지에 반영하는 메커니즘을 제공하는 존재가 필요하게 되었다.
1-3. 주요 자바스크립트 프레임워크
- 리액트
- 앵귤러
- 뷰
1-4. 리액트의 특징
- 낮은 도입 장벽, 낮은 학습 비용
- 컴포넌트 지향적
- 앱의 단계적 성장에 대응할 수 있다.
- 템플릿 기능(데이터를 페이지에 반영)
- 컴포넌트(공통된 UI를 부품화하여 서로 연동)
- 상태관리(앱에서 다루는 데이터를 중앙에서 관리)
- 라우팅 기능(페이지 분할 & SPA로 전환)
- Next.js 프레임워크(서버 기능 연동, 앱 기반 제공)
- 다양한 문서와 라이브러리 제공
2. 리액트 앱을 개발/실행하기 위한 기본 환경
2-1 Create React App이란?
Create React App은 리액트 앱을 개발하기 위한 명령줄 도구이다.
지금은 지원 중지가 되었다.
툴체인
Create React App과 같이 개발에서 사용하는 도구 일체를 툴체인이라고 한다.
리액트에 대응하는 툴체인으로는 Next.js, Vite, Gatsby, Parcel 등이 있다.
트랜스파일러
리액트 세계에서는 JSX라는 확장 구문을 이용해 개발을 하는 것이 일반적이다.
하지만 브라우저는 확장 구문을 이해를 못하므로 순수 자바스크립트로 미리 변환해 놓아야 한다.
이 작업을 하는 것이 트랜스파일러다.
트랜스파일러의 대표적인 것이 바벨이다.
번들러
자바스크립트에서도 앱이 비대해지면서 코드를 모듈로 관리하는 것이 일반적이다.
브라우저에서 네이티브로 모듈을 관리 실행하는 환경이 마련되고 있긴 하지만 현실적인 문제로 인해 일반적이지 않다.
예를 들어, 대량의 모듈을 개별적으로 브라우저가 가져오는 것은 네트워크 환경상 매우 비효율적이기 때문이다.
따라서 미리 모듈을 하나로 묶어 전송 효율을 높인다.
이러한 처리를 번들이라고 하며 이를 담당하는 도구를 번들러라고 부른다.
Create React App에서는 웹팩을 번들러로 사용한다.
노번들 툴
자바스크립트를 실행하기 위해서는 완전히 번들해야 하지만, 개발도중에 테스트를 실행할 때마다 완전히 번들하는 것은 속도가 너무 느리다.
따라서 개발 시 번들링을 하지 않고, 모듈 하나하나의 임포트를 브라우저에 맡기는 툴이 등장했다. 수정한 코드만 다시 불러오면 되므로 수정 & 재실행 사이클을 빠르게 돌릴 수 있다. 이러한 기능을 HML: Hot Module Replacement 라고 한다. 대표적인 것이 Vite이다.
minification & digest 부여
미니피케이션
코드 자체의 크기를 최소화하는 것을 말한다.
주석이나 공백을 제거, 변수 이름을 짧게 수정 하는 등 파일 크기 자체를 줄여 전송 효율을 높인다.
다이제스트
최종적으로 생성되는 파일명 끝에 main.해시값.js 와 같이 해시값(=다이제스트)를 부여해서 의도치 않은 브라우저의 캐싱을 방지할 수 있다.
개발 서버
실행하기 위해서는 브라우저가 HTTP를 요청을 통해 HTML 문서를 가져와서 랜더링을 해야한다.
개발시에도 마찬가지다.
브라우저에서 자바스크립트를 실행하려면 직접 HTML 파일을 실행하거나 HTTP 통신을 통해 서버로부터 받아와야 한다.
하지만 개발 용도로 외부 네트워크 상에 서버를 준비하는 것은 매우 거창한 일이다.
그래서 개발 시에는 보통 로컬 컴퓨터에 간이 서버를 설치하는 것이 일반적이다.
툴체인은 이러한 간이 서버를 제공한다.
