2022.2.4th ~ 3.1st

2월 마지막주 나는 사운드클라우드라는 서비스를 클론코딩을 하면서 많은것을 얻었다.

 

레퍼런스 사이트와 완전히 똑같은 모양을 만들면서 Styling과 HTML 태그 사용에 관해 많은 것들을 배울 수 있었다.

그리고 서버에서 다운받은 음원의 파형을 화면에 그려내고 컨트롤하는 기능과 앨범커버에서 색을 추출하여 배경에 그라디언트를 뿌려주는 기능을 위해 라이브러리 두 개를 채택하여 사용했다.

 

wavesurfer.js

음원을 다루는데에 사용한 WaveSurfer.js

 

react-palette

색을 추출하는데에 사용한 react-palette

 

또 이 프로젝트에선 멀티미디어의 전송을 주로 다뤘기에 서버 개발자분들과 cors를 해결하는데에 시간을 많이 썼다.

덕분에 스프링에서 cors 설정해주는 코드가 눈에 익게 됐다.

 

그리고 리덕스 데이터 새로고침 이슈에대한 나만의 방법을 찾아서 기분이 좀 좋았다.

const music = useSelector(({ music }) => music?.music);

if (!music) {
    dispatch(musicActions.getOneMusicAPI(musicId));
    return <></>;
  } else
    return ( /* .....JSX */ )

 

계속 useEffect method로 해결해보고자 시간과 정신력을 많이 소모했는데, 결국 간단하고 명쾌한 답이 떠올랐다. 이게 해결되자 동시에 개발도 쭉쭉 진행됐다.

결론적으로 사운드 클라우드 클론 프로젝트는 꽤 만족스럽게 마쳤다.

 

3월 첫째주 초반엔 앞으로 6주간 진행하게 될 프로젝트의 기획을 주로 했다.

나는 팀에서 부 리더를 맡게됐고 개발팀원분들, 디자이너분들과 마라톤회의를 하면서 누구나 기대된다고 말하는 좋은 기획이 나오게 됐다.

기획한 어플리케이션의 기술 수준이 지금 내 실력으론 완전히 비포장도로로 가는 셈이지만, 우리 개발팀원분들이 진짜 다들 너무너무 훌륭하신 분들이라서 엄청 좋은 프로젝트가 나올것 같다.

기획에 대해 간단하게 말하자면, 방탈출 게임이다.

어느정도 정리되고나서 나와 프론트 개발자분은 일요일도 반납하고 three.js를 열심히 파고파고 또 팠다.

웹페이지에 3D world를 올렸을 때의 쾌감이란..

Three.js – JavaScript 3D Library

three.js는 WEBGL API를 훨씬 쓰기 쉽게 도와주는 라이브러리이다.

 

그렇게 3D를 사용하는데에 대한 우려를 불식시키고 이게 멋지다는걸 보여드리면서 기술 사용에 대한 당위성을 동료분들께 증명해드렸다.

그러고 나서 백엔드 개발자분들과 함께 이번에 처음 접하게 된 WebSocket protocol과 WebRTC API를 파고파고 또 팠다.

공부를 열심히 했기 때문에 WebSocket과 WebRTC에 대한 이해를 글로 써볼 생각이다.

현재까진 본인의 목소리가 echo back되는 이슈의 해결과 입출력 오디오장치를 선택하는 기능을 개발해놓았고, 1대1이 아닌 n대n 통화를 구현해내면 되는 상황이다.

원래 WebRTC 통신을 위한 서버(signaling 서버) 개발을 spring으로 진행하려 했으나, 테스트와 회의 끝에 Node를 새로 배워서 개발하는게 더 빠를것 같다는 판단하에 signaling 서버는 Node와 Socket.io를 사용하여 개발하고, 그 외의 기능을 담당하는 메인 서버는 spring으로 개발하기로 결정했다.

그리고 디자이너분들과 피드백을 주고받으면서 완성된 디자인을 받아 열심히 퍼블리싱 작업을 했고, 다음주엔 작업한 골조 위에 어플리케이션의 메인기능이 될 3D world를 렌더링하는 코드와 WebRTC 통신 코드를 붙여볼 예정이다.

 

일주일동안 엄청나게 달렸지만 그만큼 빠르게 진행되기도 했고, 시간낭비도 적어서 기분이 매우 좋다!