React (6) 썸네일형 리스트형 [Tutorial]6.마무리 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※ 드디어 다음과 같은 tic-tac-toe 게임을 만들었다.플레이 가능한 tic-tac-toe.승자를 판별할 수 있다.턴 내역을 저장할 수 있다.턴 내역을 리뷰하고 이전 턴으로 이동할 수 있다.잘 했습니다! 이제 React가 어떻게 동작하는지 어지간한 것은 알게 되었을 거라고 믿습니다.여기서 최종 결과를 확인해 보자. 시간이 좀 남거나 React에 대해 더 공부해 보고자 한다면, 여기 조금 더 난이도 있는 tic-tac-toe 게임을 만들어 보자. 1) 턴 내역에 (열,행) 포맷으로 표시해보자. 2) 보드에서 최근 턴을 굵게 표시해보자. 3) 중첩 반복문을 사용하여 하.. [Tutorial]5.Time Trave 기능 추가 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※1. 플레이 내역 저장하기2. 다시 State 끌어올리기3. 이동내역 보여주기4. Key 고르기5. Time Travel 구현하기 마지막 단계로 게임 플레이 내역을 볼 수 있는 Time Travel 기능을 구현해보자. 1. 플레이 내역 저장하기 우리가 만약 squares 배열을 직접 수정했다면, Time Travel 기능을 구현하기 어려웠을 것이다. 그러나 우리는 slice() 함수를 통해 플레이 할때마다 새로운 복사본을 만들어서 원본 데이터를 보존했다. 이는 게임 플레이 내역을 저장할 수 있게 해주고, 현재 턴과 과거 턴을 비교할 수 있게 해준다. 이제 과거 Squa.. [Tutorial]4.게임 완성하기 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※1. State 관리하기2. 불변의 중요성3. 함수 컴포넌트4. 턴제로 전환하기5. 승자 판단하기 tic-tac-toe 게임을 만들기 위한 기본은 마련되었다. 이 게임 개발을 끝내기 위해 X와 O가 교차로 board에 표시되게 해야 하고, 승자를 결정하는 작업이 남아있다. 1. State 관리하기 현재, 각 Square 컴포넌트는 게임의 상태를 유지한다. 승자를 가리기 위해, 9개 Square의 value를 유지하고 하나로 모아야 한다. Board가 그냥 각 Square에게 상태를 물어볼 수도 있고 React에서 실제로 그것이 가능하다. 그러나 코드가 이해하기 어려워지.. [Tutorial]3.개요 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※1. React는 무엇인가?2. tic-tac-toe 초기 코드 분석3. Props로 데이터 전달4. 컴포넌트에 기능 만들기5. 개발도구 1. React는 무엇인가? - React는 유저 인터페이스 개발을 위한 선언적, 효과적, 유연한 자바스크립트 라이브러리다. "컴포넌트"라고 부르는 작고 독립된 코드조각으로 복잡한 UI를 구성할 수 있다. React는 몇가지 종류의 컴포넌트를 갖고 있으며 지금은 React.Component부터 시작하겠다. XML 형태의 태그를 사용할 것이다. 우리는 화면에 보여줄 것을 React에게 전달하기 위해 컴포넌트들을 사용한다. 데이터가 변경.. [Tutorial]2.Tutorial 환경설정 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※ 이 tutorial을 진행하는 2가지 방법이 있다. 하나는 browser에 코드를 입력하는 것이고, 또 하나는 PC에 개발 환경을 설치하는 것이다.1. Browser에 코드 입력 - tutorial을 시작하는 가장 빠른 방법이다. 우선 여기로 이동한다. 비어있는 tic-tac-toe 게임보드와 React code가 나타날 것이다. 이 tutorial에서 이 코드를 수정할 것이다. 2. PC에 환경 설정(1번이 쉽게 때문에 2번은 넘어가도 상관없다.) 1) 최신 버전의 Node.js가 인스톨 되어 있어야 한다. (6버전보다 높은 Node, 5.2이상의 npm) 2) r.. [Tutorial]1.Tutorial을 시작하면서... △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※ 이 tutorial을 통해 작은 게임을 만들어 볼 것이다. 게임 개발자가 아니기 때문에 넘어가고 싶을 수도 있지만 한번 해보는 것을 권장한다. 이 tutorial을 통해 React 앱을 빌드하는데 필요한 기초적인 기술들을 익히게 될 것이며 마스터한 후에 React에 대해 더 깊이 이해할 수 있을 것이다. Tip 이 tutorial은 개발하면서 배우는 것을 좋아하는 사람을 대상으로 만들어졌다. 개념을 처음부터 배우고 싶다면 step-by-step 가이드를 확인하기 바란다. 이 tutorial과 step-by-step 가이드는 서로 부족한 내용을 보충해 줄 수 있다. 이.. 이전 1 다음
