JELEE Mini Project - To-do List made with React

리액트를 사용하여 To-do List를 만들고 GitHub Pages로 배포하는 개인 미니 프로젝트.

⭐ JELEE Notion - Mini Project로 이동하면 해당 미니 프로젝트 또는 다른 프로젝트를 보실 수 있습니다. 또한 자세한 내용을 보실 수 있습니다. ⭐

💬 프로젝트 소개

학원 수업 시간에 배운 회원 목록 추가 예제를 활용하여 회원 목록 추가, 삭제 기능을 구현하였고 개별로 To-do List에서 필요한 완료 기능을 추가하여 To-do List를 만들었습니다.

• 추가한 목록은 새로고침 또는 웹브라우저를 종료 후 실행시키면 사라집니다.
• 추가한 목록의 내용을 수정할 수 있습니다.
• 추가한 목록의 체크박스에 체크를 하면 완료된 목록 영역으로 이동합니다.
• 완료된 목록의 체크박스에 체크를 해제하면 추가한 목록 영역으로 이동합니다.
• 추가한 목록, 완료된 목록은 삭제가 가능합니다.

Caution

경고: 이 미니 프로젝트는 상업적인 용도가 아닙니다.

🚶 프로젝트 목적

• React를 이해하기 위하여 React를 사용하여 간단한 To-do List를 제작하였습니다.
• 개인이 가볍게 사용할 목적으로 제작하였습니다.

📆 개발 기간

2024-08-05 ~ 2024-08-21

• 08/05 구조 설계 및 개발 시작
• 08/07 개발 완료
• 08/12~08/20 수정 작업

⭐ 프로그래머

• JELEE

💻 개발 환경

• Visual Studio Code
• GitHub
• GitHub Pages

📋 기술 스택

• HTML5
• CSS3
• JavaScript
• React

UX/UI 완성

데스크탑 화면(너비 1023px 이상 화면) ▼

태블릿, 모바일 화면(너비 1023px 미만 화면) ▼

⚙️ 주요 기능

• 할 일을 입력 후 + 버튼을 클릭하면 할 일이 추가됩니다.
• 추가된 할 일을 체크 클릭하면 할 일 완료 상태로 바뀝니다.
• 추가된 할 일의 내용을 수정할 수 있습니다.
• 추가된 할 일, 또는 완료 상태의 할 일을 - 버튼을 클릭하여 삭제할 수 있습니다.
• 반응형으로 제작하여 브라우저 너비 마다 다르게 보입니다. (데스크탑과 태블릿+모바일 기준으로 나누었습니다.)

👀 개발 참고 자료

• To do List 입력 후 추가, 삭제하는 기능 (학원 수업 때 배운 내용 참고)
• 웹브라우저 새로고침 또는 종료 후 실행했을 경우 localStorage의 데이터를 가져와서 화면에 출력하기 위해 참고한 자료
  • StackOverflow
  • MDN-Array.prototype.includes()
  • MDN-String.prototype.includes()
  • MDN-String.prototype.slice()
  • MDN-String.prototype.toString()
• input checkbox 기능
  • React input
• useCallback
  • React useCallback
• onBlur 기능
  • React FocusEvent-onBlur
  • MDN-blur event
• enter키 방지
  • React KeyboardEvent-onKeyDown
• 배열 정렬
  • MDN-Array.prototype.sort()
• textarea 줄바꿈
  • CodeSandbox
• styled-components
  • styled-components

🏷️ 저작권 및 사용권 정보

• 개인 미니 프로젝트이며 상업적이 용도가 아닙니다.