모던 자바스크립트 기초

모던 자바 스크립트 개요

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

 

- 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리/프레임워크를 사용

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

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

- 웹팩(webpack) 등 모듈 핸들러 사용

- 바벨(Babel) 등 트랜스파일러(transpiler) 사용

- SPA(Single Page Application)로 작성

 

자바스크립트를 배워야하는 이유

모던 자바 스크립트는 배울 만한 가치가 있습니다. 애초에 자바스크립트는 웹 브라우저에서 복잡한 동작을 구현하는 정도였지만 지금은 프론트엔드 뿐만 아니라 백엔드도 구현할 수 있습니다(Node.js나 Deno 등). 뿐만 아니라 스마트폰 애플리케이션, AR, VR, 음성인식, 데스크톱 애플리케이션도 자바스크립트로 구현합니다. 하나의 언어로 적용할 수 있는 범위 측면에서 보면 자바스크립트는 모든 언어 중에서 단연 으뜸이라고 말할 수 있습니다. 그리고 웹 시스템 개발에는 프론트엔드 구현에 자바스크립트를 100% 사용합니다.

---

DOM, 가상 DOM

프론트엔드 개발과 DOM(돔)은 떼려야 뗄 수 없는 사이입니다. DOM은 HTML을 해석해서 트리 구조로 나타낸 것이며 Document Object Model의 약어입니다.

 

기존 자바스크립트에서는 화면 요소를 변경할 때 DOM을 직접 지정해서 바꿔 쓰는 처리를 했습니다. 

 

- 순수한 자바스크립트

//id=nushida를 가진 요소 아래에 Hello Wolrd!!라고 설정한 p태그를 삽입한다.
var textElement = document.createElement("p");
textElement.textContent = "Hello World!!";
document.getElementById("nushida").appendChild(textElement);

 

- 제이쿼리

//id=nushida를 가진 요소 아래에 Hello Wolrd!!라고 설정한 p 태그를 삽입한다.
var textElement = $("<p>").text("Hello World!!");
$("#nushida").append(textElement);

 

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

 

가상 DOM

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

 

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

---

패키지 관리자

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

 

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

 

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

패키지 관리자

백엔드, 프론트엔드를 불문하고 어떤 프로그래밍 언어를 사용해 개발하는 경우 기본적으로 외부에 공개된 다양한 패키지를 이용하게 됩니다.

 

단, 패키지를 설치할 때 개발자가 각각의 PC에 자유롭게 설치하면 버전이 다 달라 동일한 환경을 재현하기가 매우 번거로워집니다. 그래서 요즘은 일반적으로 패키지 관리, 설치, 업그레이드 등을 전담하는 패키지 관리자를 사용합니다. 다음은 대표적인 패키지 관리자입니다.

 

- 자바스크립트의 npm

- 루비(Ruby)의 gem

- PHP의 composer

- 기타

 

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

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

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

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

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

npm, yarn의 기본 개념

 

NPM은 전 세계 사람이 패키지 공개 장소로 사용하고 있습니다(일반적으로는 대문자는 저장소, 소문자는 패키지 관리로서의 npm을 나타내는 경우가 많습니다.). 그리고 다음과 같은 명령어를 사용해 사용자 PC에 패키지를 설치할 수 있습니다.

npm install [패키지명]

yarn add [패키지명]

 

명령어를 실행하면 로컬 파일인 package.json이 변경되고 패키지 정보가 추가됩니다. 동시에 npm으로 설치했을 때는 package-lock.json 파일이, yarn으로 설치했을 때는 yarn.lock 파일이 생성(및 업데이트)됩니다. lock 파일에는 패키지가 내부에서 사용하는 다른 패키지의 버전 정보나 의존 관계가 기록됩니다.

 

이 두 개의 파일로 어떤  패키지의 어떤 버전이 설치되어 있는지 알 수 있기 때문에 다른 사용자의 터미널에서도 완전히 동일한 환경을 바로 만들 수 있습니다.

 

package.json과 package-lock.json(yarn.lock) 두 파일에서 모듈을 전개(같은 환경을 작성)하는 것도 매우 간단합니다. 다음 명령어를 실행하기만 하면 됩니다.

npm install

yarn install

 

명령어를 실행하면 두 파일을 참조해 버전이나 의존 관계가 해결된 상태로 node_modules라는 폴더를 만드로 그 안에 실제 패키지를 전개합니다. 실제로 프로그램을 실행했을 때는 node_modules 안을 참조해 패키지를 편리하게 작동시킬 수 있습니다.

 

node_modules 폴더는 용량이 매우 크기 때문에 깃허브 같은 소스 관리 도구에 업로드하거나 복사 밑 붙여 넣기로 이동하는 등의 작업은 하지 않는 것을 권장합니다. 앞에서 설명한 것처럼 두 개의 package 파일만 있으면 어떤 환경에서도 같은 node_modules를 재현할 수 있으므로 일부러 용량이 큰 무거운 파일을 주고받을 필요가 없습니다.

 

- 깃허브에 업로드하면 안되는 것들!

 

node_modules 폴더나 로그와 관련된 것, 빌드 과정에서 만들어지는 폴더 등이 있습니다. 이력 정보도 신경 써야 하는데 AWS의 액세스 키 등을 잘못 업로드 하지 않게 주의해야합니다.

 

프로젝트 폴더 안에 .gitignore라는 파일을 만들고 그 안에 깃으로 관리하지 않을 폴더나 파일을 지정하면 됩니다. 지정된 폴더나 파일은 깃에서 관리되지 않아 깃허브에 업로드되지 않습니다.

---

ECMAScript

자바스크립트는 구글 크롬이나 마이크로소프트 에지 같은 브라우저에서 동작하는 언어입니다. 지금은 전 세계가 자바스크립트를 사용하고 있기 때문에 마음대로 기능을 추가해서는 안 되므로 ECMScript라 불리는 자바스크립트 표준 사양이 정해졌습니다.

 

자바스크립트의 역사

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

 

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

 

ECMAScript 명칭

ECMAScript는 ECMAScript 1st edition에서 시작해 개정될 때 마다 2nd, 3rd와 같이 버전이 높아졌습니다. 이를 ES2, ES3 등으로 부릅니다. 2015년 부터 '표준 사양은 1년에 한 번 업데이트한다'는 결정이 내려졌고 당시 최신 버전은 ES6이었지만 ES2015와 같이 양력 연도를 붙이는 방법을 일반적으로 사용하게 되었습니다.

 

- ES6 = ES2015

- ES7 = ES2016

 

근대 자바스크립트 전환기

근대 자바스크립트의 전환기라고 불릴 만큼 ECMAScrip가 크게 개정된 버전은 ES2015(ES6)입니다. 2015년에 기능이 대거 추가되며 리액트 등 모던 자바스크립트 개발에 필수라 할 수 있는 문법이나 기능이 더해졌습니다. 다음은 추가된 사양의 일부 예입니다.

 

- let, const를 사용한 변수 선언

- 화살표 함수

- Class 구문

- 분할 대입

- 템플릿 문자열

- 스프레드 구문

- Promise

- 기타

---

모듈 핸들러, 트랜스파일러

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

 

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

 

모듈 핸들러

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

 

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

 

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

 

트랜스파일러

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

 

ECMAScript에 매년 사양이 추가되는 반면 브라우저에 따라서는 아직 새로운 표기법에 대응하지 않는 경우가 있습니다. 특히 IE는 ES6 이후에서는 에러가 발생하며 전혀 동작하지 않았습니다. 

 

트랜스파일러를 사용하면 새로운 표기법으로 작성된 자바스크립트를 오래된 표기법으로 변환할 수 있습니다. 이외에도 리액트는 js 파일에 JSX 표기법이라 부르는 특수한 규칙을 따르는 작성 방법으로 코드를 기술합니다. 이런 코드 또한 브라우저가 인식할 수 있는 형태로 자동 변환됩니다. 덧붙여 현재는 바벨(Babel)이라 불리는 트랜스파일러가 주류입니다.

 

모듈 핸들러, 트랜스파일러 정리

이 둘의 공통적인 목적은 다음과 같습니다.

높은 효율로 개발하고 실행 시 적절하게 변환한다.

 

앞에서도 언급한 것처럼 최근에는 프레임워크나 라이브러리 측에서 이런 부분을 은폐해서 귀찮은 부분을 해결해주므로 입문자는 애초에 이런 구조로 작동하고 있다는 것 자체를 모를 수도 있습니다. 물론 처음부터 이와 관련된 설정 파일 작성법이나 환경을 직접 만들 필요는 전혀 없습니다. 하지만 우선 개념적으로 모듈 핸들러와 트랜스파일러의 동작을 이해해두는 것이 좋습니다.

---

SPA와 기존 웹 시스템의 차이

리액트를 비롯한 모던 자바스크립트 웹 시스템은 SPA(Single Page Application)로 작성됩니다. SPA에서는 기본적으로 HTML 파일은 하나만 사용하고 자바스크립트를 이용해 화면을 전환함으로써 화면 이동 등의 동작을 표현합니다. 

 

1. 기존 웹 시스템

기존 웹 시스템에서는페이지를 이동할 때마다 서버에 요청을 전송하고 서버 측에서 HTML 파일을 반환하기 때문에 페이지 이동 시 화면이 잠깐 하얗게 보이는 것이 특징입니다.

 

2. SPA 웹 시스템

HTML 파일 요청과 달리 비동지겅 실행을 통해 데이터를 얻습니다. 따라서 페이지 이동 시 화면이 하얗게 변하지 않으며 쾌적하게 페이지를 열람할 수 있습니다.

 

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

 

SPA의 장점

SPA를 사용해 얻을 수 있는 주요한 장점은 다음과 같습니다.

 

1. 사용자 경험 향상

SPA를 사용하면 페이지 이동 시 화면이 하얗게 변하지 않습니다. 사이트 안에서 페이지를 이동할 때마다 화면이 하얗게 변하면 사용자에게 상상 이상의 스트레스를 주게 됩니다. 또 SPA는 서버 측에 요청을 보내지 않고 페이지 이동을 완료할 수 있어 화면 표시 속도가 향상되는 것 또한 장점입니다.

 

페이지 표시 속도는 생각보다 매우 중요합니다. 특히 온라인 쇼핑 사이트 등에서는 매출과 직결되는 문제입니다. 

 

2. 컴포넌트 분리가 쉬워져 개발 효율 향상

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

 

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