개발소발닭발

프로젝트에서 지난 9개월 동안 Redux를 주력으로 사용하다 MobX로 바꾼 개인적 경험을 바탕으로 작성하였습니다. Redux를 사용하였으므로 체계는 매우 잘 잡혀 있었고 스토어를 바꾸는 과정은 대략 3주가 걸렸습니다. 아키텍처는 곧 인터페이스이고 Flux 인터페이스의 핵심을 알고 있다면 그것을 구현한 라이브러리들은 프로젝트 상황에 맞게 선택하면 된다고 생각합니다. 고구마 줄기들보다 더한 Redux와 친구들에 대해, MobX는 정말 훌륭한 대안입니다. 너무 장황하게 펼쳐지는 Redux Redux를 사용하다 보면, 너무 장황하게 펼쳐지는 느낌을 지울 수가 없습니다. 스토어의 개념이 익숙지 않은 사람들에게는 더욱 어렵고, 어지럽게 느껴집니다. Actions, Saga, Thunk 외에도 '기술을 위한 기술'..

추후 예정

SPA를 개발하다 보면 데이터 관리가 정말 힘듭니다. 아주 오래전, Jquery만을 이용해서 Hash Router SPA를 만든 적이 있었습니다. 한 페이지를 만드는 일이야 간단했지만, 페이지간 데이터를 공유하고 이를 관리하는 일은 절대 만만한 일이 아니었습니다. 이를 해결하기 위해 글로벌 객체인 var DATA = {} 를 선언하고 여기에 SPA에서 사용하는 데이터들을 몽땅 넣었죠. 그리고 Get, Set 함수를 이용해 데이터를 관리했습니다. var DATA = (function() { var data = {}; return { set: function(k, v) { if (data[k]) { console.log('데이터를 덮어씁니다.'); } data[k] = v; }, get: function(k..

추후 예정

리액트 컴포넌트의 라이프 사이클은 크게 3가지로 나눌 수 있습니다. 마운팅 업데이트 언마운팅 마운팅 - 한 번 실행 constructor - 컴포넌트의 속성과 상태를 설정하는 단계입니다. componentWillMount - 컴포넌트가 DOM에 삽입되기 전에 실행됩니다. 여기서 상태를 바꾸더라도 재랜더 되지 않습니다. componentDidMount - 컴포넌트가 DOM에 삽입되고 난 후 실행됩니다. DOM 반영 완료. 모든 엘리먼트에 접근 가능합니다. 서버 랜더링에서는 실행 안됩니다. Ajax 요청에 적당합니다. 업데이트 - 여러 번 실행 componentWillReceiveProps - 컴포넌트가 새로운 속성을 받을때 실행됩니다. 처음에는 실행되지 않습니다. 상위 속성이 바뀌었건 안바뀌었건 재랜더 되..