노마드 코더와 만드는 화상 채팅 서비스

주니어 개발자들의 필수 북마크, '노마드 코더'의 대표 강사 니꼴라스는 세상에서 가장 빠르게 프로그래밍을 배울 수 있는 방법은 '클론 코딩'이라고 말한다. 클론 코딩은 줌, 트위터, 넷플릭스, 인스타그램과 같은 실제 서비스를 복제해 보는 프로그래밍 학습 방법이다. 클론 코딩은 코드를 입력할 때마다 눈앞에 결과물이 바로바로 보이므로 프로그래밍을 빠르고 재미있게 배울 수 있다. HTML, CSS, 자바스크립트를 이제 막 뗀 웹 개발 초보자도 3일이면 충분하다! 이 책은 클론 코딩 시리즈의 세 번째이자, 화상 채팅 서비스인 줌(Zoom)을 똑같이 만들어 본다. 웹 소켓을 이용한 실시간 메시지 교환, 채팅룸 생성, 그리고 실시간 화상 채팅까지 줌의 핵심 서비스를 똑같이 구현한다. 그야말로 진짜 서비스를 만드는 것이다.

01 클론 코딩 줌 시작하기
__01-1 클론 코딩 줌, 이런 기능을 만들어요!
__01-2 클론 코딩 수업 준비하기
__01-3 프로젝트 생성하기
__01-4 서버를 위한 준비 작업
__01-5 프런트엔드를 위한 준비 작업

02 웹소켓을 이용한 실시간 기능 구현하기
__02-1 HTTP와 비교하면 이해되는 웹소켓
__02-2 웹소켓 설치하고 서버 만들기
__02-3 웹소켓 이벤트
__02-4 메시지 주고받기

03 실시간 채팅 완성하기
__03-1 채팅 기능 준비하기
__03-2 사용자 간 채팅하기
__03-3 닉네임 추가하기 1
__03-4 닉네임 추가하기 2

04 socket.io를 이용한 채팅룸 만들기
__04-1 socket.io 설치하기
__04-2 socket.io 다루기
__04-3 채팅룸 만들기
__04-4 채팅룸 안에서 메시지 교환하기
__04-5 채팅룸 알람 보내기

05 채팅룸 완성하기
__05-1 닉네임 추가하기
__05-2 채팅룸 관리하기
__05-3 사용자 수 표시하기
__05-4 Admin panel 사용하기

06 화상 채팅 준비하기
__06-1 카메라 불러오기
__06-2 비디오와 오디오 제어하기
__06-3 카메라 변경하기

07 화상 채팅 완성하기
__07-1 WebRTC 알아보기
__07-2 채팅룸 만들고 관리하기
__07-3 데이터 교환을 위한 offer 보내기
__07-4 offer에 응답하는 answer 보내기
__07-5 peer-to-peer 연결 생성하기
__07-6 미디어 트랙 제어하기
__07-7 메시지 교환 기능 추가하기

08 스타일시트 추가하기
__08-1 스타일 정의를 위한 준비
__08-2 스타일 정의하기

클론 코딩 시리즈 3탄, 노마드 코더의 동영상 무료 공개! '줌 클론 코딩'이 책으로 나왔다!-----------------------------------출간 즉시 IT 분야 1위를 기록한 《Do it! 클론 코딩 영화 평점 웹서비스》, 《Do it! 클론 코딩 트위터》 출간 이후 '다른 웹 서비스도 클론하고 싶다'는 독자의 요청이 쇄도했다. 이러한 독자 성원에 힘입어 노마드 코더는 '줌 클론 코딩'을 촬영하고 전체 강의를 무료 공개했다. 해당 강의는 총 40개로 구성, 이제 막 프런트 엔드 웹 개발을 초보자가 봐도 이해할 수 있을 정도로 쉽게 풀어냈다. 또한 화상 채팅 서비스의 기본 개념인 웹소켓, SocketIO, WebRTC부터, 자바스크립트를 활용한 메시지 구현, 채팅방 생성, 화상 채팅 기능까지 모두 구현할 수 있다. 실제 노마드 코더 수강생 후기로 "SocketIO와 WebRTC와 같은 고급 네트워크 기술을 쉽게 사용할 수 있다니 실무에 큰 도움이 되었다!"와 같은 찬사가 쏟아지는 중이다. 평소 클론 코딩에 관심이 있었다면, 또는 하나의 서비스를 완벽하게 내 것으로 만들고 싶다면 지금 줌 클론 코딩을 시작해 보자!-----------------------------------취준생 포트폴리오부터 상용 서비스까지!일단 '실전형 코딩 책'으로 만들어 봐~-----------------------------------취업 준비용 포트폴리오가 필요해? 완성된 프로젝트를 경험하고 싶어? 《Do it! 클론 코딩 줌》이라면 모든 고민을 한 번에 해결할 수 있다! 이 책은 처음부터 끝까지 키보드를 잡고 따라 하면서 줌을 클론 코딩할 수 있도록 설계했다. 각각의 '액션' 단계를 통해 어떤 명령어를 입력해야 하는지, 어디에 파일을 만들어야 하는지, 어디를 수정해야 하는지 정확하게 안내한다. 액션을 따라 하면 실시간으로 메시지 보내고 받기, 채팅룸 생성하기, 카메라를 활용한 화상 채팅 구현 등의 줌 서비스를 빠르게 완성할 수 있다. 한마디로 복잡한 이론 공부보다 일단 만들어 보고 싶은 사람을 위한 '실전형 코딩 책'이라 할 수 있다.-----------------------------------'클론 코딩 줌' 40강 전체 영상 무료! 1:1 질문 채널도 놓치지 말고 활용하기!-----------------------------------노마드 코더에서는 유료로 계획되었던 '클론 코딩 줌' 강의를, 오직 독자를 위해! 전체 무료로 공개했다! 공부하다 모르는 점이 생기면 노마드 코더 1:1 질문 채널에서 물어볼 수 있으니 아래 링크를 참고하자.- 클론 코딩 줌 40강 전체 영상 보기(무료 회원 가입): nomadcoders.co/noom- 노마드 코더 1:1 질문하기: nomad-coders.channel.io-----------------------------------니꼬샘이 내 옆에 앉아 있는 것 같은 기분? 하나하나 짚어 주는 '실습 구성'으로 쉽게 코딩하자!-----------------------------------이제 막 웹 개발 공부를 시작한 사람도 빠르고 정확하게 따라 할 수 있도록 실습 요소를 배치했다. 코드를 작성하고 결과를 확인하는 일련의 과정을 스티커와 색, 삭제 선 등으로 표시하고, 주요 개념은 팁과 보충 수업으로 보완했다. 놓치기 쉬운 내용은 말풍선으로 강조하여 확실하게 실습할 수 있도록 도와준다. 책을 읽다 보면 노마드 코더의 니꼬샘이 바로 옆에 앉아 손으로 콕콕 짚어 가며 알려 주는 기분을 느낄 수 있다!-----------------------------------배우고, 나누고, 함께 성장하는 두잇 스터디룸에서 공부하자!-----------------------------------혼자 계획을 세우고 공부하다 보면 금방 지치기 마련이다. 그럴 땐 나와 비슷한 고민을 하는 독자를 만나 어려운 내용을 공유해 보면 어떨까? 내가 열심히 공부한 내용으로 다른 사람을 도와줄 수 있다면 더 보람되고 뿌듯할 것이다. 두잇 스터디룸에서 같이 공부하는 친구를 만나 학습 성취도를 높이자!- Do it! 스터디룸: cafe.naver.com/doitstudyroom[이런 사람에게 이 책을 추천!]- HTML, CSS, 자바스크립트를 배운 웹 초보자들- 다양한 프로젝트를 경험하고 싶은 주니어 개발자- 컴퓨터공학을 전공했지만 실무에서 어떻게 서비스를 만드는지 모르는 전공자- 웹 프로그래밍 초보지만 웹 서비스를 만들어 보고 싶은 사람- 현업에서 일하면서 날마다 새로 업데이트되는 프로그래밍 지식을 쌓고 싶은 개발자[예제 소스 및 업데이트 공유]- 깃허브: github.com/penguingoon89/noom- 이지스퍼블리싱: http://easyspub.co.kr [자료실]에서 도서명 검색 후 내려받기▶ 추천평웹소켓 개념, 클론 코딩으로 공부하면 어렵지 않아요!이 책은 어렵게 느껴졌던 웹소켓 개념을 쉽게 잡을 수 있도록 도와주었어요. 누구나 쉽게 따라 할 수 있는 수준인 데다가, 필요한 정보만 골라서 활용할 수도 있죠. 웹소켓을 이용해 무언가를 만들고 싶은데 시작조차 못했다면 이 책을 꼭 읽어 보세요. 실습을 차분히 따라 하다 보면 혼자서도 줌 앱을 만들 수 있을 거예요!- 고석진(5년 차 프런트엔드 개발자)줌을 만드는 전체 과정이 모두 들어 있어요!니꼬샘의 친절한 설명과 단계별 실습 덕분에 줌을 만드는 모든 과정이 머릿속에 쏙쏙 들어왔어요! 특히 동영상 강의로만 공부할 때보다 책으로 읽으니 더 명확하게 이해됐어요. 여러분도 줌을 만들고 싶다면 책과 동영상을 같이 보며 공부해 보세요. 그리고 결과물을 완성한 성취감과 개발 지식이 한층 높아지는 경험을 해보세요!- 김현성(15년차 앱, 백엔드 개발자)웹을 처음 공부하는 사람도 쉽게 따라 할 수 있어요!Socket.io부터 WebRTC까지 여러 도구로 화상 채팅 서비스를 구현하는 방법을 배웠어요. 특히 웹을 처음 공부하는 사람도 포기하지 않도록 기초 단계부터 차근차근 따라 할 수 있게 도와준다는 점이 인상 깊었어요. 중요한 개념은 필요할 때마다 설명해서 초급자를 확실히 이끌어 준다는 느낌이 들어요. 여러분도 니꼬샘과 함께 이 책을 끝까지 완주해 보세요!- 박지영(3년 차 프런트엔드 개발자)클론 코딩 찐팬도 추천하는 책!이 책은 마치 니꼬샘의 생생한 강의를 받는 듯한 느낌이 들어요! 실습을 통해 pug라는 뷰 엔진을 처음 사용했는데, 기존 HTML과 어떻게 다른지 경험해 볼 수 있는 좋은 기회였어요. 초보 개발자도 이 책의 실습을 잘 따라 한다면 줌 서비스를 얼마든지 만들 수 있을 거예요. 프로 개발자가 하는 일을 간접 경험하게 해주는 《Do it! 클론 코딩 줌》을 적극 추천해요!- 장민(프리랜서 개발자)프로그래밍에 자신감이 생겨요!프로그래밍에 입문할 때 배운 기술을 어떻게 활용해서 서비스를 완성하는지 궁금하고 답답한 경험이 있을 거예요. 니꼬샘은 그런 분들에게 코드를 쉽게 설명하고, 기술을 어떻게 활용하는지 알 수 있게 도와줘요. 게다가 이 책에서 배운 내용을 다른 프로젝트에 적용해서 나만의 서비스를 만들 수 있다는 자신감도 생겼어요!- 장석현(풀스택 개발자)HTML, CSS만 알고 있어도 도전할 수 있어요!HTMl, CSS 기본서만 여러 권째, 언제쯤이면 완성된 웹, 앱 서비스 하나 만들 수 있을지 내 자신에 대한 확신도 점점 없어질 때쯤 '니꼬느님'을 만났어요. 그리고 클론 코딩을 시작한 지 딱, 3일 만에 저도 줌 서비스를 완성했어요! 이렇게 짧은 시간 안에 웹 초보자도 근사한 서비스를 뚝딱! 만들 수 있다니 정말 놀라운 경험이었죠. 혹시 저처럼 웹 기초밖에 모르는 초보자라도 주저 말고 클론 코딩 줌을 시작해 보세요. 줌 서비스를 완성하고 나면 지금보다 한 단계 더 향상된 코딩 실력을 갖게 될 거예요!- 김은숙(프로를 꿈꾸는 새내기 개발자)