[IT] 프론트엔드 관련 개념 - 번들링 툴, WebAssembly, 자바스크립트 실수 오차에 대해 (코딩애플)

코딩애플

제가 평소에 즐겨보는 유튜버입니다. 채널은 여고생(?)이 운영하고 있습니다.

 

 

1. 번들링 툴 (Webpack, Vite 등)

웹 개발시 라이브러리를 쉽게 사용하기 위해 npm을 사용함. npm init으로 npm을 설치함. (이때 package.json 생성됨)

npm을 사용하면 node_modules의 용량이 너무 큰데, 번들링 툴을 이용하면 실제 필요한 코드만 하나의 .js 파일로 합쳐주기 때문에 거의 반필수적으로 사용됨.

 

Webpack은 느리지만 Vite는 esbuild(Go로 만들어짐)를 써서 빠름

npm create vite@latest로 사용

 

(출처: https://youtu.be/iX3Nu1FcZKA?si=zPpVDq5-z9gnuzbh)

 

 

2. WebAssembly

자바스크립트 이외의 언어들로 작성된 코드를 브라우저에서 해석할 수 있도록 하여 확장성이 좋음. 처리 속도가 빠르고, .wasm 형태(이제 이 파일형식도 브라우저가 해석할 수 있음)로 배포하여 소스 코드 유출이 없다는 것이 장점이다.

 

자바스크립트는 파싱을 통해 바이트코드로 변환한 후 그걸 인터프리터가 Ignition 엔진으로 실행함.

그런데 바이트코드에서 반복되는 부분이 많으면 옵티마이저가 optimized code로 변환하고, 그런 코드는 turbofan으로 실행됨.

 

반면 .wasm 파일은 liftoff 엔진이 빠르게 실행함. (optimizing 할 수 있는 코드가 발견되면 하고 turbofan으로 실행됨, 좀더 많은 코드를 optimizing함)

 

즉 자바스크립트가 optimizing을 잘 하도록 코드를 짜는 법을 배우면 좋다.

 

웹 페이지에서 이미지를 사용하는 등 느린 부분만 wasm으로 변환하는 작업을 하고 있다.

 

써보고 싶다면 AssemblyScript라는 언어를 사용하여 입문하면 좋다.

 

(출처: https://youtu.be/VJag_H2Cosc?si=SNTfylBJQynWp7Mx)

 

 

3. 0.1 + 1.1 == 1.2가 틀린 이유

float 자료형에 실수를 담았을 때 오차가 생기는 경우가 있음. (컴퓨터에 실수를 이진법으로 저장할 때 생기는 미세한 오차)

이를 줄이려면 double 자료형을 사용하고, 정확한 값 저장을 위해서는 정수형으로 저장한다.

 

(출처: https://youtu.be/-GsrYvZoAdA?si=Q604rk4Q7_58kvvw)