10장: 웹 애플리케이션 개발
이 장에서는 JavaScript와 웹 기술을 활용하여 간단한 웹 애플리케이션을 개발하는 과정을 살펴보겠습니다. HTML, CSS, JavaScript를 사용하여 할 일 목록 애플리케이션을 만들어보겠습니다.
#### 할 일 목록 애플리케이션 설계
할 일 목록 애플리케이션은 사용자가 할 일을 추가하고 삭제할 수 있는 기능을 제공합니다. 기본적인 기능은 다음과 같습니다:
1. 할 일 추가: 사용자가 텍스트 입력 후 추가 버튼을 클릭하면 새로운 할 일이 목록에 추가됩니다.
2. 할 일 삭제: 사용자가 삭제 버튼을 클릭하면 해당 할 일이 목록에서 제거됩니다.
#### 할 일 목록 애플리케이션 구현
HTML과 CSS를 사용하여 기본적인 레이아웃을 작성한 후 JavaScript를 사용하여 기능을 구현합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="할 일을 입력하세요">
<button onclick="addTask()">추가</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
/* styles.css */
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 5px;
}
button {
margin-top: 10px;
}
// script.js
function addTask() {
var taskInput = document.getElementById("taskInput");
var taskList = document.getElementById("taskList");
if (taskInput.value !== "") {
var listItem = document.createElement("li");
listItem.innerHTML = taskInput.value + " <button onclick=\"removeTask(this)\">삭제</button>";
taskList.appendChild(listItem);
taskInput.value = "";
} else {
alert("할 일을 입력하세요.");
}
}
function removeTask(item) {
var taskList = document.getElementById("taskList");
taskList.removeChild(item.parentNode);
}
위 코드는 간단한 할 일 목록 애플리케이션을 구현한 것입니다. 사용자가 할 일을 입력하고 추가 버튼을 클릭하면 목록에 추가되며, 삭제 버튼을 클릭하면 해당 할 일이 목록에서 제거됩니다.
#### 추가 기능 구현
위의 코드에 추가로 다양한 기능을 구현할 수 있습니다. 예를 들어, 할 일을 완료 상태로 표시하거나, 할 일을 저장하여 페이지 새로고침 후에도 유지할 수 있도록 로컬 저장소를 사용할 수 있습니다. 이러한 기능을 추가하여 보다 완성도 높은 웹 애플리케이션을 만들어볼 수 있습니다.
이 장에서는 JavaScript와 웹 기술을 사용하여 간단한 웹 애플리케이션을 개발하는 방법을 살펴보았습니다. HTML, CSS, JavaScript를 조합하여 다양한 기능을 구현할 수 있으며, 사용자 경험을 향상시키기 위해 추가 기능을 구현할 수 있습니다.
댓글
댓글 쓰기