/react_todo_list

할 일 목록 외에 시계, 날씨예보가 있는 웹 어플리케이션

Primary LanguageJavaScript

리액트 투투 리스트 어플리케이션 HitCount

screenshot



주요 기술 스택

  • JavaScript
  • React 17.0.1


구현 배경

  • JavaScript로 구현했던 프로젝트를 React에 맞춰 구현 했습니다.
  • React·js의 컴포넌트의 활용법 기초개념과 관련된 여러 라이브어리들를 경험하고
    활용하는 감각을 쌓는데 많은 도움이 많이 되었습니다.
  • 이전의 바닐라 자바스크립트로 프로그래밍했던 To-do List의 미흡했던 기능을 보안하고
    좀 더 스타일링 있게 꾸몄습니다.

구현에 힘들고 아쉬웠던 점

  • 바닐라 JS에서 구현했던 '할 일 목록의 영구저장' 을 리액트에서 구현 못한점.
  • openweathermap의 API를 무료로 사용 할 수 있다고는 하지만 응답과 요청을 조금만 많이 거쳐도
    API block으로 날씨정보를 웹에서 출력을 못하는 현상이 생긴점.
  • 웹페이지의 세로고침 없어도 요청작업이 1000번 이상 나오는 현상을 아직 이해 못한점.

기능 추가

  • 자신의 위치한 날씨 상황을 간략히 보여주는 이미지를 구현했습니다.

File-Tree


📦src

┣ 📂todolistwork

┃ ┣ 📂scssArea

┃ ┃ ┣ 📜TodoInsert.scss

┃ ┃ ┣ 📜TodoList.scss

┃ ┃ ┣ 📜TodoListItem.scss

┃ ┃ ┗ 📜TodoTemplate.scss

┃ ┣ 📜TimeClock.js

┃ ┣ 📜TodoInsert.js

┃ ┣ 📜TodoList.js

┃ ┣ 📜TodoListItem.js

┃ ┣ 📜TodoTemplate.js

┃ ┗ 📜Weather.js

┣ 📜App.css

┣ 📜App.js

┣ 📜index.css

┣ 📜index.js

┗ 📜reportWebVitals.js



DEMO

https://dragoocho.github.io/react_todo_list/