문서여행: 패키지 공식문서에 없는 메서드의 뿌리를 찾아서 / WebSocket, on, 객체지향, 상속

영화 "뿌리"의 포스터. 웹소켓 아이콘을 못 찾아서 집어넣었다.

 

미리 보는 결론:

 

만약 사용하는 패키지 오브젝트의 메서드나 속성이

해당 공식 문서에 없다면,

 

그 오브젝트를 정의할 때 상속받은 오브젝트가 존재하나 확인하고

관련 문서를 찾아봅시다.

 

 

 

on.. 어디서 온 녀석이지?

 

 

노마드코더의 zoom 무료 클론코딩 강의를 수강하던 중이었다.

이 강좌에선 메시지를 주고받기 위해 ws라는 패키지를 이용해 웹소켓 서버를 구축한다.

 

웹소켓 서버는 on 이벤트리스너를 통해 유저의 접속을 감지한다.

 

"connection"이벤트를 감지하면 콜백을 실행한다.

 

 

나는 이on에대해 조금 더 자세히 알고 싶었다.

메서드의 반환값이나 감지할 수 있는 이벤트종류등등을 이해한다면

더 다양한 기능을 구현할 수 있기 때문이다.

 

 

 chat gpt에게  webSocket의 on에 대한 질의를 작성하였으나,

서버문제로 먹통이었다.

 

 

그래서 웹소켓 서버와 관련된 인터넷 문서를 돌아다녔다.

하지만 어디에서도 on 에대한 정보를 찾을 수 없었다.

 

 

* 돌아다닌 문서들

 

웹소켓 관련 링크
MDN WebSocket 문서: https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
ws의 공식 npm 페이지: https://www.npmjs.com/package/ws
API 문서링크: https://javascript.info/websocket

 

 

 귀찮음을 무릅쓰고 webSocketServer 오브젝트를 직접 뒤적거리기 위해

콘솔에 출력해서 내부 속성과 메서드를 살펴보았다.

 

console.log(wsServer);

 

 

 

웹소켓 서버 오브젝트에on메서드는 직접 들어있지 않았다.

하지만 다음과 같은 항목이 내 시선을 사로잡았다.

 

_events: [Object: null prototype] {} 

 

 

프로토타입?

 

prototype이라는 키워드가 아래의 가설을 떠올리게 해 주었다.

 

공식 문서에 설명이 존재하지 않는다면 아마도 너무 기본적인 것이라 그런 게 아닐까?

 

on 메서드는 널리 보편적으로 상속되는

이벤트 관련 클래스(혹은 프로토타입)에서 온 것 같다.

 

 

WebSocket 오브젝트가 상속받은 클래스 (또는 프로토타입)를 찾아보기로 했다.

 

패키지 내부 node_modules 폴더에서 webSocket 정의 찾기.

 

우리가 설치한 패키지는 전부 node_modules 폴더에 저장되므로

그 안에서 패키지의 코드를 찾아보기로 했다.

 

 

 그렇게 node_modules/ws 파일들을 살펴보던 중,

  WebSocketServer의 선언코드를 발견했다!

 

WebSocketServer 클래스의 선언.

 

 

웹소켓 서버는 EventEmitter라는 클래스를 상속받고 있었다.

 

 

webSocket의 뿌리:  "EventEmitter"

 

  EventEmitter on 키워드로 구글링을 하자

해당 메서드를 설명하는 문서도 바로 찾을 수 있었다.

 

 

 

문서 사진 및 설명

https://nodejs.org/api/events.html#emitteroneventname-listener

emitter.on(이벤트 이름, 리스너)

emitter에 이벤트 리스너를 추가해 줍니다. 
첫 번째 인자로는 감지할 이벤트, 두 번째에는 감지를 알리는 콜백함수가 들어갑니다.
..(중략)

EventEmitter에 대한 참조를 반환합니다.
그러므로 연쇄적 호출을 구현할 수 있습니다.

 

위 문서를 통해 프로미스의 then처럼

on으로 체인을 만들 수 있다는 것을 알 수 있었다.

 

예시 코드

//오류가 발생하면 감지된 오류를 출력한다.

wsServer.on("connection", callback).on("error", (error)=>
      {console.log("This ended connection:"error);}
           );

 

 

이제 webSocketServer에대한 추가적인

공부를 할 수 있는 길이 열렸다.!

 

EventEmitter 객체의 문서를 살펴보면 되기 때문이다. 

 

 

 

하지만 지금은 저런것들을 하나하나 살펴볼 시간은 없으니

필요할 때 공부하기로 했다.

 

 

 

문서를 추적하는 한 가지 기술을 습득한 것 으로 만족한다.

 

 

문서에 설명이 없다면, 상속받은 항목의 문서를 살펴보자.

+@

 

노마드코더에선 무료로 챌린지라는 단기간 부트캠프를 운영하고 있습니다.

이론을 충분히 습득하신 분들은 도전해 보세요.

 

 

https://nomadcoders.co/challenges

 

*강의자체는 유료일 수 도있습니다. 코코아클론은 유료강의예요.

 

읽어주셔서 감사합니다.

오류나 오탈자가 있다면 댓글로 알려주세요.