본문 바로가기
Javascript 프로젝트/02_To Do List

[To Do List] 5단계: 단계별 진행 및 코드 주석과 Git 커밋 메시지

by cogito21_js 2024. 6. 16.
반응형

5. 단계별 진행 및 코드 주석과 Git 커밋 메시지

단계 1: 프로젝트 설정 및 초기 파일 생성

  1. 프로젝트 디렉토리를 생성하고, 필요한 파일들을 만듭니다.
  2. 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.js

Git 커밋 메시지

feat: 초기 프로젝트 설정 및 파일 생성

프로젝트 디렉토리 생성.
index.html, css/style.css, js/app.js, js/storage.js, js/ui.js 파일 생성.

단계 2: HTML 구조 작성

  1. index.html 파일에 기본 HTML 구조를 작성합니다.
  2. 할 일 입력 필드, 추가 버튼, 할 일 목록을 포함한 간단한 인터페이스를 만듭니다.
<!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 스타일 작성

  1. 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 모듈

  1. 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 기능 구현 - 로컬 스토리지 모듈

  1. 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 기능 구현 - 메인 애플리케이션 로직

  1. 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

관련글

티스토리툴바