본 포스트는 프로 리액트: React.js를 이용한 모던 프런트엔드 구축의 부록A - 웹팩을 공부하며 정리한 글 입니다. 문제시 삭제하도록 하겠습니다. 도서에 포함된 칸반 앱의 소스 코드들이 이전 버전의 리액트로 작성되어 있어서, 그대로 따라서 타이핑 하면 수없이 많은 에러들과 부딪힐 수 있습니다. 우리말로 된 리액트 서적이 없다는 점을 감안하더라도 프로 리액트는 리액트를 처음 접하는 입장에서 굉장히 많은 도움이 되는 책입니다. 새롭게 바뀐 리액트 환경에서 칸반 앱을 동작하게 만드는 재미도 쏠쏠합니다. 리액트를 처음 접하는 개발자라면 한번쯤 처음부터 끝까지 찬찬히 일독하기를 조심스레 권해봅니다.

웹팩?!

웹팩은 프로젝트의 구조를 분석하여, 프로젝트에 포함된 모듈과 자바스크립트 파일을 번들로 묶고 패킹하는 모듈 번들러(module bundler)이다. 웹팩은 메인 파일에서 부터 프로젝트의 구조를 분석하는데, require와 import 키워드를 참고해서 프로젝트의 모든 의존성을 조사한다. 로더를 이용해서 각 소스 파일을 처리하고, 프로젝트의 자바스크립트 모듈을 번들로 묶은 자바스크립트 파일을 생성한다. 일반적으로 하나의 파일로 떨군다.

웹팩 설치 및 실행

웹팩을 사용하기 위해서 가장 먼저 비어있는 디렉토리에서 npm init으로 초기화 시켜주고, 웹팩을 설치한다. 이미 package.json 으로 의존성을 관리하고 있다면 npm init 은 생략해도 무방하다.

1

$ npm init && npm install --save-dev webpack

설치된 웹팩은 다음과 같은 형태로 사용한다.

1

$ node_modules/.bin/webpack {최상위 파일} {최종 번들 파일}

아무런 오류 없이 bundle.js 이 생성되었다면 성공적으로 번들링이 수행된 것이다.

Read More

AngularJS를 사용해서 구현한 Single Page Application(SPA)는 Unit Testing, End-to-end(E2E) Testing 2가지 방법을 이용해서 테스트가 가능하다.

• Unit Tesing: karma 기반의 jasmine/mocha 테스트 프레임워크
• E2E Testing: Selenium WebDriver로 브라우저 테스트 자동화, Protractor 프레임워크 기반으로 jasmine/mocha 테스트 프레임웍을 사용

karma, jasmine, mocha, protractor 모두 nodejs 기반으로 동작한다. E2E 테스트는 Protractor 기반으로 jasmine이나 mocha를 이용해서 테스트 코드를 작성하고, Selenium WebDriver가 브라우저를 자동 실행하여 화면 이벤트를 발생시킨다.

Unit Testing using Karma

카르마 설치하기

1
2
3
4
5
6
7
8

# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher --save-dev

# Install command line for Window
$ npm install -g karma-cli

Karma 패키지를 설치한다. jasmine 기반으로 테스트 하기 위해서 karme-jasmine도 설치해준다. karma-chrome-launcher은 필요없다면 굳이 설치하지 않아도 상관없다. 윈도우에서 사용하려면 karma-cli를 설치하면 쉽게 사용할 수 있다고 한다. (근데 사용해보니 제대로 동작하지 않는 것 같음)

karma 설정하기

karma init 파일명.js 을 이용해서 카르마 설정 파일을 만들어 준다. 다음과 같이 커맨드 창에 입력하면, 문답형식으로 간단하게 설정 파일을 생성할 수 있다.

1

$ karma init karma.conf.js

생성된 karma.conf.js을 개발 환경에 맞춰 수정하였다. 결과는 아래와 같다.

Read More

본 포스트는 Meteor 공식 홈페이지에 올라와 있는 TODO APP WITH REACT - Integrate Meteor and React을 순서대로 따라가는 도중에 궁금한 것들을 그때 그때 정리한 글입니다. Meteor와 React 초심자 입장에서 써내려 간 두서 없는 정리글입니다. meteor add react로 추가한 React 관련 패키지들이 아직 최신 버전으로 적용되지는 않는 것 같습니다.

React.render

React.render()는 최상위 컴포넌트의 인스턴스를 만들고, 두 번째 는인자로 전달받은 DOM 엘리먼트에 첫 번째 인자로 전달받는 컴포넌트를 삽입하여 프레임워크를 시작한다.

1
2
3
4
5

if (Meteor.isClient) {
    Meteor.startup(function () {
        React.render(<App />, document.getElementById("render-target"));
    });
}

React.createClass

React에서는 새로운 React 컴포넌트를 만들기 위해 React.createClass()을 사용한다. view 컴포넌트들은 React.createClass()로 선언된 클래스다. React의 컴포넌트들은 render()를 제외하고는 어떠한 메소드도 가질 수 있다. render()는 React 컴포넌트 트리를 리턴해서 최종적으로 실제 HTML을 그린다.

1
2
3
4
5
6
7
8
9
10
11

App = React.createClass({
    ....
    ....

    render() {
        return (
            <div></div>
            ...
        );
    } 
});

render() 내에서 사용되는 <div>, <header> 등의 태그들은 실제 DOM 노드가 아니라 React의 div, header 컴포넌트의 인스턴스이다. 이것들은 React가 다룰 수 있는 데이터의 marker 정도로 생각하면 된다. JSX 컴파일러가 자동으로 HTML 태그들을 React.createElement(tagName) 표현식으로 변경하고 나머지는 그대로 둔다.
React의 컴포넌트는 composable한 성질을 갖는데, 이는 render()가 일반적인 HTML 뿐만 아니라 컴포넌트의 트리도 리턴하기 때문이다.

Read More

본 포스트는 ponyfoo.com의 ES6 Maps in Depth를 번역한 것입니다. ponyfoo.com의 주인장인 Nicolás의 승인하에 올리는 번역글입니다.

Maps

• 자바스크립트 객체를 이용해서 hash map을 만드는 일반적인 패턴을 대체하기 위해 등장
• key는 숫자, 문자 이외에도 DOM elements나 function 사용 가능
• iterable protocol의 한 종류
• new Map()을 이용해서 map을 생성
• map.set(key,value), map.get(key)
• map.has(key)를 사용해서 해당 key가 map에 있는지 확인
• map.delete(key)를 사용해서 엔트리를 제거
• for (let [key, value] of map)을 이용해서 map의 엔트리를 순회

Read More

얼마 전부터 Node 기반으로 되어 있는 시스템에도 접근할 수 있게 되어서 간단한 일감 정도는 쳐내고 있다. 그러다 문득 다음과 같은 형태의 코드가 많이 사용됨을 알게되었다. 변수명은 예제를 위해서 간략화 시켰다.

1
2
3

var res = makeInfo(data);
var a = (res && res.a) || 'default';
var b = (res && res.b) || 'default';

&&와 || 같은 논리 연산자를 사용하여 초기값을 할당하는데 사용한다.
&&은 논리곱 연산자(참조.aspx))라고 불리우는데 피연산자 2개각 모두 true일때만 true를 반환한다. 논리합 연산자(참조.aspx))라고 불리는 ||는 두개의 피연산자 가운데 하나만 true여도 결과로 true를 반환한다.

Read More