답수실Log | 230110 | vue | 이벤트 핸들러 array 지원 X

 

오늘 @click의 이벤트 핸들러에 코드 리뷰를 받았다. 기존에 다음과 같이 작성되었었다.

<p
  @click="[triggerNotificationEvent(notification), $emit("read-notifications", [notification._id])]"
>
  {{ notification.description }}
</p>

 

나는 @click에 여러 메서드를 이용하기 위해 배열을 이용하여 메서드를 적용했었다. 그리고 이는 정상적으로 작동이 되었었다. 하지만 사수님의 피드백은 다음과 같았다.

 

vue의 이벤트 핸들러는 array를 지원하지 않는다. 이게 정상적으로 작동했던 이유는 배열을 선언하는 동안 메서드가 호출되었기 떄문이다.

 

즉, 이는 그냥 콤마, 혹은 세미콜론을 이용하여 여러 메소드를 사용할 수 있었다.

<p
  @click="triggerNotificationEvent(notification), $emit("read-notifications", [notification._id])"
>
  {{ notification.description }}
</p>

 

하지만 사수님의 경우 이벤트 핸들러의 따옴표  사이 역시 자바스크립트 코드로 보기 때문에 스크립트와 동일하게 작용한다고 하였고, 이를 고려했을 때 콤마 보다는 세미콜론과 줄바꿈을 통해 스크립트처럼 작성하는 것이 우리팀의 코드 성향과 맞다고 볼 수 있다.

<p
  @click="
    triggerNotificationEvent(notification);
    $emit("read-notifications", [notification._id]);
  "
>
  {{ notification.description }}
</p>

 

사실 이런 사소한 부분들은 서비스를 운영하는데 있어서 문제되지 않다고 여길수도 있다. 그러나 개인적으로는 코드 퀄리티에서 타협하지 않으면서 협업한다는 것을 느낄 수있어서 매우 만족한다. 앞으로 좋은 개발자로 성장하는 데 있어서 이런 디테일들을 챙길 수 있도록 더 노력해야 할 것 같다.