반응형
4. 로컬 스토리지를 이용한 메모 앱 만들기
프로젝트 개요
이번 프로젝트에서는 JavaScript와 로컬 스토리지를 사용하여 간단한 메모 애플리케이션을 만들어보겠습니다. 사용자는 메모를 작성하고, 저장된 메모를 로컬 스토리지에서 불러와 수정하거나 삭제할 수 있습니다.
준비물
- HTML
- CSS
- JavaScript
단계 1: 기본 HTML 구조 만들기
먼저, 메모 앱의 기본 HTML 구조를 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memo App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Memo App</h1>
<form id="memo-form">
<textarea id="memo-input" placeholder="Enter your memo here"></textarea>
<button type="submit">Add Memo</button>
</form>
<ul id="memo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>단계 2: 기본 CSS 스타일링
메모 앱의 기본 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
button {
padding: 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
button.delete {
background-color: #dc3545;
margin-left: 10px;
}
button.delete:hover {
background-color: #c82333;
}단계 3: JavaScript로 기능 구현하기
이제 JavaScript를 사용하여 메모 앱의 기능을 구현합니다.
// script.js
document.addEventListener('DOMContentLoaded', function() {
const memoForm = document.getElementById('memo-form');
const memoInput = document.getElementById('memo-input');
const memoList = document.getElementById('memo-list');
let memos = JSON.parse(localStorage.getItem('memos')) || [];
memoForm.addEventListener('submit', function(event) {
event.preventDefault();
addMemo();
});
function addMemo() {
const memoText = memoInput.value.trim();
if (memoText !== '') {
const memo = {
id: Date.now(),
text: memoText
};
memos.push(memo);
saveMemos();
renderMemos();
memoInput.value = '';
}
}
function deleteMemo(id) {
memos = memos.filter(memo => memo.id !== id);
saveMemos();
renderMemos();
}
function saveMemos() {
localStorage.setItem('memos', JSON.stringify(memos));
}
function renderMemos() {
memoList.innerHTML = '';
memos.forEach(memo => {
const li = document.createElement('li');
li.textContent = memo.text;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('delete');
deleteButton.addEventListener('click', function() {
deleteMemo(memo.id);
});
li.appendChild(deleteButton);
memoList.appendChild(li);
});
}
renderMemos();
});결론
이로써 로컬 스토리지를 이용한 간단한 메모 애플리케이션을 완성했습니다. 사용자는 메모를 작성하고, 저장된 메모를 불러와 삭제할 수 있습니다. 이 프로젝트를 통해 JavaScript와 로컬 스토리지를 활용하여 데이터를 저장하고 관리하는 방법을 배울 수 있습니다.
다음 글에서는 간단한 채팅 애플리케이션 개발에 대해 알아보겠습니다. 다음 글에서 만나요!
반응형
'JavaScript 프로젝트 시리즈' 카테고리의 다른 글
| [JavaScript 프로젝트 시리즈] 6일차: JavaScript로 RESTful API 연동하기 (0) | 2024.08.06 |
|---|---|
| [JavaScript 프로젝트 시리즈] 5일차: JavaScript로 간단한 채팅 애플리케이션 만들기 (0) | 2024.08.05 |
| [JavaScript 프로젝트 시리즈] 3일차: JavaScript로 간단한 틱택토 게임 만들기 (0) | 2024.08.03 |
| [JavaScript 프로젝트 시리즈] 2일차: JavaScript로 날씨 API를 이용한 날씨 앱 만들기 (0) | 2024.08.02 |
| [JavaScript 프로젝트 시리즈] 1일차: JavaScript로 간단한 To-Do 리스트 애플리케이션 만들기 (0) | 2024.08.01 |