server-side rendering without server

나는 백엔드 스택을 빡세게 쌓지 않았다. 그 결과, 퓨어 리액트로만 프론트엔드를 구현해서 프로덕션에서 돌리다보니 여러가지 문제가 생겼는데, 그 중 하나가 페이스북에 홈페이지링크를 공유하려고 하니 내가 정성스럽게 react-helmet으로 정성스레 넣어준 html > head 안의 태그들이 나오질 않다는 것. 조금 검색해보니, 구글은 크롤러가 자바스크립트 엔진을 돌리면서 퓨어 프론트엔드 자바스크립트로만 짜여있는 페이지라도 렌더링해서 리액트 돔트리를 렌더링 해주는 것 같았는데, […]

reselect 알아보기

redux 앱을 위한 짱짱 라이브러리, reselect에 대해 알아보자. 1. reselect는 무엇을 위한 라이브러리인가? Simple “selector” library for Redux inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater. Selectors can compute derived data, allowing Redux to store the minimal possible state. Selectors are efficient. A selector is not recomputed unless one of its […]

Github Repos I Starred (1)

1. ShellJS – Unix shell commands for Node.js require(‘shelljs/global’); if (!which(‘git’)) { echo(‘Sorry, this script requires git’); exit(1); } // Copy files to release dir rm(‘-rf’, ‘out/Release’); cp(‘-R’, ‘stuff/’, ‘out/Release’); // Replace macros in each .js file cd(‘lib’); ls(‘*.js’).forEach(function(file) { sed(‘-i’, ‘BUILD_VERSION’, ‘v0.1.2’, file); sed(‘-i’, /^.*REMOVE_THIS_LINE.*$/, ”, file); sed(‘-i’, /.*REPLACE_LINE_WITH_MACRO.*\n/, cat(‘macro.js’), file); }); cd(‘..’); // […]

Presentational and Container

원문 – Presentational and Container Components 어떤 구조로 React 컴포넌트를 짜야하는가에 대한 글인 듯. 확실히 보여주기만 하는 컴포넌트와, 그것에 적당한 상태를 집어넣어주는 컴포넌트를 분리하는 것은 굉장히 중요한 것 같다. Redux를 쓰더라도 모든 컴포넌트에 mapStateToProps, mapDispatchToProps를 하는 것은 코드를 경직된 구조로 만들게 하는 경향이 있더라고. Presentational의 가장 중요한 특징 두 개를 본문에서 꼽아보자면 Are concerned with how […]

react study #3

React를 열심히 공부를 했었다. #1, #2. 그러다가 큰 변경없이 angular에 redux만 섞어서 써보자는 생각도 해서 실제로 꽤 많은 부분을 ngRedux를 사용해서 포팅을 했었는데, 포팅하면 할 수록 react로 했으면 더 간편했을 텐데.. 같은 부분이 마구마구 생겼다. angular의 dircetive로 react의 component를 흉내내기를 한 것인데 변수를 넘겨주면 =, 일반 문자열을 넘겨주려면 link constructor의 attrs에서 받아오기, 동적인 문자열은 @, […]