웹 앱의 구성요소, 모던 Javascript와 개발 환경

 

구성요소 ?

필요한 여러가지 구성요소

--> HTML, CSS, Javascript

 

무엇을 만드느냐에 따라 필수 구성요소가 달라질 수 있음

html = 브라우저

html + css = 페이지, 문서(정적인 정보만 전달)

html + css + Javascript = 앱(상태를 가지고 있고 사용자와 interactive하게 소통하는 기능 탑재)

 

실행 관점의 구성요소

웹앱을 실행시키는 역할 = 브라우저

--> 브라우저는 실행시간(런타임)을 제공하는 환경 !

Node.js 등장 이후 브라우저 밖에서 js를 실행시킬 수 있는 환경이 다수 만들어짐

 

CSR & SSR

브라우저에 최초 전송된 html에는 거의 내용이 없고

js가 실행하면서 필요한 ui를 그때그때 생성해내는 방식

vs 웹서버에서 html이 만들어져서 브라우저로 전송되는 방식

 

1. 클라이언트 사이드 렌더링: html를 주도적으로 만들어서 ui 표현하는 방법

2. 서버 사이드 렌더링: 웹 서버 주도적으로 html을 만들고 브라우저에서 전송하는 방법

 

--> 앱의 성격에 따라 더 효과적인 방법을 결정하면 됨

 

그래픽 시스템

웹앱 자체는 기본적으로 그래픽 시스템을 html, css를 가지고 표현할 수 있음

하지만 더 적극적인 그래픽 시스템이 필요할 때는 ?

js를 가지고 3D, 2D 그래픽들를 표현할 수 있는 캔버스 태그가 존재

캔버스 태그는 그래픽 시스템을 표현하기 위한 도화지(영역)을 제공해주고

실제로 그래픽을 작업하는 것은 모두 js 코드로 이루어짐

 

웹 워커, 웹 어셈블리 등 .. 존재

 

모던 Javascript

현대적인 자바스크립트 (ES2015 버전부터 ~)

명확한 구분 기준은 없지만 대체적으로 ES2015 이후부터 모던 js라고 부름

 

급변한 프런트엔드 개발 환경

node.js, npm으로 이루어지는 생태계 변화

툴과 환경의 변화로 개발 환경이 급변함

 

핵심적 원인 ?

웹앱의 규모가 커지고 복잡해졌기 때문 !

 

모듈

ES2015부터 지원하기 시작

파일과 파일 간에 특정 파일의 기능을 사용하기 위해 불러들이는 기능

import / export을 통해 기능 구현

 

js를 불러들이는 것은 <script>를 통한 방법

--> 파일들이 여러개가 있을 경우 <script>를 여러 개 작성해야 함

파일이 수십개, 수백개라면 ? 이를 통한 방법은 효율적이지 않고 여러 문제 발생

 

js 코드 안에서 다른 js 파일을 불러와 쓸 수 있는 방법(import/export)

--> 이 방법도 어려운 이유 ?

1. 브라우저 호환성 이슈

2. import/export 이외의 최신 문법이 존재

 

엔지니어링 --> node.js, npm

 

번들러(Bundler)

시작되는 js 파일 하나를 정하면 그 파일 안에서 다른 js 파일을 부르는 코드들을 하나의 파일로 만들어주는 것

브라우저에서 로딩하기 전에 미리 그 많은 파일을 하나의 파일로 만들어 놓으면 ?

html에서는 그 파일만 <script>에 연결해 놓으면 됨 !

 

- Webpack

 

js 파일이 아닌 여러 유형의 파일도 입력으로 받고 있음, js 이외의 파일도 출력함

--> 여러개의 js파일을 하나로 합치는 소프트웨어를 만들고 보니 다른 일도 할 수 있지 않을까 ? 하는 생각

--> 필요없는 소스코드(주석 등)은 제거하면 어떨까 ? (보안상, 용량이 줄어듬 등)

--> 이미지 파일이 사용된다면 이미지 파일의 경로가 들어가 있을테니 번들러가 이를 알고 있으니 이미지 파일의 용량이 일정 기준 초과되면 압축 기능 ?

--> 중요한 코드의 경우 알아보기 힘들게 하면 어떨까 ? (어글리파이)

cf. 트랜스파일링

인간이 이해할 수 있는 방식으로 쓰여진 프로그램 코드를 기계가 읽고 실행시킬 수 있는 형식으로 바꾸는 것

 

트랜스 파일러란?

 

트랜스파일러(Transpiler)는 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환해주는 도구입니다. 주로 최신 버전의 언어를 구형 버전의 언어로 변환하거나, 다른 언어로 변환하는 데 사용됩니다. 트랜스파일러는 소스 코드를 분석하고 변환하는 과정을 거쳐 원본 코드와 동일한 동작을 하는 대상 언어 코드를 생성합니다.

예를 들어, 최신 버전의 자바스크립트인 ES6(ES2015) 코드를 구형 버전인 ES5로 변환해주는 Babel은 자바스크립트 트랜스파일러의 대표적인 예입니다. Babel은 ES6에서 추가된 문법과 기능을 ES5로 변환하여 구형 브라우저에서도 동작할 수 있도록 지원합니다. 이렇게 변환된 코드는 호환성을 확보하면서 최신 기능을 사용할 수 있는 이점을 제공합니다.

트랜스파일러는 언어 간의 문법 차이나 기능 지원 차이를 극복하여 크로스플랫폼 개발이나 브라우저 호환성을 향상시키는 데 사용됩니다. 다른 언어에서도 트랜스파일러가 사용되는데, TypeScript의 컴파일러, CoffeeScript의 컴파일러 등이 트랜스파일러의 예시입니다.

트랜스파일러를 사용하면 개발자는 최신 언어의 기능과 문법을 사용할 수 있으면서도 호환성을 유지할 수 있어 개발 효율성을 높일 수 있습니다.

 

Typescript의 경우에도 브라우저에서 실행 불가 제공하는 트랜스 파일러를 이용해서 js 파일로 변환! 

 

 

참고)

https://velog.io/@boyeon_jeong/%ED%8A%B8%EB%9E%9C%EC%8A%A4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EB%9E%80