티스토리 뷰

다음 글의 번역입니다. 문제시 삭제하겠습니다.

[State of the JavaScript Landscape: A Map for Newcomers]

If writer does not want this article, please contact me.(han41858@gmail.com)


- Node.js 가 필요할까?

요점 : Node.js, npm, nvm

 Node.js 는 서버측 JavaScript 를 위해 개발되었다. 잠깐, 우리는 지금 프론트엔드 JavaScript 를 이야기 하고 있지 않나?

 JavaScript 모듈은 일반적으로 npm (node package manager) 으로 패킹되고 공유되기 때문에, 서버측 개발을 하지 않아도 Node.js 를 설치해야할 수도 있다. OS X 나 리눅스 기반의 시스템에서는 nvm (node version manager)을 사용하여 다른 버전의 Node.js 를 관리할 수 있다. 윈도우 사용자는 nvm-windows 를 참고하자.


- 내 빌드 툴은 무엇인가?

요점 : grunt, gulp, bower, browserify, webpack, hot reloading, sourcemap

 페이지 개발에 사용되는 각 JavaScript 의존성을 포함하기 위해, script 를 늘어 쓰는 것은 느린 방법이다. 게다가, 대부분의 사이트는 JavaScript 번들링(역주 : 패키징)을 사용한다. 번들링 과정은 모든 의존성을 관리하며 당신의 프로젝트를 다시 "번들링" 하는 데에 사용될 수 있다. 부가적으로, 어떤 개발자들은 기능의 변화 없이 불필요한 문자를 생략하는 minifying 과정을 사용할 수 있다. 이 과정은 클라이언트가 다운받아야 하는 데이터의 양을 줄여준다.

 어떤 툴은 hot reloading 과 같은 기능을 제공한다. 이 기능은 당신이 파일이나 소스맵을 저장했을 때 당신의 브라우저에 적용사항을 바로 업데이트 하는 기능이다. 소스맵은 번들링된 JavaScript 파일을 디버깅하기 편하게 원래의 파일과 매칭시키는 기능이다.

 방금 설명한 내용은 본질적으로 빌드 과정이다. 대부분의 JavaScript 개발자들이 이것에 대해 이야기하지는 않지만 코드는 배포직전의 단계로 컴파일할 수 있다. "프론트엔드 개발/운영" 이나 빌드, 배포를 관리하는 과정에서 (코드 관리에 대한) 노력이 점점 더 필요하다.

 Grunt, gulp, broccoli, brunch, browserify, webpack 은 JavaScript 빌드 툴이다. 각각은 해결하려는 문제가 다르기 때문에 각각을 비교하는 것은 어려운 일이다. 각각은 같은 문제에 대해 다른 용어로 이야기하며, 각각의 용어를 공통으로 이해할 필요는 없다.

 내 경험에서, 이 툴들의 설정은 간단하며 다른 프로젝트에서 복사-붙여넣기 해서 사용할 수 있다. 예를 들면, 아래의 webpack 설정은 starter kit 저장소에 올려둔 내용이다.

var webpack = require('webpack');  
module.exports = {  
  entry: [
    "./app.js"
  ],
  output: {
    path: __dirname + '/static',
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
  ]
};

 말했던 것 같이, webpack 설정은 webpack 이 다음과 같은 동작을 하도록 한다.

  • 시작 지점으로 app.js 를 사용한다.
  • .js 로 끝나는 모든 파일을 처리한다.
  • 파일의 변환 방식으로 ES6 를 변환하는 babel-loader 를 사용하며, react 를 위해 JSX 를 사용한다.
  • 모든 JavaScript 파일은 번들링해서 static/bundle.js 파일로 묶는다.
 새 프로젝트에서, 나는 webpack 을 추천한다. webpack 은 큰 프로젝트의 복잡한 의존성을 효율적으로 관리할 수 있다.



- 내 코드를 어떻게 테스트할까?

요점 : Mocha, Jasmine, Chai, Tape, Karma, Selenium, phantomjs

 다른 종류의 프로그래밍과 마찬가지로, 프론트엔드 JavaScript 도 테스트를 할 가치가 있다. 대부분의 JavaScript 개발자들은 최소한의 테스트는 작성한다고 한다.

 JavaScript 는 내장 테스트가 없기 때문에 개발자들은 외부 라이브러리를 이용한다. JavaScript 빌드툴과 비슷하게, 각각의 테스팅 툴들은 각각의 문제를 해결하는 데에 집중한다.

 MochaJasmine 은 가장 유명한 라이브러리이며, 종종 테스팅 프레임워크로 언급되기도 한다. 둘의 API 들은 아주 유사하며 행동에 대해 기술하거나, assertion 을 사용하는 방식으로 테스트할 수 있다.

describe('helloWorld()', function() {
  it('should greet me by name', function() {
    // assertions go here
  });
});

 Mocha 는 실제로 내장된 assertion 라이브러리를 갖고 있지는 않으며, 많은 개발자들은 Chai 를 함께 사용한다. Chai 의 assertion 문법은 비슷하다.

// Jasmine
expect(helloWorld("Bonnie")).toEqual("Hello, Bonnie");

// Chai
expect(helloWorld("Bonnie")).to.equal("Hello, Bonnie");

 테스트를 수행하기 위해, Mocha 는 명령형 유틸(command-line utility)을 제공하지만 Jasmine 은 제공하지 않는다. 많은 개발자들은 Jasmine 과 Mocha 스타일로 작성된 테스트를 수행하기 위해 Karma 를 사용한다.

 이것만으로도 유닛 테스트는 잘 동작하지만, JavaScript 기반의 통합 테스트를 하기 위해서는 몇 개의 툴이 더 필요하다. 프론트엔드라는 관점에서 보면, 통합 테스트는 가끔 브라우저에서 어떻게 렌더링 되는지, 어떻게 페이지가 로드되는지, 사용자 반응을 어떻게 처리하는지, 결과는 잘 체크하는지 등을 수행해야 한다.

 Selenium 은 이런 테스트에서 사용되는 웹 드라이버이다. 브라우저 드라이버로서 Selenium 을 사용할 수 있으며 Selenium 이 브라우저를 실행하게 할 수 있다. PhantomJS 는 일반적으로 이야기 하는 headless browser (GUI 없이 동작하기 때문에) 이며 테스팅에 종종 사용된다. GUI 를 필요로 하지 않기 때문에 자동화된 테스트를 수행하는 데에 효율적이다. 어쩌면 Sinon 이 도움이 될 수도 있다. Sinon 은 가짜 서버를 구성하며 테스트의 목적에 맞는 AJAX 응답을 돌려줄 수 있다.

 지속적인 통합 테스트(CI) 를 위한 환경으로 Jenkins Travis 를 구성할 수도 있다.

 JavaScript 테스팅 툴은 수많은 종류가 있다. 새 프로젝트에서 나는 일반적으로 Karma 와 Jasmin, PhantomJS 를 선택하지만 Mocha + Chai 도 좋은 선택이다.



- 그래서 어떻게 시작해야 할까?

 Github 저장소에 프론트엔드 개발의 기본 세팅을 올려두었다.

https://github.com/bonniee/react-starter


이 프로젝트는 아래의 요소로 구성되어있다.

  • React
  • 코드 변환을 위한 Babel
  • 빌드를 위한 Webpack
  • ES6 문법 사용(React 클래스, module export 를 위해)
  • 테스트를 위한 Karma + Jasmine + PhantomJS
 좀 더 자세히 알아보자. React 는 상호동작하는 웹사이트를 좀 더 쉽게 만들 수 있는 프레임워크이다. (UI 를 기술하면 React 는 DOM 렌더링을 관리한다.) 우리는 JavaScript 를 ES6 표준에 맞게 작성할 것이다. Webpack 은 ES6 코드를 ES5 로 호환되게 바꿔줄 것이며, 의존성을 관리하고 모듈을 로드한다. 최종적으로, Karma 와 PhantomJS 를 이용해 테스트를 하며 Jasmine 으로 테스트 스펙을 작성할 것이다.

 먼저, 동작하는 버전의 npm 을 준비해야 한다. 그리고 이 저장소에서 받은 프로젝트에서 시작하는 의존성을 설치하는 것으로 시작한다.

npm install
webpack

그리고 개발을 위해 다음을 실행한다.

webpack --watch

 이 명령어는 webpack 에게 로컬에 있는 JavaScript 파일이 바뀔때마다 다시 컴파일하도록 한다. 어플리케이션의 동작을 보기 위해 로컬 서버를 실행해야 한다. OS X 나 리눅스에서는Python 으로 쉽게 가능하다

python -m SimpleHTTPServer

... 그리고 끝났다! React 컴포넌트를 추가하기 위해 app.js 파일과 Hello.js 파일을 수정하고 npm test 명령으로 테스트를 수행한다.

 당연히, stater kit 의 코드를 내려받는 것은 전투의 시작에 불과하다. 프론트엔드 JavaScript 개발 시장은 아주 복잡하며, 새로운 컨셉과 문제를 처리하기 위해 다양한 툴과 용어가 새로 나오고 있다. 위에 다룬 내용들 중 하나로도 블로그 하나를 쉽게 채울 수 있다. 다행히도, 이 문서는 JavaScript 생태계를 접하는 것과 더 많은 프론트엔드 개발을 배우는 데에 도움이 될 것이다.

 Welcome to the Community!


Note: Logo licenses

  1. React: Licensed under React-docs license, Creative-Commons attribution 
  2. Babel: MIT license 
  3. Webpack:MIT license
  4. Karma: MIT license 
  5. Jasmine: MIT license 
  6. PhantomJS: BSD license 


신고
댓글
댓글쓰기 폼
공지사항
Total
215,881
Today
83
Yesterday
276
링크
«   2017/11   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
글 보관함