[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) 16일차 - 과제 제출

 

거진 구글 확장프로그램 모멘텀의 클론 코딩 느낌이다.

 

뭔가 어려운건 없었는데 손에 안익는다는 게 정답이겠다.

 

뭐랄까 뭔가 뚝딱 뚝딱안된다. 짜증.......

 

이따가 고칠게 많다.

---

결과물 제출

https://github.com/chasura416/html/tree/master/ToDoList

GitHub - chasura416/html

 

구글 크롬 확장 프로그램 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주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.