반응형 Javascript 프로젝트/02_To Do List6 [To Do List] 다음 단계 추가 작업테스트 작성할 일 추가, 삭제, 완료 상태 토글 등의 기능을 테스트하기 위한 단위 테스트를 작성합니다.Jest와 같은 테스트 프레임워크를 사용하여 테스트를 구현합니다.추가 기능 구현할 일 수정 기능 추가: 기존 할 일을 수정할 수 있는 기능을 추가합니다.할 일 필터링 기능 추가: 완료된 할 일, 미완료된 할 일 등을 필터링하여 볼 수 있는 기능을 추가합니다.데드라인 설정 기능 추가: 할 일에 데드라인을 설정하고, 데드라인이 가까워지면 알림을 주는 기능을 추가합니다.반응형 디자인 적용모바일 및 다양한 화면 크기에서도 잘 보이도록 반응형 디자인을 적용합니다.미디어 쿼리를 사용하여 CSS를 조정합니다.사용자 인증 추가Firebase Authentication 등을 사용하여 사용자 인증 기능을 추가합니.. 2024. 6. 16. [To Do List] 5단계: 단계별 진행 및 코드 주석과 Git 커밋 메시지 5. 단계별 진행 및 코드 주석과 Git 커밋 메시지단계 1: 프로젝트 설정 및 초기 파일 생성프로젝트 디렉토리를 생성하고, 필요한 파일들을 만듭니다.index.html, css/style.css, js/app.js, js/storage.js, js/ui.js 파일을 생성합니다.mkdir simple-to-do-listcd simple-to-do-listtouch index.html css/style.css js/app.js js/storage.js js/ui.jsGit 커밋 메시지feat: 초기 프로젝트 설정 및 파일 생성프로젝트 디렉토리 생성.index.html, css/style.css, js/app.js, js/storage.js, js/ui.js 파일 생성.단계 2: HTML 구조 작성index.. 2024. 6. 16. [To Do List] 4단계: 확장 가능한 프로젝트 구조 4. 확장 가능한 프로젝트 구조프로젝트 구조를 확장 가능하게 설계하면 나중에 기능을 추가하거나 유지보수하기가 쉬워집니다. 다음은 Simple To-Do List 프로젝트의 확장 가능한 디렉토리 및 파일 구조 예시입니다:simple-to-do-list/│├── index.html├── css/│ └── style.css├── js/│ ├── app.js│ ├── storage.js│ └── ui.js└── assets/ └── images/ └── logo.png디렉토리 및 파일 설명index.html: 프로젝트의 메인 HTML 파일입니다. 전체 구조를 정의하고, 필요한 CSS와 JavaScript 파일을 포함합니다.css/style.css: 모든 스타일 관련 정의가 들어있.. 2024. 6. 16. [To Do List] 3단계: 규칙 설정 3. 규칙 설정: 코딩컨벤션, Git 커밋 메시지 양식코딩 컨벤션파일 및 디렉토리 구조파일명은 소문자와 하이픈(-)을 사용합니다. 예: index.html, style.css, script.js디렉토리명은 소문자와 하이픈(-)을 사용합니다.HTML들여쓰기는 2칸을 사용합니다.속성명은 소문자를 사용하며, 값은 큰따옴표("")로 감쌉니다.자주 사용되는 HTML 구조를 주석으로 표시합니다.CSS들여쓰기는 2칸을 사용합니다.클래스명은 소문자와 하이픈(-)을 사용합니다. 예: .todo-item, .completedCSS 속성은 알파벳 순으로 정렬합니다.JavaScript들여쓰기는 2칸을 사용합니다.변수명은 카멜케이스(camelCase)를 사용합니다. 예: todoItem, completedTasks함수명은 동사.. 2024. 6. 16. [To Do List] 2단계: README.md 작성 To Do List프로젝트 설명To Do List는 사용자가 해야 할 일들을 추가, 수정, 삭제할 수 있는 간단한 웹 애플리케이션입니다. 이 프로젝트는 JavaScript의 DOM 조작과 로컬 스토리지를 활용한 데이터 저장 방법을 사용할 것입니다. 또한, HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 제공하며, JavaScript를 통해 사용자 인터랙션을 처리합니다.이 애플리케이션의 주요 기능은 다음과 같습니다:사용자가 새로운 할 일을 입력하고 목록에 추가할 수 있습니다.추가된 할 일을 클릭하여 완료 상태로 표시할 수 있습니다.할 일을 수정하거나 삭제할 수 있습니다.로컬 스토리지를 사용하여 할 일 목록을 브라우저에 저장하고, 페이지를 새로고침해도 데이터가 유지됩니다.주요 기능할 일 추가: 사용.. 2024. 6. 16. [To Do List] 1단계: 프로젝트명과 설명 1. 프로젝트명과 설명프로젝트명To Do List설명To-Do List는 사용자가 해야 할 일들을 추가, 수정, 삭제할 수 있는 간단한 웹 애플리케이션입니다. 이 프로젝트는 JavaScript의 DOM 조작과 로컬 스토리지를 활용한 데이터 저장 방법을 이용할 것입니다.. 또한, HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 제공하며, JavaScript를 통해 사용자 인터랙션을 처리합니다.이 애플리케이션의 주요 기능은 다음과 같습니다:사용자가 새로운 할 일을 입력하고 목록에 추가할 수 있습니다.추가된 할 일을 클릭하여 완료 상태로 표시할 수 있습니다.할 일을 수정하거나 삭제할 수 있습니다.로컬 스토리지를 사용하여 할 일 목록을 브라우저에 저장하고, 페이지를 새로고침해도 데이터가 유지됩니다. 2024. 6. 16. 이전 1 다음 반응형