프론트 개발의 기본이 되는 HTML, CSS, 자바스크립트를 활용한 투두리스트 프로젝트입니다.

자바스크립트 TodoList

• 들어가며

  • 프로젝트 소개

  • 프로젝트 기능

  • 사용기술

  • 실행화면

• 후기

이 프로젝트는 프론트 개발의 기본이 되는 HTML, CSS, 자바스크립트를 활용한 투두리스트 프로젝트로

자바스크립트를 활용한 기본적인 CRUD 구현과 DOM 조작법을 익히기 위해 시작했습니다.

프로젝트의 기능은 다음과 같습니다.

• Title과 Content 입력을 통한 할 일과 세부사항 저장 (CREATE)

• 할 일과 세부사항은 브라우저의 LocalStorage 에 저장됩니다.

• 페이지에 접속했을때 LocalStorage 에 저장된 할 일이 있다면 저장된 내용을 불러와 보여줍니다.

• Title 또는 Content 를 입력하지 않고 Plus To DO를 클릭하면 저장할 수 없습니다. (Validation Check)

• 할 일을 등록하면 제목(Title), 세부사항(Content), 등록날짜(Date of register) 3가지 항목이 등록되고 표시됨 (READ)

• 등록된 할 일을 더블클릭 할 경우, 해당 할 일을 수정할 수 있는 Modal 창이 뜨면서 수정 가능 (UPDATE)

• 수정을 할 경우 Date of register 또한 수정한 시점으로 변경되어 저장됩니다. (UPDATE)

• 수정을 할 경우에도 Title 또는 Content 를 입력하지 않으면 수정할 수 없습니다. (Validation Check)

• 할 일은 총 10개까지 저장할 수 있으며, 각각의 할 일은 휴지통 아이콘을 클릭해서 삭제 가능 (DELETE)

• 할 일이 10개가 등록되어 있을 경우, 새로운 할 일을 등록하게 되면 추가할 수 없다는 메세지 출력 (Validation Check)

• 등록된 할 일은 휴지통 아이콘을 클릭하는 방법 외에 드래그를 통해 삭제할 수 있습니다. (DELETE)

• Clear 버튼을 통해 등록된 할 일을 모두 삭제할 수 있습니다. (DELETE)

• 프론트엔드

  • HTML

  • CSS

  • Javascript

• 개발도구

  • Visual Studio Code

이전에도 자바스크립트를 통해 간단한 투두리스트를 만드는 프로젝트는 진행한적이 있습니다.

하지만 이처럼 복잡한 요구사항을 분석하고 프로그램을 설계한 경험은 처음이었습니다.

리액트와 동일한 방식으로 데이터가 바뀔때마다 화면을 새로 그려주는 방법을 바탕으로 구현을 하다보니

어렵지 않게 완성할 수 있었습니다.