이번 글은 https://facebook.github.io/react/tutorial/tutorial.html 의 튜토리얼을 따라해본 것이다.
Javascript 로 Jquery를 주로 사용했던 개인 경험에 비춰보면 이건 신세계다.
마치 backend에서 빌드 파이프라인을 구축하듯이 front-end 또한 파이프라인을 구축한다. (튜토리얼에 따르면 파이프라인 없이도 ReactJS를 사용 가능하다.)
“A modern build pipeline” 은 3가지로 구성되어 있다.
- package manager : npm , yam 같은 페키지 매니저 들인데, 이들은 에코시스템의 third-party 패키지들을 쉽게 설치/업데이트 가능하도록 도와준다.
- bundler : webpack, browserify 등이 있는데 Javascript의 모듈화를 도와주는 도구들이다. 모듈들을 작성하여 webpack으로 컴파일 하면 bundle.js 를 생성할 수 있는데 이를 통해 브라우져에서 실행 할수 있게 되는 구조이다. 자세한 내용은 http://d2.naver.com/helloworld/0239818
- compiler: Babel 등이 있는데 ES6 같은 모던 javascript 문법들로 작성된 javascript 파일을 브라우져가 인식 할 수 있는 파일로 만들어 주는 도구들이다.
http://www.looah.com/article/view/2054 (사랑해요 javascript)
위의 3가지를 갖춘 후 ReactJS를 설치하고 사용해보자
npm 설치 후 webpack은 여기서 , Babel은 여기서. npm만 설치 된다면 다른 도구들 설치는 어렵지 않음(npm은 세계에서 가장 많은 모듈을 가진 저장소)
webpack을 베이스로 babel 모듈을 설치해서 개발 환경을 구성하였다.
webpack 에서 babel을 이용해서 빌드 할 경우 아래 두가지는 npm으로 설치
npm install –save-dev babel-preset-es2015
npm install –save-dev babel-preset-react
프로젝트 파일 구조는 일단 이렇게 가보자 ( 참고 : https://velopert.com/814 )
.
├── package.json
├── dist # 서버 운영 파일
│ └── index.html # 메인 페이지
├── src # React.js 프로젝트 루트
│ ├── components # 컴포넌트 폴더
│ │ └── App.js # App 컴포넌트
│ └── entry.js # Webpack Entry point
└── webpack.config.js # Webpack 설정파일
이렇게 환경이 구성되면이제 드디어 ReactJS 튜토리얼을 따라해볼 수 있다.
개발 환경 구성이 길어지면서 튜토리얼 내용은 다음 글에서 정리하겠다.
p.s ReactJS는의 클래스는 첫글자가 대문자인 캐멀 네이밍 룰을 따른다는것을 기억하자
실제 튜토리얼은 여기서