자바스크립트에서 JSON 데이터를 이용하여 게시물 관리 기능 생성하기

15 Sep 2023

javascript

JSON(JavaScript Object Notation)은 데이터를 저장하고 교환하기 위한 가벼운 형식입니다. 자바스크립트에서는 JSON 데이터를 이용하여 다양한 기능을 구현할 수 있습니다. 이번 포스트에서는 JSON 데이터를 활용하여 간단한 게시물 관리 기능을 생성하는 방법을 알아보겠습니다.

JSON 데이터 초기화하기

const posts = [
    {
        id: 1,
        title: "첫 번째 게시물",
        content: "첫 번째 게시물 내용입니다.",
        author: "사용자A"
    },
    {
        id: 2,
        title: "두 번째 게시물",
        content: "두 번째 게시물 내용입니다.",
        author: "사용자B"
    },
    {
        id: 3,
        title: "세 번째 게시물",
        content: "세 번째 게시물 내용입니다.",
        author: "사용자C"
    }
];

먼저, 게시물 정보를 담은 JSON 데이터를 초기화합니다. posts 배열에 게시물의 정보를 객체 형태로 저장합니다. 각 게시물 객체는 id, title, content, author라는 속성을 갖습니다.

게시물 목록 출력하기

function showPosts() {
    for (let post of posts) {
        console.log("제목:", post.title);
        console.log("내용:", post.content);
        console.log("작성자:", post.author);
        console.log("==============================");
    }
}

showPosts();

위의 코드는 showPosts 함수를 정의하여 게시물 목록을 출력하는 예시입니다. for...of 문을 사용하여 posts 배열을 순회하면서 각 게시물의 정보를 콘솔에 출력합니다.

새로운 게시물 추가하기

function addPost(title, content, author) {
    const newPost = {
        id: posts.length + 1,
        title,
        content,
        author
    };
    posts.push(newPost);
}

addPost("네 번째 게시물", "네 번째 게시물 내용입니다.", "사용자D");

addPost 함수를 이용하여 새로운 게시물을 추가할 수 있습니다. 함수는 title, content, author를 인자로 받아 새로운 게시물 객체를 생성하고 posts 배열에 추가합니다. id는 기존 게시물 개수에 1을 더한 값으로 설정됩니다. 위의 예제에서는 “네 번째 게시물”을 추가하였습니다.

게시물 삭제하기

function deletePost(id) {
    const index = posts.findIndex(post => post.id === id);
    if (index !== -1) {
        posts.splice(index, 1);
    }
}

deletePost(2);

deletePost 함수는 id를 인자로 받아 해당하는 게시물을 posts 배열에서 삭제합니다. findIndex 메서드를 사용하여 id와 일치하는 게시물의 인덱스를 찾고, splice 메서드를 이용하여 해당 게시물을 배열에서 제거합니다. 위의 예제에서는 id가 2인 게시물을 삭제하였습니다.

이러한 방식으로 JSON 데이터를 활용하여 게시물 관리 기능을 생성할 수 있습니다. JSON 데이터를 활용하면 데이터를 구조화하고 다루기 쉽게 만들어줍니다. 게시판, 블로그, 포럼 등 다양한 웹 애플리케이션에 적용할 수 있는 게시물 관리 기능을 만들어보세요! 💪

#json #자바스크립트 #게시물관리