2021/09/27 : 이미 존재하는 API 객체를 적극 활용하자 (feat. MessageChannelAPI)

javascript에는 이미 구현된 API 객체가 많다.

쿼리 스트링을 담당하는 URLSearchParams가 있을 것이고,

주소를 다루는 URL이 있을 것이고,

데이터를 다루는 Date도 있을 것이다.

또한, iframe간의 통신을 다루는 MessageChannelAPI도 있을것이다.

 

이미 존재하는 API객체를 사용하면 장점이 있다.

1. 해당 역할을 온전히 API객체에 위임하여 제한할 수 있다.

 

예를들어서, 쿼리스트링은 다음과 같은 하드코딩으로 직접 구현할 수 있다.

`/index.html?$projectKey={projectKey}`

하지만, 이러한 하드코딩 방식은 복잡해질수록 휴먼에러를 발생시킬 확률이 높다.

 

이미존재하는 URLSearchParamsAPI를 사용하면 다음과 같은 구조가 된다.

const urlParams = new URLSearchParams(END_POINT + "?");
  urlParams.set("url", currentURL);
  urlParams.set("projectKey", projectKey);

코드는 늘어났지만, param을 set하는 메서드를 사용함으로써 가독성이 높아졌고, 디버깅이 용이해졌다.

 

이제부터 쿼리스트링의 모든 조작은 URLSearchParams만 조작하고 유지보수하면되기 때문이다.

또한, 내부적으로 예외처리등의 로직 최적화가 되어있어서 안심하고 사용할 수 있다.

 

(사실 URLSearchParams를 사용하는 것은 리팩터링을 하지 않은 상태)

 

2. 사이드 이펙트가 줄어든다.

1과 비슷한 맥락이지만, 이미 존재하는 API 객체를 사용하지 않고, 직접 구현하는 것은 휴먼에러를 발생시킬 확률이 높다.

low level의 조작이 필요한게 아니면 적극활용하는 것이 좋을 것이다.

이렇게 특정 역할을 특정 객체에 할당하는 것은 객체지향적인 프로그래밍과도 결이 맞다고 생각한다.

 

이러한 이유로 현재 우아한테크코스에서 진행하고 있는 프로젝트인

"다라쓰"(https://github.com/woowacourse-teams/2021-darass)

에서 iframe간 통신을 할때 MessageChannelAPI를 사용하기로 했다.

 

원래는 아래 2가지 메서드로 구현을 했었다.

window.parent.postMessage(data,"*");

window.addEventListener("message", callback);

 

깔끔하게 동작도 성공했다!

 

하지만, iframe간의 데이터 전송이 잦을 수록, 코드 곳곳에 window객체를 사용하는 부분이 많아질 것이다.

이게 정말 괜찮은 코드인지 다시한번 생각하게 되었다.

 

window객체는 전역객체이고, 전역객체에대한 조작을 여러곳에서 잦게하는것은 결코 좋은 코드가 아니라는 결론에 도달하였다.

거의 전역변수를 남용하는 것과 동일하다는 판단이었다.

 

그래서 MessageChannelAPI객체를 따로 선언하여, 최초 port를 공유할때에만 window객체를 사용하고,

그 외의 데이터 전송에서는 MessageChannelAPI객체만을 사용하여 데이터 통신을 할 수 있게 구현하였다.

 

MessageChannelAPI의 port의 공유는 1번밖에 안되고~ port1는 현재 window가, port2는 다른 window에 공유를 하여 셋팅을 해야하고~~ 등등의 구현상의 어려움도 있었고, iframe 통신 관련 로직들을 대대적으로 개편하는 작업을 했고, 어제 시작하여 순수 작업시간 14시간만에 교체를 완료하였다.

 

이제 window객체를 사용했던 부분들이 iframe통신만 담당하는 객체로 교체되었으므로, 냄새가 많이 사라진것같다.

이제 URLSearchParams 객체를 사용하여 하드코딩된 쿼리스트링을 대체하는 리팩터링을 해야겠다.

 

커밋:

https://github.com/woowacourse-teams/2021-darass/commit/c8e54e52c83ba87b14e01deabb128af4903dff82