-
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 16일차 - 과제 제출스나이퍼 팩토리 2023. 6. 20. 23:39
거진 구글 확장프로그램 모멘텀의 클론 코딩 느낌이다.
뭔가 어려운건 없었는데 손에 안익는다는 게 정답이겠다.
뭐랄까 뭔가 뚝딱 뚝딱안된다. 짜증.......
이따가 고칠게 많다.
결과물 제출
https://github.com/chasura416/html/tree/master/ToDoList
구글 크롬 확장 프로그램 momentum 클론코딩이다.
생각보다 까다롭다.
우선적으로 구현해야할 기능은 3가지다.
첫번째 기능은 메인 중앙에 실시간 시계이다.
이건 수업 실습시간에 했던 걸 응용해서 바로 적용하면 된다.
new Date() 함수를 사용하여 구현하면 된다.
// 실시간 시계 구현 코드 const GetTime = () => { const time = new Date(); const hour = time.getHours(); const minutes = time.getMinutes(); const seconds = time.getSeconds(); clock.innerHTML = hour + ":" + minutes + ":" + seconds; clock.innerHTML = // 삼항연산자를 사용하여 각 시간 숫자앞에 10보다 미만의 숫자를 표현할 때 0을 붙여준다. `${hour < 10 ? `0${hour}`:hour}: ${minutes < 10 ? `0${minutes}`:minutes}: ${seconds < 10 ? `0${seconds}`:seconds}` }
다만 최대 이슈는 각각 시간의 아라비아 숫자마다 width값이 달라서 시계가 덜컹거리며 계속 움직이는 이슈가 있다.
동영상이 너무 크게 들어가서 당황스럽긴한데...... 조절하는 방법을 모르겠으니까 제낀다..
여튼 위와 같이 시계가 춤을 춘다.
font-variant-numeric: tabular-nums;
위 코드를 넣어주면 각각의 숫자마다 고유영역이 생겨서 저 현상이 없어진다고 하는 데...
내 화면에선 여전히 시계가 춤을 춰서 맥을 사용해서 그런가 의심을 좀 해봤다.
윈도우에선 잘보인다니깐....
여튼 그나마 취한 최선의 방법은 text-align값을 left로 줘서 붙여버리니까 움직임이 최소한으로 줄었다.
부모자식이 꼬여서 그런건지 좀 더 살펴보고 개선해나가야겠다.
두번째 기능은 To Do List.
이 역시 실습시간때 했던 것을 토대로 작성하면 쉽게 가능했으나
일단 패스한다. (혼자 해보려다가 실패함)
남들 다 쉽게하는 데 나만 어렵게 한다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 공부하자....
세번째 기능은 배경화면 새로고침 시 랜덤으로 바꾸기.
이것도 고치는 중인데....
내 코드는 맞는거같은 데 안 돌아간다.
음.........모르겠다 그냥 하자
하다보면 되겠지.
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'스나이퍼 팩토리' 카테고리의 다른 글
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 15일차 - html, css, js 복습 (0) 2023.06.24 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 8일차 (0) 2023.06.21 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 9일차 - 과제 제출 (0) 2023.06.13 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 5일차 - 서비스기획3 후기 (0) 2023.06.11 [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 3일차 - 서비스기획2 강의 후기 (0) 2023.06.07