Project
-
[타자치자 #7] 리팩토링(redux, styled-components)Project 2021. 5. 8. 21:37
프로젝트 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) 타자치자 놀러가기 컴포넌트 분리 구조를 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하였다. 이전에 컴포넌트를 분리하지 않고 하나의 컴포넌트 안에서 상태 관리를 하고 UI도 보여주고 데이터 핸들링도 다 처리하다 보니 코드가 복잡하고 가독성이 상당히 떨어지고 각각의 용도가 명확하게 파악이 안 되는 부분, 컴포넌트를 재사용하는 부분에서도 어려움이 있었다. 프레젠테이셔널 컴포넌트 -..
-
[타자치자 #6] 모바일 장치에서 타수 결과가 InfinityProject 2021. 4. 6. 14:08
프로젝트 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) 타자치자 놀러가기 const resultSpeed = (tasu.length * 60) / time; 이런 식으로 타수를 계산하고 있다. 가지고 있는 PC, 아이패드에서는 타수가 제대로 계산되고 있는데, 다른 안드로이드 모바일 장치에서는 아래와 같은 결과가 나오고 있었다. 모바일 디버깅을 해보니 time을 0으로 받고 있었다. 엔터키를 제외한 다른 입력키를 입력하면 하단 부분 카운..
-
[타자치자 #5] 타자치자(1.0.3) - 모바일Project 2021. 3. 31. 18:07
프로젝트 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) 타자치자 놀러가기 1. 모바일 웹 필요성 스마트폰에서 검색하는 웹 페이지가 일반적인 모바일 웹이다. 타자치자는 키보드로 타자 측정하는 홈페이지이므로 사실 모바일 웹이 필요가 없긴 하다. 그래도 내가 가지고 있는 스마트폰으로 타자치자를 들어가 보니 영 이쁘지가 않아서 마음에 안 들었다. 그래서 모바일 웹을 위한 css를 적용해보았다. 2. viewprot 웹 페이지에서 사용자의 보이..
-
[타자치자 #4] 타자치자(1.0.2) - 기능 추가Project 2021. 3. 30. 16: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 몇몇 기능이 추가되었다. 사실은 기능 추가보다 리팩토링을 우선순위로 잡고 작업을 시작했었다. 실제로 초반만 하더라도 리덕스로 리팩토링했고 타입스크립트도 적용하려고 하였다. 그런데 점점 추가하고 싶은 기능이 생겨나고 리팩토링은 뒷전으로 밀려나고 기능 추가 위주로 작업하게 됐다.. 추가 1) 메인 - 간단하게 타자치자를 소개하는 부분 추가 - 로그인 유무에..
-
[타자치자 #2] 리팩토링(Redux)Project 2021. 3. 10. 12: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) 타자치자 놀러가기 1. 상태 관리의 필요성 리덕스를 사용하면 상태 값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리할 수 있게 된다. 사실 타자치자 프로젝트는 규모가 복잡하지 않고, 구조가 간단하여 글로벌 상태 관리가 따로 필요 없지만 편리함을 경험해보고 추후에 익숙하게 사용하기 위해 redux를 적용해 리팩토링 하였다. 먼저 상단 메뉴 버튼(햄버거)에 적용..
-
[타자치자 #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주 프로젝트에서는 잃어버린 반려동물을 찾는데 도움을 주는 사이트를 만들었다. 팀 프로젝트를 진행하면서 만든 결과물들은 만족스러웠지만 개인적으로 꼭 만들어보고 싶은 것이 있었기에 개인 프로젝트를 시작하게 되었다. 컴퓨터를 처음 ..