안녕하세요. Codinglee 입니다.
왕초보 시리즈의 마지막 과정으로 프로젝트를 진행합니다.
todo 웹 개발 프로젝트 입니다.
데이터베이스 없이 오직 HTML, CSS, JavaScript만으로 만들어보겠습니다.
프로젝트를 완성해보시면 웹 개발의 기초를 확실히 정리할 수 있습니다.
이번 포스트에서는 앞으로 진행될 todo 웹 개발 프로젝트 에 대해 설명드리겠습니다.
아래 이미지는 대표적인 todo 리스트 작성 가능한 Google Keep 입니다.
[프로젝트 개요]
이번 프로젝트에서는 todo 리스트를 작성하고 수정, 삭제할 수 있는 웹을 만들어봅니다.
todo는 할 일을 작성하고 관리할 수 있는 도구입니다.
기능은 간단해 보여도, 웹 개발의 기본 원리와 기능을 모두 담고 있습니다.
HTML, CSS, JavaScript의 기본을 프로젝트로 실습하며 배워봅시다.
[프로젝트 목표]
HTML, CSS, JavaScript를 사용해 상호작용이 가능한 웹을 만드는 것입니다.
todo 웹을 통해 왕초보 개발자분들은 초보~중급으로 레벨업할 수 있습니다.
프론트 엔드 개발의 전반적 흐름도 함께 가져가실 수 있습니다.
[Todo 웹의 주요 기능]
- 메인화면 – 입력된 순서대로 Todo 목록 보여주기
– 입력된 순서대로 Todo 목록이 나옵니다.
– 단순 텍스트만 나열하는 것이 아닌, 각 todo를 수정, 삭제 가능합니다. - Todo 입력창
– 새로 해야 할 일을 입력할 수 있는 입력창을 제공합니다.
– 입력한 Todo는 메인 화면에 실시간 추가됩니다. - 수정, 삭제 버튼
– 입력된 각 Todo 항목 옆에 수정, 삭제 버튼이 표시됩니다.
– 개별 todo를 각각 수정가능하게 합니다. - DB저장 없이 브라우저에서 데이터 관리
– 데이터를 DB에 저장하지 않습니다.
– 브라우저에서 데이터를 관리합니다. - Todo 입력 시간 기록
– 각 Todo가 입력된 시간도 함께 기록합니다. - 완료 표시
– 입력된 Todo 텍스트를 클릭하면 중간에 취소선이 생깁니다.
– 완료 표시가 된 todo는 아래로 내려가거나 화면에서 보이지 않습니다.
[프로젝트를 통해 배우는 것]
- HTML
– 페이지의 구조 잡기
– Todo 항목을 리스트로 표현하기 - CSS
– 텍스트, 버튼, 입력창 꾸미기
– 시각적 업그레이드 - JavaScript
– 데이터 입력, 수정, 삭제 실시간 반영
– 이벤트 처리 방법
[프로젝트 준비물]
- 코드 편집기 : 계속 사용하던 Visual Studio Code를 사용합니다.
- 웹 브라우저 : 결과 확인을 위한 브라우저로 Google Chrome을 사용합니다.
- HTML, CSS, JS 기초 지식 : 제 블로그에 있는 지식이면 충분합니다.
오늘은 todo 웹 개발 프로젝트 시작을 위한 기본 내용을 알려드렸습니다.
다음 포스트에서는 실제 개발 시작됩니다.
우선 HTML을 이용해 사이트 구조를 잡아볼 예정입니다.
코드를 한줄씩 설명하면서 천천히 알려드리겠습니다.
오늘은 여기까지입니다.
감사합니다. Codinglee였습니다.
2024. 11. 07. (목) 아침 삼성동 스타벅스에서 씀.
