react를 사용하는데 redux는 필수적인 요소라고 할 수 있다. 이제는 다른 방법들도 많은 것 같지만 결국 redux와 같이 app 전체에서 공유하는 공통 state를 사용하는 것은 비슷하다. import React, { Component } from 'react' import { connect } from 'react-redux' import { changeName } from './actions' @connect(state => ({ name: state.name }), dispatch => ({ handleChangeName: (name) => { dispatch(changeName(name)) } })) class MyComponent extends Component { constructor(..

이 발표를 보고나서 Dan Abramov에게 묘한 매력을 느꼈다. 영어도 잘 못하면서 팔로우를 시작했다. Reactjs에 대해서 이런저런 것을 많이 보게 되었다. 그리고 어느 덧 발표했던 기능이 정식출시했다. 이름은 React Hooks다. 기본 개념 Hooks소개의 Motivation에도 말하고 있지만 Hooks의 기본 목적인 간결함이다. 다음의 코드는 Hooks를 사용한 코드다. import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 이 코드가 얼마나 ..

그동안 React를 사용하다보니 새로운 프레임워크에 눈을 잘 못 돌렸는데 -아니 돌릴 필요가 없었는데- 요즘 Vue.js라는 것이 핫하다는 것을 들었다. 궁금해서 문서를 조금 보긴 했지만 구 angularjs와 비슷하다는 느낌만 받았을 뿐 특징같은 건 파악하지 못했다. 주말동안 혼자있는 시간이 많이 생겨서 이 기회에 Vue.js에 대해서 알아보기로 했다. comment-sample 이전에 angularjs와 handlebar로 댓글 sample code를 만들었는데 지금도 그런 방식으로 react와 vuejs를 비교해서 댓글 sample code를 만들기로 했다. (사실 react로도 이미 만들었지만 그 코드는 react를 잘 모를때 만들어서 너무 보기가 어려워 다시 만들기로 했다.) 만들려고 하는 샘플..

codemirror에 한참 빠져있을때 간단히 만든 markdown to html 에디터가 있다. 여기에 tistory api로 글 보내기도 붙이고 글 가져오기, 로컬에 임시 저장하기 등등을 붙여보고 싶었는데 솔직히 말해서 엄두가 나지 않았다. 아무래도 코드가 길어질테니 파일을 분리하는 것이 관리하기 편할텐데 분리한 모듈을 관리하고 merge해서 테스트하고 하는 과정이 굉장히 번거롭게 느껴졌다. 그러다가 react 공부하게 되었고, 부끄럽게도 아직 몰랐던 CommonJS도 알게 되었다. react에 webpack을 적용하면서는 눈이 번쩍 뜨이는 것 같았다. 이런 방법이 있는데 왜 그동안 그렇게 고생했던 것일까 싶다. (사실 CommonJS만 알았어도 더 속도가 붙었을 것 같다.) 지금부터 이전에 만들었던 ..

전에 React 체험을 했었는데 그 이후로 별다른 진전이 없다가 이제 조금 시간을 내어 더 공부해보려고 한다. 시작은 역시 시작문서로 하는게 좋을 것 같아서 Getting Started를 읽기 시작했다. 난관 We recommend using React with a CommonJS module system like browserify or webpack. 첫 문장에서 '턱!'하고 막혔다. 너무 오랜시간 javascript 세계를 떠나 있었나보다. 무슨 말인지 하나도 모르겠다. babel로 JSX를 javascript로 변환만 하면 되는거 아닌가 싶었는데 browserify, webpack를 사용한다고 한다. 그 것도 뭔지 모르지만 CommonJS module system도 뭔지 모른다. 빠르게 움직이는 ..