Digimon project : 백엔드 프로젝트 - Category 설계

 

메인 포스팅의 카테고리 api를 설계하다가 문득, tistory처럼 카테고리 수정 api를 만들고 싶어졌다.

tistory의 카테고리 관리는 생성, 수정을 웹 홈페이지에서 하고 변경사항 저장을 눌러서 한 꺼번에 추가, 수정된 카테고리를 보낸다.

 

tistory의 카테고리 수정 화면. 변경사항 저장으로 변경된 카테고리들을 한번에 날리는 것으로 보인다.

 

이것을 어떤식으로 api를 만들어야 할까... 고민하다가 문득 든 생각을 적어본다.

 

Client측에서 보내는 속성 { type, id, name, parentId, orderId } 로 한다.

여기서 type은 create, update, delete, stay가 있으며, 생성되는 카테고리면 create, 수정되는 카테고리면 update, 삭제되는 카테고리면 delete, 그것도 아니면 stay를 타입이다.

 

이 때, type을 판단하는 방법은 다음과 같다.

사용자가 "추가" 버튼을 눌러서 생성한 카테고리는 무조건 create type이다.

사용자가 "수정" 버튼을 눌러서 수정한 카테고리는 무조건 update type이다.

사용자가 "삭제" 버튼을 눌러서 삭제한 카테고리는 무조건 delete type이다.

사용자가 드래그 앤 드롭으로 옮겨서 수정한 카테고리는 무조건 update type이다.

그 외에 서버에서 불러온 카테고리들의 타입은 stay이다.

 

아마, 프론트에서 NodeChild를 추가할 때, create, update마다 class를 다르게 설정을 해서 해당 클래스 이름에 따라 type을 붙여서 객체에 추가하고, fetch를 날리면 될 듯하다.

 

---

음.. 내가 아직 프론트를 잘 몰라서 그럴수도 있는데 위의 방법 말고, 그냥 객체 하나 정의해서 거기다가 create, update, delete 속성에 하나하나 추가하는 방법이 더 나을 것 같다.

 

순서

1. Client가 원래 존재하던 카테고리를 Get요청으로 불러온다.
   • response data : { data : { categories : Array<MainPostingCategory> } }
2. Client가 추가, 수정, 삭제한 카테고리를 객체에 넣고 request를 보낸다.
   • 추가한 경우 create 속성에 해당 카테고리 정보를 넣는다.
   • 수정한 경우 update 속성에 해당 카테고리 수정 정보를 넣는다.
   • 삭제한 경우 delete 속성에 해당 카테고리 id를 넣는다.
   • request data : { create : Array<{name, parentId, orderId}>, update : Array<MainPostingCategory>, delete : Array<number> }
3. Server에 준비되어 있는 insert, update, delete api를 통해 해당 카테고리들을 각각 처리한다.

async updateAllCategories(body) {
	const createdCategories: Array<{id: number, name: string, ...}> = body.create;
    const updatedCategories: Array<MainPostingCategory> = body.update;
    const deletedCategories: Array<number> = body.delete;
    
    const isCreated: boolean = await this.service.createCategories(createdCategories);
    const isUpdated: boolean = await this.service.updateCategories(updatedCategoreis);
    const isDeleted: boolean = await this.service.deleteCategoreis(deletedCategories);
    
    return { isCreated, isUpdated, isDeleted }
}

약간 이런 느낌으로?

 

 

좋아 그럼 이제 시작해보자!