2024. 05. 15 (수) 3주차 - Daily Coding - Day16

Vite / Npm

 

자바스크립트의 태생

JavaScript는 간단한 동작만을 위해 태어났다 그래서 여러 개의 파일로 나눠서 개발하는 모듈 방식이 없는 채로 탄생했기에,

하나의 파일에 수많은 개발자들이 수많은 코드를 작성하면 관리가 힘들고 확장하기도 힘들다는 단점이 있음.

JavaScript 는 10일 만에 만들어진 언어이고 초기에는 아쉬움이 많았으며 함수형과 객체지향의 절묘한 배합,

누가 짜도 비슷한 코드가 나오는 엄격한 Java와 달리 코드의 자유로움이 존재한다

 

node.js가 생기고 npm이 생기면서,

node.js의 등장으로 인해 CommonJS라는 모듈 방식이 처음 도입됨.

npm의 등장으로 인해 이러한 모듈을 모두가 공유할 수 있는 환경이 조성 됨.

 

모듈 방식

CommonsJS 예시

 

foo.js

export.foo = () => { ... };

 

bar.js

export.bar = () => { ... };

 

foobar.js

export.foobar = () => { ... };

⬇️

<script>

    var $ = require('jquery');

    var foo = require('./js/foo');

    var bar = require('./js/bar');

    var foobar = require('./js/foobar');

</script>

 

모듈 단점

여러 파일들을 로딩하는 것은 속도가 느린 문제가 발생

특히 JS파일 로딩이 지연되면 버벅거리는 안 좋은 UX를 만들게 됨.

 

번들러의 탄생

위의 단점을 보완하기 위하여 여러 개의 파일을 그냥 하나로 합친 번들(bundle) 즉 '번들러'가 탄생하게 된다.

하지만 세팅이 너무 힘들다는게 단점이었음.

 

번들러 단점

기존에는 js만 작성하면 바로 화면에서 확인할 수 있었지만 빌드 후 하나로 만드는 과정이 필요해지면서 수정시마다 새롭게 빌드 작업을 해야했고 그 과정이 너무 느린게 단점이었음.

 

Esbuild의 탄생

빌스드 속도가 100배 빠른 도구 탄생

JavaScript가 아닌  go언어로 만들어 최대 속도를 끌어냄.

다만 빌드만 빨라서 그 당시 다양한  기능을 지원하지 못합.

 

Evan You를 통해 vite가 탄생

기존의 도구들을 더 낫게 만드는 능력을 가진 에반 유

snowpack, rollup 등 혼란스럽게 번들러의 세계에 vite를 던짐.

 vite는 다양한 기능을 제공하면서도 굉장히 빠르다는 장점이 있음.

https://patak.dev/vite/ecosystem.html

The Vite Ecosystem

 

웹 프레임워크 Svelte

자바스크립트의 자유로움으로 인하여 웹 프레임워크가 탄생하게 된다.

 

리액트(React)의 특징

jsx라는 리액트만의 문법이 존재

SPA

Made by 페이스북(메타)

가상 DOM

많은 JS 라이브러리와 호환

 

Svelte의 특징

HTML, CSS, JS 문법을 그대로 차용

보일러 플레이트가 존재하지 않음(전체적인 틀이 없다는 뜻)

가상 DOM 이 존재하지 않는다(컴파일러)

생태계 부족(TypeScript, IDE 지원 미흡)

Killer 상태 관리 라이브러리가 없음