1. js 런타임 (node, deno, bun)

js의 근본은 html파일에 <script> 태그에 기생되어서 웹에서만 실행이 됬었는데,
js 런타임이 생기면서 서버에서도 실행이 가능해졌다.

그러면서 js 파일 모듈화 해서 사용하고,
라이브러리들을 패키지 매니저를 이용해 사용하게 되고,
번들러, 트랜스파일러 등이 등장하여 사용하게 되고...

덕지덕지의 시대가 열렸다.

2. 패키지매니저(npm or yarn or pnpm)

node를 사용할때 보통 package.json을 활용한 패키지 매니저를 같이 사용하게된다.
근본은 npm인데, npm의 node_modules 시스템은 창시자인 라이언달도 인정한 망작이다.

그래서 그런지 node_modules 시스템을 개선한 yarn 과 pnpm이 등장하였다.
다만 해당 패키지 매니저들은 근본이 아니기에 호환성에 있어서 이슈가 종종 발생한다.
특히나 모노레포에서... ㅠ

3. language server (ts-ls)

typescrpit-language-server

이것 덕분에 editor에서 ts, js를 편집할때 자동완성, 타입체크, 문법체크 등을 할수가 있게 되었다.
에디터와 언어서버는 json-rpc프로토콜로 통해 통신을 하게되고 응답값을 에디터 화면에 보여주고, 자동완성 목록도 보여주게 된다.

4. 린트, 포맷터 (eslint, prettier)

코드 품질을 지키기 위해, 코드에서 틀린 부분이 있는걸 검증하기 위해 lint가 쓰인다.
여기서 대표적인 lint는 eslint가 있고, oxclint는 rust도 만들어져서 eslint보다 휠씬 빠르다고 한다.
eslint도 언어 서버가 존재하여서 에디터와 연동하여 사용할 수도 있다.

린트와 별개로 또 필요한 툴은 코딩 컨벤션 통일을 위해 포멧팅 툴도 필요하다. prettier가 대표적이고, 주로 에디터와 연동해서 사용된다.

여기서 주의할 점이 있는데, eslint에서 tab 스타일을 공백이 아니게 하고,
prettier의 포멧팅 설정을 공백의 tab스타일로 하면 둘 사이의 충돌이 일어난다.
그래서 같이 사용할땐 eslint에서 포멧팅 관련된 룰은 끄고 사용한다.

5. 트랜스파일러 (babel, swc)

js언어가 발전하면서 최신 코드들은 옛날 버전의 브라우저에서는 안돌아갈 것이다.
이를 위해 코드를 과거버전도 돌아가게 변경해주는 역할을 하는게 바벨이라고 할수 있다.

react의 tsx문법도 트랜스 파일러가 js코드로 변경해주는 역할을 하고 있다.

bable이 근본인데 요즘 rust로 만들어지고 한국인 개발자가 만든 swc가 핫하다.
nextjs에서는 swc를 도입하여 사용하고있다.

6. 번들러 (webpack, vite, esbuild)

코드가 모듈화 되고, 양이 많아지면 js의 파일 및 용량이 많아지고,
html파일에서 가져와야하는 js파일이 많아질 것이다.

이를 개선하기 위해 나온게 번들러로, 번들러를 사용하게 되면
트리 쉐이킹과 같이 코드에서 사용하지 않는 부분 잘라내고,
공백 없애고 라인없애서 한줄로 만든다던지... 변수명을 한글자로 만든다던지... 등등 수행하여서
파일 용량을 줄이고 하나의 js파일로도 만들 수 있다.

근본은 webpack인데, 설정이 많이 복잡하다.
loader, plugin... 등등 개념들이 있는데, 처음 보게되면 어렵고 낯설다.

아무튼 이를 개선해서 다온 다음세대가 vite이고,
그 다음세대가 esbuild이다.

세대가 넘어가면서 설정하는 방법들이 간단해졌으나,
근본인 webpack의 개념들은 그대로라고 생각한다.

7. 테스팅 도구 (jest, vitest, playwright)

요즘 언어들은 테스팅 도구까지 장착하고 나오는데, js는 없다.
그래서 외부 툴을 쓰는데 moca, jest가 근본이고,
이를 개선하여 간단한 설정과 빠른 속도를 추구하는 vitest가 나왔다.

위는 코드 테스트를 위한 툴이고, 유저환경에서의 통합테스트를 위한 툴들이 있는데 그것이
playwright이다. 비슷한 역할에 다른툴도 많았었는데 요즘은 playwright를 많이 쓰는것 같다.
실제로 웹을 띄우고 웹안에서의 행동까지 제어하며 테스트가 가능하다.

마무리

그래도 요즘은 nextjs쓰면 바벨, 웹팩등의 셋업은 많이 안해도 되고,
툴들이 zero-config를 추구하면서 업데이트 되고있어서 많이 간편해진거 같다.