Day 6: JavaScript 심화 학습
좋습니다 👍 이제 **Day 6 학습 플랜 (JavaScript 심화)**를 실습 예제까지 포함해서 정리해드릴게요.
🗓️ Day 6: JavaScript 심화 학습
1. 학습 목표
- 배열과 객체 활용하기
- 함수로 코드 재사용성 높이기
- DOM 조작으로 동적 UI 만들기
- 작은 웹 앱을 완성해보며 JS의 흐름 이해하기
2. 프로젝트 구조
my-first-web/
├── index.html
├── style.css
└── script.js
3. 실습 예제: To-do 리스트 앱 만들기
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>To-do 리스트 앱</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>나의 할 일 목록 ✅</h1>
<input type="text" id="todoInput" placeholder="할 일을 입력하세요">
<button id="addBtn">추가</button>
<ul id="todoList"></ul>
<script src="script.js"></script>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
input {
padding: 8px;
width: 200px;
}
button {
padding: 8px 15px;
margin-left: 5px;
background: #16a085;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background: #1abc9c;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
li {
background: #ecf0f1;
margin: 5px auto;
padding: 10px;
width: 250px;
display: flex;
justify-content: space-between;
border-radius: 5px;
}
script.js
const input = document.querySelector("#todoInput");
const addBtn = document.querySelector("#addBtn");
const todoList = document.querySelector("#todoList");
// 할 일 목록을 저장할 배열
let todos = [];
// 할 일 추가 함수
function addTodo() {
const task = input.value.trim();
if (task !== "") {
todos.push(task); // 배열에 추가
renderTodos(); // 화면 갱신
input.value = ""; // 입력창 초기화
}
}
// 할 일 삭제 함수
function deleteTodo(index) {
todos.splice(index, 1); // 배열에서 제거
renderTodos(); // 화면 갱신
}
// 화면에 할 일 목록 표시
function renderTodos() {
todoList.innerHTML = "";
todos.forEach((task, index) => {
const li = document.createElement("li");
li.textContent = task;
const delBtn = document.createElement("button");
delBtn.textContent = "삭제";
delBtn.addEventListener("click", () => deleteTodo(index));
li.appendChild(delBtn);
todoList.appendChild(li);
});
}
// 버튼 클릭 이벤트 연결
addBtn.addEventListener("click", addTodo);
4. 실행 방법
- VS Code에서
index.html실행 → Live Server로 브라우저 열기 - 할 일을 입력하고 추가 버튼 클릭 → 목록에 표시
- 각 항목 옆의 삭제 버튼 클릭 → 해당 항목 제거
5. 학습 포인트
- 배열(
todos)로 데이터 관리 - 함수(
addTodo,deleteTodo,renderTodos)로 코드 구조화 - DOM 조작으로 동적 UI 구현
- 데이터와 화면을 연결하는 흐름 이해
👉 Day 7에서는 종합 프로젝트로 HTML, CSS, JS를 모두 결합해 계산기 또는 **날씨 조회 앱(API 연동)**을 만들어보게 됩니다. 원하시면 Day 7 실습 예제도 바로 이어서 정리해드릴 수 있습니다.
