리액트로 틱택토 게임 만들면서 기초 배우기 # 1 (리액트 설치)

---

 

 

이번 글을 통해 배워갈 내용

1. 리액트 공식문서에 나온 틱택토 게임 강좌를 하나씩 설명하면서 진행해보겠습니다.

 

---

먼저 리액트를 처음 써보시는 분들은 몇가지 설치 후 진행을 해주셔야 합니다.

 

 

윈도우를 기준으로 강의를 작성하였습니다.

맥을 쓰시는 분들은

호환 되는 커맨드를 인터넷 검색하시면서 따라와 주시면 감사하겠습니다.

 

또한 VS 코드를 기반으로 진행될 예정이니  없으신 분들은 아래에서 다운 받아 주시면 됩니다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

1. 

노드 JS가 없으신 분들은 Node.js를 설치해주셔야 합니다.

있는지 없는지 모르시는 분은

 

명령프롬트 cmd 창을 켜셔서

node -v 로 버전을 확인해 보시면 있을 경우 버전이 나옵니다.

 

없으시다면 

node js 를 아래 사이트에서 다운 받아서 설치 해주시기 바랍니다.

 

https://nodejs.org/en/

Node.js

별다른 이유가 없으시다면 LTS 가장 최근 안정된 버전을 다운 받아주시면 됩니다.

 

2. 자 이제 위에서 vs 코드와 node js를 다운 및 설치 해주셨다면

디렉토리 세팅을 하겠습니다.

 

먼저 설치할 디렉토리를 정하시고 거기로 이동해주시면 됩니다.

정하지 않으셨다면 저를 따라서 해주시면 됩니다.

 

먼저

 

커맨드 창 ( 앞으로는 CMD 창이라고 하겠습니다.) 을 키시고

 

C 드라이브로 이동합니다

 

cd C:\

 

lean_tic_tac_toe 폴더를 만듭니다.

mkdir learn_tic_tac_toe

 

lean_tic_tac_toe 폴더로 이동합니다.

cd learn_tic_tac_toe

 

여기에 틱택토 앱 폴더를 만들고 거기에 리액트를 설치하겠습니다.

 

npx create-react-app ttt-app

 

여기까지 제가 위에서 쓴 커맨드는 다음과 같습니다

 

 

정상적으로 설치가 되었다면 

 

Success 라는 문구가 보이실 겁니다.

 

 

 

 

자 이제 본격적인 코딩을 시작하기에 앞서 비쥬얼 스튜디오 코드를 실행하겠습니다.

 

cd 로 아까 만든 앱 디렉토리로 이동후 

커맨드 라인에서 code .을 칩니다.

 

cd ttt-app
code .

 

경고 문구가 뜨는 경우 직접 만든 코드이기 때문에 저는 신뢰한다를 눌렀습니다

 

자 이제 VS 코드로 넘어가기 전에 마지막으로 커맨드 창에서

npm start를 칩니다.

 

 

3000번 포트를 사용중이 아니시거나 별 문제가 없다면 브라우저에서 위와 같이 나올겁니다.

 

그럼 리액트 기초 개발 환경이 완성되었습니다.

 

다음 강좌에서 뵙겠습니다. 감사합니다.

 

 

 

 

코드 보기

 

 

https://github.com/songk1992/react_tic_tac_toe_lecture

GitHub - songk1992/react_tic_tac_toe_lecture: 리액트로 틱택토 게임 만들면서 기초 배우기

 

---

참조 및 인용 문서

 

https://reactjs.org/tutorial/tutorial.html

Tutorial: Intro to React – React

---

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---