추석연휴 알차게보내기 - 항해 플러스 코육대 참여하다

우연한 계기로 Node JS 와 Vue 를 배울일이 생기면서 그 매력에 풍덩 빠져버리면서 
토이 프로젝트로 아빠 회사사이트를 후딱 만들어버렸다.

오랜만에 웹을 만들다보니 만드는 재미도 있고 일이 아닌 취미로 만들다보니 활력도 생기는듯한 느낌에 뭔가를 더 만들어 보고 싶다는 생각이 있었는데, 우연히 항해 플러스의 제 1회 코육대 이벤트를 알게 되었다.

https://hanghaeplus-coyukdae.oopy.io/

항해 플러스: 제1회 코육대

 

여러 종목 중 참여하고 싶은 과제를 선택해서 제출하면 되는 대회로 조금 의미있는(?) 추석도 보낼겸,
혹시나 치킨 한마리쯤은 받아볼 수 있지 않을까 하는기대로 ( 과제를 다 만들고 이 글을 쓸 때 쯤 알게된 사실인데.. 치킨은 치어리더 상으로 이벤트 공유를 많이 해야 받을 수 있는 것이었다...ㅠㅠ)  "행맨게임" 을 만들어 보기로 했다.

미션 1. 가족들이 함께 볼 수 있도록 프론트도 구현해서 배포하세요. 2. 문제를 선택할 수 있도록 영어 단어를 랜덤으로 3개 띄워주세요. 3. 선택한 문제의 단어를 글자 단위로 숨깁니다. (e.g., "apple" -> "_ _ _ _ _") 4. 화면에 26개 알파벳을 띄워주세요. 5. 선택한 알파벳과 정답을 비교합니다. 6. 일치하는 알파벳이 있을 경우 기존 UI에서 사라지고 해당 위치에 표시됩니다. 7. 틀릴 경우 기존 위치에서 알파벳이 빨간색으로 바뀌고, 오류 횟수를 증가시킵니다. 8. 오류 날 때마다 ‘교수대-밧줄-머리-팔-손-몸통-다리-발’ 순서로 그려서 그림이 완성되면 ‘실패’ 를 띄웁니다. (오류 횟수 8번 이상은 실패)

서버를 돌릴 자원은 없기에 git page 로 배포할 생각으로 간단하게 Vue 만을 사용해서 게임을 구현했다.

기본적으로 미션에서 제시하고 있는 요구사항을 만족할 수 있는 행맨 게임을 구현하였고
추가 기능으로 소소하지만 점수판이랑 타이머 기능을 추가해서 가족들끼리 게임을 할 경우 순위판을 작성할 수 있도록 하였다.

오류횟수가 적고 빠른 시간내에 게임을 Pass 할 수록 높은 순위로 등록되도록 하였다.

기본적으로 단어 Pool 은 30개가 등록되어있고,
게임 옵션 설정 페이지에서 단어들을 추가하거나 삭제할 수 있도록 하였다.

게임 데모 : https://adppark.github.io/

행맨게임

추석기간내 잠깐 잠깐 틈날때마다 만든거라서
크게 엄청난 기능을 포함해서 만든건 아니지만 자칫 TV 만 보면서 무의미하게 보낼뻔 한 연휴에 뭐라도 한건 한 느낌으로
소소한 즐거움이 되었다.

새로 익힌 언어로 미니프로젝트지만 소소하게 뭐라도 만들어가며 재미를 느끼는게 얼마만인지...
웹 개발자를 꿈꾸며 이것저것 열심히 했던 그 때가 떠오르며 기왕 배운 Vue, Node JS 를 좀 더 잘하고 싶다는 생각도 들었다.

다 만들고 나니 너무 기본 기능만 만든 것 같아서 입상은 어려울 것 같지만.. (치킨 정도.. 노렸던건데 아쉽...)
이번 기회로 더 열심히 해보고 싶은 마음이 생겼으니 그것만으로도 큰 수확이 아닐까 싶다.... (라고 아름답게 마무리해본다..)

여튼 오랜만에 코딩을 하면서 가볍게 즐겼던 시간이라 분명 꽤나 의미있는 시간이었다 :)