-
[타자치자 #1] 타자치자(1.0.1) - 한글타자연습Project 2021. 3. 5. 15:27
프로젝트
1. 타자치자(1.0.1) - 한글타자연습
2. 리팩토링(Redux)
3. 리팩토링(TypeScript)
4. 타자치자(1.0.2) - 기능 추가
5. 타자치자(1.0.3) - 모바일
6. 타자치자(1.0.4) - 모바일 장치에서 타수 결과가 Infinity
7. 리팩토링(redux, styled-components)타자치자 놀러가기
Intro
개인 프로젝트
팀으로 2주, 4주 프로젝트를 진행한 적은 있었지만 개인은 이번이 처음이었다. 2주 프로젝트에서는 냉장고 관리, 4주 프로젝트에서는 잃어버린 반려동물을 찾는데 도움을 주는 사이트를 만들었다. 팀 프로젝트를 진행하면서 만든 결과물들은 만족스러웠지만 개인적으로 꼭 만들어보고 싶은 것이 있었기에 개인 프로젝트를 시작하게 되었다.
컴퓨터를 처음 만져봤을 때가 떠오른다. 부팅 시 들리던 비프음과 본체에서 들리던 소음, 그리고 기본적으로 컴퓨터에 설치되어있던 타자연습 프로그램이 생각난다. 독수리 타법으로 더 좋은 기록 세워보겠다고 몇 번이나 계속 계속 키보드를 쳐댔었다.
그때의 기억이 아직까지 남아있어 개발을 배우고 꼭 만들어보고 싶었던 것이 바로 타자연습 사이트를 만드는 것이었고 이번에 만들어보게 되었다.
타자치자
타자치자는 한글타자를 측정하여 기록을 등록하고 순위를 확인해볼 수 있다. 한글의 자음과 모음을 분리하여 입력된 것과 비교하여 정확도를 계산한다.
1) 메인
- 중앙 Insert coin을 클릭하면 타자 측정하는 페이지로 이동
- 하단 전원 버튼을 클릭하면 로그인 페이지로 이동
2) 로그인/회원가입
로그인
회원가입
3) 타자 측정
- 키보드 엔터 키나 전원 버튼 클릭하면 문제 출력
- 문제와 입력 값 일치하면 노랑, 다르면 빨강
- 주어진 문제 모두 입력되면 순위 출력
- 트로피 눌러서 순위 상세 페이지로 이동
4) 순위
- 문제 별로 기록 확인
- 1등 기록과 로그인한 유저 기록 비교 가능
Stack
이번 프로젝트는 처음에는 기술 스택을 조금만 사용하여 1차 완성을 하고 리팩토링을 거쳐 여러 스택들을 추가해볼 예정이다. Redux를 사용 안 하고 상태 관리를 하려다 보니 코드가 복잡해졌고 처음에 생각했던 것보다 오래 걸려서 이 부분은 꼭 리팩토링 해보려고 한다.
Review
팀 프로젝트를 작업했을 때와는 다르게 프로젝트에만 시간을 온전히 쏟아부을 상황이 아녔어서 예상했던 것보다 시간이 오래 걸렸다. 그래도 생각했던 기능들은 어느 정도 구현이 된 것 같다. 글을 올리면서 추가하고 싶은 기능도 몇 개 떠올랐는데 리팩토링을 거치면서 꼭 추가하려고 한다. 로직이나 코드가 완벽하지 않고 깔끔하지도 않지만 프로젝트 과정을 통해 배우고 성장한 것이 많아 개인적으로는 매우 만족스럽다.
'Project' 카테고리의 다른 글
[타자치자 #5] 타자치자(1.0.3) - 모바일 (0) 2021.03.31 [타자치자 #4] 타자치자(1.0.2) - 기능 추가 (0) 2021.03.30 [타자치자 #2] 리팩토링(Redux) (0) 2021.03.10 [Finders #1] 잃어버린 반려동물을 찾을 때는 Finders (0) 2021.02.02 [Waf #1] 냉장고 관리 및 레시피가 필요할땐, waf (0) 2020.12.30