|
https://blog.naver.com/rock1192/222743092527
클론코딩 인터넷강의로 유명한 노마드코더의 니꼴라스쌤의 클론코딩 시리즈 중 실시간 화상채팅 서비스 줌을 클론 해볼 수 있게 구성된 도서이다
https://github.com/penguingoon89/noom
줌 클론코딩 무료 강의
이 책을 통해 클론코딩해 볼 기능들은 아래와 같다 1. 실시간 채팅 기능 구현하기 2. 채팅룸 기능 구현하기 3. 화상 채팅 기능 구현하기
IDE툴로는 비주얼 스튜디어 코드를 설치하고 프로젝트를 생성한다 npm init을 통해 프로젝트를 초기화하고 서버를 위한 준비작업을 한다 서버는 Node.js 기반으로 개발하며 nodemon을 설치하면 개발을 하면서 서버를 자동으로 갱신되도록 할 수 있다 보다 빠르게 소스코드가 개발에 반영된 결괄르 확인할 수 있다 이후로 bebel과 서버 파일 및 설정 파일을 생성 및 수정하고 스크립트를 추가해서 테스트 해보고 마지막으로는 Node.js 서버에서 가장 대중적으로 많이 쓰이는 express 를 설치하고 서버를 위한 준비 작업을 마무리 한다
프런트엔드는 간단하게 Node.js 기반 환경에서 구성할 수 있는 pug로 구성한다
챕터2에서 부터 웹소켓을 이용한 실시간 기능을 구현해본다 먼저 책을 보면서 HTTP와 웹소켓 개념을 파악하면서 Node.js 서버 소스를 코딩해본다 stateless(무상태성)라는 특징 때문에 HTTP에서는 실시간 기능을 구현하기가 어려워 HTTP 방식에서 서버는 사용자의 요청이 있을 때에만 응답을 줄 수 있고, 응답을 주고 나서는 사용자가 누구인지 잊어 버린다 웹소켓은 HTTP와 다른 방식으로 동작하는 프로토콜이다 웹소켓은 연결이 이루어진 상태로 서버는 사용자가 누구인지도 알고 있고, 원한다면 서버가 사용자에게 메시지를 보낼 수도 있다 사용자의 요청을 기다려야만 하는 게 아니라 어느 때나 서버가 먼저 메시지를 보낼 수 있다 이렇게 서로에게 바로 갈 수 있는 양방향 연결이 되어 있어서 웹소켓을 이용하면 실시간 기능을 구현할 수 있다
챕터2의 마지막 부분인 메시지 주고 받기부분을 완성하고 챕터 2를 마무리 한다
챕터3에서는 실시간 채팅을 완성하기 위한 부가적인 부분들을 코딩해본다 실시간 채팅 기능과 사용자 간 채팅하기, 닉네임 추가하기 1, 닉네임 추가하기 2 부분을 코딩한다 이부분을 완성하면 사용자간에 메시지를 주고받고 닉네임을 설정하는 것들이 가능해진다
앞의 챕터까지는 기본적인 모듈을 이용해서 기능을 구성했다면 챕터4에서는 socket.io를 애용해 채팅룸을 만드는 부분을 진행해본다 socket.io는 실시간, 양방향, 이벤트에 기반한 통신 등을 모두 지원하는 라이브러리다 등장한지 오래되어 안정적이고 편리한 기능을 무척 많이 제공하고 있어 Node.js에서 웹소켓 기능을 구현하기 위해서는 socket.io를 많이 사용한다 이번 챕터에서는 이미 웹소켓 프로토콜과 ws 패키지를 이용해 구현했던 기능과 유사한 기능을 socket.io로 구현해 본다
socket.io는 서버를 위한 관리자 UI를 제공해 준다 이를 이용하면 모든 소켓과 룸을 확인할 수 있다
설치를 하고 서버 코드를 수정하고 https://admin.socket.io로 접속해보면 위와 같은 화면을 확인해볼 수 있다
마지막 챕터6,7 에서는 화상채팅 기능을 구현해본다 챕터 6에서는 간단하게 카메라 불러오기, 비디오와 오디오 제어하기, 카메라 변경하기를 실습해보고 카메라와 비디오, 오디오를 이용한 기본 기능들을 구현해본다
챕터 7에서는 화상 채팅을 완성하기 위해 WebRTC를 이용해 실시간 커뮤니케이션을 가능하도록 만들어본다 WebRTC는 web real-time communication을 뜻하며 peer-to-peer 기술로 인터넷에 연결된 다수의 개별 사용자들의 중개 기관을 거치지 않고 데이터를 직접 주고받을 수 있게 해준다 socket.io로 마든 채팅 앱은 peer-to-peer가 아니고 하나의 서버에 웹소켓이 여러 개 연결되어 있어서 서버가 중개기관 역할을 했었다 socket.io로 구현했던 채팅 기능을 WebRTC 기술을 사용해서 구현해본다
기능을 모두 완성하면 위와 같이 Noom 앱이 완성되고 사용자들끼리 실시간 화상채팅으로 채팅룸에서 소통할 수 있다
클론코딩을 통해 빠르게 Node.js로 실시간 채팅을 구현하는 기법에 대해 공부해볼 수 있어 매우 유익한 시간이었던 것 같다 단순히 클론코딩을 한번 해본 것 만으로 기술을 100% 습득했다고 생각하기는 힘들 겠지만 오늘 실습해본 기술들을 다른 기능을 직접 개발해보면서 응용해볼 계획이다 클론코딩이 개발실력 향상에 크게 도움이 안된다는 말들도 많지만 반복적으로 구현해보면서 직접 구현해보고 응용해보고 변경도 해본다면 확실히 개발실력 향상에도 도움이되고 개발하면서 사용했던 기술들에 대한 이해도도 높아질 수 있을 것 같다 빠르게 구현해볼 수 있을 만큼 얇은 책이기도 하고 노마드코더에서 무료 강의도 제공하고 있어서 초보자들도 정말 어렵지않게 따라해볼 수 있다 방구석에서 뒹굴뒹굴 하면서 개발은 어떻게 공부하지만 연발하고 있는 사람들에게 이 책과 강의를 보고 클론코딩이라도 한 번 해보라고 권해보고 싶다
※출판사로부터 책을 무상으로 제공받아 직접 실습해보고 정성껏 작성한 리뷰 입니다
|
|
Do It! 클론 코딩 줌 책을 읽고 따라해 볼 수 있었다. socket.io, navigator, webrtc를 사용해서 만드는 것이 뼈대였다.
webrtc를 p2p방식으로 여러 유저들과 공유하면 트래픽 부하를 일으킬 수 있지만 요즘 같은 시대에 10~20명 정도까지는 괜찮지 않을까 생각된다. 그 이상의 인원을 수용하려면 아마 중계 서버를 따로 구성해야 할 것으로 생각된다.
|
|
|
여러분은 웹 프로그래밍이라고 하면 어떤 것을 떠올리시나요? 초보자 분들은 `CRUD`라고 하는 생성, 읽기, 갱신, 삭제를 익히기 위해 게시판을 만들거나 웹 스크래핑으로 시작하는 경우가 대부분일 것이라고 생각합니다. 그 뒤에 간단한 API를 이용하거나 만들기도 하면서 웹 생태계에 익숙해 지고 계실 것입니다.
`클론 코딩 줌`은 어떻게 보면 통신에 있어서 기본이라고 할 수 있던 소켓 통신부터 webRTC를 이용한 화상채팅 프로그램인 `ZOOM`을 만드는 것까지 이 책을 찾아보실 분들께서 익숙하지 않으실 기술들로 여러분의 수준을 한단계 성장시켜 줄 수 있습니다. 프로그래밍은 결국 큰 틀에서 수치를 계산하거나 데이터를 송수신 받아 그 것을 가공해 보여주는 것이 목적이라고 볼 수 있습니다. 우리가 이용할 수 있는 통신 방법은 많습니다. 하지만 한 가지 마스터키는 존재하지 않습니다. 필요에 따라선 서버의 DB를 이용할 수도 있고, socket을 이용하거나 `WebRTC`를 이용해 peer-to-peer 연결로 서버 부하를 줄인 채 워할한 통신을 할 수도 있습니다.
하지만 이 책을 찾아보는 우리의 가장 큰 문제는 이런 기술들이 언제 어디에 적용되어야 하는지 모르고 있고, 심지어 그런 기술이 존재하는지조차 모르는 것이 가장 큰 문제입니다. 그래서 가이드를 이용해 길을 덜 헤매는 것도 중요합니다.
JS가 너무 생소하지만 않다면 어렵게 느껴질 수 있는 웹소켓과 WebRTC가 어렵지 않게 개념을 잡을 수 있게 친절한 예시와 함께 설명하고 있습니다. 하나하나 작동하는 기능을 키워가면서 만드는 재미도 느낄 수 있고, 응용해보고 싶은 부분들에 실습 이 후에 커스텀을 해볼 여지가 많다는 것도 이 책의 장점이었습니다. 클론 코딩을 하는 책이기 때문에 절대 기계적으로 코드를 따라치면 안됩니다. 이 코드가 어떤 논리적 구조로 예제의 결과를 내놓는지 확인을 하면서 읽고, 막히는 부분이 있다면 따로 찾아보는 것이 이 책을 온전히 이용한 방법입니다.
JS의 이벤트 핸들러에 대해 전혀 모르고 책을 시작하시면 웹소켓이 문제가 아니라 이벤트 핸들러의 적용과 익숙하지 않은 함수 이용 방법에 당황 할 수 있습니다. 그래서 JS 기초 문법은 익힌 상태에서 실습하는 것을 권장하고 싶습니다. 물론 예제를 따라가다가 순간의 깨달음을 얻는 무공처럼 이해하며 비급을 얻을 수도 있겠습니다. 하지만 프로그래밍도 무공도 깨달음을 위해서 어느 정도의 기반이 필요하다는 사실을 명심하세요.
---
이지스퍼블리싱에서 서평용 책을 제공받아 쓰여진 글입니다. |