모던 자바스크립트
- React, Vew, Angular 등 가상 DOM을 이용하는 Library/Framework 사용
- Svelte처럼 가상 DOM을 이용하지 않는 기술도 있음
- npm, yarn 등 패키지 관리자 사용
- 주로 ES2015(ES6) 이후의 표기법 사용
- Webpack 등 모듈 핸들러 사용
- Babel 등 transpiler 사용
- SPA(Single Page Application)로 작성
DOM(Document Object Model)
HTML을 해석해서 트리 구조로 나타낸 것
가상 DOM
자바스크립트 객체로 만들어진 가상의 DOM으로, 변경된 부분만 실제 DOM에 반영
React, Vue 등 모던 자바스크립트 프레임워크나 라이브러리에서는 가상 DOM을 제공. 페이지 이동은 자바스크립트 화면 치환으로 구현하지만 렌더링 비용을 최소한으로 억제
패키지 관리자
JavaScript의 npm, Ruby의 gem, PHP의 composer 등의 패키지 관리자 존재
- npm/yarn 특징
- 의존 관계를 의식하지 않아도 자동으로 해결
- 팀 안에서 패키지를 공유하고 버전 통일 쉬움
- 전 세계에 공개된 패키지를 하나의 명령어로 이용 가능
- 어디에서 로딩한 것인지 알기 쉬움
ECMAScript
ECMA(European Computer Manafactures Association, 유럽 컴퓨터 제조 연합)
ES2015(ES6) 버전에서 모던 자바스크립트 개발에 필수라 할 수 있는 문법(화살표 함수, Class 구문, 분할 대입, 템플릿 문자열, 스프레드 구문 등)이 추가됨
모듈 핸들러(module handler)
JavaScript는 세세하게 나누어 개발하는 것이 효율적이고 생산성이 높지만, 프로덕션 환경에서 실행할 때는 파일을 나눌 필요가 없다(오히려 로딩 횟수 증가로 성능 저하 가능성 있음).
개발할 때는 파일을 나누고 프로덕션용으로 빌드할 때는 파일 하나에 모으기 위해 js 파일이나 css 파일 등을 한데 합치는 모듈 핸들러 등장
트랜스파일러(transpiler)
JavaScript 표기법을 브라우저에서 실행할 수 있는 형태로 변환
ECMAScript 매년 사양이 추가되지만 브라우저는 새로운 표기법에 따라 대응되지 않는 경우가 있다. 트랜스파일러를 사용하면 새로운 표기법으로 작성된 JavaScript를 여러 브라우저에서 실행할 수 있는 형태로 변환할 수 있다.
SPA(Single Page Application)
기본적으로 HTML 파일은 하나만 사용하고 JavaScript를 이용해 화면을 전환한다
기존 웹 시스템에서는 페이지를 이동할 때마다 서버에 요청을 전송하고 서버측에서 HTML 파일을 반환했기 때문에 페이지 이동 시 화면이 잠깐 하얗게 보이는 현상이 발생했다.
SPA 웹 시스템은 HTML 파일 요청과 달리 비동기적 실행을 통해 데이터를 얻기 때문에 사용자는 계속해서 화면 전환없이 계속해서 조작할 수 있는 특징이 있다.
요약: HTML 파일이 하나이며 JavaScript를 사용해 DOM을 바꿔 써서 화면 이동 구현
- 장점
- 사용자 경험 향상
- 컴포넌트 분리 쉬움 => 개발 효율 향상
