자바스크립트

자바스크립트 프로젝트 기초 간단한 웹 애플리케이션 만들기 - 폼 검증, 애니메이션 API 호출, 데이터 처리 실습 (공공 API 활용)

10월 05, 2024

14. 자바스크립트 프로젝트 기초

자바스크립트를 활용한 프로젝트를 통해 웹 애플리케이션의 기초적인 기능을 구현할 수 있습니다. 이 장에서는 간단한 웹 애플리케이션을 만들고, 자바스크립트를 활용한 폼 검증, 간단한 애니메이션, API 호출 및 데이터 처리 실습을 통해 자바스크립트 프로젝트의 기본 개념을 익혀보겠습니다.

자바스크립트 프로젝트 기초

14.1 간단한 웹 애플리케이션 만들기

간단한 웹 애플리케이션을 만드는 것은 자바스크립트의 기초를 다지는 좋은 방법입니다. 여기서는 할 일 목록(Todo List) 웹 애플리케이션을 구현해 보겠습니다.

14.1.1 HTML 구조

먼저 기본적인 HTML 구조를 설정합니다. 할 일을 입력하고, 목록에 추가하는 기능을 구현할 것입니다.

예시: Todo List HTML

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo List</title>
  <style>
    body { font-family: Arial, sans-serif; }
    #todo-list { list-style-type: none; padding: 0; }
    #todo-list li { margin: 5px 0; }
    .delete { cursor: pointer; color: red; }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <input type="text" id="todo-input" placeholder="Enter a task" />
  <button id="add-todo">Add Todo</button>
  <ul id="todo-list"></ul>

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

14.1.2 자바스크립트 코드

이제 자바스크립트를 사용하여 사용자가 할 일을 입력하고, 추가 버튼을 클릭하면 목록에 표시되도록 구현합니다.

예시: Todo List 자바스크립트

javascript
document.getElementById('add-todo').addEventListener('click', function () {
  const todoInput = document.getElementById('todo-input');
  const todoText = todoInput.value;

  if (todoText === '') {
    alert('Please enter a task');
    return;
  }

  const todoList = document.getElementById('todo-list');

  // 새로운 할 일 항목 생성
  const listItem = document.createElement('li');
  listItem.textContent = todoText;

  // 삭제 버튼 추가
  const deleteBtn = document.createElement('span');
  deleteBtn.textContent = ' [Delete]';
  deleteBtn.classList.add('delete');
  deleteBtn.addEventListener('click', function () {
    todoList.removeChild(listItem);
  });

  listItem.appendChild(deleteBtn);
  todoList.appendChild(listItem);

  // 입력 필드 초기화
  todoInput.value = '';
});

14.1.3 기능 설명

  • HTML 입력 필드에 사용자가 할 일을 입력하고 "Add Todo" 버튼을 클릭하면, 입력한 내용이 목록에 추가됩니다.
  • 목록 항목마다 삭제 버튼이 있으며, 클릭하면 해당 항목이 삭제됩니다.



14.2 자바스크립트를 활용한 폼 검증

폼 검증은 사용자 입력의 유효성을 검사하고, 잘못된 입력을 미리 차단하는 중요한 과정입니다. 이 섹션에서는 자바스크립트를 사용하여 간단한 로그인 폼의 유효성을 검사하는 예제를 다룹니다.

14.2.1 HTML 폼 구조

기본적인 로그인 폼을 작성합니다.

예시: 로그인 폼 HTML

html
<form id="login-form">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <br />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <br />
  <button type="submit">Login</button>
</form>
<div id="error-message" style="color: red;"></div>

14.2.2 자바스크립트 폼 검증 코드

이제 자바스크립트를 사용하여 폼이 제출되기 전에 유효성 검사를 수행합니다.

예시: 폼 검증 자바스크립트

javascript
document.getElementById('login-form').addEventListener('submit', function (event) {
  event.preventDefault();  // 폼 제출 방지

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const errorMessage = document.getElementById('error-message');

  if (username === '' || password === '') {
    errorMessage.textContent = 'All fields are required';
    return;
  }

  if (password.length < 6) {
    errorMessage.textContent = 'Password must be at least 6 characters long';
    return;
  }

  errorMessage.textContent = '';
  alert('Form submitted successfully!');
});

14.2.3 기능 설명

  • 사용자가 입력 필드를 비워둘 경우 경고 메시지를 출력합니다.
  • 비밀번호 길이가 6자 미만일 경우에도 오류 메시지를 출력합니다.
  • 모든 유효성 검사를 통과하면 폼이 정상적으로 제출됩니다.



14.3 자바스크립트를 사용한 간단한 애니메이션

웹 페이지에 애니메이션을 추가하면 사용자 경험을 개선할 수 있습니다. 자바스크립트와 CSS를 사용하여 간단한 애니메이션을 구현할 수 있습니다.


14.3.1 HTML 구조

애니메이션 효과를 적용할 박스를 만듭니다.

예시: 애니메이션 박스 HTML

html
<div id="box" style="width: 100px; height: 100px; background-color: blue; position: absolute;"></div>
<button id="move-btn">Move Box</button>

14.3.2 자바스크립트 애니메이션 코드

자바스크립트를 사용하여 박스가 클릭할 때마다 일정 거리를 이동하도록 설정합니다.

예시: 애니메이션 자바스크립트

javascript
document.getElementById('move-btn').addEventListener('click', function () {
  const box = document.getElementById('box');
  let position = 0;
  const interval = setInterval(function () {
    if (position >= 300) {
      clearInterval(interval);
    } else {
      position += 5;
      box.style.left = position + 'px';
    }
  }, 20);  // 20ms마다 5px씩 이동
});

14.3.3 기능 설명

  • 박스(box)는 클릭할 때마다 오른쪽으로 이동하며, 300px 위치에 도달하면 이동을 멈춥니다.
  • setInterval()을 사용하여 일정 간격으로 박스가 움직이도록 설정했습니다.



14.4 API 호출 및 데이터 처리 실습 (공공 API 활용)

API를 호출하여 데이터를 가져오는 것은 웹 애플리케이션에서 중요한 기능입니다. 여기서는 fetch를 사용하여 공공 API에서 데이터를 가져오고 이를 화면에 출력하는 방법을 다룹니다.

14.4.1 API 호출을 위한 HTML

공공 API에서 데이터를 받아와 목록으로 출력하는 구조를 만듭니다.

예시: API 호출 HTML

html
<h1>Random User Generator</h1>
<button id="load-user">Load Random User</button>
<div id="user-info"></div>

14.4.2 API 호출 자바스크립트

공공 API를 사용하여 랜덤 유저 데이터를 가져옵니다.

예시: API 호출 자바스크립트

javascript
document.getElementById('load-user').addEventListener('click', function () {
  fetch('https://randomuser.me/api/')
    .then((response) => response.json())
    .then((data) => {
      const user = data.results[0];
      const userInfo = `
        <h2>${user.name.first} ${user.name.last}</h2>
        <img src="${user.picture.large}" alt="User Picture">
        <p>Email: ${user.email}</p>
        <p>Location: ${user.location.city}, ${user.location.country}</p>
      `;
      document.getElementById('user-info').innerHTML = userInfo;
    })
    .catch((error) => {
      console.error('Error fetching data:', error);
    });
});

14.4.3 기능 설명

  • 버튼을 클릭하면 fetch()를 통해 randomuser.me API에서 랜덤 사용자 정보를 가져옵니다.
  • 가져온 사용자 정보는 이름, 사진, 이메일, 위치로 화면에 표시됩니다.
  • then() 메서드를 사용하여 데이터를 처리하고, catch()로 오류를 처리합니다.

자바스크립트는 다양한 웹 애플리케이션을 개발하는 데 필요한 강력한 도구입니다. 이 장에서 다룬 할 일 목록 애플리케이션, 폼 검증, 간단한 애니메이션, API 호출 등의 실습을 통해 자바스크립트의 기초적인 기능을 이해하고 실습할 수 있습니다. 이러한 기초를 바탕으로 더 복잡한 웹 애플리케이션을 개발할 수 있는 기반을 마련할 수 있습니다.

비밀스런체셔

작성자: 비밀스런체셔

댓글 쓰기

0 댓글