TypeScript로 유형 안전성을 갖춘 Todo 리스트 만들기 미니 프로젝트

프론트엔드 개발에서 TypeScript의 도입은 점점 더 중요해지고 있습니다. TypeScript를 사용하면 자바스크립트의 동적 타입의 한계를 극복하고, 코드의 품질을 높이며, 유지보수가 용이한 애플리케이션을 개발할 수 있습니다. 이번 글에서는 TypeScript로 간단한 Todo 리스트 애플리케이션을 만드는 미니 프로젝트를 통해 유형 안전성을 갖춘 개발 방법을 알아보겠습니다.

프로젝트 설정

먼저, TypeScript 프로젝트를 설정하십시오. Node.js와 npm이 설치되어 있어야 합니다. 아래 명령어를 통해 새로운 프로젝트를 생성하고 TypeScript를 설치합니다.

mkdir todo-list
cd todo-list
npm init -y
npm install typescript --save-dev
npx tsc --init

이제 TypeScript와 함께 사용할 HTML 파일을 생성합니다. 프로젝트 루트에 index.html 파일을 만들고 아래와 같이 작성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Todo List</title>
</head>
<body>
    <h1>할 일 목록</h1>
    <input type="text" id="todoInput" placeholder="할 일을 입력하세요">
    <button id="addButton">추가</button>
    <ul id="todoList"></ul>
    <script src="dist/index.js"></script>
</body>
</html>

TypeScript 코드 작성

이제 src 폴더를 만들고 그 안에 index.ts 파일을 생성합니다. 여러분의 TypeScript 코드는 이 파일에 작성됩니다. Todo 아이템을 나타내는 인터페이스를 정의해봅시다.

// src/index.ts

interface Todo {
    id: number;
    text: string;
    completed: boolean;
}

let todos: Todo[] = [];
let nextId = 1;

document.getElementById('addButton')?.addEventListener('click', () => {
    const inputElement = document.getElementById('todoInput') as HTMLInputElement;
    const todoText = inputElement.value.trim();

    if (todoText) {
        const newTodo: Todo = {
            id: nextId++,
            text: todoText,
            completed: false,
        };
        todos.push(newTodo);
        inputElement.value = '';
        renderTodoList();
    }
});

function renderTodoList() {
    const todoListElement = document.getElementById('todoList');
    if (todoListElement) {
        todoListElement.innerHTML = '';
        todos.forEach(todo => {
            const li = document.createElement('li');
            li.textContent = todo.text;
            todoListElement.appendChild(li);
        });
    }
}

위의 코드는 기본적인 Todo 리스트 애플리케이션의 로직을 수행합니다. Todo 인터페이스를 정의하여 Todo 아이템의 구조를 명확하게 하고, todos 배열에 Todo 아이템을 추가합니다. addButton 클릭 이벤트를 통해 새로운 Todo를 추가하고, renderTodoList 함수를 통해 화면에 Todo 목록을 출력합니다.

TypeScript 컴파일 및 실행

코드를 작성한 후에는 TypeScript 파일을 JavaScript로 컴파일해야 합니다. 다음 명령어를 사용하여 TypeScript 코드를 컴파일합니다.

npx tsc

이제 dist/index.js 파일이 생성됩니다. index.html 파일을 웹 브라우저에서 열고, Todo를 추가해보세요. 추가한 Todo가 화면에 표시되는 것을 확인할 수 있습니다.

프로젝트 확장

위의 예제는 기본적인 Todo 리스트 애플리케이션 구현입니다. 여기에서 추가 기능을 구현하여 프로젝트를 확장할 수 있습니다. 예를 들어, Todo 아이템을 완료로 표시하거나 삭제하는 기능을 추가할 수 있습니다. 이를 통해 TypeScript의 유형 안전성을 활용하고, 더 복잡한 로직을 쉽게 관리할 수 있습니다.

마무리

TypeScript를 사용하여 Todo 리스트 애플리케이션을 만드는 과정에서 우리는 유형 안전성을 확보하며, 코드의 가독성과 유지보수성을 높일 수 있는 방법을 배웠습니다. TypeScript의 강력한 타입 시스템 덕분에 코드 작성 시 발생할 수 있는 오류를 줄이고, 보다 안정적인 애플리케이션을 개발할 수 있습니다. 앞으로도 TypeScript를 활용한 다양한 프로젝트에 도전해보세요!