반응형

이번 7일차에서는 자바스크립트의 심화 개념을 다루고, 실습 프로젝트를 통해 지금까지 배운 개념을 종합적으로 적용해봅니다. 심화 개념으로는 비동기 처리와 콜백 함수, Promise와 같은 내용을 다루며, 실습 프로젝트로는 투두 리스트를 만들어봅니다.

자바스크립트 심화 개념

  1. 비동기 처리와 콜백 함수

    자바스크립트는 기본적으로 동기적으로 실행됩니다. 즉, 코드가 위에서부터 아래로 순차적으로 실행됩니다. 그러나 비동기 처리를 통해 여러 작업을 동시에 실행할 수 있습니다. 비동기 처리는 예를 들어, API 호출, 타이머 설정, 이벤트 대기 등과 관련이 있습니다.

    콜백 함수는 어떤 작업이 완료된 후 호출되는 함수입니다. 비동기 처리를 다룰 때 흔히 사용됩니다.

    • 콜백 함수 예시:

      function greet(name, callback) {
    console.log(`Hello, ${name}!`);
    callback();
}

function askQuestion() {
    console.log("How are you?");
}

greet("John", askQuestion);
// 출력:
// Hello, John!
// How are you?

  2. setTimeout()과 setInterval()

    • setTimeout(): 지정된 시간(ms) 후에 한 번만 실행되는 함수입니다.

      setTimeout(function() {
    console.log("3초 후에 이 메시지가 나타납니다.");
}, 3000);

    • setInterval(): 지정된 시간 간격마다 반복적으로 실행되는 함수입니다.

      setInterval(function() {
    console.log("1초마다 이 메시지가 반복됩니다.");
}, 1000);

  3. Promise 기본 개념

    Promise는 비동기 작업이 성공했을 때 값을 반환하거나 실패했을 때 오류를 반환하는 객체입니다. 비동기 처리를 더욱 관리하기 쉬운 방식으로 다룰 수 있습니다.

    • Promise 사용법:

      const myPromise = new Promise(function(resolve, reject) {
    const success = true;

    if (success) {
        resolve("작업 성공!");
    } else {
        reject("작업 실패!");
    }
});

myPromise
    .then(function(result) {
        console.log(result);  // "작업 성공!"
    })
    .catch(function(error) {
        console.log(error);   // "작업 실패!"
    });

실습 프로젝트: 간단한 투두 리스트 만들기

이번 실습에서는 투두 리스트를 만들어보면서, LocalStorage를 사용하여 페이지를 새로고침해도 할 일 목록이 유지되도록 할 것입니다.

  1. 프로젝트 목표

    • 할 일 목록에 항목을 추가하고, 삭제하고, 완료 표시할 수 있는 기능을 구현합니다.
    • 데이터를 LocalStorage에 저장하여 페이지가 새로고침 되어도 데이터가 사라지지 않게 만듭니다.

  2. 프로젝트 기본 구조

    • HTML로 UI를 구성하고, 자바스크립트로 동작을 제어합니다.
    • LocalStorage를 사용하여 데이터를 저장하고 불러오는 방법을 익힙니다.

실습 코드

1. HTML (UI 구성)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>투두 리스트</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        input, button {
            padding: 10px;
            font-size: 16px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 10px;
            margin: 5px 0;
            background-color: #f4f4f4;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        li.completed {
            text-decoration: line-through;
            background-color: #d3f8d3;
        }
    </style>
</head>
<body>
    <h1>투두 리스트</h1>
    <input type="text" id="todoInput" placeholder="할 일을 입력하세요">
    <button id="addButton">추가</button>
    <ul id="todoList"></ul>

    <script src="script.js"></script>
</body>
</html>

2. 자바스크립트 (동작 구현)

// 투두 리스트 항목 추가, 삭제, 완료 처리
document.addEventListener("DOMContentLoaded", function() {
    const input = document.getElementById("todoInput");
    const addButton = document.getElementById("addButton");
    const todoList = document.getElementById("todoList");

    // LocalStorage에서 저장된 투두 리스트 불러오기
    const todos = JSON.parse(localStorage.getItem("todos")) || [];

    // 저장된 항목이 있을 경우 화면에 표시
    function displayTodos() {
        todoList.innerHTML = "";
        todos.forEach(function(todo, index) {
            const li = document.createElement("li");
            li.textContent = todo.text;
            if (todo.completed) {
                li.classList.add("completed");
            }

            // 완료 표시 처리
            li.addEventListener("click", function() {
                todo.completed = !todo.completed;
                saveTodos();
                displayTodos();
            });

            // 삭제 처리
            const deleteButton = document.createElement("button");
            deleteButton.textContent = "삭제";
            deleteButton.addEventListener("click", function(e) {
                e.stopPropagation(); // li 클릭이 아닌 삭제 버튼 클릭만 처리
                todos.splice(index, 1);
                saveTodos();
                displayTodos();
            });
            li.appendChild(deleteButton);
            todoList.appendChild(li);
        });
    }

    // 할 일 추가 함수
    function addTodo() {
        const todoText = input.value.trim();
        if (todoText) {
            const newTodo = {
                text: todoText,
                completed: false
            };
            todos.push(newTodo);
            saveTodos();
            input.value = "";
            displayTodos();
        }
    }

    // 투두 리스트를 LocalStorage에 저장하는 함수
    function saveTodos() {
        localStorage.setItem("todos", JSON.stringify(todos));
    }

    // '추가' 버튼 클릭 시
    addButton.addEventListener("click", addTodo);

    // 초기 화면에 투두 리스트 표시
    displayTodos();
});

기능 설명

  • LocalStorage: localStorage.setItem()과 localStorage.getItem()을 사용하여 데이터를 저장하고 불러옵니다.
  • 할 일 추가: 사용자가 입력한 텍스트를 할 일 목록에 추가합니다.
  • 할 일 완료: 항목을 클릭하여 완료 상태를 토글합니다. 완료된 항목은 스타일을 변경하여 표시됩니다.
  • 할 일 삭제: 각 항목 옆의 삭제 버튼을 클릭하여 항목을 삭제합니다.

정리

이번 7일차에서는 자바스크립트의 심화 개념인 비동기 처리, setTimeout(), setInterval(), Promise 등을 다루고, 투두 리스트 프로젝트를 통해 실제 웹 애플리케이션에서 자주 사용되는 기능들을 구현해보았습니다. 프로젝트에서는 LocalStorage를 사용하여 페이지 새로고침 시에도 데이터를 유지하는 방법을 학습했습니다.

반응형
저작자표시

'개발 > Javascript' 카테고리의 다른 글

6일차: DOM 조작과 이벤트 처리  (0) 2025.02.01
5일차: 객체와 배열  (0) 2025.01.31
자바스크립트에서 null과 undefined의 차이점 완벽 분석  (0) 2025.01.31
4일차: 함수와 스코프  (0) 2025.01.30
3일차: 조건문과 반복문  (0) 2025.01.29

+ Recent posts

티스토리툴바