Frontend Framework

webpack

• module bundler
  • webpack 은 모듈 + dependencies를 가지고 static assets을 생성
• application code를 가지고 정적 자원들과 개발 서버 생성해줌
• 사용하지 않는 코드들 처리, hot module replacement 지원 (다른 빌드 툴에 비한 이점)
• webpack의 진짜 강점은 loader들(loader들을 이요해 babel을 통해 JSX -> Javascript 변환 가능)
  • babel-loader는 ES2015와 JSX변환을 모두 지원
• AMD, CommonJS등의 모듈 포맷 지원 (loader를 이용해) ES6도 지원
• support package manager: Bower, npm
• Loaders for non-code: CSS, templates...
• On-demand loading
• Built-in development server

babel

• transform compiler
• ES6에 대한 지원 여부 차이가 크므로 ES6로 작성하면 ES5로 트랜스파일해야 실제로 사용 가능
• ECMAScript 6문법으로 작성된 파일을 변환-컴파일
• 원래 6to5라는 이름으로 ES6 -> ES5 도구로 시작했는데, 인기가 좋아서 ES7이나 다른 트랜스파일도 지원하는 포괄적인 도구가 되기 위해 Babel로 이름 변경

gulp

• node.js기반의 task runner
• streaming build system
• project를 development, production, testing등의 다른 빌드들로 빌드해줌
• 예를 들어 production(운영)으로 build하면 뭐 JavaScript를 minify하고, Sass파일을 컴파일하고, 코드에 오류가 없는지 체크하고 싶겠지. 이걸 그냥 gulp task를 작성해서 하자!

mocha

• simple, flexible, fun javascript test framework for node.js & the browser
• support TDD, BDD
• 엄밀히 말하면 Test framework라기보다는 Test framework를 담는 interface같은 형태를 띄고 있고 runner를 포함하고 있음
• 이유는? Assertion을 포함하고 있지 않음. 대신 어떤 Assertion library라도 가져다가 사용할 수 있음

chai

• DBB/TDD assertion library for node and the browser