[번역] Vue3 Coding Better Composables : 인터페이스를 잘 설계하여 컴포저블 잘 만들기

컴포저블용 인터페이스 작성에 대해 알아보고

이 프로세스가 먼 미래를 위해 확장 가능한 컴포저블을 만드는 데 어떻게 도움이 되는지 알아봅니다.

 

해당 문서의 번역입니다 : 

https://www.vuemastery.com/blog/coding-better-composables-4-of-5/

Coding Better Composables: Start with the Interface (4/5) | Vue Mastery

이전 시리즈 목록

2022.12.08 - [Vue.js] - [번역] Vue3 Coding Better Composables : 옵션 객체 파라미터 활용하여 컴포저블 잘 만들기

[번역] Vue3 Coding Better Composables : 옵션 객체 파라미터 활용하여 컴포저블 잘 만들기

2022.12.08 - [Vue.js] - [번역] Vue3 Coding Better Composables : ref 및 unref를 사용하여 유연한 컴포저블 만들기

[번역] Vue3 Coding Better Composables : ref 및 unref를 사용하여 유연한 컴포저블 만들기

2022.12.08 - [Vue.js] - [번역] Vue3 Coding Better Composables : 다형적인 리턴값을 활용하여 컴포저블 잘만들기

[번역] Vue3 Coding Better Composables : 다형적인 리턴값을 활용하여 컴포저블 잘만들기

---

인터페이스 먼저 작성하기

• 컴포저블은 앱과 다른 부분의 경계
  • 재사용 가능한 상태 포함 로직
• 구현 대신 컴포저블을 사용하는 방식부터 생각하기
  • 이는 구현보다 6개월 후에 인터페이스를 변경하기가 훨씬 더 어렵기 때문에 중요합니다.
  • 리팩토링이 필요한 엣지 케이스를 계속 발견하기 때문에 인터페이스가 계속 변경됩니다.
  • 대신 초기에 대부분의 엣지 케이스를 예상할 수 있다면 많은 고통과 좌절을 덜 수 있습니다.

1. 컴포저블에 어떤 인수를 전달합니까? ref?, primitive 값 또는 일련의 값(객체,배열)?
2. options 객체에는 어떤 옵션이 포함되어야 하나요?
3. 컴포저블은 어떤 값을 반환하나요?
   • 단일 값(ref, value)인가요?
   • 동적 반환 값 패턴을 사용하고 싶나요?

컴포저블의 실제 동작과는 별개로, 파라미터와 리턴 값에만 집중하여 인터페이스를 설계합니다.

---

 useMouse의 인터페이스 설계하기

useMouse 컴포저블의 인터페이스를 설계헤 봅시다.
해당 컴포저블을 통해 화면의 마우스 좌표에 액세스할 수 있습니다.
각 질문에 답하여 이 인터페이스를 어떻게 알아낼 수 있는지 봅시다. 

질문 1: 컴포저블에 어떤 인수를 전달하나요?

이 질문에 대한 대답은 간단합니다.
useMouse 컴포저블은 인수를 사용하지 않습니다.
대신 마우스 좌표가 우리에게 반환되고, 반응적으로 업데이트되기를 원합니다.

질문 2: option 객체에는 어떤 옵션이 포함되어야 하나요?

컴포저블이 마우스 움직임을 업데이트하므로 이러한 업데이트가 발생하는 빈도를 제어하는 ​​것이 좋을 수 있습니다.
이를 위해 해당 타이밍을 지정하는 간격 옵션을 사용할 수 있습니다.

 

화면 좌표와 관련한 훌륭한 질문은 다음과 같습니다.
무엇에 상대적인가요?
마우스 좌표를 사용하여 다음을 기준으로 좌표를 얻을 수 있습니다.

• 브라우저의 뷰포트
• 전체 문서
• 특정 요소

따라서 좌표 오프셋의 기준점이 되는 대상을 선택할 수 있는 두 번째 옵션인 target이 필요합니다.

좋은 기본값은 아마도 브라우저 뷰포트일 것입니다.

질문 3 : 컴포저블은 어떤 값을 반환하나요?

이 질문에 대한 대답은 처음부터 그렇게 명확하지 않습니다.
때때로 우리는 컴포저블을 사용하는 코드 작성을 시작하고 그 과정에서 컴포저블을 사용하려는 방법을 찾아야 합니다.
이 프로세스는 인터페이스가 무엇이어야 하는지에 대한 많은 단서를 제공할 수 있습니다.

좌표를 객체로 가져오는 것으로 프로토타이핑을 시작할 수 있습니다.

const { x, y } = useMouse();

프로토타이핑을 계속하면서 마우스가 클릭되는지 여부도 알아야 하므로 다음과 같이 추가합니다.

const { x, y, isClicked } = useMouse();

다소 투박합니다. 앱을 계속 작성하면서 실제로 필요한 것은 별도의 객체에서 마우스 좌표를 가져오는 것임을 깨달았습니다.

const { position, isClicked } = useMouse();

때때로 좌표를 배열로 갖는 것이 편리하다는 것을 발견할 수 있습니다.
인터페이스에 다음(positionArr)을 포함할 수 있습니다.

const {
  position,
  positionArr,
  isClicked,
} = useMouse();

이제 우리는 useMouse 컴포저블을 어떻게 사용하고 싶은지 꽤 잘 이해했습니다.

그러나 물론 요구 사항은 시간이 지남에 따라 변경되므로 확정되지 않았습니다.

하지만 약간의 프로토타이핑을 통해 인터페이스가 얼마나 변경되었는지 확인할 수 있습니다.

첫 번째 추측만 했다면 곧 리팩터링해야 하는 컴포저블을 작성했을 것입니다.

---

정리

우리는 처음에 컴포저블을 어떻게 사용할 것인지에 대해 비판적으로 생각함으로써 더 나은 구현을 작성할 수 있다는 것을 배웠습니다.
이를 통해 더 나은 구현을 작성함으로써 우리는 미래의 시간낭비와과 좌절을 피할 수 있습니다
컴포저블을 사용하는 방법에 대해 신중하게 생각하면 리팩토링을 많이 할 필요가 없습니다.

 

물론 이 과정에 너무 많은 시간을 할애하고 싶지는 않습니다.

예상할 수 있는 것은 너무 많으며 요구 사항이 자주 변경될 수 있다는 것을 모두 알고 있습니다.

완벽한 인터페이스는 없지만 처음에 약간의 노력을 기울이면 많은 골칫거리를 피할 수 있습니다.