[AWS] 로컬버전 칸반보드 완성하기

api.js 요구 기능 정리

API 요구기능

CRUD(Create, Read, Update, Delete)

1. 카드 불러오기

   • 입력 : x
   • 반환 : 전체 카드 리스트

2. 카드 생성하기

   • 입력 : 카드객체
   • 반환 : id 반환

3. 카드 업데이트

   • 입력 : 카드객체
   • 반환 : x

4. 카드 삭제

   • 입력 : id
   • 반환 : x

카드 클래스 정의

1. id

   • 카드 id

2. category

   • todo
   • ongoing
   • test
   • done

3. title

   • 카드 내용

4. cardElement

   • HTML

로컬버전 api.js 임시 저장소

export default class APIHandler {
  constructor() {
    this.dummyData = [
      {
        id: "abc123",
        title: "데이터베이스 구축하기",
        category: "ongoing"
      },
      {
        id: "def456",
        title: "데이터베이스 삭제하기",
        category: "todo"
      }
    ];
  }

전체 카드 객체 리스트 반환. 없으면 NULL

async getCards() {
    if (this.dummyData.length === 0) {
      return null;
    } else {
      return this.dummyData;
    }
  }

카드 객체 생성/추가 후 ID 반환

async postCard(cardObj) {
    let id = Math.round(Math.random() * 10000).toString();
    this.dummyData.push({
      id: id,
      title: cardObj.title,
      category: cardObj.category
    });
    console.log(this.dummyData);
    return id;
  }

ID로 카드 검색 후 내용,카테고리 수정

async putCard(cardObj) {
    this.dummyData = this.dummyData.map(card => {
      return card.id === cardObj.id
        ? { ...card, category: cardObj.category, title: cardObj.title }
        : card;
    });
    console.log(this.dummyData)
  }

ID로 카드 검색 후 삭제

  async deleteCard(id) {
    this.dummyData = this.dummyData.filter(card =>{
      return card.id !== id
    });
    console.log(this.dummyData);
  }