모던 자바스크립트로 배우는 리액트 입문

 

p.6

리액트 학습에 고전을 겪는 이유는 '자바스크립트'에 대한 이해가 부족하기 때문입니다.

 

p.18

일반적으로 모던 자바스크립트를 말할 때는 다음과 같은 특징이 있습니다.

 

- 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리/프레임워크를 사용 (최근에는 스벨트처럼 가상 DOM을 이용하지 않는 기술도 등장)

- npm, yarn 등 패키지 관리자 사용

- 주로 ES2015(ES6) 이후의 표기법 사용

- 웹팩 등 모듈 핸들러 사용

- 바벨 등 트랜스파일러 사용

- SPA로 작성

 

p.20-21

기존 자바스크립트에서는 화면 요소를 변경할 때 DOM을 직접 지정해서 바꿔 쓰는 처리를 했습니다. 다음은 순수한 자바스크립트나 제이쿼리를 사용해 화면에 요소를 추가하는 코드 예입니다.

 

순수한 자바스크립트

// id=nushida를 가진 요소 아래에 Hello World!!라고 설정한 p태그를 삽입한다.

var textElement = document.createElement("p");

textElement.textContent = "Hello World!!";

document.getElementById("nushida").appendChild(textElement);

 

제이쿼리

// id=nushida를 가진 요소 아래 Hello World!!라고 설정한 p태그를 삽입

var textElement = $("<p>").text("Hello World!!");

$("#nushida").append(textElement);

 

이런 코드는 순차적이어서 이해하기 쉽지만 렌더링 비용(화면 표시 속도)에 문제가 발생하기 쉽고 프로그램 코드가 비대해져 어디에서 무엇을 하고 있는지 쉽게 파악하기 어려운 단점이 있었습니다. 이런 문제를 해결하기 위해 만들어진 것이 가상 DOM입니다.

 

가상 DOM은 자바스크립트 객체로 만들어진 가상의 DOM입니다. 이를 이용해 실제 DOM과의 차이를 비교하고 변경된 부분만을 실제 DOM에 반영함으로써 DOM 조작을 최소한으로 줄일 수 있습니다. 

 

리액트, Vue 등 모던 자바스크립트 프레임워크나 라이브러리에서는 가상 DOM을 제공합니다. 그 덕분에 페이지 이동은 자바스크립트의 화면 치환으로 구현하지만 렌더링 비용을 최소한으로 억제해 쾌적한 웹 시스템을 제공할 수 있습니다. 

 

p.22

예전에는 자바스크립트를 개발할 때 모든 처리를 파일 하나에 기술했습니다. 그래서 복잡한 시스템에서는 코드가 수천 행 이상이 되어 매우 혼란스러웠습니다. 또한 그 코드들은 재사용할 수가 없어 개발 효율도 매우 떨어졌습니다.

 

이후에는 js파일이 다른 js파일을 로딩해 사용할 수 있도록 개선되었습니다. 덕분에 코드 공통화나 재사용이 가능하게 되었습니다. 그러나 로딩 순서를 지키지 않으면 에러가 발생하거나(의존 관계), 로딩한 상수나 변수를 사용하는 경우 무엇이 어디에서 로딩된 것인지 매우 알기 어려운 문제 등이 있었습니다.

 

그럼 모던 자바스크립트는 어떨까요? npm이나 yarn과 같은 패키지 관리자를 사용함으로써 앞에서 설명한 문제점들이 크게 개선되었습니다. 

 

p.23

npm이나 yarn은 다음과 같은 장점을 가지고 있으며 앞에서 설명한 문제를 해결합니다.

- 의존관계를 의식하지 않아도 자동으로 해결해준다.

- 팀 안에서 패키지를 공유하고 버전을 통일하기가 쉽다.

- 전 세계에 공개된 패키지를 하나의 명령어로 이용할 수 있다.

- 어디에서 로딩한 것인지 알기 쉽다.

 

p.26

자바스크립트는 넷스케이프가 개발했습니다. 사실 처음 이름은 자바스크립트가 아니라 라이브스크립트였습니다. 당시 썬 마이크로시스템즈(현 오라클)가 개발하던 자바가 큰 인기를 얻었고 그 영향을 받아 1995년에 자바스크립트라는 이름으로 바뀌었습니다(넷스케이프와 썬 마이크로시스템즈는 당시 제휴 관계였음)

 

이후 마이크로소프트가 J스크립트라는 비슷한 언어를 개발해 IE에 탑재하였습니다. 그러나 넷스케이프의 자바스크립트와 사양이 달라 매우 번거로운 상황이 되었습니다. 결국 국제 단체인 ECMA 인터내셔널에 자바스크립트 핵심 사양에 관한 표준화를 의뢰하게 되었고 그 결과 ECMAScript라는 표준 사양이 만들어졌습니다. 브라우저별로 확장되었지만 ECMAScript를 기반으로 함으로써 호환성이 향상되었고 현재는 1년에 한 번씩 ECMAScript를 업데이트하고 있습니다. 

 

p.27-28

모던 자바스크립트 개발에서는 모듈 핸들러와 트랜스파일러라 불리는 구조가 필수입니다.

 

예를 들어 리액트의 템플릿 프로젝트를 만들어주는 create-react-app을 사용하면 모듈 핸들러와 트랜스파일러를 의식하지 않고도 개발을 시작할 수 있습니다. 하지만 복잡한 프로젝트인 경우에는 설정 파일을 조작할 필요가 있으며 내부에서 어떤 구조로 작동하는지 개념을 아는 것이 매우 중요합니다.

 

모듈 핸들러

 

자바스크립트는 세세하게 나누어 개발하는 것이 효율적이고 생산성도 높아집니다. 단, 프로덕션 환경에서 실행할 때는 파일을 나눌 필요가 없습니다. 오히려 로딩 횟수가 늘어나 성능이 저하되기도 합니다. 그래서 개발할 때는 파일을 나누고 프로덕션용으로 빌드할 때는 파일 하나에 모으기 위해 js파일이나 css파일 등을 한데 합치는 모듈 핸들러가 만들어졌습니다. 

 

앞서 자바스크립트에서는 로딩 순서에 따른 의존 관계가 있고 패키지 관리자가 그것을 해결해준다고 소개했습니다. 모듈 핸들러 또한 파일을 하나로 모을 때 의존 관계를 해결해주는 고마운 존재입니다. 

 

미리 설정파일을 기술해두고 개발자는 아무것도 신경쓰지 않고 개발하면 됩니다. 빌드를 실행하면 모듈 핸들러가 파일들을 모은 것이 생성되며 해당 파일을 프로덕션 환경에 반영함으로써 프로그램을 실행할 수 있습니다. 참고로 요즘은 웹팩이라 불리는 모듈 핸들러가 주류입니다.

 

트랜스파일러

 

모듈 핸들러가 여러 파일을 하나로 모아준다면 트랜스파일러는 자바스크립트 표기법을 브라우저에서 실행할 수 있는 형태로 변환해줍니다.

 

ECMAScript에 매년 사양이 추가되는 반면 브라우저에 따라서는 아직 새로운 표기법에 대응하지 않는 경우가 있습니다. 특히 IE는 ES6 이후에서는 에러가 발생하며 전혀 동작하지 않아 개발자들을 울렸습니다. 여담이지만 2021년 5월 마이크롯소프트가 2022년 6월 15일에 대부분의 OS에서 IE11 지원을 종료한다고 발표하자 개발자들은 환호성을 질렀습니다.

 

모처럼 새롭게 편리한 기능이 추가되었는데 작동하지 않는 브라우저가 있어서 그 기능을 쓰지 못하는 것은 대단히 아까운 일입니다. 트랜스파일러를 사용하면 새로운 표기법으로 작성된 자바스크립트를 오래된 표기법(여러 브라우저에서 실행할 수 있는 형태)으로 변환할 수 있습니다. 이외에도 리액트는 js파일에서 JSX 표기법이라 부르는 특수한 규칙을 따르는 작성 방법으로 코드를 기술합니다. 이런 코드 또한 브라우저가 인식할 수 있는 형태로 자동 변환됩니다. 덧붙여 현재는 바벨이라 불리는 트랜스파일러가 주류입니다. 

 

p.29

웹팩과 바벨을 소개했지만 향후 프론트엔드 빌드 도구의 주류가 될 것으로 보는 비트(Vite)도 있습니다. 비트는 Vue.js를 개발한 에반 유를 중심으로 개발하고 있으며 웹팩을 사용해서 개발하는 것보다 속도가 압도적으로 빨라 화제가 되었습니다. 깃허브 저장소의 스타수도 30,000을 훌쩍 뛰어넘을 정도로 많은 주목을 받고 있습니다.

 

웹팩을 사용해 프론트엔드 개발을 하는 경우 코드에 무언가 변경이 발생하면 서버를 다시 기동하지 않아도 다시 번들이 실행되고 업데이트 내용이 브라우저에 반영됩니다. 이는 사용자에게 매우 좋은 개발 경험을 제공하지만 프로젝트 규모가 커짐에 따라 번들로 묶는 시간이 늘어나는 문제가 발생하게 되었습니다. 반면에 비트는 개발 환경에 따라 소스 코드를 번들하지 않고 빠르게 실행해줍니다.

 

p.31

SPA에서는 HTML 파일이 하나이며 자바스크립트를 사용해 DOM을 바꿔 써서 화면 이동을 구현하는 것이 기본임을 기억하기 바랍니다.

 

p.32

SPA는 개발자 입장에서도 장점이 있습니다. 각 페이지마다 HTML 파일을 준비해야 하는 기존 웹 시스템과 달리 리액트 등 모던 자바스크립트로 개발할 때는 화면의 각 요소를 컴포넌트로 정의해서 재사용합니다.

 

대부분의 웹 시스템에서는 버튼이나 텍스트 필드, 리스트나 메시지 표시 같은 요소를 동일한 디자인으로 다양한 화면에서 사용합니다. 이들을 각각 부품으로 정의해 여러 화면에 적용하면, 어떤 버튼의 디자인을 전체적으로 변경하고 싶을 경우 컴포넌트 하나를 수정함으로써 전체에 변경 내용을 적용할 수 있습니다. 

 

p.38

var로 변수를 선언하는 것은 몇 가지 문제점이 있어 모던 자바스크립트에서는 거의 이용되지 않습니다. 그 문제점이란 변수를 덮어쓸 수 있다는 점과 다시 선언(재선언)할 수 있다는 점입니다. 

 

p.41

문자열이나 수치 등 프리미티브 타입(primitive type)이라 불리는 종류의 데이터는 const를 이용해 정의한 경우 덮어쓸 수 없습니다. 하지만 객체나 배열 등 오브젝트 타입(object type)이라 불리는 데이터들은 const로 정의해도 도중에 값을 변경할 수 있습니다.

 

p.43

리액트 개발에서는 const를 가장 많이 이용합니다. 앞에서 확인한 것처럼 객체나 배열은 const로 선언해도 속성을 변경할 수 있습니다. 그리고 리액트 개발에서 동적으로 바뀌는 값은 State라는 다른 개념으로 값을 관리합니다.

 

그래서 대부분은 const를 이용하고, State로 관리하지 않으면서 처리 도중 값을 덮어 써야 하는 변수만 let으로 선언합니다.

 

p.44

문자열 안에서 자바스크립트의 값을 다룰 때는 템플릿 문자열을 이용하는 것이 좋습니다.

 

p.52-53