자바스크립트 생태계

Posted on Edited on In , Word count in article: 692 Reading time ≈ 3 mins.

자바스크립트의 생태계는 하도 방대해 져서 좀 정리해 두려고 합니다.

  • 1995년 Brendan Eich 가 웹브라우저용 Javascript 를 개발
  • 2009년 Ryan Dahl 가 Node.js 라는 Javascript Runtime 을 개발

Frontend Stacks

Node.js

웹브라우저 외부에서 자바스크립트를 실행하는 런타임
크롬의 V8 자바스크립트 엔진을 기반으로 한다

패키지 매니저

  • Npm(Node Package Manager) - Node.js 의 기본 패키지 관리
  • Yarn - Npm 보다 속도가 빠르다고 한다
  • Bower(A package manager for the web)

패키지가 하도 많으니 어떤 걸 써야할 지 모를 때는 남들이 많이 사용하고 있는 걸 사용하자

  • Npm Trends

자바스크립트 엔진

매번 V8 만 언급해서 다른 건 없는 줄 알았지만 다른 엔진들도 있다

  • V8 (Google Chrome, Opera, Edge)
  • Spidermonkey (Firefox)
  • Chakra (Internet Explorer)
  • JavaScript Core (iOS, Safari)

Babel

웹브라우저가 버전이 빠르게 바뀌고 신기능이 많이 나오고 있지만 최신 Javascript 의 모든 기능을 웹브라우저가 지원하지는 못합니다.

그래서 웹브라우저가 지원할 수 있는 자바스크립트로 변환해주는 Compiler 가 등장했는데 그게 Babel 입니다.

Babel 은 ES2015+ 이상의 코드를 예전 버전의 Javascript 로 변환해주는 Compiler 다.

Babel 과 반대로 Compile 해주는 Lebab 이란 것도 있다.

React, Vue 와 같은 자바스크립트 프레임워크와 Typescript 같은 타입 기능이 강화되면서
Babel 은 해당 코드들도 예전 버전의 Javascript 로 컴파일 해줄 수 있게 확장 되었다.

Module Bundlers

최신 웹 브라우저는 기능이 많지만 HTML, CSS, Javascript 만 이해 할 수 있습니다.
웹 브라우저는 Sass / Less, Typescript, jsx 를 지원하지는 않습니다.

Sass/Less 와 Typescript, jsx 로 작성을 한 코드를
CSS, Javascript, 종속된 module 로 컴파일하고 묶어주는 작업이 필요합니다.

이럴 때 사용되는게 Module Bundler 와 Task Runner 입니다.

  • Webpack
  • Browserify
  • Rollup
  • Parcel

번들링된 파일을 분석하고 싶을 때는 Webpack-Bundle-Analyzer

Task Runners

파일 축소, 컴파일, 단위테스트, Linting 같은 작업을 자동화 하는 데 사용한다

  • Gulp
  • Grunt

UI Frameworks

Javascript Framework 3대장 Angular, React, Vue

  • Jquery
  • Angular
  • React
  • Vue
  • Svelte
  • Ember
  • Polymer
  • Stencil

Template Engines

  • Mustache
  • Handlebars
  • EJS
  • Pug
  • Underscore

Static Site Generators

  • Gridsome (Vue)
  • Gatsby (React)
  • Scully (Angular)
  • Next.js (React) — Next.js can be used for both SSR and SSG
  • Nuxt.js (Vue) — Same goes for Nuxt.js

Content Management System

  • Strapi

Data Visualization Tools

  • Chart.js
  • D3
  • three.js

State Management Tools

  • Redux
  • Vuex
  • MobX
  • Flux
  • XState

Backend Stacks

Command Line Interface

  • Yargs
  • Commander
  • Minimist
  • Inquirer

Web APIs

  • Express
  • Koa
  • Nest.js

Graph APIs

  • GraphQL
  • GraphQL-Client
  • Express-GraphQL
  • Apollo
  • Apollo-Client

WebSockets

채팅 같은 소켓통신이 필요할 때 사용하는 패키지

  • SocketIO
  • WS

Server-Side Rendering

  • Client-Side Rendering (CSR) - 사용자 단말기의 자원을 사용해서 Rendering
  • Server-Side Rendering (SSR) - 서버의 자원을 사용해서 Rendering

SSR 의 장점

  • 초기 로딩속도가 빠르다
  • SEO (Search Engine Optimization) 검색엔진 최적화가 좋다
  • 사용자의 오래된 단말기에 적합하다
  • 네트워크가 느린 곳에서도 CSR 보다 좋다

SSR 의 단점

  • 서버 자원을 많이 사용한다
  • 초기 로딩속도가 빠르지만 다음 페이지 부터 느리다
  • 매번 요청시마다 새로고침이 발생된다
  • 사용자 UX 가 떨어진다

SSR 라이브러리

  • Angular Universal
  • Next.js
  • Nuxt.js

Databases

  • Sequelize - Promise-based Node.js ORM
  • PrismaNode.js and TypeScript ORM
  • Mongoose

Drivers

  • mongodb
  • pg
  • mysql
  • firebase
  • redis

Machine Learning

  • TensorFlow.js
  • Brain.js

Cross-Platform Development

Native Applications

  • React Native
  • NativeScript
  • Titanium

Hybrid Applications

  • Ionic
  • Cordova

Desktop development

  • Electron - VSCode 가 Electron 으로 만들어졌다

Security

Application Security

  • Helmet - Cross-Site Scripting, Clickjacking, DNS prefetching, Content Security Policy, Client-Side Caching, HTTP Strict Transport Security
  • Csurf - session-middleware or a cookie-parser module
  • Express-Rate-Limit
  • Express-BruteA brute-force protection middleware
  • SQL-injection
  • Dotenv
  • Env-Cmd

Authentication and Authorization

  • Bcrypt.js
  • Express session
  • Cookie parser
  • jsonwebtoken
  • passport

Maintaining Packages

  • npm audit
  • Snyk

Deploying Application

  • Netlify
  • surge
  • Github Pages
  • Vercel
  • Firebase
  • AWS
  • Azure
  • Heroku

Process Managers

  • PM2
  • Forever

Testing

Unit and Integration testing

  • Jasmine
  • Jest
  • Mocha
    • Chai

End to End testing

  • Protractor
  • Cypress
  • Puppeteer

Load testing (부하테스트)

  • Artillery

Linting

  • ESLint
  • TSLint : ESLint 로 통합됨

Debugging

  • React Dev Tools
  • Vue Dev Tools

Logging

  • chalk
  • node-emoji
  • Morgan
  • Winston

Utilities

  • Anime.js - 애니메이션 지원
  • Async.js - 비동기 처리 (병렬실행, async waterfalls, retries) 등을 지원
  • Lodash - 함수형 프로그래밍 유틸리티 함수
  • Rx.js - 비동기 이벤트 라이브러리
  • Node-fetch - Fetch API
  • Axios - Promise 기반 HTTP 클라이언트
  • Multer - file 업로드 미들웨어
  • Howler.js - 오디오 라이브러리
  • Math.js - 수학 라이브러리
  • Validator - 문자열 유효성 검사
  • Nodemon - 소스코드의 변경시 서버를 재시작
  • UUID - Random Index ID 생성
  • Jimp - 이미지 처리 라이브러리
  • Sharp - 이미지 처리 라이브러리
  • Video.js - 웹 비디오 플레이어
  • Http-Errors - HTTP 오류 처리 라이브러리
  • Concurrently - 동시에 여러 npm 프로세스를 실행
  • Find - 파일 또는 디렉토리 처리
  • Typed.js - 타이핑 애니메이션

Documenting

  • JSDoc
  • Swagger

External API

  • Google Maps
  • Open Weather
  • Upload Image
  • JSONPlaceholder - Mock APIs