[백엔드 개발자의 프론트 도전기] 7. snake game(1)

일이 갑자기 바빠져서 잠시 공부를 못하고 있었다!

당분간도 여행이라 못할거같지만, 앞으로는 틈틈이라도 올려봐야지..

 

지금까지는 정말 기초적인 부분만 공부했다.

그래서, 역시 실력이 늘려면 만들어보고 부딪히며 찾아보는게 좋다는 생각으로

정말 단순한 게임인 snake game을 만들어보려 한다.

 

뱀이 사과를 먹으면 몸의 길이가 길어지고, 머리나 몸이 벽이나 물체, 또는 몸에 닿으면 종료되는 단순한 게임이다.

(cpp로 구현해봤던거같은..)

이 단순한 것을 앞으로 구현해 보고 점차 나아가 더 어려운 게임을 만들어 보자!

 

Windows Powershell에서 다음과 같은 작업을 거쳐 프로젝트를 시작하였다.

> create-react-app snake-game
> cd snake-game
> npm start

 

git을 설치하고, snake-game 폴더와 github를 연동하였다.

github 설치는 powershell에서 다음과 같은 방식으로 진행하였다.

> winget install --id Git.Git -e --source winget : "https://git-scm.com/download/win" 참고
> 또는 설치파일 다운받아 실행
> powershell 재시작 후나 git bash 실행 후 git 명령어 사용 가능

 

github 연결은 powershell에서 다음과 같은 명령어를 사용하여 진행하였다.

> cd [프로젝트 폴더]
> git init : local git 저장소 생성 및 초기화
> git remote add origin [git 주소] : 원격 저장소와 로컬 저장소(origin) 연결
> git add . : commit을 위해 현재 폴더의 모든 파일을 stage에 추가
> git status : 현재 추가한 파일과 아닌 파일을 확인할 수 있음. 모든 파일이 추가되었음을 확인하고 패스
> git commit -m "initial commit" : 위에서 add한 파일을 commit. "initial commit"이라는 이름으로 commit한다.
> git log : commit한 history를 볼 수 있음.
> git branch : 현재 브랜치 확인 가능.
> git branch -M main : 처음 깃 브랜치가 master로 등록되도록 기본 설정을 해두었기 때문에 실제 저장소에서의 이름인 main과 브랜치 이름을 맞추기 위해 진행.
> git push origin main : 현재 로컬 브랜치(origin)을 원격 저장소 브랜치(main)으로 push하는 명령어.
                                     * -uf를 붙이면 원격 저장소의 모든 파일을 삭제하고 origin의 파일을 push한다.

 

github 주소 : https://github.com/YunJiye/snake-game.git

YunJiye/snake-game

 

---

 

**문제 발생1 : CRLF warning

"git add ."을 입력한 후 다음과 같은 에러가 발생하였다.

LF와 CRLF의 변환 문제인데, os마다 끝을 LF로 하느냐, CRLF로 하느냐의 차이가 있기 때문에 git에서 경고를 띄워 사용에 대해 알려준 것이다.

이는 다음과 같은 명령어를 사용해 해결하였다.

git config --global core.autocrlf true

즉, --global은 모든 시스템에 적용하겠다는 것을 의미하고, 자동으로 crlf 설정을 적용하겠다는 것이다.

git에 체크인 시 CRLF를 LF로 자동 변경해주고, 체크아웃 시에는 LF를 CRLF로 자동 변경해주는 방식으로 동작한다.

 

---

 

**문제발생2 : 

git 연결 후 "npm start"를 입력하자 다음과 같은 에러가 발생하였다.

error 문구를 검색해 https://velog.io/@angel_eugnen/TILerror0308010cdigital-envelope-routinesunsupported 이 글을 통해

powershell에서

$env:NODE_OPTIONS="--openssl-legacy-provider"

 

라는 설정을 해주었다.

그러자 npm start는 제대로 동작했지만, 컴파일 에러가 발생하였다.

 

다시 https://naraewool.tistory.com/350 이 글을 통해 react-scripts의 version 문제일수도 있다고 생각했고,

npm uninstall react-scripts

npm install react-scripts 

 

두 명령어를 통해 react-scripts의 버전을 올려주자 해결되었다.