facebook react (3)

react flux facebook react (1) facebook react (2) 저번까지는 리액트에 대해 알아 봤다. 저 정도만 이해해도 어느정도는 이해 했다고 봐도 될거 같다. 물론 이해정도만? 이번엔 flux에 대해 알아 볼려고 한다. 정확한거는 여길 참고 flux는 위와 같은 아키텍처다. 실직적으로 프레임워크? 라이브러리? 라기보다는 아키텍쳐에 더 가깝다. 소스만 봐도 길지 않은 소스다. 위의 그림만 봐도 대충은 알것 같은 느낌이다. 액션이 생기면 Dispatcher가 받고 store로 전달한다음에 뷰로 전달된다. 일단 폴더 구조를 보자. 일단 필자는.. Read More

facebook react (2)

react 이번 시간엔 webpack과 바벨컴파일러를 써서 개발을해보자! 일단 npm(node.js)이 있어야된다. nodejs 사이트가서 다운로드 받자. 설치후 터미널을 열어서 해당 프로젝트에서 다음과 같이 인스톨을 하자 npm install babel-loader babel-core babel-preset-es2015 babel-preset-react react react-dom –save-dev 바벨과 리액트를 설치 했다. 그럼 node_moduls라는 파일이 생겼을 것이다. 파일이 많다.. 그럼 다음으로 webpack을 설치 하자 npm install webpack -g 다음은 루트 폴더에 webpack.config.js 파일을 추가 하자 module.exports = { entry: ‘./app.js’, output: { filename: ‘bundle.js’, path: ‘./build’.. Read More

facebook react (1)

react 필자가 프론트엔드 개발자는 아니지만 관심깊게 봐온 react에 대해 알아보겠다. 앵귤러와 비교 대상은 아니지만 리액트가 더 맘에 든다. 앵귤러는 공부를 안해봐서 그런지도. 처음에 선택한 이유는 일단 페이스북이 직접 사용하고 있기 때문에 조금 안심(?) 이다. 크롬에서 페이스북으로 들어간 다음에 개발자 도구에서 다음과 같이 입력해보자 require(“React”).version #”15.0.0-rc.1″ 아무튼 리액트를 다운받자 react download 다운로드 받으면 된다. 그럼 프로젝트를 한개 만들자. 아무 빈 프로젝트면 된다. 필자는 인텔리j로 했다. <script src=”../js/react.min.js”></script> <script src=”../js/react-dom.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js”></script>.. Read More