[항해99] 13주차 실전프로젝트

드디어 실전프로젝트 최종발표회를 마무리했다.
정말 열심히 만든 프로젝트였고, 그에 맞게 좋은 반응을 받아서 기분이 좋았다.
최고 프로젝트 상까지 받으면 날아갈 듯 기쁠 것 같다.
오늘은 실전프로젝트에 사용한 기술들을 정리해보고 어떤 개발자가 되고 싶은지에 대해 포스팅 해보겠다.
https://github.com/dongsun1/last-project-nest

Socket.io

8주차 회고에 간단한 WebSocket과 Socket.io의 각각 장단점과 차이점을 포스팅한 적이 있다.
이번엔 Socket.io의 원리에 대해서 설명해보겠다.

1. 먼저 서버에서 소켓서버를 생성하고 실행한다

2. 클라이언트에서 서버에 접속하면 connection 이벤트가 발생한다

3. 서버에서 connection이벤트를 처리하여 해당 이벤트가 발생했을때 어떻게 동작을 할것인지 정한다

4. 서버에서 'any'라는 이벤트를 발생시키면

5. 클라이언트에서는 'any'라는 이벤트를 처리한다

6. 또 서버에서 'nothing' 이벤트를 발생시키면 클라이언트에서 'nothing'를 처리한다

connection / disconnection 이벤트를 제외한 이벤트들은 이름을 마음대로 정할수 있고 꼭 이 순서가 아니더라도 어디서든 이벤트를 발생시키고 처리할 수 있다.

이벤트를 발생시킬때는 .emit 를 사용하고 .on 를 이용하여 이벤트를 처리한다.

WebRTC

WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술이다.
WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 한다.

한마디로 웹 브라우저만 있으면 별도의 설치 없이 리얼타임 커뮤니케이션이 가능할 수 있게 만들어주는 기술이다.

실제 이러한 장점때문에, HyperConnect, Discord등이 WebRTC를 사용하고 있다.

WebRTC는 서버와 같은 중간자를 거치지 않고 브라우저간 P2P로 연결하는 기술이다.

P2P기술을 기반으로 하고 있어 중개를 거치지 않기 때문에 빠른 속도와 HTTPS를 강제하고 있기 때문에 보안이 보장된다.

동작 원리

1. 각 브라우저 P2P 커뮤니케이션
2. 서로의 주소 공유
3. 보안 사항 및 방화벽 우회
4. 실시간 데이터 공유

WebRTC가 동작하기 위해서는 P2P(Peer To Peer) 즉, 피어끼리 연결이 되어야 한다.
피어끼리 연결이 되기 위해서는 서버가 필요하다.

P2P면 서버가 필요 없는 것 아닌가? 라는 생각을 할 수 있다.
하지만 피어끼리 연결을 하기 위해선 피어끼리의 정보를 교환해야하는데,
그런 정보를 교환하기 위해서 서버가 필요한 것이다.

그러면 서버로 피어간에 정보만 전달 시키면 되는 것인가?
이론적으로는 맞다.

하지만 집에서 인터넷을 하는 사람들 대부분 공유기를 가지고 있다.
이는 공인 IP를 분산시켜 여러 포인트에서 이용하기 위함인데, 대부분의 가정집에서는 NAT(공유기)를 사용한다.

따라서 서버에서 공유하는 피어간의 정보(공인 IP)를 얻기 위해서는
STUN서버, STUN으로 해결하지 못하는 경우 TURN 서버가 필요하다.

이런식으로 말이다.

만약 위의 과정이 다 됐다면, 실제로 각 피어끼리의 연결이 완성된 것이다.

나는 이번 프로젝트에 STUN 서버, TURN 서버를 구축하지는 못했다.

PeerJS라는 라이브러리를 활용해서 STUN 서버, TURN 서버를 따로 구축하지 않아도 동작하게 할 수 있었다.

6주라는 정해진 기간 내에 구현하려면 이 방법이 최선이였던 것 같다.

나중에 시간이 더 생긴다면 STUN 서버, TURN 서버도 구축해보고 싶다.

어떤 개발자가 되고 싶은가?

나는 회사를 이끌고 성공시킬 수 있는 개발자가 되고 싶다.
내가 이끄는 팀으로 인해서 회사가 성공한다면 더할나위 없이 행복할 것 같다.
무엇이든 회사 일이 아니라, 자기 일처럼 한다면 충분히 가능한 것이라고 생각한다.
꼭 내가 되고 싶은 개발자가 되리라.

Source

• https://noonestaysthesame.tistory.com/entry/socketio-%EC%9B%90%EB%A6%AC
• https://velog.io/@happyjarban/WebRTC-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B01-WebRTC-%EC%9D%B4%EB%A1%A0#:~:text=WebRTC%EB%8A%94%20%EA%B8%B0%EC%A1%B4%EC%9D%98%20Web,%EC%9D%84%20%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C%20%ED%95%98%EA%B3%A0%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4.