본문 바로가기
JavaScript 프로젝트 시리즈

[JavaScript 프로젝트 시리즈] 6일차: JavaScript로 RESTful API 연동하기

by cogito21_js 2024. 8. 6.
반응형

6. RESTful API와 연동하기

프로젝트 개요

이번 프로젝트에서는 JavaScript를 사용하여 RESTful API와 연동하는 방법을 알아보겠습니다. JSONPlaceholder API를 사용하여 게시물을 가져오고, 추가하고, 수정하고, 삭제하는 간단한 애플리케이션을 만들어보겠습니다.

준비물

단계 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>RESTful API Integration</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Posts</h1>
    <form id="post-form">
      <input type="text" id="post-title" placeholder="Title" required>
      <textarea id="post-body" placeholder="Body" required></textarea>
      <button type="submit">Add Post</button>
    </form>
    <ul id="post-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 {
  width: 100%;
  max-width: 600px;
  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;
  margin-bottom: 20px;
}

input, textarea {
  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;
}

li:last-child {
  border-bottom: none;
}

button.edit, button.delete {
  background-color: #ffc107;
  margin-left: 10px;
}

button.edit:hover {
  background-color: #e0a800;
}

button.delete {
  background-color: #dc3545;
}

button.delete:hover {
  background-color: #c82333;
}

단계 3: JavaScript로 기능 구현하기

이제 JavaScript를 사용하여 RESTful API와 연동하는 기능을 구현합니다.

// script.js
document.addEventListener('DOMContentLoaded', function() {
  const postForm = document.getElementById('post-form');
  const postTitle = document.getElementById('post-title');
  const postBody = document.getElementById('post-body');
  const postList = document.getElementById('post-list');

  // 게시물 가져오기
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(posts => {
      posts.forEach(post => {
        displayPost(post);
      });
    });

  // 게시물 추가하기
  postForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const title = postTitle.value.trim();
    const body = postBody.value.trim();

    if (title && body) {
      const newPost = {
        title,
        body
      };

      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(newPost)
      })
        .then(response => response.json())
        .then(post => {
          displayPost(post);
          postTitle.value = '';
          postBody.value = '';
        });
    }
  });

  // 게시물 표시하기
  function displayPost(post) {
    const li = document.createElement('li');
    li.dataset.id = post.id;
    li.innerHTML = `
      <div>
        <h3>${post.title}</h3>
        <p>${post.body}</p>
      </div>
      <div>
        <button class="edit">Edit</button>
        <button class="delete">Delete</button>
      </div>
    `;

    const editButton = li.querySelector('.edit');
    const deleteButton = li.querySelector('.delete');

    editButton.addEventListener('click', () => editPost(post, li));
    deleteButton.addEventListener('click', () => deletePost(post.id, li));

    postList.appendChild(li);
  }

  // 게시물 수정하기
  function editPost(post, li) {
    const newTitle = prompt('Enter new title', post.title);
    const newBody = prompt('Enter new body', post.body);

    if (newTitle && newBody) {
      const updatedPost = {
        ...post,
        title: newTitle,
        body: newBody
      };

      fetch(`https://jsonplaceholder.typicode.com/posts/${post.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(updatedPost)
      })
        .then(response => response.json())
        .then(updatedPost => {
          li.querySelector('h3').textContent = updatedPost.title;
          li.querySelector('p').textContent = updatedPost.body;
        });
    }
  }

  // 게시물 삭제하기
  function deletePost(id, li) {
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
      method: 'DELETE'
    }).then(() => {
      postList.removeChild(li);
    });
  }
});

결론

이로써 RESTful API와 연동하는 간단한 애플리케이션을 완성했습니다. 사용자는 게시물을 가져오고, 추가하고, 수정하고, 삭제할 수 있습니다. 이 프로젝트를 통해 JavaScript와 RESTful API를 활용하여 데이터를 관리하는 방법을 배울 수 있습니다.

다음 글에서는 프런트엔드 프레임워크와 통합하기에 대해 알아보겠습니다. 다음 글에서 만나요!

반응형
저작자표시

'JavaScript 프로젝트 시리즈' 카테고리의 다른 글

[JavaScript 프로젝트 시리즈] 7일차: JavaScript로 프런트엔드 프레임워크와 통합하기  (0) 2024.08.07
[JavaScript 프로젝트 시리즈] 5일차: JavaScript로 간단한 채팅 애플리케이션 만들기  (0) 2024.08.05
[JavaScript 프로젝트 시리즈]4일차: JavaScript로 로컬 스토리지를 이용한 메모 앱 만들기  (0) 2024.08.04
[JavaScript 프로젝트 시리즈] 3일차: JavaScript로 간단한 틱택토 게임 만들기  (0) 2024.08.03
[JavaScript 프로젝트 시리즈] 2일차: JavaScript로 날씨 API를 이용한 날씨 앱 만들기  (0) 2024.08.02

관련글

티스토리툴바