본문바로가기

Reactjs – 한글 번역 보기

Reactjs – 한글 번역 보기

React를 공부하고 싶은데, 아직은 한글자료가 많이 부족하다고 생각했다. (옛날에 비하면 배가 부르단 소리를 하겠지만, 난 아직 배가 고픈것 같다.) 영어 원문을 읽을 엄두는 나지 않고 공부는 하고 싶으니 일단 “한글 사이트라도 따라해보면서 천천히 이해를 해보자”라고 생각하면서 따라했다.

튜토리얼 따라하기 (0.14.0)

튜토리얼 | React (0.14.0)을 따라하다 관련 다운로드 링크가 깨져 있어서, CDN – React 0.14.0-alpha1에서 다운받아서 진행을 했다.

따라한 결과물은 Git – React-test에 하나씩 push를 했다.

한글 번역본을 보면 한글이 이해하기 더 어려운 경우들이 종종 있다. 이럴때는 원문사이트를 직접가서 나름 번역을 해보면서 이해하려고 하는데, 한글 번역본인 0.14.0-alpha1과 현재 사이트의 최신버전인 0.14.5와는 시작부터 큰 차이가 있었다.

0.14.0-alpha1에서는 script type=”text/jsx”로 JSXTransformer.js를 사용하는데 0.14.5에서는 script type=”text/babel”로 babel.js를 사용한다는 것을 알게 되었다.

JSXTransformer.js는 javascript안에 JSX syntax에 맞게 예를들어 다음과 같이 사용하고, 브라우저에서는 변환작업을 수행한다

Babel은 브라우저에서 JSX transformer와 ES6문법을 사용할 수 있게 해주는 스크립트라고 이해했다. 이번 튜토리얼 작업하면서 Babel을 쓰지는 않겠지만, 다음 최신 버전 튜토리얼을 따라할 때 자세히 알아보기로 하고 일단 넘어갔다.

작업은 Git – React-test에 하나씩 올리면서 따라해보고 이슈가 발생한 내용들을 하나씩 정리했다. 튜토리얼을 먼저 따라하면서 발생한 이슈들은 나중에 GUIDES부분을 읽으면서 이해가 되는 부분들이 많았다.

튜토리얼 이외의 내용

튜토리얼을 다 따라한 다음에는 리엑트로 생각해보기를 시작으노, GUIDES, REFERENCE, TIPS등을 차례로 읽었다. virtual dom의 개념을 조금 이해할 수 있었다.

전체적으로 한번 다 읽었지만, 이해가 안가는 부분이 많다. Props 전달에 대한 내용도 읽기는 했지만, 아직 props, state에 대해서 언제 어떤것을 사용할지 구분이 힘든것 같다.

그리고 생명주기라고 번역되어있는 Lifecycle에 대한 이해 역시 부족한것 같다. 번역글만의 자료로는 이해하기 부족해서 React JS Lifecycle Method 소개, reactjs lifecycle 라는 글들을 보면서 조금 더 이해를 할 수 있었다.

Next Step

처음 예제를 시작할 때의 최신버전이 0.14.5였는데 몇 일 사이에 또 업데이트가 되어서 지금은 0.14.6이 최신 버전이다.

현재 1월에 React 스터디를 친구의 주도하에 몇명이 진행할 계획이다. 거기에서 React + Webpack + babel + Gulp를 활용할 예정이다.

스터디 전까지 이번에는 영문이긴 하지만 조금 이해를 한 부분이 있으니 최신버전을 기준으로 npm install 부터 환경 세팅을 시작으로 babel도 사용하고, browserify보다는 webpack을 사용해서 해봐야겠다.

Leave a Reply