이번 시간부터는 본격적으로 게임 작업을 하겠습니다
앱 컴포넌트에서 시작하겠습니다
빌딩 블록이 몇 개 필요한데
완성된 상태의 게임에는
플레이어의 이름이 보이는 칸을
포함시킬 예정이고
수정도 가능하게 할 예정이기 때문입니다
먼저는 게임판을 만들어야 하고
게임판 하단에는 로그(기록)을 만들고
마지막에 결과창을 띄워서
각 플레이어가 진행한
수를 보여주어야 합니다
크게 이 세 가지 빌딩 블록을 만들어야 합니다
우선 플레이어 부분을 작업해 보겠습니다
먼저는 자동으로 플레이어 이름을 지정해 주고
로직을 하나 더 추가해서 웹사이트 사용자가
플레이어 이름을 수정할 수 있게 하겠습니다
그 전에 앱 컴포넌트에서 할 일이 있습니다
main이라는 요소를 래퍼 요소(wrapper element)로 사용하여
각각의 빌딩 블록을 감싸겠습니다
그 안에 래퍼를 하나 더 넣겠습니다
바로 game-container라는 id의 div입니다
이 id를 사용하는 이유는
index.css에서
이 id를 검색해서 CSS 스타일을 가져오기 때문입니다
다음으로는 플레이어(PLAYERS)라는 빌딩 블록을 만들고
게임판(GAME BOARD)라는 빌딩 블록을 이 얖 안에 넣고
그리고 얖 바깥에는 로그(LOG)를 두겠습니다
단순한 형식상의 이유입니다
이제 먼저 플레이어 부분을 작업해 보겠습니다
먼저 ol을 출력하겠습니다
ol, 즉 리스트에 순서가 있어야 하는 이유는
플레이어 이름을 정할 때 첫 번째 사람이 플레이어 1,
그리고 두 번째 사람이 플레이어 2가 되기 때문입니다
즉 의미론적인 부분입니다
크게 중요하지는 않지만
이것 때문에 ol이 필요합니다
이 목록에 player라는 id를 부여해
형식상으로 필요한 부분을 작업하겠습니다
그리고 이 목록 안에
list 항목이 두 개가 필요합니다
각각 첫 번째와 두 번째 플레이어입니다
그리고 일단은 플레이어 이름을 내보낼 텐데
이 때 각각의 기호 또한 함께 내보내겠습니다
이 게임이 틱택토이기 때문에
각 플레이어에게 고유한 기호가 있어서
그 기호가 게임판 위에서
정사각형을 클릭할 때 생성될 것입니다
스타일링의 이유로 여기에 span를 더해서
안에 플레이어 이름을 넣겠습니다
예를 들면 플레이어 1입니다
곧 이 부분을 동적으로 만들겠지만
일단은 하드 코딩으로 직접 입력하겠습니다
이 범위에 CSS 클래스를 지정하기 위해
className이라는 속성(prop)을 사용하겠습니다
이 부분은 이전에 언급한 적이 있습니다
클래스 이름은 player-name으로 설정해서
형식을 맞춰 주겠습니다
여기에 두 번째 span을 지정하겠습니다
이 플레이어 이름 span 아래에 작성하겠습니다
이 span에는 className을
player-symbol로 하겠습니다
첫 번째 플레이어에게는 기호 X를 주겠습니다
이제 이 부분을 복사해서
두 번째 목록항목에 채워넣고
플레이어 2로 수정하겠습니다
기호도 O로 변경하겠습니다
플레이어 구역이 아직 끝난 것은 아닙니다
아직 할 일이 더 있지만 일단 이 정도가 시작점입니다
저장 후 확인해 보면 작성한 내용을
이 메인 게임 영역에서 확인할 수 있고
검은색 배경 위에 있습니다
여기에 플레이어 1에 대한 출력이 있고
플레이어 2는 여기 있습니다
다음 단계는 플레이어 이름을 동적으로 만들고
여기에 수정 버튼을 만드는 것입니다
그러면 여기 작성 필드에서
웹사이트 이용자가 직접
플레이어 이름을 변경할 수 있게 됩니다
다음 시간에는 그 부분을 작업해 보겠습니다