자바스크립트에서 JSON 데이터를 이용하여 작업 일정 관리 기능 생성하기

15 Sep 2023

javascript

개요

작업 일정 관리는 많은 개인이나 조직에서 필요로 하는 기능입니다. 이번 포스트에서는 자바스크립트와 JSON 데이터를 활용하여 작업 일정 관리 기능을 만드는 방법에 대해 알아보겠습니다.

JSON 데이터 구조 설계

작업 일정을 관리하기 위해서는 적절한 데이터 구조를 설계해야 합니다. JSON 데이터는 키-값 쌍의 집합으로 이루어져 있으며, 다음과 같은 형태로 구성될 수 있습니다:

[
  {
    "id": 1,
    "title": "예제 작업 1",
    "dueDate": "2022-01-31",
    "status": "진행 중"
  },
  {
    "id": 2,
    "title": "예제 작업 2",
    "dueDate": "2022-02-15",
    "status": "완료"
  }
]

위의 예시에서, 각 작업은 id, title, dueDate, status라는 속성을 가지고 있습니다. 이 데이터 구조를 기반으로 작업 일정 관리 기능을 구현해보겠습니다.

작업 일정 추가하기

function addTask(task) {
  // JSON 데이터 가져오기
  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

  // 작업 ID 생성
  const id = tasks.length > 0 ? tasks[tasks.length - 1].id + 1 : 1;

  // 입력받은 작업 추가
  tasks.push({ id, ...task });

  // 변경된 데이터 저장
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

위의 코드는 작업을 추가하는 기능을 구현한 예시입니다. addTask 함수는 task라는 매개변수로 작업 객체를 전달받아 JSON 데이터에 추가합니다. 로컬 스토리지를 이용하여 작업 목록을 저장하고 관리합니다.

작업 일정 조회하기

function getTasks() {
  // JSON 데이터 가져오기
  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

  return tasks;
}

위의 코드는 작업 일정을 조회하는 기능을 구현한 예시입니다. getTasks 함수는 로컬 스토리지에서 JSON 데이터를 가져와서 반환합니다.

작업 일정 삭제하기

function deleteTask(id) {
  // JSON 데이터 가져오기
  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

  // 삭제할 작업 필터링
  tasks = tasks.filter(task => task.id !== id);

  // 변경된 데이터 저장
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

위의 코드는 특정 작업을 삭제하는 기능을 구현한 예시입니다. deleteTask 함수는 id라는 매개변수로 작업 ID를 전달받아 해당 작업을 JSON 데이터에서 삭제합니다.

결론

이번 포스트에서는 자바스크립트와 JSON 데이터를 활용하여 작업 일정 관리 기능을 만드는 방법을 알아보았습니다. JSON 데이터를 읽고 추가, 수정, 삭제하는 간단한 함수를 작성하여 작업 일정을 관리할 수 있습니다. 이를 기반으로 더 복잡한 기능을 추가하여 작업 일정 관리 시스템을 구축할 수도 있습니다.

해시태그

#자바스크립트 #JSON데이터