자바스크립트에서 JSON 데이터를 이용하여 메모 애플리케이션 생성하기

15 Sep 2023

javascript

태그: #자바스크립트 #JSON #메모애플리케이션

메모를 작성하고 관리하는 간단한 애플리케이션을 만들어보기 위해, JSON 데이터를 활용하여 자바스크립트로 구현해 보겠습니다. JSON은 데이터를 효율적으로 저장하고 전송하기 위한 경량 데이터 형식으로, 자바스크립트에서 쉽게 다룰 수 있습니다.

1. HTML 마크업 구조 생성하기

우선 HTML 파일에 메모 애플리케이션을 위한 마크업 구조를 생성해보겠습니다. 다음은 기본적인 구조를 제공하는 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>메모 애플리케이션</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>메모 애플리케이션</h1>
    </header>
    <main>
        <form id="memo-form">
            <textarea id="memo-input" placeholder="메모를 작성하세요."></textarea>
            <button type="submit">저장</button>
        </form>
        <ul id="memo-list"></ul>
    </main>
    <script src="script.js"></script>
</body>
</html>

2. 자바스크립트 파일로 동작 구현하기

이제 자바스크립트를 사용하여 메모 애플리케이션의 동작을 구현해보겠습니다. 먼저 JSON 데이터를 저장할 변수를 선언하고 초기화합니다.

let memoData = [];

다음으로, 메모를 작성하고 저장하는 함수를 작성해보겠습니다.

function saveMemo(event) {
    event.preventDefault();
    const input = document.getElementById('memo-input');
    const memoText = input.value;
    if (memoText.trim() === '') {
        alert('메모를 입력하세요.');
        return;
    }
    const memo = {
        id: Date.now(),
        text: memoText
    };
    memoData.push(memo);
    renderMemoList();
    input.value = '';
}

위 함수는 폼 제출 이벤트가 발생했을 때 호출되며, 입력된 메모를 memoData 배열에 저장한 후, 메모 목록을 다시 렌더링하고 입력 필드를 비웁니다.

마지막으로, 메모 목록을 렌더링하는 함수를 작성합니다.

function renderMemoList() {
    const memoList = document.getElementById('memo-list');
    memoList.innerHTML = '';
    memoData.forEach(memo => {
        const li = document.createElement('li');
        li.textContent = memo.text;
        memoList.appendChild(li);
    });
}

위 함수는 memoData 배열을 순회하면서 각 메모를 목록에 추가합니다.

3. 스타일링

애플리케이션에 스타일을 적용하기 위해 styles.css 파일을 생성하고 다음과 같은 내용을 작성합니다.

body {
    font-family: Arial, sans-serif;
}

header {
    padding: 20px;
    text-align: center;
}

h1 {
    margin: 0;
}

main {
    padding: 20px;
}

form {
    margin-bottom: 20px;
}

textarea {
    width: 100%;
    height: 100px;
    resize: vertical;
}

button {
    padding: 10px 20px;
}

4. 실행

이제 HTML 파일에서 작성한 메모 애플리케이션을 실행하여 동작을 확인할 수 있습니다. 입력 필드에 메모를 작성하고 ‘저장’ 버튼을 클릭하면 메모 목록에 추가되는 것을 확인할 수 있습니다.

이제 여러분은 JSON 데이터와 자바스크립트를 활용하여 메모 애플리케이션을 만들 수 있게 되었습니다. 추가적으로 데이터를 로컬 스토리지에 저장하여 지속성을 확보하거나, 메모 삭제 기능 등을 구현해볼 수도 있습니다. Happy coding!