Development Enviroment ReactJs with PhalconPHP

프로젝트를 진행을 하는데 있어, 개발환경을 만드는 것은 매우 귀찮으면서도 매우 중요한 부분을 차지한다. 물론 개발환경없이 에디터 하나로 진행 할 수도있지만, 그 에디터 만큼은 좋은것을 사용하려 할 것이다.

이번에는 작년에 잠깐 공부하다 만 ReactJs를 php 위에서 사용하려고 개발환경을 만드는데 적지않은 시간을 날려야 했다.

물론, 그냥 ReactJs를 facebook에서 제공하는데로 사용할 수 있지만 client 작업 따로, server 작업 따로 해야 하는 문제가 발생한다. 게다가 지금 사용하고 있는 PhalconPhp framework을 사용하는데 있어서 view 처리에 더욱 귀찮은 작업이 될 것이 뻔하다.

Quick from github

기존 개발 환경

지금까지 phalconPHP를 개발해온 환경은 아래와 같다.

  1. sublime text3
  2. Grunt + Grunt-browser-sync + Grunt-php + Grunt-contrib-watch

Javascript task runner를 사용하여 로컬 서버를 띄우고, 변경이 생길시 마다 자동으로 브라우저에 반영되도록 구성하여 사용하여왔다.

문제는, reactjs의 경우 jquery처럼 그냥 include만 한다고 사용할 수 없다는 것이다. es6 및 jsx에 관련하여 변환을 시켜줘야 하는 등의 reactjs 구조에 맞는 개발 환경이 필요하기 때문이다.

준비

작년에 잠깐 react 공부를 하면서 만든 문서를 참고하여 기억을 더듬어 보니 ReactJs로 개발하기위해 아래의 것들이 필요하다.

  1. Install Reactjs
  2. Enabling ES6 and JSX

기본적으로 위의 것들만 준비되어 있으면 reactjs로 개발할 수 있는데, 매번 변환을 시켜줘야 하는 번거로움이 있으니, webpack을 사용하여 개발환경을 만들어야 한다.

webpack 이라는 넘은 모듈 번들러역할을 하는 넘이라 크게 생각할 건 없지만, webpack과 함께 babel 로더를 사용하여 변환 시킬 수 있기에 사용하지 않을 수 없다.

새로운 개발환경 컨셉

기존과 같은 phalcon Full stack 프로젝트위에 jquery가 아니라 react가 올라가는 형태로, grunt와 webpack이 연동되는 환경.

간단한 도식으로 표현하면 아래와 같다 .

user 는 grunt-php서비스를 바라보고 있게되며, 개발자는 react소스를 수정하게 되는데, 이때

  1. grunt가 파일이 수정되고 있는지를 감시하고 있다가
  2. react소스가 수정되었을 때마다 webpack을 호출 및 babel이 변환하며 번들을 만들어서
  3. phalcon의 assets에 번들 파일을 생성한다.
  4. 마지막으로 phalcon은 해당 번들을 서비스 한다.

따라서, 필요한 패키지들은 다음과 같다.

  1. phalcon project server
  2. npm install — save-dev grunt time-grunt load-grunt-tasks grunt-browser-sync grunt-php grunt-contrib-jshint grunt-webpack grunt-contrib-watch browser-sync-webpack-plugin webpack
  3. npm install — save-dev babel-cli babel-core babel-loader babel-preset-es2015 babel-preset-react jshint jshint-stylish
  4. npm install — save react react-dom

phalcon 설정

phalcon에서 설정은 assets 디렉토리와 webpack에 의해 만들어지는 번들을 로드하는 것 뿐. 따라서 최상위 index.volt에 해당 번들 파일을 로드시켜준다.

package.json

실제적으로 grunt-php와 webpack을 동시에 실행 시켜야 하므로, package.json 에 아래와 같은 명령어를 넣어줬다.

"scripts": {
"start": "grunt default & webpack-dev-server --progress --colors"
},

Gruntfile

webpack.config

참고한 링크

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.