최근 git을 사용하면서 추가버전을 롤백하게 되어 과거버전으로 돌아가야 할 일이 생겼습니다.
기존에 사용하던 svn은 여러가지 기능 중 히스토리를 확인하여 날짜를 선택하고 손쉽게 과거로 돌아가 그때부터 다시 commit을 치고 update를하면서 사용 할 수 있었지만 지금 사용하는 git은 그런방법으로 처리하는게 쉽지 않았고 처리 방법으론 과거 commit을 찾아서 해당 commit영역을 checkout 한 후 branch를 새롭게 만들어서 사용하는 방법을 채택하여 사용중에 있습니다.
이 과정을 겪으면서 branch에 대해 알아볼 필요성이 생겼고, 간단하게 branch의 사용법을 확인 후 처리했던 방법을 포스팅 해보고자 합니다.
GIT - branch
branch만들기
git branch <name>
"git branch 브랜치명"를 통해 브랜치 생성할 수 있습니다.
브랜치 생성
branch 목록 확인하기
git branch
"git branch"를 통해 브랜치 리스트를 확인 할 수 있습니다.
브랜치 목록 확인
사용하는 branch 변경하기
git checkout <branch>
"git checkout 브랜치명"을 통해 사용할 브랜치를 바꿀 수 있습니다.
브랜치 변경
새 브랜치에 소스 올리기
브랜치를 새로 만들어서 변경까지 했다는건 이 부분부터 새로운 소스로 개발을 진행하겠다는 뜻이겠죠?
여기서 소스를 약간 수정하고 add 후 commit을 해서 push까지 진행해보겠습니다.
저는 index.html만 약간의 수정을 했습니다.
index.html수정
아래 명령을 통해 전부 add해주시고 commit 메시지를 남깁니다.
git add .
git commit -m "브랜치 변경"
소스를 수정 후 commit
push도 진행합니다.
git push origin psw
이번엔 변경된 브랜치명인 psw로 올립니다. (master -> psw)
전 저장소를 연결할 때, origin으로 만들었습니다.
git서버에 push
정상적으로 변경된 branch로 올라간 모습을 확인 할 수 있습니다.
fork툴을 활용한 git 처리 확인
fork라는 툴을 활용해서 git을 사용하고 있는데 아무래도 gui를 제공하다보니 commit 메시지도 보기 좋고 현재의 브랜치상태나 올린사람등을 쉽게 파악할 수 있어 애용하고 있는 프로그램입니다.
이렇게 새로운 브랜치를 만들어서 추가된 것을 볼 수 있습니다.
브랜치 병합하기(merge)
git merge <commit>
병합을 할 땐, "git merge 브랜치명"의 명령어를 통해 merge합니다.
git checkout master
지금까지 따라오셨다면 commit의 헤드는 psw에 처리되어 있을텐데, 다시 master로 변경해보겠습니다.
간단한 HTML, CSS, JAVASCRIPT의 작업을 할 때, 주로 아톰을 사용하다가 리액트 공부를 하면서 VS Code를 알게 되었습니다. 뭔가 더 직관적이고 간편한 UI가 마음에 들어서 요즘엔 주로 사용하는 툴입니다. 아톰의 추가 패키지 설치처럼 VS Code에도 추가 확장 프로그램을 설치 할 수 있습니다.
설치방법
좌측 메뉴 중 최하단의 Extensions 메뉴를 클릭하고 찾고자 하는 확장 프로그램을 검색해서 설치하면 됩니다.
단축키 Ctrl + Shift + X
확장 프로그램 추천
사용하면서 편리한 확장 프로그램을 알게 되면 계속해서 추가하겠습니다.
1. ESLint : 자바스크립트 문법 및 코드 스타일을 검사해줍니다.
2. open in browser : html 같은 페이지를 바로 브라우저창에서 키고 싶을 때, 브라우저 연결을 도와줍니다.
3. Prettier-Code formatter : 코드 스타일을 자동으로 정리해줍니다.
4. HTMLHint : 작성한 HTML 문법에 문제가 있는지 체크해줍니다.
태그가 안닫히거나 올바른 문법이 아니면 경고를 띄워줍니다.
5. Reactjs Code Snippets: 리액트를 사용하는분들에게 추천합니다.
함수를 작성하거나 단축 단어를 사용하여 간편하게 코드를 작성할 수 있습니다.
6. Korean Language Pack for Visual Studio Code: VS Code를 처음에 설치하시면 영문버전인데 툴을 한글버전으로 사용하고 싶은분들에게 추천합니다. 설치 후 별도의 설정이 필요합니다. 저는 영문버전으로 사용중입니다.
테트리스 구조를 만들고 맵을 만들었으니 이제 테트리스 다운 동작을 만들어야 할 것같습니다.
이번엔 index.js에 action()이라는 함수를 추가해서 일정 시간마다 자연스럽게 내려가는 동작을 추가해보겠습니다.
여기서 일정시간마다 동작한다. 라는 부분에서 떠오르는 함수가 있으신가요? setInterval 또는 setTimeout, animationFrame등이 생각 날 것 같습니다. 저는 setInterval을 활용해서 처음에 정의한 gamespeed의 변수값마다 동작하도록 작성했습니다.
2. 일정시간마다 블럭이 떨어지는 효과 만들기
index.js - action()
window.onload = function(){
drawMap();
drawNextTetris(Ntype);
myFunction();
action(); //action 함수 추가
}
/**
* 동작 메소드
* interval 함수로 입력시간마다 동작
* (gameSpeed에 따라 떨어지는 속도가 변경)
*/
function action(){
var intervalID = setInterval(function(){
console.log("action!")
GX++;
drawTetris(GX, TYPE, TURN);
}, GAME_SPEED);
}
window.onload 맨 끝에 action함수를 추가하여 페이지가 로드되면 action함수가 실행되도록 처리하였습니다.
action 함수 내부를 보니 Interval함수에 의해 GAME_SPEED값마다 콘솔로그값을 출력 후 GX전역 변수값을 증가시킨 후에 drawTetris 함수를 호출하는 것을 볼 수 있습니다.
drawTetris함수는 현재 선택된 테트리스의 값을 특정 위치에 그려주는 함수 입니다.
특정 위치를 그려주므로 일정 시간마다 우리는 위에서 아래로 떨어지는 모습을 위해 GX변수값을 증가시켜주면 자연스럽게 밑으로 계속해서 그려줄 것입니다.
하지만 계속 그려주게되면 이전 모습이 남아있어 이러한 형태로 잔상이 있겠죠?
이제 잔상을 지워주는 함수를 만들겠습니다.
erase 함수
한줄씩 내리면서 특정위치를 지우기전에 현재 위치의 테트리스 블럭값을 확인하고 지우는 erase 함수를 만들어보겠습니다.
웹 개발을 해보겠다고 예전에 학원을 다니면서 강사님과 같이 만들어봤던, 테트리스 예제가 있어서 약간의 소스 정리 후 포스팅을 하면 좋을 것 같아 테트리스 만들기 예제를 시작합니다.
테트리스 만들기 예제들을 찾아보면 캔버스값으로 처리하는 예제들이 많던데, 아직 캔버스 사용이 쉽지는 않은터라 게임치고는 UI가 엄청 화려하게 변화는 없는 테트리스정도는 html의 간단한 요소들로 충분히 표현이 가능하고 jquery나 다른 화려한 플러그인 없이 순수 javascript만으로 로직을 구성해서 표현할 수 있는 테트리스를 선택하게 되었습니다.
크게 구분하자면 배열데이터를 조작하고 매번 배열의 데이터를 검사하여 table요소를 통해 UI를 표현하는 형태로 진행할 예정입니다.
1. 작성을 위해 페이지 구성 & 배열 데이터 만들기 맵 그리기
페이지별 구성도
이러한 형태로 페이지들을 구성할 예정입니다.
메인이될 index.html 페이지
css를 꾸며줄 index.css
동작처리를 위한 index.js
전체 맵데이터, 테트리스 모양데이터를 담아놓을 tetris_data.js 로 구성하여 소스를 작성하겠습니다.
