hanana1253 / typinggame

About Hangyul... 👋

• 깔끔한 코드와 성능 좋은 서비스를 만들고 싶은 프론트엔드 개발자 😄
• 풀스택 부트캠프 6개월, 프론트엔드 부트캠프 조교 6개월 공부 ⚡
• 개발에 진심인 그린랩스에서 매일 좌절과 희열을 느끼며 폭풍성장 중 🌱
• JavaScript, TypeScript, Python, Django, React 등을 공부했고
• 지금은 Rescript, Relay, GraphQL, Next.js를 사용하고 있어요

• 공부하며 기록한 블로그와 이력서 구경해주세요.

typinggame's Issues

game 초기 구현

• game.html
• game.scss
• game.js

[Plan] Popup modal

Rank page HTML/CSS 및 기본 JS 구현

#1 의 comment에 있는 Ranks Page에서의 변경사항

• table이 아닌 ol 태그로 마크업
• 플레이어가 순위 밖에 있는 경우 5위 아니더라도 순위판 아래에 생성해 줄 것

[Planning] All

• #2
• #3
• #4
• #5

Please write details of those parts : features, functions, data structure

feat: 페이지 5개씩 끊어서 목록 번호 렌더링

• currentPage를 기준으로 5개씩 끊어서 목록 번호를 렌더링해보겠습니다.

[Plan] Ranking

모바일에서도 플레이할 수 있게 구현해보기

• 미디어쿼리로 잡아서 레이아웃 자체를 다르게 해줘야 할 것
• css만 바뀌면 되는 문제이긴 한데 모바일에서는 엔터키보다는 탭이 더 편하므로 게임화면에서 버튼을 제공해야 할 수도

[Plan] Typing game

[Plan] Entry

기능 상세

• 닉네임 입력
• 중복체크
• 중복시 에러 메세지
• 시작하기 버튼 (닉네임 조건에 맞게 입력시 활성화)
• 랭크 바로가기 버튼

필요 함수

• ranks 유무확인 (혹은 길이 반환 getRanksLength)
• ranks 스토리지에 생성 (setRanks)
• ranks 의 name 중복확인 (isNameExist)
• ranks 에 새로운 기록 추가 (name 값 입력, record 초기값) (setRank)
• 닉네임 정규표현식 (isValidName)

countdown 구현

게임 시작 시 카운트다운 구현

확장기능 나중에 구현해보아요

• 현재 로컬스토리지에 저장하는 기록을 서버로 옮겨 여러 컴퓨터에서 같은 기록정보를 공유하게 할 수 있을 것
• 그렇다면 단순히 유저네임만 받는 게 아니라 유저 정보도 서버에 두고 로그인 형태로 확장 가능
  • 자신의 기록을 보는 페이지 추가
  • 자신의 현재 게임과 기존 기록들을 랭킹 페이지에서 차별화: 지금처럼 currentUser.username으로 비교하지 말고 isCurrent 등으로 관리

feat: currentUser정보가 있는 경우 rank 페이지에서 띄워주기

다시 해보겠습니다.

구조 관련 이슈

하나의 전역 상태를 공유하기 위해 다양한 방법들을 고려해 보았다.

1. 여러개의 html과 로컬 스토리지

   • 불필요하게 큰 데이터를 로컬스토리지에 저장함으로서 성능, 보안상 문제가 있다.

2. SPA 방식

Entry page html, css 구현

• html
• scss

Entry part js

• prepare for merge
• implements basic functions
• need to be prepared about local storage

Popup js 구현

• popup render function 구현