[Tutorial]1.Tutorial을 시작하면서...

※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※

 이 tutorial을 통해 작은 게임을 만들어 볼 것이다. 게임 개발자가 아니기 때문에 넘어가고 싶을 수도 있지만 한번 해보는 것을 권장한다. 이 tutorial을 통해 React 앱을 빌드하는데 필요한 기초적인 기술들을 익히게 될 것이며 마스터한 후에 React에 대해 더 깊이 이해할 수 있을 것이다.

Tip  이 tutorial은 개발하면서 배우는 것을 좋아하는 사람을 대상으로 만들어졌다. 개념을 처음부터 배우고 싶다면 step-by-step 가이드를 확인하기 바란다. 이 tutorial과 step-by-step 가이드는 서로 부족한 내용을 보충해 줄 수 있다.

 이 tutorial은 몇몇 섹션으로 나뉜다.

• Setup for the Tutorial : tutorial을 따라할 수 있는 시작점이다.

• Overview : Component, Props, state등의 React 기본을 배우게 된다.

• Completing the Game : React를 사용함에 있어 가장 많이 쓰이는 기술들을 배우게 된다.

• Adding Time Travel : React만의 유일한 강점을 통해 React를 더 잘 이해하게 될 것이다.

이 tutorial의 모든 섹션을 한번에 끝낼 필요는 없다. 한개나 두개의 섹션일지라도 할 수 있는 만큼 하길 바란다.

tutorial을 진행하는 동안 소스코드를 복사 붙여넣기 해도 괜찮지만 직접 치는 것을 추천한다. 코드를 직접 치면 당신의 몸이 기억하게 될 것이고 더 깊이 이해하게 될 것이다.

1. 무엇을 만들 것인가?

---

 - 이 tutorial을 통해 tic-tac-toe 게임을 React로 만들 것이다. 최종 결과물을 여기서 확인해볼 수 있다. 코드가 이해가 안되거나 문법이 익숙하지 않아도 걱정하지 말길 바란다. 이 tutorial의 목표는 React와 그 문법을 이해하는데 있다. tutorial을 계속하기 전에 tic-tac-toe 게임을 먼저 해보는 것을 추천한다. 눈에 띄는 것중 하나는 게임 보드 오른쪽에 번호가 매겨진 목록이 있다는 것이다. 이 목록은 플레이 내역과 게임 진행상태를 보여준다.

 이제 tic-tac-toe 게임에 익숙해졌으면 닫아도 된다. 단순한 템플릿에서부터 출발하겠다. 다음 단계로 게임을 만들 수 있도록 환경설정을 하겠다.

 

2. 전제조건

---

 - HTML과 Javascript에 대한 사전지식이 필요하지만 다른 프로그래밍 언어에 익숙한 사람도 따라올 수 있다. 또한 함수, 객체, 배열, 조금의 클래스에 대한 사전지식이 필요하다. Javascript에 대한 사전지식이 필요하다면 이 가이드를 추천한다. 그리고 React는 ES6의 일부 기능도 사용하고 있다. 이 tutorial에서 arrow함수, class, let, const등을 사용할 것이다. Babel Repl을 통해서 ES6가 컴파일 되는 것을 확인할 수 있다.