ReactJS ToDoList

ReactJS-ToDoList

소개

이 프로젝트는 React JS 라이브러리와 순수 CSS를 대체하는 스타일 구성 요소를 사용하여 간단한 To-Do List 웹 애플리케이션을 위한 프런트 엔드를 구현합니다.
여기에는 로그인 페이지와 앱의 일반 UI가 포함됩니다.
이 프로젝트는 단지 Front-End 연구를 목표로 하기 때문에 로그인 인증 로직과 각 사용자에 대한 작업 데이터베이스는 구현되지 않습니다.

데모

데모.mp4

영감

로그인 페이지는 Jordan Hughes의 디자인에서 영감을 받았습니다. 홈 페이지는 Mik Skuza의 디자인에서 영감을 받았습니다.

특징

• 메인 애플리케이션으로 리디렉션되는 로그인 버튼을 포함한 로그인 페이지;
• 탐색 사이드바와 할 일 목록 영역이 있는 애플리케이션 UI;
• 새 작업, 설정 이름 및 카테고리 속성을 추가합니다.
• 작업 확인을 위한 모달을 사용하여 작업을 삭제합니다.
• 체크박스를 통해 작업이 완료되었는지 확인하세요.
• "완료", "완료되지 않음" 또는 "모두"별로 할 일 목록에 표시되는 작업을 필터링합니다.
• 사이드바에서 선택하여 카테고리별로 할 일 목록에 표시되는 작업을 필터링합니다.
• 권한 부여: 사용자는 로그인하기 전에는 홈 페이지에 접근할 수 없으며, 로그인한 후에는 로그인 페이지에도 접근할 수 없습니다.

관찰: 현재 "작업 편집" 및 범주 추가 또는 제거 기능은 구현되지 않습니다. 이는 개인 학습에 그다지 기여하지 않고 시간이 많이 걸릴 것이라고 생각했기 때문입니다. 나중에 이것을 구현할 수도 있습니다.

용법

이 프로젝트를 직접 해보고 싶다면:

1. https://nodejs.org/en/을 통해 컴퓨터에 Node를 설치하세요.
2. 터미널 명령( sudo npm install -g yarn 을 통해 컴퓨터에 Yarn을 설치합니다.
3. https://git-scm.com/downloads를 통해 머신에 Git을 설치하세요.
4. 이 저장소를 머신에 복제하세요. (이 작업을 수행하는 방법에 대한 자세한 내용은 여기에서)
5. 프로젝트를 다운로드한 폴더 내 터미널에서 yarn install 실행하여 사용된 모든 종속 항목을 설치합니다.
6. 브라우저에서 프로젝트를 실행하려면 yarn start 실행하세요.