기존에 팀 프로젝트로 진행했던 Preview 서비스를 개인적으로 리팩토링한 레포지토리입니다.
리팩토링 작업물 정리는 README 아래 정리해두었습니다.
면접 연습을 하고 싶은데.. 🧐
다른 사람과 함께 할 수 없을까? 👥
WebRTC 기반으로 화상회의 기능을 구현해서 면접 스터디를 할 수 있습니다. 1~5명까지 스터디룸에 입장할 수 있게 설정하였고, 인원 수에 맞춰 Mesh 방식을 택해 클라이언트 간 p2p 통신을 할 수 있게 구현했습니다.
- 만들어둔 질문지/저장된 질문지 선택
- 스터디룸 이름 설정 및 인원 수 선택
- 스터디룸의 공개/비공개 여부 선택
- 세션을 생성하게 되면 자신의 비디오와 닉네임을 설정하고 입장
_.mp4
- 1~5명까지 정해진 인원 수에 따라 화상회의
- 비디오/오디오 제어 가능
- 말하는 사람에게 테두리 효과
- 리액션 기능
_.mp4
- 선택한 질문지를 통해 면접 스터디
- 질문을 하나씩 넘겨가며 돌아가며 답변할 수 있는 환경 제공
- 방장이 질문을 넘기고 이전 질문으로도 돌아갈 수 있게 설정
_.mp4
- 스터디 채널 페이지에서 다른 사람이 만들어둔 스터디룸에 입장
- 입장 전 카메라 미리보기와 닉네임 설정을 통해 원하는대로 설정 후 입장
- 원하는 카테고리에 따라 면접 질문지 생성 가능
- 면접 질문지 공유와 스크랩을 통해 다른 사람도 이용가능하게 설정
- 사용량에 따라 인기 질문지 확인 가능
| Category | Stack |
|---|---|
| Frontend |        |
| Backend |       |
| Common |      |
| DevOps |   |
| CI/CD |  |
| Etc |   |
- 기존 화상회의 페이지에서 관리하는 상태를 props로 전달하다보니 각 컴포넌트는 수십개의 props를 전달받았고 이로 인해 컴포넌트 분리가 쉽지 않고 구조 파악도 어려웠다.
- 전역 상태를 도입해 각 컴포넌트가 사용하는 상태만 구독하는 형식으로 변경하고 selector로 구독하게 하여 전체 상태를 구독하지 않게 했다.
- WebRTC 연결 로직과 같은 복잡한 로직의 흐름 이해가 어려워 서비스 계층을 도입해 복잡한 로직을 해당 계층에서 처리하고 useRef로 관리되는 변수도 서비스 계층에서 관리하도록 수정했다. 여러 컴포넌트에서 필요한 상태라 싱글톤으로 구현해 WebRTC 매니저 인스턴스를 여러 곳에도 참조해도 같은 상태를 참조할 수 있게 했다.
- 기존 탭 컴포넌트가 사용되는 곳은 4군데였고, 하드 코딩으로 만들어졌었다. 그리고 탭 상태를 boolean으로 관리해서 탭 아이템이 2개로 제한되었다.
- 4군데에서 재사용할 수 있고 가독성이 좋으면서 탭 상태 관리를 사용자는 알 필요 없이 간단하게 관리할 방법으로 합성 컴포넌트 개념과 Context API를 도입했다.
- 일관된 로딩 처리가 되지 않아 컴포넌트에서 if (loading)으로 처리하거나 혹은 UI 코드 안에서 로딩 변수를 넣어서 관리했다. 일관되게 처리하고 컴포넌트 내부에서 로딩을 조건문으로 관리하지 않기 위해 Suspense로 처리하도록 했다.
- 로딩 UI는 로딩 스피너가 아닌 스켈레톤을 도입해서 사용자가 지연을 덜 느낄 수 있도록 했다. 이 과정에서 너무 빠르게 데이터가 로드될 때 스켈레톤 UI가 오히려 깜빡거려 사용자 경험이 좋지 않다는 것을 알게되어 지연 시간을 두고, 사용자의 네트워크 상황에 따라 유연하게 도입할 수 있는 네트워크 감지 훅을 추가했다.
- 스켈레톤 UI는 기존 컴포넌트 뼈대로 만드는 것이라 기존 컴포넌트가 변경되면 다시 변경해줘야하는 불편함과 만들 때마다 복붙하는 것이 번거로울거 같아 디자인 변경에도 좀 더 빠르게 개발할 수 있도록, 스켈레톤 UI 제너레이터 코드를 작성했다. 기존 컴포넌트에서 UI 코드를 가져와 데이터 부분을 비워주고 해당 부분을 회색으로 처리하게 했다.
- 아이콘을 편리하게 쓰기 위해 팀원과 채택한 라이브러리였는데 성능을 측정하니 해당 라이브러리가 차지하는 번들 사이즈가 매우 컸다. 아이콘 그룹별로 사용해서 더 컸고 제거하려고하니 아이콘을 사용하는 곳도 많고 비슷한 아이콘을 찾는 비용도 생각해야했다.
- 기존 아이콘 디자인을 유지하면서도 번들 사이즈를 줄이려 다른 방법도 생각해보고 all-files도 도입했지만 불편한 점이 많아 기존 쓰던 아이콘 리스트로 기존 아이콘만 컴포넌트로 새로 만들고 라이브러리를 제거했다.
- 라이브러리 제거 후 11점의 성능 점수가 향상되었고 기존 디자인을 유지하며 아이콘을 사용할 수 있었다. 이후 성능 점수가 낮아서 이를 해결하고자 폰트 preconnect, lodash 라이브러리 import 방식 변경 등을 통해 성능 점수를 처음 55점에서 91점으로 향상시킬 수 있었다.