노마드코더 줌 클론코딩 직접 해 본 후기(3) - 프로젝트 과정, 결론

1) 과정

줌 클론 코딩 노션

자세한 내용들은 제 노션에 담아서 기록을 보관하고 있습니다.

또한 깃허브를 이용해 피드백도 받고 기록해두었습니다.

코딩을 할 때면 저는 노션에 오류와 피드백을 작성하고, 깃허브를 이용해 코드를 보관해둡니다.

코딩하는 사람들의 기본 소양이죠!

 

프로젝트 과정 중 일부(1)

프로젝트 과정 중 일부(2)

다른 웹으로 ga라는 room에 들어온 상태입니다.

 

왼쪽을 보면 Anon arrived!라고 뜨면서

익명의 누군가가 왔다고 뜨며,

Room ga 옆 괄호 안에 숫자도 작성됩니다.

이는 한 room 안에 들어온 사람 수를 뜻합니다.

 

입장 후 닉네임을 설정하여 메시지를 보낼 수 있습니다.

 

코드에 변화를 주어가며 페이지를 새로고침도 해봅니다.

 

2) 결론

실행 화면

Noom에서 명칭이 바뀐 GaGaChat 실행 장면이다.
왼쪽은 같은 공간에 있지 않은 친구와 이름 이 같은 방에 들어와 실시간으로 채팅하는 모습이고 오른쪽은 방 ‘ㅎㅇ’ 가 만들어져 있다는 것이 뜬 메인 화면이다.
또한 누군가 들어왔다는 ‘Anon arrived’가 뜨고 룸 이름 옆 괄호 안에 참여자 수를 볼 수 있다.

 

닉네임을 정하여 저장하고 메시지를 주고 받는 모습이다.
한 번 저장해둔 상태로 닉네임을 계속 이용할 수 있고 닉네임을 바꾸고 싶다면 얼마든지 바꿀 수 있는 시스템이다.

 

 

‘Noom’을 이용하고 있는 모습으로, 같은 이름의 방에 서로 다른 기기(유저)가 들어가 있는 모습이다.
Mute 버튼을 이용해 음소거 여부를 정할 수 있으며 Turn Camera 버튼을 통해 카메라 끄고 켜기를 할 수 있다.
또한 흰 바탕의 버튼을 통해 카메라 장치를 바꿀 수 있다.
이는 본래 다른 유저가 같은 방에 들어올 수 없었으나 채팅 기능의 룸 코드를 이용해 서로 화상이 되게끔 보완하였다.