[TIL] JS 숫자 야구 게임 with 서버

✍ Today I Learned

• 브라우저에서만 저장되던 숫자 야구 게임을 fetch 함수로 비동기 서버 통신을 이용해 데이터베이스에 저장해보았다.
• 이전에는 Map 객체를 이용하여 유저의 데이터를 저장하였는데 접근성을 생각하며 Array + Object 조합으로 변경하였다.
• 서버에 전달할 유저의 객체 데이터는 다음과 같이 가공하였다.

userObj = {
    name: 닉네임,
    description: 등급,
    price: 기록,
    category_id: 시도횟수,
    created: 게임종료시간
};

• 닉네임은 게임 시작 전 사용자에게 입력받는다.
• 등급은 시도 횟수를 기준으로 1회 - S등급, 2~3회 - A등급, 4~5회 - B등급, 6~7회 C등급, 이후는 D등급으로 나누었다.
• 기록을 받는 price의 타입이 int이고, 출력은 00 : 00 형태로 되어야 하기 때문에 padStart(length, newChar) 메서드와 slice(startIndex, endIndex) 메서드를 이용하여 출력하였다.
• 랭킹은 기록 순으로 출력되도록 하였다. userArr.sort((a, b) => a.price - b.price);
• 게임의 실행 순서를 고려하여 전역 변수와 먼저 선언되어야 하는 함수를 앞쪽으로 배치하고, 이벤트 리스너를 뒤쪽으로 배치했다.
• 사용자가 데이터를 입력하는 닉네임 부분과 숫자 입력 부분에 글자 수 제한, 중복 데이터 검사 등 유효성 검사를 진행하였다.
• 한 게임이 완료된 후 랭킹 보기와 다시 하기 버튼을 제외한 모든 버튼을 비활성화하였다.
• 로고 부분을 눌렀을 때 리로딩되도록 하였다.
• 전체적인 css와 색 조합, 폰트 등을 조정하였다.
• 게임 진행 페이지에서 유저가 한 게임을 완료했을 때 create와 read를 동시에 진행하여 랭킹을 출력하였다.
• admin 관리자 페이지를 따로 제작하여 delete를 구현하였다.
• 모든 기능이 구현은 되었으나 이 코드가 어떤 함수에 있어야 더 효율적인지에 대한 함수의 기능적 분리 부분에서 고민이 많았다.
• 계속해서 리팩토링 하면서 더 깔끔하고, 효율적인 코드가 무엇인지 생각해보자!