웹 앱, 자바스크립트

웹 앱의 구성 요소

---

필수 구성 요소 : HTML, CSS, JavaScript

• HTML
• CSS
• JavaScript

웹 앱 실행 관점의 구성 요소

• 브라우저 : 런타임 환경을 제공하는 환경
• 실행되는 시간 - 실행 시간 - 런타임

브라우저가 아니어도 JavaScript를 실행시킬 수 있는 환경이 생김 -> Nodejs

---

렌더링 - 화면 그리기

---

UI를 만드는 것 : HTML

JavaScript를 이용해서 HTML을 조작 -> JavaScript로 UI를 제공한다는 의미임.

결론적으로 UI를 제공하기 위해서는 HTML 형태가 갖춰져야 하기 때문에, HTML을 어디에서(언제) 만드는가가 중요함.

브라우저가 HTML을 로딩할 때는 웹 서버가 HTML 파일을 브라우저한테 전송 -> HTML 파일이 웹 서버한테 존재함.

브라우저가 HTMl파일을 받은 후 해석해서 화면에 UI를 그리고 난 후 JavaScript 실행 -> 브라우저가 웹 앱을 실행시킨 후에도 UI를 조작함.

브라우저에서 실행되는 JavaScript의 실행 결과로 UI를 주도적으로 만드는, 즉 브라우저가 HTML을 주도적으로 만들어서 UI를 표현하는 방법을 클라이언트 사이드 렌더링이라고 함. (Client Side Rendering, CSR)

웹 서버가 주도적으로 HTML을 만들고 브라우저한테 전송하는 방법을 서버 사이드 렌더링이라고 함. (Server Side Rendering, SSR)

---

그래픽 시스템

---

기본적으로 HTML이나 CSS를 이용해서 간단한 그래픽 (박스, 원, 그라데이션, 섀도우 등)을 만들 수 있지만 차트, 유려한 애니메이션, 3D 등의 적극적인 그래픽 시스템이 필요할 수 있음.

캔버스라는 도화지에 JavaScript를 가지고 3D 또는 2D 그래픽 작업을 할 수 있음. JavaScript로 다룰 수 있는 형태로 API를 제공함.

Canvas API - Web APIs | MDN

---

프론트엔드 개발 환경과 모던 자바스크립트

---

Modern JavaScript는 통상적으로 2015년 발표된 ES2015(ES6) 버전 이후를 의미함.

ES2015 이전부터 프론트엔드 개발 환경이 급변함. -> Nodejs 때문

왜 프론트엔드 개발환경이 변했을까? -> 웹 앱의 규모가 커지고 복잡해졌기 때문.

초기 자바스크립트는 단순 HTML을 조작하는 정도의 가벼운 역할로 디자인되었기 때문에 하나의 애플리케이션을 만들기 위해 필요한 많은 능들이 없었음. (e.g., 모듈 스펙)

ES2015 버전부터 모듈 스펙을 지원하기 시작함. -> JavaScript로 더 많은 일을 하기 위한 기능들이 추가됨.

모듈 스펙 : 파일과 파일간에 특정 파일의 어떤 기능을 사용하기 위해서 불러들여 쓸 수 있는 기능 (e.g., import / export 문법)

모듈 스펙을 그대로 사용하기 힘든 현실적인 문제 2가지

1. 최신 문법의 브라우저 호환성 이슈
2. 방대한 양의 스크립트와 HTML의 연결

Nodejs - 브라우저에서 실행되는 게 아닌 일반 데스크톱 또는 서버에서 JavaScript를 실행할 수 있는 JavaScript 런타임 환경

Nodejs를 통해 다양한 어플리케이션이 만들어지고, 만들어진 애플리케이션을 배포하는 것이 쉬워짐. -> npm(node package manager)

npm을 통해 남이 만든 쓸만한 어플리케이션을 불러다 쓰기가 쉬워짐.

---

번들러

그런 상황에서 번들러(Bundler)라는 소프트웨어가 나옴

번들러는 기본적으로 시작되는 자바스크립트 파일 하나를 지정하면 그 자바스크립트 파일 안에서 모듈이라는 스펙을 이용해 다른 자바스크립트 코드를 모두 분석해서 하나의 파일로 만들어 주는 것.

브라우저가 실제로 자바스크립트 파일을 불러들이기 전에 미리 많은 파일을 하나로 만들어 놓으면 HTML에서는 하나의 스크립트만 연결하면 됨. (상단의 2번 문제 해결)

대표적인 번들러 - 웹팩 (webpack)

• 자바스크립트 파일이 아닌 파일(이미지, 스타일시트 등)도 번들링 - bundling
• 불필요한 주석이나 코드 제거 - minify
• 이미지 최적화
• 코드 난독화 - uglify
• 트랜스파일링 - 최신 버전의 자바스크립트를 낮은(브라우저가 이해할 수 있는) 버전의 자바스크립트로 바꿈 - Babel(상단의 1번 문제 해결)

---

타입스크립트

---

자바스크립트의 슈퍼셋(superset) - 자바스크립트의 모든 기능을 지원하고 + 추가 기능 지원

타입스크립트는 자바스크립트로 트랜스파일링 됨.

타입스크립트가 제공하는 가장 중요 기능 - 타입 유형 설명

왜 타입 유형 설명이 중요한가?

• 프론트엔드 코드의 구성요소 대부분은 데이터(상태)로 이루어져 있음.
• 이 데이터는 복잡하고, 많고, 큰 경우가 대부분임.
• 프론트엔드 앱의 규모가 커지면 커질수록 다루는 데이터가 많아지고, 이 데이터는 상황에 따라서 변할 수 있음.
• 프로젝트가 커질 수록 지금 작성된 코드가 내가 작성하지 않은 코드일 가능성이 높음. -> 해당 데이터 유형의 설명이 명확하지 않으면 그걸 수정하기 위한 비용이 많이 듦.

  ---

참고

• 김민태의 프론트엔드 아카데미