웹 소켓을 이용 하려면

안녕하세요. EH님!

아닙니다. WebSocket은 브라우저 자체에서 제공합니다. (관련 문서)

하지만 socket.io 라이브러리를 사용하면 WebSocket을 편하게 사용할 수 있습니다.

클라이언트에서 socket.io 라이브러리를 사용하기 위해 cdn 서비스를 사용할 수 있습니다. 즉, 스크립트 태그를 통해서 자바스크립트를 브라우저에서 실행할 수 있는데 아래와 같이 src="https:// ..." 을 통해서 웹 URL로 코드들을 끼워넣어서 사용할 수 있다는 것입니다.

<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>

<script>
 const socket = io();
</script>

https://cdn.socket.io/3.1.3/socket.io.min.js 에 들어가면 코드를 확인할 수 있습니다. (코드 뭉치를 삽입한 것이죠)

이와 비슷하게 아래의 코드는 "babel"이라는 코드 뭉치를 URL을 통해서 가져옵니다. "babel" 패키지는 자바스크립트 코드의 브라우저 호환성을 지켜줍니다. 예를들어 최신 자바스크립트 문법인 에로우 문법 (()=>{...}) 등을 구형 브라우저에서도 동작할 수 있도록 도와주는 것이죠. 해당 패키지는 저희 프로젝트를 진행함에 있어서 사실 필요는 없지만 이런게 있다는 느낌으로 삽입하고 넘어갔습니다.

또한 아래의 코드는 polyfill로 바벨과 비슷하게 브라우저 호환성을 지켜줍니다. 바벨은 ESNext에서 지원하는 문법을 ES5 문법으로 번역해주지만 ES5에 존재하지 않는 문법(Map, Promise 등)은 번역하지 못합니다. 이를 도와주는 패키지라고 생각하시면 됩니다. 해당 패키지 또한 저희 프로젝트를 진행함에 있어서 필요는 없습니다. (해당 문법을 사용하지 않기 때문에)

<script src='https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019'></script>

혹시 이해가 되지 않으시면 추가 보충 강의로 설명해 드리겠습니다. :)

감사합니다!

인프런 커뮤니티 질문&답변