API 설계에 대한 중요성

API 설계에 대한 중요성

안녕하세요 TriplexLab입니다.

오늘은 API 설계에 대한 중요성 관해서 이야기를 공유하려고 합니다.

이번 글은 항해 99 7기 실전 프로젝트 5주 차를 지나면서 실제로 있었던 에피소드입니다.

먼저 API 설계라는 것은 프론트앤드 개발자와, 백앤드 개발자와의 소통을 하는데 서로 약속을 미리 정해놓는 문서라고 생각하면 됩니다.

그 문서는 다음과 같이 생겼습니다.
(간단예시로 회원가입쪽 API만 가져왔습니다.)

API 설계 문서

👉🏻API를 설계할때 반드시 가독성이 좋은 딕셔너리 구조를 활용해서 만들어야 합니다.

우리팀은 처음에 API 설계를 할때 어떻게 설계를 하면 좋을지 감이 없는 상태였기 때문에 딕셔너리 구조를 사용하지 않고, 

data: {
	userName: 'TriplexLab',
	gender: 'Man',
	careSize: [ true, false, true] //이런 배열형태에 boolean값을 넣는것으로 설계함.
}

🤦🏻  문제 상황

위와 같이 배열형태로 Boolean값으로 설계를 하여 컴포넌트를 동적으로 처리를 하기 까다로운 상황[코드 참고]

내가 격은 문제의 상황

위에 이미지에서 강조한 케어 가능 범위 "소형견","중형견","대형견" 체크박스로 되어 있는데
저 부분의 컴포넌트를 동적으로 만들기 까다로워질것이고 어떻게 조건을 잘 걸어서 어떻게 구현은 했다 하더라도 굳이 안해도 되는
행위를 하게 될것 입니다.

이런 문제는 곧 사용자 경험에 문제로 이어집니다. 즉 사용자들이 우리 사이트를 이용하다가 불편하다라고 느낄것 입니다.
(수정을 했는데 바로 수정된 데이터가 반영되서 보여지는것이 아니라, 수동으로 새로고침을 해야만 수정된 데이터가 반영되어서 보여질것이기 때문입니다.)

🧑🏻‍💻느낀점

다음과 같이 API설계를 구성했어도 컴포넌트에서 조건을 작성할 필요없이 매우 심플하게 코드를 작성할수 있을거라 생각합니다.
그러면 자연스럽게 사용자 경험 측면에서도 매우 좋은 웹사이트가 될것이라 생각합니다.

data: {
    userName: 'TriplexLab',
    gender: 'Man',
    carSize: { // 내가 생각한 API 설계
        smallPet: true,
        mediumPet: false,
        largePet: true
    }
}