BOM을 활용한 브라우저의 메모앱 구현

13 Oct 2023

BOM(Browser Object Model)은 브라우저의 창, 문서, 히스토리 등을 제어하기 위한 객체들의 집합입니다. 이번 글에서는 BOM을 활용하여 브라우저에서 동작하는 메모앱을 구현하는 방법에 대해 알아보겠습니다.

1. HTML과 CSS 구성

메모앱 구현을 위해 다음과 같은 HTML과 CSS 구성을 준비합니다.

HTML:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>메모앱</title>
</head>
<body>
  <div id="app">
    <textarea id="memo-input" placeholder="메모를 입력하세요"></textarea>
    <button id="save-button">저장</button>
    <ul id="memo-list"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
}

#app {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}

textarea {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  padding: 5px;
  font-size: 16px;
}

button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 10px;
}

2. JavaScript로 메모앱 구현

이제 JavaScript를 사용하여 메모앱의 동작을 구현해보겠습니다.

const memoInput = document.getElementById('memo-input');
const saveButton = document.getElementById('save-button');
const memoList = document.getElementById('memo-list');

// 저장 버튼 클릭 시, 새로운 메모를 생성하는 함수
function createMemo() {
  const memoText = memoInput.value;

  if (memoText.trim() !== '') {
    const li = document.createElement('li');
    li.textContent = memoText;

    memoList.appendChild(li);
    memoInput.value = '';
  }
}

// 저장 버튼 클릭 이벤트 리스너 등록
saveButton.addEventListener('click', createMemo);

위의 JavaScript 코드에서는 memo-input이라는 id를 가지는 textarea와 save-button이라는 id를 가지는 button 요소를 변수에 할당하고, createMemo라는 함수를 정의하여 저장 버튼이 클릭되었을 때 호출되도록 합니다. createMemo 함수는 textarea의 내용을 가져와서 비어있는지 확인한 후, 비어있지 않다면 새로운 li 요소를 생성하여 메모 리스트에 추가합니다.

3. 실행 및 테스트

모든 구성이 완료되었으니 이제 HTML 파일을 브라우저에서 열어 실행해보세요. 메모를 입력하고 저장 버튼을 클릭하면 입력한 메모가 리스트에 추가됩니다. 이렇게 BOM을 활용하여 간단한 메모앱을 구현할 수 있습니다.

결론

BOM을 활용하면 브라우저의 다양한 기능을 활용하여 웹 애플리케이션을 개발할 수 있습니다. 메모앱 구현 예제를 통해 BOM의 일부를 사용하여 브라우저에서 동작하는 애플리케이션을 구현하는 방법을 알아보았습니다. BOM을 잘 활용하면 사용자에게 더 편리한 웹 경험을 제공할 수 있습니다.

1. HTML과 CSS 구성

2. JavaScript로 메모앱 구현

3. 실행 및 테스트

결론

참고 자료