• 일시 : 23.06.22 목요일

🌱과제 리뷰

이전에 구현한 시계, 로그인, 랜덤배경에 이어서 추가로 Todolist와 날씨정보 받아오기를 구현하였다. Todolist에서는 input으로 받은 value를 화면에 표시해주는 것은 어렵지 않았지만, 그 정보를 localStorage에 저장하고 각 목록마다 id를 주어 삭제 시 해당 아이디를 찾아 삭제해야하는 챌린지가 있었다. 하지만 이전에도 말했듯이 이미 같은 내용을 노마드코더 강의를 통해 공부한 적이 있기 때문에 아는 코드를 다시 한 번 복습했다.
날씨정보 받아오는 것은 Openweather의 weather api를 통해 받아왔다.

추가로 구현한 내용은

• 목록이 넘칠 경우(overflow) 스크롤바 없는 스크롤 css
• 시계 시/분/초 각 블록 처리하여 글씨 크기에 따른 간섭 안받도록 함
• 오전/오후 표시
• display: hidden을 통한 정보 제거 및 제공

이후 추가할 스타일/기능은

• 로그아웃 : 로컬스토리지에 직접 접근하지 않고 버튼을 만들어 로그아웃 가능하게 만들기
• 애니메이션 (transition) : 로그인 이후 나타나는 todolist목록 창 변환 자연스럽게 하기
• 목록 전체 삭제 : 목록 일괄 삭제하는 버튼 만들기
• todolist hover : 목록에 마우스를 올리면 밑줄(형광펜)을 그어 가시성 높이기
• 날씨 새로고침
• Day/Night 토글

🌱과제 내용

구현 페이지

첫 화면

• 시계
  • 초 단위로 시계 작동 / 오전.오후 구현
  • 통으로 시계를 나타내면 숫자별 폰트 크기의 변화로 인한 움직임 => 시/분/초로 쪼개 block처리
• 로그인
  • 이름을 입력할 수 있는 입력 폼(form)
• 날씨
  • 좌표를 받아 날씨 정보 이용

로그인 후 화면

• 로그인 이름 입력 화면 사라짐
• todo를 적을 수 있는 form 나타남

Todo 입력시

Todo 입력 후 새로고침

• ToDoList
  • LocalStorage에 저장되어 새로고침 이후에도 값을 유지함
• 배경화면
  • 새로고침 시 랜덤하게 바뀜

Todo 목록 삭제

Todo 목록 삭제 후 새로고침

• ToDoList
  • LocalStorage에서도 정상적으로 삭제
• 배경화면
  • 새로고침 시 랜덤하게 바뀜

Todo 목록 전부 삭제

• ToDoList
  • 일정이 없다는 표시 나타냄

gif 화면 보기

(처음 다뤄보는 프로그램이라 속도조절이 제대로 안됐다^^;)

깃허브 주소

코드보기

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.