노마드 코더, 줌 클론 코딩 - 웹소켓, WebRTC에 대해 배워보아요

 

니꼴라스 입니다~ 로 시작하고 김치 먹으라며 방송 끝내는 제가 좋아하는 유튜버의 무료 강의 중 하나를 소개합니다.

유튜브 하기 전부터 노마드 코더 라는 사이트에서 무료 강의 들으며 알게된 분인데 이제 40만 구독자의 유튜버 이기도 합니다.

 

유튜브에 올라온 영상들도 좋고, 노마드 코더에 올라오는 무료강좌와 유료강좌도 좋습니다.

무료 강의들도 많으니 무료 강의들 먼저 들어보면 좋겠죠. 다양한 주제의 웹개발 및 앱개발 무료 강의들이 많습니다.

 

이번 강의를 통해 WebRTC 사용법 익혀두면, 여러모로 활용도가 높을 것 같습니다.

얼른 무료강의 수강하러 고고고~~

 

 

오늘은 줌 클론 코딩 무료 강의

실시간 온라인 채팅 및 화상화의 웹사이트를 만드는 강의 입니다.

웹소켓과 WebRTC를 사용해서 만듭니다. 채팅은 웹소켓, 화상통신은 WebRTC를 사용하죠.

 

초급 강의라서 내용은 어렵지 않습니다.

물론, 그렇다고 프로그래밍 전혀 모르는 사람이 바로 듣기엔 좀 어려울 수도 있습니다. 하지만, 뭐 까짓거 별거 있나. 도전정신 충만한 분들은 그냥 들어도 좋습니다. 필요한거 다 같추느라 진도 못나가는 것 보다, 일단 들어보는게 더 좋다고 전 생각합니다.

 

도저히 이해가 안간다 싶으면 그때 뭐가 더 필요한지 보고 다른 강의 더 들으면 되죠.

자바스크립트 좀 알면 좋고요, node.js와 익스프레스로 웹페이지 만들어 봤으면 더 좋습니다. node.js로 웹페이지 만들때 pug로 만들어 봤으면 영상 보든데 좀 더 도움이 되긴 하지만 몰라도 상관 없습니다. 웹 페이지를 html 수정하면서 만들지 않고, pug 이용해서 좀 더 간결하게 만든다고 생각하고 보면 됩니다.

 

개발자 혼자 만들거나, 잘 디자인된 pub 템플릿을 이용하는 경우, 디자인 별로 신경 안쓰고 후다닥 프로토타입 만들때 pug 아주 편리합니다. 다만, pug를 모르는 디자이너와 같이 옛날 방식으로 일하려면 이런때는 사용하기 힘들겠죠.

하지만, html/css를 pug로 혹은 그 반대로 바꾸는 방법은 약간의 노가다거나 변환 프로그램을 사용할 수도 있으니 처음 만들때 뭘로 만들어야 하나 큰 걱정 안해도 됩니다.

 

참고로 강의는 영어로 진행됩니다. 하지만, 친절하고 정확한 한글 자막이 같이 제공되니 걱정할 필요는 없습니다.

 

줌 클론코딩 – 노마드 코더 Nomad Coders

 

 

소스코드 다운로드

zoom 과 비슷한 화상회의, 영상통화 웹사이트 만드는 강의이고, 소스코드는 github에 공개되어 있으니 강의 보며 따라서 타이핑 할 필요는 없습니다. 물론, 코딩에 지름길 없듯이 직접 타이핑 해보는 것이 가장 좋긴 합니다.

 

소드 다운 받고, 압축 풀고, 아래 명령어 2개면 준비 끝

npm install

npm run dev

 

소스코드 받아보면 알겠지만, 아주 간단합니다.

거의 대부분 로직이 클라이언트 자바스크립트 안에 다 있습니다.

 

공부하는데는 이래도 상관 없지만, 실제 앱 만들때는 로직이 클라이언트에 모두 들어있는건 별로 입니다. 악용될 가능성이 높죠. 초급 강의라도 이런 부분은 API로 만들도록 강의를 만드는게 좋지 않나 싶기도 합니다.

물론, 이 강의에서 채팅 기능은 기능 점검을 위해 만들어보는 실험용 코드이니 이 강의는 상관 없습니다.

 

코딩은 쉬워, 근데 프로페셔널 하게 하려면 어려워져. 이거 이거 이거 이거 다 신경써야해.

이러는게 나은건지, 처음부터 다 알려주는게 나은건지는 잘 모르겠네요.

실전에서 어떻게 하는지까지 배워야 하는게 좋지 않나 싶은데. 그럼 너무 어렵게 가르킨다고 하니 학원이나 무료강의나 다들 쉽게 쉽게만 가르키고 있는건 아닌가 싶습니다.

 

GitHub - nomadcoders/noom: Zoom Clone using NodeJS, WebRTC and Websockets.

 

 

채팅룸과 화상회의

강의 내용은 아래와 같습니다.

- 웹소켓, socket.io 를 이용한 간단한 온라인 채팅 기능 구현

- 자바스크립트로 웹캠 제어하는 방법 (비디오, 오디오, 자막 등 분리된 채널 접근 및 제어)

- WebRTC를 이용한 P2P 통신

 

자바 스크립트로 이렇게 쉽게 이런 기능들을 구현할 수 있다니 정말 좋네요.

웹 브라우저는 이젠 정말 플랫폼 입니다. 기반 기술은 웹브라우저가 제공을 해주니 비지니스 로직에 좀 더 집중할 수 있어 보입니다.

 

물론, 그렇다고 zoom 같은 사이트를 이것만 가지고 뚝딱 만들어 낼 수는 없긴 합니다.

그래도 기반 기술을 맨땅에 만들고 있을 필요는 없는 경우엔 이 정도도 충분할 수 있습니다. 다양하게 응용할 수 있는 기능을 알게 되어 오늘도 보람찹니다. ㅎㅎ

 

 

이 소스를 좀 더 보완한다면, 뭘 개선해 보면 좋을까?

서비스 하는 수준이 되려면 개선해야할게 아주 많지요.

 

초급이나 고급 강의 몇개 듣고, 이제 뭘 공부해야할지 모르겠다는 분들 계시던데. 해당 강의에서 배운 내용이 끝이 아니니 이걸 정말 서비스 한다면 뭘 더 고쳐야 할까 생각해 보면 좋을 것 같습니다.

 

상용 어플리케이션 소스코드의 거의 대부분은 예외처리 부분입니다.

내 컴퓨터에서는 잘 되는데, 다른 사람 PC에서는 안되는 경우를 포함해서 여러가지 예외상황을 어떻게 대처할 것인가에 대한 고민과 생각하는 힘, 해결하는데 필요한 지식과 경험이 필요합니다. 이건 안해보면 배우기 힘들죠. 경험 많은 사수들에게 잘 배우는 것도 좋은 방법이고요.

 

기본적인 예를 들어 보자면 사용자의 실수, 의도적인 공격 등에 프로그램이 망가지지 않도록 많은 예외처리와 입력값 체크 등을 추가해야 합니다. 닉네임이 중복되는 경우 어떻게 처리할까? 채팅내용에 자바스크립트를 실행시키려는 시도는 어떻게 막을까? 채팅내용에 HTML 태그를 사용하려고 하면 어떻게 해야하나? 도배하는 사용자는 어떻게 막을 것인가?

 

간단해 보이는 상용 어플리케이션들이 안 보이는 곳에서 이런 상황들을 처리하기 위해 상당한 양의 코딩이 되어 있음을 알게될 것입니다. 다른 프로그램들 사용할 때도 얘들은 이런 경우 어떻게 처리했을까? 궁금해 하면서 실험해 보고 생각하는 연습을 많이 해보면 많은 도움이 됩니다. 그럼요, 직접 해보는 연습만이 살길입니다.

 

 

 

내돈내산 유료 온라인 수업 비교해 보기 - 코딩, 취미, 취업, 업무 비대면 교육

조코딩님 굿즈 티셔츠, 조코딩 유튜브 채널 추천합니다

스파르타 코딩클럽 게임개발 종합반 수강 후기