PART1:Simply build App with Redux - Component , Initialization

Begin

해당 포스팅은 Redux 에 포커스가 맞춰져 있다

따라서 React 나 JSX 웹팩 익스프레스등에 대해서 설명하지 않을 것이다.

React는 어느정도 이해하고 있지만 Redux 에 대해서 감이 잡히지 않는

사람들에게 도움이 될것 같다.
모든 컴포넌트는 ES2015 에 class 기반 방식으로 구현 할것이다

구글링에서 나오는 거의 모든 국내 블로거들은 이방식을 쓰고 있고

몇안되는 React 책도 class 방식으로 설명한다.

Java 를 경험해본 사람이라면 클래스방식이 매우 친숙할 것이다.

후에 소개할 데코레이터 패턴도 역시 매우 친숙한 개념인데

이해가 끝나고 성능에 관심이 생기면 stateless 나 데코레이터 패턴을

사용해보는것도 좋을것 같다.

Many Kinds of Component Implement

우선 다양한 컴포넌트 구현방식에 대해서 정리하고 넘어가고자 한다.

다양한 bolierplate 를 통해 배우고자 한다면 개발자 마다 선호하는 방식이

다르기 때문에 알고 넘어가는것이 중요하다.

대세는 es2015 기반에 stateless 방식 이다.

ES5 class Base

    var FirstClass = React.createClass({
        render: function() {
            return (
                <h1>Hey Ho!</h1>
                );
         }
    });

ES5 stateless function Base

    var FirstClass = function(props) {
        return (
            <h1>Hey Ho!</h1>
            )
    }

ES2015 class Base

    class FirstClass extends React.Component {
        constructor(props) {

        }

        render() {
            return (
                    <h1>Hey Ho!</h1>
                )
        }
    }

ES2015 stateless function Base

    const FirstClass = (props) => {
        return (
            <h1>Hey Ho!</h1>
            )
    }

Hello React

우리는 상용서비스를 만드는것이 아니다.

Redux를 이해하는것이 주된 목적이기 때문에 bottom-up 방식으로

코드를 채워 나갈것이다.

scaffolding 은 'yeoman'을 이용하지 않고 직접 생성할것이다.

npm world에 익숙한 사람이라면 가장 먼저 해야할일은 무엇일까.

npm init

물론 프로젝트 폴더를 적당한 위치에 생성하고 해당경로에 들어가서

해당 명령어를 입력해야 한다.

매니페스트 파일을 생성한다. 그냥 엔터 치면서 스킵하면된다.

다음으로 해야할것은 무엇일까

git init

포스팅에서는 앞서 다뤘지만 나는 보통 scaffolding 이 완료된 시점부터

repo를 생성한다.

매니페스트 파일은 필수이고 깃저장소로 정의하는것 역시 필수라고 생각한다.

Hello React 를 띄우기 위해 다음과 같은 작업을 진행할 것이다.

package.json(매니페스트파일) 의존성 모듈 설치
package.json scripts 명령어 수정
폴더트리 생성 (배포:dist, 소스:src)
webpack.config.js 파일 생성 및 설정
Hello.js 컴포넌트 생성
index.js 루트 파일 생성
npm start
hello react!

대부분의 코드는 사진형태로 캡쳐 해서 올리고자 한다.

그대로 긁어다가 불펌 하는분 때문에 필자의 마음이 불편해서 이다.

1~3. package.json 및 폴더트리

현재 사용하는 IDE는 Sublime Text 3 이다.

이클립스 > 웹스톰 > 서브라임 이순서로 옮겨왔는데 어디서든 코딩할수 있도록

경량을 추구하다 보니 서브라임으로 정착 한것 같다.

4. webpack.config.js 작성

배포는 dist 폴더에 소스는 src 폴더에 있다.

presets 설정은 .babelrc 로 분리 가능 한데 추후 포스팅이 진행되면서

플러그인이나 모듈 사용이많아지면 분리시킬것이다.

5. Hello 컴포넌트 생성

6. index 생성

7. hello world

dist 폴더에 생성해야 하는 index.html 파일이다.

다음 포스팅 부터 라우터를 시작으로 본격적인 앱을 만들어본다.