React & Angularjs 썸네일형 리스트형 부록. React 에서 stylesheets embedded 시키기 ( 그리고 webpack 조금.. ㅋㅋ ) 쩝... 너무 별거 아닌 팁이긴 한데... 일단 공유해 봅니다 ㅎㅎ그리고 react 를 쓴다면 webpack 을 쓴다는걸 당연하게(?) 가정하고 글을 씁니다. webpack 은 Module bundler 로도 많이 알려져 있지만, 요새는 Gulp, Grunt 와 같은 task runner 들에서 하는 갖가지 일을 대신해 줍니다. 그러면서 react 를 할때는 굳이 Gulp 나 Grunt 를 쓰는 시대는 지났죠! Webpack 이 짱먹었으니까요 하하!! webpack 소개 에 대한 자세한 글은 아래 링크를 참조해 주세요.https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.eefnwbwh3 그리고 webpack 도 버전 2가 .. 더보기 부록. Container Components 와 Stateless Functional Components in React 0.14 요새 React 프로젝트 Refactoring 작업을 하고 있는데 주 미션은 아래와 같다."container 와 component 를 잘 구분하고, Reusable 한 컴포넌트는 반드시 reusable 할 수 있도록 하자" 그래서 오늘은 container component 패턴과 container 안에 포함되는 component를 짤 때 어떤 스타일로 짜면 좋을지 한번 포스팅 해보려 한다. container, component 란?만약 StockWidget 이라는 페이지가 있다면 그 페이지는 StockWidget 이라는 component 를 가질것이고, TagCloud 라는 페이지가 있다면 그 페이지는 TagCloud 라는 component 를 가질것이다. 즉, container 란 보통 페이지처럼 여러.. 더보기 부록. React snippets(live templates) for JetBrains series editors 음... 오늘은 React 코드 작성시 편리하게 초기 리엑트 컴포넌트 코드를 작성해주는기능을 하나 소개해 볼까 합니다. +_+ 저의 경우 IntelliJ 로 주로 코딩을 하곤 하는데 처음 js 파일 생성을 누르고 React Component 를 작성하려고 하면 매번 적어줘야 하는 아주아주 귀찮은 코드들이 아래처럼 있는데요. /** * Created by 1002720 on 2016. 9. 23.. */ import React from 'react'; class Sample extends React.Component { render() { return ( ) } } export default Sample; 이런 코드 skeleton 을 간단하게 해주는 기능입니다. https://github.com/minw.. 더보기 부록. React Router v4 ( pre release ) Github URL : https://github.com/ReactTraining/react-router/tree/v4 Docs : https://react-router.now.sh/ React Router 가 pre release 되어서 우리 프로젝트 진행하는것도 v4 로 올려서 진행해보려고 한다.이유?? 사실 자세히 공부하고, 혹은 경험하고 바꾸는 것은 아니다. 이전에도 React router 를 잘 써본적은 없으니... ㅜㅠ 그래도 먼가 새로 나왔고, 그걸로 바뀔거라면 미리 대비하는게 좋지 않을까 해서 지금 있는 버전을 올려 사용하려 한다. Why the huge change? 사실 Github 문서에 보면 Declarative Composability 이란 용어가 나온다. 요기에 내용 잘 읽어보면.. 더보기 2. React Module 설치하기 $ npm install --save axios react-addons-update react-router react-timeago redux react-redux redux-thunk axios: api 서버와 통신하기 위한 HTTP 클라이언트 모듈react-addons-update: Immutability Helper, react componet state 값을 변경 / redux 의 스토어 값을 변경할 때 사용react-router: SPA 를 쓸 경우 routing 이 서버가 아닌 클라이언트에서 컨트롤 되어야 하는데 그때 사용하게 되는 모듈react-timeago: react 용 Time Libraryredux, react-redux; Redux 를 사용하기 위한 모듈들redux-thunk: re.. 더보기 1. React HMR ( Hot Module Replace ) 셋팅 Overview 브라우저 리로드 없이 모듈을 바꿔치기 해주는 것을 HMR 이라 부른다. 이는 webpack-dev-server 가 해주는 일이고, webpack dev server 는 HMR 을 위해 아래와 같은 4가지의 기능을 한다. 1. 라이브러리 들을 브라우저에 주입시켜 준다. ( Libraries injected into the browser to perform HMR (webpack hmr) )2. 브라우저 안에 있는 라이브러리는 서버안에서의 라이브러리 파일들의 변화를 웹소켓 통신을 통해 감지한다. ( Libraries in the browser to listen to changes in the server( i.e. webSocket client) )3. hot 이 되는지 서버로부터 다른 정보.. 더보기 0. React 셋팅 관련 고민 ( SPA vs Server Rendering with Spring ) React 의 장점 중 하나는 Server rendering 인데?? 그런데 create react app ( https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html ) 은 뭔가 SPA 를 위한 셋팅이라는 느낌이 강하게 든다. ( 제발 누가 아니라고 말해주길... ㅜㅠㅜㅠㅜㅠ ) 근데 한번 더 나아가 생각해보면 당연하지 않은가...? 서버 렌더링을 하려면 당연히 서버 프레임웍 또는 언어 등에 의존할 수 밖에 없고, 그렇다면 script 엔진을 통한 렌더링은 해당 프레임웍에서 해주건 안되면 Node 등을 통해서 렌더링을 해야하니, 그 프로젝트의 구조가 당연히 동일할 순 없을테니, 보일러 플레이트가 존재하기.. 더보기 이전 1 다음
