일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 프로젝트
- expo
- 바닐라 자바스크립트
- react
- 클론코딩
- vanilla js
- 마무리
- react-hook
- github
- scflix
- TiMER
- Clone
- 자바스크립트
- Nicolas
- CSS
- Nomad
- 계획
- react-native
- 느낀 점
- HTML
- coding
- 코코아톡
- 오류
- Netflix
- Vanilla
- Nomad coder
- javascript
- Hook
- Firebase
- Project
- Today
- Total
목록타이머 (2)
꾸매코딩
최종 결과 타이머의 시작, 정지, 리셋 기능을 만들었고 정상 작동 중이다. 현재 상황 어제 React Hook 사용이 익숙하지 않다는 것을 뼈저리게 느끼고 Hook 공식 문서를 읽으며 이해하고자 노력했다. 공식문서를 읽는 횟수가 늘어날수록 점점 이해하는 것이 느껴지기 시작했고 읽기 전보다는 조금 더 성장했다고 느껴진다. 지금까지 타이머와 타이머의 시작 버튼을 눌렀을 때 시작되는 것까지 만들었기 때문에 오늘 정지와 리셋 버튼을 만들려고 시도해보았다. 추가적으로 시작 버튼이 중복으로 눌릴 경우 setInterval이 반복해서 작동하는 오류를 수정하려 했다. 설명 updateTimer 함수가 화면에 보이는 타이머의 시간을 변경하는 함수이다. 블로그를 참고하여 시작, 정지, 리셋 기능이 가능한 1초에 1씩 증가..
결과 스타일 변경 초기화 기능을 추가 Font Awesome 아이콘은 fontawesome 위 사이트를 통해 받아왔다. 코드 [ timer.html ] 00:00:00 [ style.css ] 간단한 배치와, 크기만 설정해 주었다. .timer-box { display: flex; flex-direction: column; align-items: center; margin-top: 125px; } .timer { font-size: 60px; margin-bottom: 30px; transition: all 1s; } .timer-form__Btn { display: flex; flex-direction: row; justify-content: center; text-align: center; paddi..