JavaScript To-do List 만들기
오늘은 자바스크립트를 이용해 귀엽고 감성적인 To-do List 웹앱을 만들어볼 거예요. 단순히 할 일을 추가하고 지우는 것뿐만 아니라, 다크모드 전환과 LocalStorage 데이터 저장, 모바일 반응형까지 완벽하게 구현합니다.
1. HTML 구조
HTML 구조는 간단합니다.
이번에는 시작 화면과 끝 화면 없이 바로 메인 화면이 나오도록 하였습니다.
상단에는 To-do List 제목과 다크 모드 전환을 할 수 있는 토글 버튼을 두었습니다.
그 아래에는 input 태그를 추가하여 사용자가 텍스트를 입력할 수 있도록 하였습니다.
그 옆에는 텍스트를 저장하고 추가할 수 있는 추가 버튼을 만들었습니다.
하단에는 ul 태그를 활용하여 리스트 형식으로 아래로 할일이 추가되도록 하였습니다.
2. 다크모드 전환 CSS & JS
:root {
--bg: #fdf6f0;
--card: #ffffff;
--text: #333;
--accent: #ffb6b9;
--accent-hover: #ff9aa2;
}
body.dark {
--bg: #2a2d3e;
--card: #3b3f52;
--text: #f1f1f1;
--accent: #ffb6b9;
--accent-hover: #ff9aa2;
}
themeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
const isDark = document.body.classList.contains("dark");
themeToggle.textContent = isDark ? "☀️" : "🌙";
localStorage.setItem("theme", isDark ? "dark" : "light");
});
일반 모드와 다크 모드 전환을 위해 CSS를 위와 같이 작성해주었습니다.
각각 모드에 맞게 색상을 미리 CSS에 작성해놓고, 자바스크립트를 활용하여 색상을 전환해주는 형식입니다.
자바스크립트에서는 토글 버튼을 활용하여 classList에 dark class가 존재한다면 일반 모드로, 존재하지 않는다면 다크 모드로 변경하도록 하였습니다.
이와 마찬가지로 각각 테마에 맞는 버튼 이미지도 변경하도록 하였고, localStorage를 활용하여 변경된 테마 내용도 저장하였습니다.
3. LOCAL STORAGE
- 할 일을 추가할 배열을 생성해줍니다.
- 추가 버튼을 클릭했을 때 하단 리스트에 있는 내용들을 배열에 추가합니다.
localStorage.setItem()을 활용하여 배열을 로컬 스토리지에 저장합니다.- 브라우저를 껐다가 다시 킬 때 로컬 스토리지에 저장되어 있는 내용을 불러옵니다.
- 배열을 돌면서 저장되어 있는 내용과 삭제 버튼을 화면에 뿌려줍니다.
function saveTasks() {
const tasks = [];
document.querySelectorAll("#taskList li").forEach((li) => {
tasks.push({
text: li.querySelector("span").textContent,
done: li.classList.contains("done"),
});
});
localStorage.setItem("tasks", JSON.stringify(tasks));
}
function loadTasks() {
const saved = JSON.parse(localStorage.getItem("tasks") || "[]");
saved.forEach((t) => {
const li = document.createElement("li");
li.innerHTML = `
${t.text}
`;
if (t.done) li.classList.add("done");
taskList.appendChild(li);
});
}
loadTasks();
localStorage.setItem()에 배열 내용을 저장할 때 JSON 형태로 변환해주어야 합니다.JSON.stringify(tasks)저장되어 있는 내용을 불러올 때 JSON 형식으로 저장되어 있기 때문에 다시 배열 형태로 변환해주어야 합니다.
JSON.parse(localStorage.getItem("tasks") || "[]")
4. To-do LIst 실행 영상 화면
5. 모바일 반응형
480px 아래에서 크기 조절을 할 수 있도록 반응형으로 제작하였습니다.
아래와 같이 미디어 쿼리를 CSS 하단에 추가해줍니다.
@media (max-width: 480px) {
.todo-container {
padding: 18px;
}
.todo-header h1 {
font-size: 1.4rem;
}
.input-area input {
font-size: 0.9rem;
}
}
학습 내용 정리와 추후 발전 포인트
- LocalStorage로 새로고침해도 데이터 유지
- 다크모드 토글 — 클릭 한 번으로 테마 전환
- 반응형 UI — 모바일에서도 깔끔한 디자인
- 달력 추가 — 일정을 추가하기 위한 달력 추가
- 알림 추가 — 일정에 맞춰서 알림이 울리도록 추가
- 모두 삭제 버튼 추가 — 한 번에 할일 목록을 삭제할 수 있는 기능 추가
이 코드는 초보자도 충분히 따라 할 수 있는 완성형 자바스크립트 프로젝트입니다.
HTML, CSS, JS 세 가지를 모두 다루면서 동시에 디자인 감각까지 익힐 수 있죠.
이 코드를 확장시켜나가면 스케줄 웹앱이나 다이어리 웹앱 등 다양한 웹페이지를 만들 수 있습니다.