2020 AngelHack 해커톤 회고

참여

• 지금까지 짝프로그래밍과 같은 아주 간단한 수준의 협업은 해봤었지만, 팀을 꾸려서 공통의 목적을 위해 나아가는 제대로된 협업은 경험해보지 못했었다. 그렇기 때문에 지금까지 제대로된 협업에 대한 목마름이 있었는데 윤석님의 주도로 엔젤핵 해커톤의 팀원이 꾸려졌고, 총 4명의 팀원과 함께 해커톤에 참여해볼 수 있는 기회를 얻게되었다.

역할

• 나는 프론트엔드를 맡게되었다. 요즘 프론트엔드와 백엔드 사이에서 진로를 고민하고 있었는데, 최초로 내가 원했던 직군이 프론트엔드였기 때문에 프론트엔드를 선택했다. 프론트엔드 자체는 별로 어렵지 않았다. 일반적인 프론트엔드 개발자들이 하는 렌더링 최적화나 고급 CSS 기술들이 요구되지 않았기 때문에 간단하게 React를 이용해서 화면만 꾸미면 됐었다.
  이렇게 프론트엔드의 전반적인 HTML/CSS와 JavaScript를 통한 이벤트 처리 및 서버와의 통신을 맡았으며, webRTC를 이용한 화상기능을 맡았다. 이 때 webRTC는 윤석님이 만들어 놓으신 서버의 매칭 기능에 socket.io를 이용하여 프론트와 연결하는 작업을 하였다.

어려웠던 점

프로젝트를 진행하던 중 막혔던 것들이 몇 가지 있다.

• 첫번째는 radio 버튼을 이용한 옵션 기능이다. 유저가 선택한 옵션의 상태에 따라 버튼의 CSS를 바꾸고 이 옵션을 서버로 전송하는 부분이었는데, 이쪽 저쪽으로 삽질을 많이 한 것 같다. emotion CSS-property를 배열로 선언하고 조건을 넣어줌으로써 해결했다.
• 두번째로 webRTC를 이용해서 서버와 클라이언트를 연결하는 것이 몹시 어려웠다. 거의 이 작업에 9시간 정도 쓴 것 같다. 먼저 webRTC 자체를 처음 다뤄보는 것이었기 때문에 어떤 메커니즘으로 동작하는지 파악하는 데 시간이 많이 걸렸고, 이를 이제 socket.io 서버와의 여러번의 handshake를 통해 연결을 확립하는 작업이 너무 복잡했다.
• 세번째로 Git에 대한 부분 역시 너무 미숙했다. 지금까지 Git과 GitHub를 사용하고 있었기 때문에 블로그 resume에다가도 “Git을 사용할 줄 압니다”라고 써놨었는데 이건 거의 뻥에 가까웠다. 혼자서 Git을 쓰는 것과 여러명이서 협업을 하며 같은 파일을 수정해가면서 Git을 쓰는 것은 수준이 너무 달랐다. 일단 혼자 쓰는 Git은 충돌이 날 위험이 없었고, branch도 잘 안 파도 됐고, commit 역시 짧게짧게 하지 않아도 상관 없었다. 쉽게 말해 그냥 내 마음대로 편한대로 쓰면 됐다. 하지만 협업에서 사용하는 Git은 제대로 된 이해 없이는 시한폭탄과 같았다.
• 네번째로 알고리즘 문제를 짝프로그래밍 하는 것과 프로젝트를 짝프로그래밍으로 진행하는 것은 같지 않았다. 생각보다 훨씬 많은 의견이 오고가야 했다. 인서님과 같이 프론트엔드를 맡았는데, 인서님이 많이 양보해주셔서 무난하게 넘어간 것 같다. 내가 생각보다 자기주장과 고집이 세다는 것을 알게되었고, 유연한 협업을 위해서는 이 부분에 있어서 조심하도록 유념해야 할 것 같다.

알게된 것

• Redux를 통한 상태관리에 대해 배울 수 있었다. 저번 프로젝트 Facebook-clone에서는 상태관리 라이브러리를 쓰지 않고 오르락 내리락 난리였는데, 이번 기회에 Redux를 사용해보면서 그 편리함을 느낄 수 있었다. 아울러 한 곳에서 상태관리를 하게 됨으로써 테스트가 용이해진다는 것도 알 수 있었다.
• React-testing-library를 통한 리액트 컴포넌트 테스트 역시 배워볼 수 있었다. 저번 프로젝트에서는 Enzyme을 사용했었는데 React-testing-library가 뭔가 더 가볍고 사용하기 편리하다는 느낌을 받았다. 또한, describe(given), context(when), it(then)을 통해 테스트의 의도를 드러내는 방법에 대해서도 알 수 있었다.
• 저번 프로젝트에서 styled-component를 사용하지 않고 그냥 .css파일에 CSS 내용을 다 때려박았던 것이 너무 아쉬웠는데, 이번에 emotion이라는 라이브러리를 사용해볼 수 있었다. 특히 @emotion/babel-preset-css-prop dependency만 설치하면 그냥 HTML property에다가 바로 css 삽입을 할 수 있어서 훨씬 가독성 있고 편리했다. 이 좋은 걸 왜 이제서야 쓸까. 정말 좋았다.
• webRTC를 사용한 화상기능의 구현에 대해 알 수 있었다. 솔직히 완벽하게 이해했다고 할 순 없지만 대충 이게 이렇게 돼서 이렇게 되는 거구나 정도의 흐름은 알 수 있었다. 흐름 자체를 알고나니 그렇게 어려운 것은 아니었지만, webRTC의 연결이 socket.io를 사용하는 것이어서 복잡함이 있었다. 만약 저번 프로젝트에서 socket.io를 이용한 채팅 기능을 만들어보는 경험을 안했더라면 이번에 절대 못했을 것 같다. 그래도 이를 통해 webRTC란 것에 대해서 알 수 있었고, socket.io의 숙련도 역시 높아진 것 같다.
• WebPack의 config를 이용해서 명령어에 따라 적절한 env 파일을 엑세스하는 방법에 대해 알게되었다. 예전에는 로컬에서 돌리다가 서버로 배포할 때 직접 코드를 하나하나 찾아서 수정 해주었었는데, 이를 사용하니 로컬에서 돌릴때는 npm run local, 서버로 돌릴때는 npm start 하는 식으로 엄청 편리하게 사용할 수 있었다.
• 디자이너의 필요성에 대해 알게되었다. 아무리 내부 코드가 기가막혀도 사용하는 유저 입장에서 눈에 보이는 것은 결국 디자인이다. 반대로, 아무리 내부 코드가 구질구질해도 CSS 디자인이 기가막히면 그럴듯해보인다는 것을 알게되었다. 디자인은 정말 중요하다.

앞으로

• 상태를 가지는 컴포넌트와 렌더링 역할을 하는 컴포넌트는 분리해야 한다. 이번 프로젝트에서 알게된 사실인데 막상 시간에 쫓겨 제대로 적용해보지 못했던 점이 아쉽다. 다음에 다른 프로젝트를 진행하게 된다면 이 점을 명심하여 꼭 적용해보도록 해야겠다.
• 리덕스에 대해 조금 깊게 공부해보고 싶다. 이번에는 윤석님이 세팅을 쫘악 끝내주셨고 그냥 사용해보는 경험정도에 미친 것 같다. 대충 이런식으로 돌아가는 구나, 이렇게 사용하면 되는구나 정도 알게되었는데, 아직 왜 store와 slice가 나뉘어 있는지, 이를 통해 얻을 수 있는 이점이 무엇인지, reducer와 action이란 정확하게 무엇인지, 궁금한 점들이 너무 많다. 각 잡고 공부해봐야 하는 부분이라고 생각한다.
• 이번 프로젝트를 통해서 윤석님께 많은 피드백을 받았는데 결국 관통하는 핵심은 “코드는 의도를 드러내야 한다”는 것 같다. 이를 명심하고 코드 한줄에도 의도를 담을 수 있는 개발자가 되도록 노력해야겠다.

소스

GitHub: https://github.com/poongdeong/poongdeong
데모영상: https://www.youtube.com/watch?v=C82uXRYDR8E&feature=youtu.be

비록 수상은 못했지만 정말 값진 일주일이었다.