내가 쓸려고 만든 체스타이머!!(Feat. Netlify)

yhd520·2021년 2월 21일
0
post-thumbnail

얼마전에 퀸스겜빗이라는 드라마를 보고 체스에 흥미가 생겨서 친구들과 같이 체스를 취미로 배우고 있다. 주말에 가끔 만나서 같이 체스를 두는데 처음에 체스타이머가 없어서 서로 휴대폰의 타이머를 설정해 놓고 한 수 둘때마다 타이머를 멈추고 상대방이 두면 다시 타이머를 시작시키고 이런식으로 게임을 진행했는데 여간 불편한게 아니였다.
그래서 체스타이머어플을 검색해보니 역시나 있었다. 평소 어플다운받는 걸 별로 안좋아하기도 하고 갑자기 든 생각이 이거 웹으로 금방 구현 할 수 있겠는데??
그리고 일단 vscode를 켰다.


내가 구현해야할 녀석은 바로 요녀석 👆👆👆👆👆👆
내가 구현 한 녀석은 바로 요녀석 👇👇👇👇👇👇👇👇

링크

사실 처음시작할 때 정말 1시간이면 충분 할 줄 알았다. 그리고 무작정 코딩을 시작했다. 먼저 html뼈대를 잡고 css로 대충 보기좋게 만든 다음 javascipt로 넘어왔다.
구현해야할 기능들을 정리해보면 이렇다

  • 자기 진영의 숫자버튼부분을 누르면 상대방의 타이머가 작동한다.(턴 넘기기)
  • 시간이 초과대면 빨간색으로 바뀐다.
  • 현재 누구의 턴인지 쉽게 알기위해 타이머가 작동중인 쪽의 버튼에 색을 준다.
  • 일시정지기능
  • 리셋기능 (게임진행중에만 가능)
  • 시간늘리기, 줄이기 기능 (게임시작전에가능)
  • move기능 (자신의 몇번의 턴을 했는지)

예상과달리 배포까지 2시간 조금 넘게 걸린거 같다. 170줄의 자바스크립트 코드와 8개의 함수가 나왔다. 사실 작은 프로젝트이기도 하고 빨리빨리만드느라 코드가 깔끔하지는 못하다. 나중에 시간이나면 리팩토링을 할 예정이다. 타입스크립트로도 바꿔보고 함수도 좀 더 나눠야 겠다. 차마 지금 코드를 올릴 수가 없...

배포는 회사에서 작은 관리자페이지 만들었을 때 썻던 netlify로 배포를 했다. 정말 간단하고 쉽다. 강추!!

이번에 작지만 프로젝트를 하면서 느낀 것이 두가지가 있다.
첫째.
프로젝트 설계의 중요성...
아무리 작은 프로젝트라도 시작전에 설계를 꼼꼼히 하는 것은 정말 중요한것 같다. 아키텍쳐 설계, 새로운 라이브러리를 도입할때 등등.. 이번 프로젝트는 작아서 주먹구구식으로 뒤죽바죽(?) 코드를 작성해도 그렇게 크게 문제는 없지만 프로젝트가 커지면 아예 뒤집어 엎어야하는 경우가 올수도...

두번째.
작은 것이라도 이렇게 일상에 필요한 것들을 내가 직접 만들어서 사용한다는 것이 정말로 보람있는 것 같다. 이제 만들어 진것을 쓰기보다 내가 직접 구현해보면 어떨까?? 라는 마인드를 항상 지니고 있어야 겠다.

profile
즐거워야코딩

0개의 댓글