홍차 블로그

지난 번에 글까지 어느정도 지뢰 찾기 게임으로서 동작 확인할 수 있었다. https://mc500.tistory.com/671 이번 글에서는 게임으로서의 사용성에 개선에 대한 부분을 다루고자 한다. 1. 느린 클릭 반응 속도 지뢰 찾기 게임에 익숙한 사람들은 이 게임을 했을 때 약간 불편하기도 하고 좀 어색한 부분이 있었을 것이다. 뭔가 반응이 느린듯한 느낌을 받기 때문인데, 이는 마우스의 클릭에 대한 인식을 mouse up event에서 하기 때문이다. 특히 터치패드와 같은 경우는 지연 처리 시간이 포함되어 있기에 더욱 그렇게 느껴진다. 그래서 mouse up event 대신 mouse down event에서 처리되도록 코드를 수정하면 사용자 경험이 개선되는 효과를 느낄 수 있다. 2. Auto dig..

지난번 글까지 지뢰 찾기가 어느 정도는 실행되는 모습을 갖추었었다. https://mc500.tistory.com/670 이번 글에서는 지뢰찾기 게임의 성공/실패 조건을 구현해 보도록 하겠다. 지뢰 찾기의 게임의 승리조건은 아주 단순하다. 게임판에 있는 모든 지뢰를 정확하게 찾는 것이다. 그렇다면 깃발을 지뢰 위에 올려 놓으면 되는것 같아 보인다. 하지만 깃발은 여기가 지뢰가 있을 수 있으니 건드릴 수 없도록 막아 놓는 것일 뿐 실제 지뢰의 존재 여부는 명확하지 않다. 그렇다면 어떻게 모든 지뢰를 찾았다는 것을 알 수 있을까? 지뢰 찾기 게임에서 모든 지뢰를 찾았다는 것은, 곧 지뢰를 제외한 나머지 부분이 안전하다는 것이다. 따라서, 사용자가 지뢰가 아닌 상자를 모두 열었다면 이것은 모든 지뢰를 찾았다는..

지난번 어느정도 필요한 부분을 확인해 보았다. 이제는 이를 이용해서 좀 더 상세 구성을 해 보기로 하자. https://mc500.tistory.com/669 우선은 랜덤으로 지뢰를 생성하고 어떻게 나오는지 확인해 보자. 먼저 각 상자에 대한 정보를 초기화 한다. // Init box let boxes = [] let n = this.mines for (let y=0;y 0) { callback(x-1, y-1) } // Left-Bottom if (y 0) { callback(x+1, y-1) } // Right-Bottom ..

지난번에 지뢰찾기를 만들어보겠다고 하고 말았는데 이번 글부터는 필요한 부분을 하나씩 확인해 보자. https://mc500.tistory.com/668 Breakout 예제에서와 같이 Pure Javascript 를 이용할 수도 있겠지만, 웹 SPA이면서도 비교적 간단히 사용할 수 있는 Vue.js를 기반 framework으로 시작해 보기로 했다. 여기서 Vue.js에 대한 설명을 할 것은 아니고 상세 내용은 https://vuejs.org/ 를 참고하기 바란다. Vue CLI의 create 명령을 이용하면 Vue.js로 구성된 간단한 프로젝트가 만들어진다. 그리고 yarn이나 npm 명령으로 필요한 모듈을 설치하고 서버를 실행 할 수 있는데, 웹 브라저로 http://localhost:8080/ 에 접..

지뢰 찾기는 단순하지만 정적인 게임이다. 이 게임은 마이크로 소프트 Windows 3.1 부터 기본 제공 게임에 포함되어 있었다. 그래픽 요소가 많은 Windows를 불편하지 않게 사용하려면 커서와 이를 움직이는 마우스를 잘 다뤄야 했는데, 이전 글자 위주의 DOS 환경에서는 마우스보다는 키보드 사용이 더 익숙했기에, 마우스를 이용한 포인터 (마우스 커서) 이동, 좌/우 클릭과 같은 동작을 주로 하는 이 지뢰찾기 게임이 Windows 환경 적응에 도움이 되었다고 한다. 이와 비슷한 것이 오델로, 카드 놀이(솔리테어) 등도 마찬가지다. DOS 시절 타자 연습 프로그램에 포함되어 있던 게임도 비슷한 역할이라 볼 수 있다. 이야기가 길어졌는데, 한동안 Windows에 같이 포함되어 있던 지뢰 찾기는 이제 Wi..

정규식은 일정한 패턴을 이용하여 입력된 문자열 정보가 조건에 일치하는지 확인하거나 특정 조건에 맞추어 치환 할 때 주로 사용된다. 물론 정규식이 아니라도 프로그래밍과 같은 다양한 방식으로 이를 처리 할 수 있겠지만, 정규식을 이용하면 그 과정이 절차적인 방식보다 훨씬 간결해진다. 물론 입력 조건이 정규화된 형태가 아니거나 구문이 너무 복잡해서 최적화가 되지 않는 경우도 있지만 대부분의 경우는 상당히 효과적으로 사용 될 수 있다. 정규식은 Regular Expression 으로 정규 표현식이 바른 표현이지만 줄여서 정규식(Regex)이라 부른다. 정규 표현식에 대한 상세 내용은 https://ko.wikipedia.org/wiki/정규_표현식을 참고하면 될 듯 하고, 이 정규식 중에서 자주 사용할만한 구문..

지난 번 MacOS 환경에서 podman 설치하기 #2에서 docker.io/golang 이미지는 오류 엇이 정상적으로 가지고 오는 것을 확인 했었지만 바로 golang으로 이미지 가져오기를 시도하면 오류가 발생했었다. 이렇게 docker.io와 같은 registry 표기 없이 사용하는 것을 short-name 을 사용한다고 표현 한다. $ podman pull golang Error: short-name resolution enforced but cannot prompt without a TTY 사실 docker의 경우는 registry host를 지정하지 않은 경우 docker hub를 기본 registry로 인식한다. 따라서, 초기의 상당수의 Dockerfile에서는 이를 생략한 형태로 만들어 놓는..

지난 MacOS 환경에서 podman 설치하기 #1에서 Vagrant를 이용한 podman 설치를 했었고 DockerHub에서 컨테이너 Image를 가지고 오지 못해서 좀 더 시간을 두고 확인이 필요하다고 했었다. 그래서, 이번 글에서는 추가적으로 어떤 설정을 해 주어야 하는지 확인 해 보려고 한다. 마지막 Docker Hub의 golang 이미지를 podman으로 내려 받는 명령을 실행했을 때 다음과 같은 메세지가 출력되는 것을 볼 수 있었다. $ podman pull golang Error: failed to parse "X-Registry-Auth" header for /v3.3.0/libpod/images/pull?alltags=false&arch=&authfile=&os=&password=&po..