[week00] sw정글 0주차 - 팀 프로젝트

week 00 팀 프로젝트

정글을 입소하면 0주 차를 시작한다. 0주 차의 목표는 아래와 같다

정글 프로그램의 취지를 이해하고, 입학시험에서 공부한 내용을 바탕으로 압축된 팀 프로젝트를 경험합니다. 단 시간 내에 팀원들과 몰입하여 성장하는 습관을 길러봅니다.

정글의 0주 차 목표에 걸맞게 3명의 팀원과 3박 4일 동안 팀 프로젝트를 진행한다. 프로젝트 주제는 입학시험에 배웠던 내용을 바탕으로 자유 주제로 진행한다.

팀 주제 정글 워들

기획의도

사람을 처음 만날 때 인사 다음으로 물어보는 것이 이름일 것이다. 하지만 인원도 많고 자주 보는 사람이 아니면 이름을 외우기가 쉽지 않다. 그래서 워들이란 게임을 통해 팀원의 이름을 맞추면서 외우면 더 쉽게 이름을 외울 수 있지 않을까 하는 생각에서 기획하게 되었다.

화면 설명

로그인 화면

시작 화면: 간단한 게임 룰 설명과 회원가입, 로그인을 진행할 수 있다.

메인 화면

게임 화면: 왼쪽 화면에는 워들 게임이 있고 오른쪽에는 이름을 많이 맞춘 사람 순으로 랭킹이 매겨진다.

게임은 워들과 똑같은 룰로 위치과 정답이 같으면 녹색, 위치는 다르지만 정답에 포함되어 있다면 노란색, 정답에 포함되어 있지 않다면 회색으로 표시된다.

기능 설명

1. 로그인 회원가입

 

로그인과 회원가입은 bcrypt 모듈을 사용하여 비밀 번호를 암호화하였고 jwt를 사용하여 로그인을 관리한다. 로그인한 사용자만 게임 화면에 접속할 수 있게 하였다.

 

2. 명예의 전당

랭킹은 정답 순으로 순위가 메겨지며 jinja2를 사용해 데이터를 서버에서 바로 받아 렌더링하고 있다.

 

3. 게임

기본적으로 정답과 위치가 일치하면 녹색, 정답에 포함되면 노란색, 정답에 포함되어 있지 않다면 회색으로 표시된다. 그리고 사용자가 정답을 맞히게 되면 정답 모달 창이 나오게 되고 6번의 기회를 모두 사용하여 실패하면 실패 모달창이 나오게 된다.

개발하면서 어려웠던 부분

1. 게임 로직

처음에는 게임 로직을 간단하게 생각하였지만 생각보다 간단하지 않았다. 한 번의 for문으로 정답과 사용자 입력을 비교했을 때 이미 정답으로 처리된 문자가 정답에 포함되는 오류가 있었다.

그래서 각 색별로 따로 정답을 검증하고 색별 input의 index 위치를 저장하는 배열을 사용하여 마지막에 input 창에 배경색을 변경하였다.

 

2. 자음 모음 분리해서 받기

이 부분이 가장 많이 고민했지만 아쉬움이 남는 부분이었다.

input 한 칸에 자음, 모음을 하나씩만 입력해야 하는데 자음과 모음이 함께 입력되었고 아래와 같은 방법을 시도해보았다.

• 시도 1 : input의 maxlength를 1로 제한하기

제일 처음 생각한 이 방법은 input에 한 글자만 입력은 되지만 자음과 모음을 분리할 수 없었다.

영어는 a, b 각각 다 length가 1이지만 한글은 ㄱ, 가, 각 등 자음과 모음이 합쳐진 단어 모두가 length가 1이란 문제가 있었다.

• 시도 2 : 키보드 이벤트로 분리하기

키보드 이벤트 중 keyup이벤트가 발생하면 다음 input으로 focus를 이동시키는 방법을 시도했다. 이 방법은 사용자가 키보드를 동시 입력하지 않으면 자음과 모음이 잘 분리되었지만 키를 누르고 있는 상태에서 다른 키를 입력하는 부분에서는 처리할 수 없었다.

예시로 ‘ㄱ’ 입력 중 동시에 ‘ㅏ’를 입력하면 ‘가’가 입력됨 ‘ㄱ’

• 시도 3: 자음 모음 함께 들어온 글자 강제로 분리 후 자음만 입력

한글의 입력 방식이 자음을 입력받고 커서가 다음으로 넘어가지 않고 입력을 대기하고 있다. 자음 하나를 치면 글자 아래에 밑줄이 나타나는데 이것이 입력을 대기하고 있다는 뜻이다.

그렇기에 완전하게 분리할 수 없어서 자음과 모음이 동시에 들어오면 모음을 없애고 자음만 input의 value에 넣어주었다.

이 방법으로 input 창에 더 이상 ‘가’와 같이 자음과 모음이 합쳐진 글자가 입력되지는 않지만 시도 2에서 나타나 동시에 입력받는 상황에서 사용자의 입력이 손실되는 경우가 발생하게 된다.

 

3. focus() 이동

이 부분은 게임 진행에 편의성을 올리기 위해 필요했다.

focus가 바뀌는 경우가 3가지 있었다.

1. 글자 입력 후 다음 input으로 이동
2. 글자를 지우고 이전 input으로 이동
3. 한 줄 정답 검증 후 다음 줄의 첫 번째 input으로 이동

이 부분을 개발하면서 JS로 focus를 이동해야 하는 input을 찾기 위해 특정 태그를 찾고 이벤트를 주고 하는 방법에 대해 익힐 수 있었다.

아쉬운 점

먼저 해결하지 못하고 약간의 꼼수(?)로 해결한 부분이 있어서 많이 아쉬움이 남는다. 그리고 github로 협업하는 방식을 잘 알지 못하여 main branch에 모든 팀원이 push를 하였다. 그러다 보니 충돌이 자주 발생하여 충돌은 해결하는데 시간을 사용했다. github로 효율적으로 협업하는 방법에 대해 배워야겠다는 생각이 든다.