이번주엔 MVP발표를 위한 기능구현에 몰두했다.
크게 막히는 부분이 없어서 즐거웠다.
그리고 MVP발표, 시연를 마치고 멘토님의 피드백을 들었는데 그동안 칭찬 일색이던 우리 프로젝트에 처음으로 비판을 듣게 되어서 정신이 번쩍 들었다.
비판의 주된 내용은 세가지인데,
- 사용된 기술들이 최신이라 잘 쓰이는 기술들이 아니다. 따라서 구직을 희망하는 프론트엔드 개발자로서 회사에 뭘 보여줄 수 있을지 모르겠다.
- 프로젝트 폴더구조가 엉망이다.
- 뭔가를 했으면 깃헙에 티를 내라
로 크게 정리가 될 것 같다.
첫번째 같은 경우는,완전히 케바케라고 봐서.. 이제와서 어떻게 할 수 있는것도 아니고 프로젝트 완성도가 더 중요하기 때문에 우선 패스하기로 했다.
두번째, 프로젝트 폴더 구조나 네이밍 컨벤션등에 대한 피드백은 너무나 감사하게 들었다.
누가 주지시켜주지 않으면 스스로 깨닫기 어려운 점일것 같은데, 개발자로 경력이 생기기 전에 알게되어서 참 다행이라고 생각했다.
세번재같은 경우는 뭘 하던간에 깃허브에 기록을 남기라는 말씀이였는데 이것도 의식적으로 해서 버릇으로 들여놓아야겠다는 생각이 들었다.
그리고.. 피드백 이후 내 머리속에 왠지모르게 장인정신이라는 단어가 계속 생각이 난다.
뒤쳐질가봐, 느릴까봐 급한 마음에 개발하면서 코드 퀄리티를 놓쳤었던것 같은데, 이건 좋지않다고 생각한다.
앞으로 장인정신이 있는 개발자가 되기로.. 세상엔 좋은것만 내놓기로.. 한다!
그런 의미에서 어제 새벽까지 프로젝트 폴더구조를 갈아엎었다.
추가로 이번 발표에 내가 받은 질문들에 대하여 정리해보고자 한다.
질: useRef hook을 많이 사용했는데 그 이유는?
답: useRef hook은 current라는 property가진 객체를 반환하는 훅이다. curren에는 실행 할 때 인자로 보내는 값이 초깃값으로 할당된다. 이 useRef로 얻어낸 객체의 current는 state와 다르게 값이 변경되어도 component의 재 렌더링을 일으키지 않는다는것이 핵심이다.
또한 재 렌더링이 일어날 때에도 이 current의 값이 유실되지 않는다는 독특한 특성을 가지고 있어 React element를 참조해 함수에서 사용해야 하는 상황 등, 특정 상황에서 유용하게 사용된다.
이번 프로젝트에서는 Socket.io 라이브러리로 만들어낸 소켓 객체를 참조시키는데에 사용했는데, 그 이유는 소켓 객체의 상태는 통신 이벤트마다 달라지는데 그 때마다 다시 함수의 모든 로직이 재실행되면 소켓 객체의 정보를 유지하는것이 불가능하기 때문이다. 그래서 이번 프로젝트에선 참조시키는데에 참조하는데 useRef hook을 매우 유용하게 사용했다.
질: 최근 업데이트 된 React Router 6를 사용했는데 5와 어떤 차이점이 있는지
답: switch component 내부에 route component를 여러개 놓던 v5와 다ㅣ르게 v6는 routes 내부에 복수의 route를 놓는다. 또 객체들이 삭제되기도 하고 추가되기도 했는데, v5의 useHistory가 useNavigate로 대체된 점이나 v5의 exact props의 삭제, 라우터와 컴포넌트를 연결하는 속성의 명칭이 component에서 element로 변경됨등의 차이점이 존재한다
질: webRTC에 대해 설명 할 수 있는지
답: webRTC는 google이 주도하는 오픈소스 API로, 웹 애플리케이션이 중간자없이 브라우저간 미디어나 데이터를 교환할 수 있도록 하는 기술이다 p2p(peer to peer)연결은 중간 서버를 거치지 않기 때문에 빠른 통신이 보장되며 HTTPS가 강제되기 때문에 중간자 공격에 대한 보안이 보장된다
보안에 관해 더 덧붙이자면, webRTC는 유저의 VPN이나 방화벽, NAT를 우회하는 기술이기 때문에 암호화가 되어있지 않다면 치명적일 수 있으나, 모든 webRTC 세션은 SRTP 암호화방식을 사용하기 때문에 보안수준이 높다.
이번 개발에선 node.js의 socke.io를 사용해 구축한 signalling server를 통해 게임방 속 peer들이 커뮤니케이션에 동의하고 IP주소를 공유하는데에 동의하는 프레임워크인 ICE를 일으켰고, 이 과정에서 필수적인 클라이언트의 방화벽 우회는 google에서 제공하는 STUN 서버를 사용했다.
ICE가 성공적으로 일어난 후 peer들은 SDP 프로토콜에 기반한 스트림정보를 실시간으로 교환하게 된다
webRTC는 web3.0이라고 불리는 기술들 중 하나일 정도로 최신의 기술이지만, 단점 또한 내포하고 있는데 브라우저와 플랫폼간의 호환이 아직 미비하다는 점이다. 따라서 남은 기간동안 크로스브라우징에 관핸 이슈의 해결이 우리 프로젝트의 주요 맹점이라고 할 수 있겠다.
'WIL' 카테고리의 다른 글
| 2022.3.2nd (0) | 2022.03.14 |
|---|---|
| 2022.2.4th ~ 3.1st (0) | 2022.03.07 |
| 2022.2.3rd WIL (0) | 2022.02.20 |
| 2022.2.2nd WIL (0) | 2022.02.15 |
| 2022.2.1st WIL (0) | 2022.02.07 |