🍝 리액트에서 스파게티 WebRTC 코드 Class로 추상화하기 🍝

캡스톤 프로젝트를 진행하며 화상통화를 위해 WebRTC를 사용하게 되었다. 나는 관련 강의는 들어봤지만 WebRTC를 프로젝트에 적용하는 것은 처음이었지만, 강의와 구글링의 도움으로 화상통화 기능 구현에 성공했다. 그러나...

아니 코드가 왜케 길어?!? 정말 못 봐주겠네!!!!!

리액트를 사용하면서 재사용성은 0이고 심지어 읽기도 어려운 더티코드는 참을 수 없어서, WebRTC 관련 로직을 어떻게 분리할까 고민했다. 일단 아래는 기존의 코드다. 참고로 이 포스팅에서 코드는 그닥 중요하지 않으니 굳이 다 읽을 필요 없다.

당시 필요한 리팩토링은 두 가지였다.

1. let 사용을 지양하자
2. WebRTC 관련 코드와 socket의 이벤트 리스너를 분리하자

이를 해결하기 위해 자바스크립트의 Class를 이용하기로 했다.

클래스

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

처음에 클래스의 constructor로 peerConnection, socket, roomId를 초기화하고, 기존의 로직을 메서드로 만들었다. 결과는 다음과 같다.

이제 됐다!! 클래스를 이용해 로직을 분리했으니 코드도 깔끔해졌고, 기능도 잘 돌아가겠지? 라고 생각했을 때 this = undefined라는 에러가 발생했다.

객체 메서드가 객체 내부가 아닌 다른 곳에 전달 후 호출되어 this가 사라진 것이다. 컨택스트를 잃어버린 this는 당연하게도 undefined가 되었다.

함수 바인딩

컨택스트를 유지하기 위해서 함수 바인딩을 해야 한다.

function.prototype.bind()

bind() 메소드가 호출되면 새로운 함수를 생성한다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공된다.

let user = {
  firstName: "John"
};

function func() {
  alert(this.firstName);
}

let funcUser = func.bind(user);
funcUser(); // John

이를 이용해 생성자 함수에서 메서드를 명시적으로 binding 할 수 있다. 다만 바인딩이 필요한 함수를 매번 생성자 함수에 추가해야 하는 단점이 있다.

또한 함수를 호출할 때 binding 할 수 있다. 이 방법은 가독성이 떨어지는 단점이 있다.

화살표 함수

화살표 함수에는 this가 없다

화살표 함수에는 this가 없기 때문에, 클래스 내부 메서드를 화살표 함수로 정의한다면 생성자에 대해 관리할 필요가 없다.

대신 this가 없기 때문에 화살표 함수는 생성자 함수(new)로 사용할 수 없다는 제약이 없다는 것을 명심하자.

세 가지의 방법 중 나는 클래스 내부 메서드를 화살표 함수로 정의하기를 선택했다. 최종 코드는 다음과 같다.

결론

WebRTC 관련 코드와 socket의 이벤트 리스너를 Class로 추상화함으로써, 기존보다 코드 가독성이 좋아졌다.
프론트엔드 공부를 리액트로 프로젝트에 참여하는 것으로 시작해, 자바스크립트로 프로젝트를 진행한 적이 없었다. 그렇기에 자바스크립트 공부의 효용성을 느끼기 어려웠다. 로직을 클래스로 추상화하는 경험을 통해서 덕분에 자바스크립트에 대해 많은 관심이 생겼다. 앞으로 자바스크립트 공부 열심히 해야쥐~!!

참고자료

모던 자바스크립트 튜토리얼

자세한 코드는 github에서 확인할 수 있다