1.6 코드 예제와 실습

이번 섹션에서는 JavaScript의 기본 개념을 실제 웹사이트에서 자주 사용하는 기능으로 구현하는 예제를 통해 학습하겠습니다. 다음의 각 예제는 HTML, CSS 및 JavaScript를 함께 사용하여 실제적인 웹 개발 능력을 향상시킬 것입니다.

1. ToDo List 예제

설명

ToDo List는 사용자가 해야 할 일을 추가하고, 완료한 일을 체크하며 삭제할 수 있는 기능을 제공합니다. 이 예제를 통해 DOM 조작과 이벤트 처리를 실습할 수 있습니다.

HTML 코드

<div id="todo-container">
    <input type="text" id="todo-input" placeholder="할 일을 입력하세요">
    <button id="add-todo">추가</button>
    <ul id="todo-list"></ul>
</div>

CSS 코드

#todo-container {
    width: 300px;
    margin: auto;
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

JavaScript 코드

// 할 일 추가 버튼 클릭 시 실행
const addButton = document.getElementById('add-todo');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

addButton.addEventListener('click', () => {
    const todoText = todoInput.value;
    if (todoText === '') return; // 빈 입력 방지
    const todoItem = document.createElement('li');
    todoItem.className = 'todo-item';
    todoItem.innerHTML = `${todoText} <button class='delete-btn'>삭제</button>`;
    todoList.appendChild(todoItem);
    todoInput.value = ''; // 입력 필드 비우기
});

// 삭제 버튼 클릭 시 실행
todoList.addEventListener('click', (event) => {
    if (event.target.classList.contains('delete-btn')) {
        const item = event.target.parentElement;
        todoList.removeChild(item);
    }
});

실습

ToDo List 기능을 완성한 후, 개인적인 추가 기능을 개발해 보세요. (예: 완료한 ToDo를 밑줄 쳐주기, 로컬 스토리지에 저장하기 등)

2. 메뉴 토글 예제

설명

메뉴 토글은 보통 모바일 웹사이트에서 사용자에게 메뉴를 숨기거나 보여주는 기능입니다. 이 예제를 통해 이벤트 리스너와 CSS 전환 효과를 사용할 것입니다.

HTML 코드

<div id="menu">
    <button id="toggle-menu">메뉴 열기</button>
    <ul id="nav-links" class="hidden">
        <li>홈</li>
        <li>서비스</li>
        <li>연락처</li>
    </ul>
</div>

CSS 코드

#nav-links.hidden {
    display: none;
}

JavaScript 코드

const toggleButton = document.getElementById('toggle-menu');
const navLinks = document.getElementById('nav-links');

toggleButton.addEventListener('click', () => {
    navLinks.classList.toggle('hidden'); // 'hidden' 클래스를 토글
});

실습

메뉴 토글을 확장하여 애니메이션 효과를 추가해 보세요. (예: 메뉴 슬라이드 다운 애니메이션)

3. 모달창 예제

설명

모달창은 사용자가 선택할 수 있는 정보를 보여주는 대화 상자인데, 이 예제를 통해 DOM 조작 및 이벤트 처리를 배울 수 있습니다.

HTML 코드

<div id="modal" class="modal-hidden">
    <div class="modal-content">
        <span id="close-modal">×</span>
        <p>모달 대화상자입니다!</p>
    </div>
</div>
<button id="open-modal">모달 열기</button>

CSS 코드

.modal-hidden {
    display: none;
}
.modal-content {
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
}

JavaScript 코드

const modal = document.getElementById('modal');
const openModalButton = document.getElementById('open-modal');
const closeModalButton = document.getElementById('close-modal');

openModalButton.addEventListener('click', () => {
    modal.classList.remove('modal-hidden');
});

closeModalButton.addEventListener('click', () => {
    modal.classList.add('modal-hidden');
});

실습

모달창에 이미지를 추가하고, 다양한 스타일을 적용해 보세요. (예: 중복 클릭을 방지하는 기능 추가)

4. 비동기 프로그래밍 예제 - Fetch API

설명

Fetch API를 사용하여 외부 API에서 데이터를 가져와 웹페이지에 표시하는 예제를 구현해보겠습니다.

HTML 코드

<div id="data-container"></div>
<button id="fetch-data">데이터 가져오기</button>

CSS 코드

data-container {
    border: 1px solid #ccc;
    padding: 10px;
}

JavaScript 코드

const fetchButton = document.getElementById('fetch-data');
const dataContainer = document.getElementById('data-container');

fetchButton.addEventListener('click', async () => {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts'); // 외부 API 호출
        const data = await response.json();
        dataContainer.innerHTML = data.map(post => `<h3>${post.title}</h3><p>${post.body}</p>`).join('');
    } catch (error) {
        console.error('데이터를 가져오는 데 오류가 발생했습니다:', error);
    }
});

실습

Fetch API를 사용할 때, 사용자로부터 검색어를 입력받아 검색 결과만 필터링하여 보여주는 기능을 추가해 보세요.

정리

이번 강의를 통해 JavaScript의 기본 기능을 실습할 수 있는 여러 예제를 경험하였습니다. 이제 각 기능을 자신만의 프로젝트에 응용해보시기 바랍니다. 각 실습 과제를 통해 자신감을 높이고, 웹 개발의 기초를 확립하시길 바랍니다.