이번 시간부터 본격적으로
틱택토 게임을 만들어 보겠습니다
작업하면서 더 알게 되실 부분이지만
이 게임이 겉으로는 단순해 보여도
만들기 위해서는 아주 중요한 패턴과 개념이 필요합니다
게임을 만드는 과정에서 함께 알아보도록 하겠습니다
우선은 간단한 것부터 시작하겠습니다
이 페이지 위에 작은 헤더(header)를 더해보겠습니다
단순히 이미지와 그 아래의 작은 텍스트로 된 제목입니다
이걸 구현하기 위해서는 코드로 돌아와서
이 앱 파일(app.jsx)로 들어가서 앱 컴포넌트에 접근합니다
이 부분이 렌더링되고 있는 주요한 부분입니다
이 앱의 근간이라고도 할 수 있겠습니다
이 앱 컴포넌트에는
지금은 플레이스홀더(placeholder)만 있는데
여기에 header 요소를 사용해서 헤더로 내보낼 수 있습니다
이 header 컴포넌트는 내장기능으로
대체 텍스트(alt text)와 소스를 포함한 이미지를 담고 있습니다
그리고 그 아래에는
h1 태그에 '틱택토'(Tic-Tac-Toe)라고 쓸 수도 있지만
일단은 그렇게 하지 않겠습니다
대신 이 코드를 잘라내서
여기에 문단을 작성할텐데
'출시 예정'(Coming soon)을 쓰겠습니다
이 부분은 곧 작업할 예정이기 때문입니다
일단은 index.html로 가겠습니다
여기에는 이 div가 있는데
이 부분을 리액트가 제어할 예정입니다
이 내용은 이전에 이미 언급한 부분입니다
index.jsx에서 이 div를 지정할 때
루트(root) id를 포함하여 앱 컴포넌트를 렌더링하는 것이
이 div의 내용입니다
여기에서 가장 중요한 부분은
이 index.html은 결국
우리의 웹사이트를 방문하는 사람들이 볼 내용이라는 것입니다
그러므로 리액트에서 작업할 때
필요하다면 여기에 마크업을
더할 수 있습니다
컴포넌트에 지정할 수 있는 마크업이
굳이 컴포넌트 내부에 있을 필요가 없을 수도 있습니다
그 이유는 속성(props)이나 상태(state) 등에 의해
변하지 않기 때문입니다
그래서 이 헤더 마크업을 바로 여기
index.html 파일의 이 div 위쪽에 두겠습니다
이 부분을 강조하는 이유는 저희가
리액트에서 작업할 때
이 부분을 간과하기 쉽기 때문입니다
컴포넌트에 모든 요소를 다 넣지 않아도 됩니다
물론 웹 어플리케이션의 마크업은 대부분
컴포넌트 속에 들어 있을 것입니다
그 웹 어플리케이션의 로직도
이 안에 있을 가능성이 높습니다
하지만 정적인 마크업이 있다면
예를 들면 이 헤더는 정적인 마크업입니다
즉 다른 데이터에 영향을 받지 않고
영향을 받을 필요가 없는 요소입니다
그래서 이 index.html 파일에 둘 수 있습니다
제가 만들어 놓은 이 프로젝트에서는
이렇게 작업하는 것이 좋습니다
그 이유는 이 프로젝트에 public 폴더를 만들어 두었는데
이 안에 이미지가 몇 개 있습니다
앱 개발에 사용하게 될 이미지입니다
그리고 이 코드의 경우 만약 파일이
public 폴더에 저장되어 있다면 이 파일은
웹사이트 방문객에게도 공개됩니다
그러므로 이 파일을 쉽게 참조하여
마크업 내 공유 폴더에서 꺼내올 수 있습니다
컴포넌트이건 index.html 파일이건
이 공유 폴더에 있다면 이름을 지정함으로써
파일을 이렇게 사용할 수 있습니다
예를 들어 game-logo.png를
참조해 보겠습니다
어떤 파일이든지
public 폴더 안에 있다면
index.html 파일과 함께 사이트 방문자에게도 공유됩니다
그래서 쉽게 이름으로 참조할 수 있고
따로 경로를 지정하지 않아도 됩니다
예를 들어 public/game-logo.png는
웹 어플리케이션의 루트에서 파일을 가져오기 때문에
잘못 작성된 경로이고
방문자가 접근할 수 없습니다
대체 텍스트(alt text)로 넘어가겠습니다
'Hand-drawn Tic-Tac-Toe' (직접 그린 틱택토)라고 쓰겠습니다
이미지의 내용을 묘사하는 것입니다
이대로 저장한 후에
새로고침을 할 텐데, 페이지의 맨 위로
스크롤해야 볼 수 있습니다
이 이미지와 제목을 확인할 수 있습니다
이 형식으로 보이는 이유는
이미 스타일 법칙이
index.css에 지정되어 있기 때문입니다
물론 이 형식은 수정 가능합니다
어쨌든 이제 이 헤더를
리액트 컴포넌트 바깥으로 옮겨왔습니다
이제 다시 돌아가서
리액트 컴포넌트를 살펴볼텐데
여기에서 게임 로직을 작업해 보겠습니다