Vue.js 공부하는 동안 문득 Discord의 클론을 만들고 싶었기 때문에 실제로 해 보았습니다.

vue.js로 만든 discor-clone

본가와 클론 비교

본가의 스쿠쇼가 이하(브라우저판)



그리고 이번에 만든 클론 스쿠쇼는



공개 URL : htps // gr. 이오/포 rt후오오/ぢs코 rd-cぉ네/

채팅의 실시간 송수신을 할 수 있습니다
Discord 본가는 WebSocket은 사용하고 있지 않는 것 같습니다만, 나는 WebSocket 쪽이 익숙하기 때문에 Socket.IO를 채용해 보았습니다.

프론트는 Vue.js와 Vuetify이지만, Discord 스타일의 UI에 가기 위해 꽤 scss를 썼습니다.

반응형에도 대응

본가는 스마트 폰용 어플이 있으므로 반응형은 아니지만 반응형으로 해 보았습니다.



스마트폰 표시 시에는 Vuetify의 v-navigation-drawer 컴포넌트에 사이드 메뉴를 저장하도록 했습니다.

아바타 변경 기능

어쨌든 구현.
하지만 다시 로드하지 않으면 회원 목록이나 채팅에서 변경사항이 적용되지 않습니다.

수요가 거의 없지만 역시 자신이 만들고 싶은 것을 만드는 것이 가장 좋습니다.