30분만에 만드는 Todo App 완성 가이드 - 완성까지 한번에!

프로젝트 소개 및 목표

🔗 관련 에러 해결 가이드

이 30분만에 만드는 Todo App 완성 가이드는 초보 개발자도 쉽게 따라할 수 있는 실전 프로젝트입니다. 할 일 목록을 추가하고, 완료 상태를 체크하며, 삭제할 수 있는 기본적인 CRUD 기능을 모두 구현합니다. 이 가이드를 통해 JavaScript의 DOM 조작, 이벤트 핸들링, 로컬 스토리지 활용 등 실무에 필요한 핵심 기술을 익힐 수 있습니다. 완성된 Todo App은 포트폴리오로도 활용 가능하며, 추후 백엔드 연동이나 고급 기능 추가를 통해 확장할 수 있는 탄탄한 기반이 됩니다.

필요한 기술 스택

이 프로젝트는 순수 HTML, CSS, JavaScript만으로 구현되어 별도의 프레임워크나 라이브러리 설치가 필요 없습니다. HTML5로 기본 구조를 만들고, CSS3로 반응형 디자인을 적용합니다. JavaScript ES6+ 문법을 사용하여 동적 기능을 구현하며, localStorage API를 활용해 브라우저에 데이터를 저장합니다. 개발 환경은 VS Code와 같은 텍스트 에디터와 Chrome, Firefox 등의 모던 브라우저만 있으면 충분합니다.

프로젝트 셋업

먼저 프로젝트 폴더를 생성하고 세 개의 파일을 준비합니다. index.html, style.css, app.js 파일을 생성하세요. index.html에는 기본 HTML5 구조와 함께 head 태그에 CSS 링크를, body 태그 하단에 JavaScript 파일을 연결합니다. 프로젝트 폴더 구조는 다음과 같습니다:

todo-app/
├── index.html
├── style.css
└── app.js

이제 본격적으로 각 파일을 작성해 보겠습니다. VS Code에서 폴더를 열고 Live Server 확장을 설치하면 실시간으로 결과를 확인하며 개발할 수 있습니다.

단계별 구현 과정

1단계: HTML 구조 작성 (5분)

index.html 파일에 Todo App의 기본 구조를 작성합니다. 제목, 입력 폼, 할 일 목록을 표시할 컨테이너를 만듭니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 Todo App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>📝 My Todo List</h1>
        <div class="input-section">
            <input type="text" id="todoInput" placeholder="할 일을 입력하세요...">
            <button id="addBtn">추가</button>
        </div>
        <ul id="todoList"></ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

2단계: CSS 스타일링 (7분)

style.css 파일에 깔끔하고 모던한 디자인을 적용합니다. 반응형 디자인과 호버 효과를 포함합니다:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    max-width: 500px;
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 25px;
    text-align: center;
}

.input-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#todoInput {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

#todoInput:focus {
    outline: none;
    border-color: #667eea;
}

#addBtn {
    padding: 12px 25px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

#addBtn:hover {
    background: #5568d3;
}

#todoList {
    list-style: none;
}

.todo-item {
    background: #f8f9fa;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s;
}

.todo-item:hover {
    transform: translateX(5px);
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    color: #999;
}

.todo-text {
    flex: 1;
    cursor: pointer;
}

.delete-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.delete-btn:hover {
    background: #c0392b;
}

3단계: JavaScript 기능 구현 (15분)

app.js 파일에 핵심 로직을 작성합니다. 할 일 추가, 완료 토글, 삭제, 로컬 스토리지 저장 기능을 모두 구현합니다:

// DOM 요소 선택
const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoList = document.getElementById('todoList');

// 로컬 스토리지에서 데이터 불러오기
let todos = JSON.parse(localStorage.getItem('todos')) || [];

// 초기 렌더링
renderTodos();

// 할 일 추가 이벤트
addBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') addTodo();
});

// 할 일 추가 함수
function addTodo() {
    const text = todoInput.value.trim();
    
    if (text === '') {
        alert('할 일을 입력해주세요!');
        return;
    }
    
    const todo = {
        id: Date.now(),
        text: text,
        completed: false
    };
    
    todos.push(todo);
    saveTodos();
    renderTodos();
    todoInput.value = '';
    todoInput.focus();
}

// 할 일 렌더링 함수
function renderTodos() {
    todoList.innerHTML = '';
    
    todos.forEach(todo => {
        const li = document.createElement('li');
        li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
        li.innerHTML = `
            
                ${todo.completed ? '✓' : '○'} ${todo.text}
            
            
        `;
        todoList.appendChild(li);
    });
}

// 완료 상태 토글 함수
function toggleTodo(id) {
    todos = todos.map(todo => 
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
    );
    saveTodos();
    renderTodos();
}

// 할 일 삭제 함수
function deleteTodo(id) {
    if (confirm('정말 삭제하시겠습니까?')) {
        todos = todos.filter(todo => todo.id !== id);
        saveTodos();
        renderTodos();
    }
}

// 로컬 스토리지에 저장
function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

4단계: 기능 테스트 (3분)

브라우저에서 index.html을 열어 모든 기능이 정상적으로 작동하는지 확인합니다. 할 일 추가, 클릭으로 완료 표시, 삭제 버튼, 새로고침 후 데이터 유지 등을 테스트합니다.

테스트 및 배포

완성된 Todo App을 GitHub Pages나 Netlify를 통해 무료로 배포할 수 있습니다. GitHub에 코드를 푸시한 후 Settings > Pages에서 배포 브랜치를 선택하면 몇 분 내에 온라인 URL이 생성됩니다. Netlify를 사용하면 드래그 앤 드롭만으로도 배포가 가능합니다. 배포 전에 크로스 브라우저 테스트를 진행하고, 모바일 환경에서도 정상 작동하는지 확인하세요. 개발자 도구의 콘솔에서 에러가 없는지 체크하고, Lighthouse를 사용해 성능과 접근성 점수를 확인하는 것도 좋습니다.

마무리 및 확장 아이디어

축하합니다! 30분만에 만드는 Todo App 완성 가이드를 통해 완전히 작동하는 Todo 애플리케이션을 만들었습니다. 이제 다음 단계로 필터링 기능(전체/완료/미완료), 우선순위 설정, 마감일 추가, 다크 모드, 드래그 앤 드롭 정렬 등의 기능을 추가해보세요. 백엔드와 연동하여 사용자 인증과 클라우드 동기화를 구현하면 더욱 실전적인 프로젝트가 됩니다. React나 Vue.js로 리팩토링하는 것도 훌륭한 학습 경험이 될 것입니다.

📢 이 글이 도움되셨나요? 공유해주세요!

여러분의 공유 한 번이 더 많은 사람들에게 도움이 됩니다 ✨

📘 페이스북

🐦 트위터

✈️ 텔레그램

🔥 공유할 때마다 블로그 성장에 큰 힘이 됩니다! 감사합니다 🙏

💬 여러분의 소중한 의견을 들려주세요!

여러분은 30분만에 만드는 Todo App 완성 가이드에 대해 어떻게 생각하시나요?

💡

유용한 정보 공유

❓

궁금한 점 질문

🤝

경험담 나누기

👍

의견 표현하기

⭐ 모든 댓글은 24시간 내에 답변드리며, 여러분의 의견이 다른 독자들에게 큰 도움이 됩니다!
🎯 건설적인 의견과 경험 공유를 환영합니다 ✨

🔔 블로그 구독하고 최신 글을 받아보세요!

📚

다양한 주제

17개 카테고리

⏰

정기 업데이트

하루 3회 발행

🎯

실용적 정보

바로 적용 가능

💡

최신 트렌드

2025년 기준

🌟 프로젝트 아이디어부터 다양한 실생활 정보까지!
매일 새로운 유용한 콘텐츠를 만나보세요 ✨

📧 RSS 구독 | 🔖 북마크 추가 | 📱 모바일 앱 알림 설정
지금 구독하고 놓치는 정보 없이 업데이트 받아보세요!