자바스크립트로 게시판 애플리케이션 개발 방법

13 Oct 2023

javascript

이번 블로그 포스트에서는 자바스크립트로 간단한 게시판 애플리케이션을 개발하는 방법에 대해 알아보겠습니다. 자바스크립트를 사용하여 동적으로 데이터를 처리하고 화면에 표시하는 실시간 게시판을 만드는 것을 목표로 합니다.

1. 초기 설정과 HTML 마크업

먼저, HTML 파일을 만들고 게시판의 기본 형태를 마크업합니다. 게시글을 표시할 <div>와 새로운 글을 작성할 수 있는 입력 폼을 만들어줍니다. 또한, 게시글 목록을 표시할 <ul>을 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <title>자바스크립트 게시판 애플리케이션</title>
</head>
<body>
    <h1>게시판</h1>
    
    <div id="postContainer">
        <!-- 게시글 표시할 div -->
    </div>
    
    <form id="postForm">
        <input type="text" id="authorInput" placeholder="작성자" required>
        <input type="text" id="titleInput" placeholder="제목" required>
        <textarea id="contentInput" placeholder="내용" required></textarea>
        <button type="submit">작성</button>
    </form>
    
    <ul id="postList">
        <!-- 게시글 목록 표시할 ul -->
    </ul>

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

2. 자바스크립트로 데이터 처리 및 화면 업데이트

위의 HTML 마크업에서 확인할 수 있듯이, 자바스크립트 파일인 app.js를 추가하였습니다. 이제 자바스크립트 코드를 작성하여 데이터를 처리하고 화면을 업데이트하도록 구현해보겠습니다.

// 게시글 데이터 배열
let posts = [];

// 게시글 작성 폼
const form = document.querySelector('#postForm');
const authorInput = document.querySelector('#authorInput');
const titleInput = document.querySelector('#titleInput');
const contentInput = document.querySelector('#contentInput');

// 게시글 목록
const postList = document.querySelector('#postList');

// 게시글 추가 함수
function addPost(author, title, content) {
    const post = {
        id: posts.length + 1,
        author,
        title,
        content
    };
    
    posts.push(post);
    renderPost(post);
}

// 게시글 렌더링 함수
function renderPost(post) {
    const li = document.createElement('li');
    li.innerHTML = `
        <h3>${post.title}</h3>
        <p>${post.author}</p>
        <p>${post.content}</p>
    `;
    
    postList.appendChild(li);
}

// 폼 제출 이벤트 리스너
form.addEventListener('submit', (e) => {
    e.preventDefault();
    const author = authorInput.value;
    const title = titleInput.value;
    const content = contentInput.value;
    
    addPost(author, title, content);
    
    authorInput.value = '';
    titleInput.value = '';
    contentInput.value = '';
});

위의 자바스크립트 코드는 다음 작업을 수행합니다.

addPost 함수: 새로운 게시글을 생성하여 posts 배열에 추가하고, renderPost 함수를 호출하여 화면에 게시글을 렌더링합니다.
renderPost 함수: 게시글 객체를 받아와 화면에 HTML 요소를 생성하여 게시글을 표시합니다.
폼 제출 이벤트 리스너: 사용자가 폼을 작성하고 제출할 때 addPost 함수를 호출하여 새로운 게시글을 추가합니다.

3. 테스트 및 결과 확인

이제 브라우저에서 해당 HTML 파일을 열어 게시판 애플리케이션을 테스트해보세요. 게시글을 작성하고 제출하면, 입력한 게시글이 목록에 추가되면서 화면에 표시될 것입니다.

결론

이렇게 자바스크립트를 사용하여 간단한 게시판 애플리케이션을 개발하는 방법을 알아보았습니다. 이제 이 코드를 기반으로 더 많은 기능과 디자인을 추가하여 완성도 있는 게시판을 구현할 수 있습니다. 자바스크립트의 다양한 기능과 라이브러리를 활용하여 웹 애플리케이션을 개발해보세요.