반응형
5. 단계별 진행 및 코드 주석과 Git 커밋 메시지
단계 1: 프로젝트 설정 및 초기 파일 생성
- 프로젝트 디렉토리를 생성하고, 필요한 파일들을 만듭니다.
index.html,css/style.css,js/app.js,js/storage.js,js/ui.js파일을 생성합니다.
mkdir simple-to-do-list
cd simple-to-do-list
touch 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.html파일에 기본 HTML 구조를 작성합니다.- 할 일 입력 필드, 추가 버튼, 할 일 목록을 포함한 간단한 인터페이스를 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple To-Do List</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<div class="input-container">
<input type="text" id="todo-input" placeholder="Add a new task...">
<button id="add-btn">Add</button>
</div>
<ul id="todo-list"></ul>
</div>
<script src="js/storage.js"></script>
<script src="js/ui.js"></script>
<script src="js/app.js"></script>
</body>
</html>Git 커밋 메시지
feat: 기본 HTML 구조 작성
할 일 입력 필드, 추가 버튼, 할 일 목록을 포함한 간단한 인터페이스 작성.단계 3: CSS 스타일 작성
css/style.css파일에 스타일을 작성하여 인터페이스를 꾸밉니다.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
}
.input-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
#todo-input {
flex: 1;
padding: 10px;
}
#add-btn {
padding: 10px;
margin-left: 10px;
}
#todo-list {
list-style: none;
padding: 0;
}
.todo-item {
padding: 10px;
background: #eee;
margin-bottom: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo-item.completed {
text-decoration: line-through;
opacity: 0.6;
}Git 커밋 메시지
style: 기본 CSS 스타일 작성
프로젝트의 전반적인 스타일링을 위한 CSS 작성.단계 4: JavaScript 기능 구현 - UI 모듈
js/ui.js파일에 UI 관련 기능을 구현합니다.
/**
* 할 일 항목 엘리먼트를 생성하는 함수
* @param {string} todoText - 할 일 텍스트
* @param {boolean} [completed=false] - 완료 상태 여부
* @returns {HTMLElement} - 할 일 항목 엘리먼트
*/
function createTodoItemElement(todoText, completed = false) {
const todoItem = document.createElement('li');
todoItem.textContent = todoText;
todoItem.classList.add('todo-item');
if (completed) {
todoItem.classList.add('completed');
}
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.classList.add('delete-btn');
todoItem.appendChild(deleteBtn);
return todoItem;
}Git 커밋 메시지
feat: UI 모듈 구현
할 일 항목 엘리먼트를 생성하는 함수 작성.단계 5: JavaScript 기능 구현 - 로컬 스토리지 모듈
js/storage.js파일에 로컬 스토리지와의 상호작용을 처리하는 기능을 구현합니다.
/**
* 로컬 스토리지에서 할 일 목록을 불러오는 함수
*/
function loadTodoItems() {
const todoItems = JSON.parse(localStorage.getItem('todoItems')) || [];
todoItems.forEach(item => {
const todoItem = createTodoItemElement(item.text, item.completed);
document.getElementById('todo-list').appendChild(todoItem);
});
}
/**
* 새로운 할 일을 로컬 스토리지에 저장하는 함수
* @param {string} todoText - 추가할 할 일 텍스트
*/
function saveTodoItem(todoText) {
const todoItems = JSON.parse(localStorage.getItem('todoItems')) || [];
todoItems.push({ text: todoText, completed: false });
localStorage.setItem('todoItems', JSON.stringify(todoItems));
}
/**
* 로컬 스토리지에서 할 일을 삭제하는 함수
* @param {string} todoText - 삭제할 할 일 텍스트
*/
function removeTodoItem(todoText) {
let todoItems = JSON.parse(localStorage.getItem('todoItems')) || [];
todoItems = todoItems.filter(item => item.text !== todoText);
localStorage.setItem('todoItems', JSON.stringify(todoItems));
}
/**
* 할 일의 완료 상태를 업데이트하는 함수
* @param {string} todoText - 완료 상태를 업데이트할 할 일 텍스트
*/
function updateTodoItemStatus(todoText) {
const todoItems = JSON.parse(localStorage.getItem('todoItems')) || [];
const todoItem = todoItems.find(item => item.text === todoText);
if (todoItem) {
todoItem.completed = !todoItem.completed;
localStorage.setItem('todoItems', JSON.stringify(todoItems));
}
}Git 커밋 메시지
feat: 로컬 스토리지 모듈 구현
할 일 목록을 로컬 스토리지에 저장, 불러오기, 삭제, 업데이트 기능 작성.단계 6: JavaScript 기능 구현 - 메인 애플리케이션 로직
js/app.js파일에 메인 애플리케이션 로직을 구현합니다.
document.addEventListener('DOMContentLoaded', () => {
const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
addBtn.addEventListener('click', () => {
const todoText = todoInput.value.trim();
if (todoText !== '') {
addTodoItem(todoText);
todoInput.value = '';
}
});
todoList.addEventListener('click', (event) => {
if (event.target.classList.contains('delete-btn')) {
deleteTodoItem(event.target.parentElement);
} else if (event.target.classList.contains('todo-item')) {
toggleCompleteTodoItem(event.target);
}
});
loadTodoItems();
});
/**
* 새로운 할 일을 추가하는 함수
* @param {string} todoText - 추가할 할 일 텍스트
*/
function addTodoItem(todoText) {
const todoItem = createTodoItemElement(todoText);
saveTodoItem(todoText);
document.getElementById('todo-list').appendChild(todoItem);
}
/**
* 할 일을 삭제하는 함수
* @param {HTMLElement} todoItem - 삭제할 할 일 엘리먼트
*/
function deleteTodoItem(todoItem) {
removeTodoItem(todoItem.textContent.trim());
todoItem.remove();
}
/**
* 할 일의 완료 상태를 토글하는 함수
* @param {HTMLElement} todoItem - 완료 상태를 토글할 할 일 엘리먼트
*/
function toggleCompleteTodoItem(todoItem) {
todoItem.classList.toggle('completed');
updateTodoItemStatus(todoItem.textContent.trim());
}Git 커밋 메시지
feat: 메인 애플리케이션 로직 구현
할 일 추가, 삭제, 완료 상태 토글 기능 구현.
이벤트 리스너 설정 및 로컬 스토리지와의 연동 처리.반응형
'Javascript 프로젝트 > 02_To Do List' 카테고리의 다른 글
| [To Do List] 다음 단계 (0) | 2024.06.16 |
|---|---|
| [To Do List] 4단계: 확장 가능한 프로젝트 구조 (0) | 2024.06.16 |
| [To Do List] 3단계: 규칙 설정 (0) | 2024.06.16 |
| [To Do List] 2단계: README.md 작성 (0) | 2024.06.16 |
| [To Do List] 1단계: 프로젝트명과 설명 (0) | 2024.06.16 |