socket.io4 [오픈소스][socket.io]react-tomato-talk 개인적으로 채팅 프로그램을 혼자 개발해보고 싶은 마음으로 시작한 사이드 프로젝트이다. 채팅을 개발해보고 싶었으나 효율적인 측면에서 단기간에 혼자서 서비스급의 규모를 개발하고 디자인하고 싶지는 않았고, 그렇다고 사이드 프로젝트로 그저 별 의미도 없는 보여주기 위한 것을 개발할 바에는 다른 부분을 공부하는 게 더 효율적이라 생각하던 차에 적당히 시작해서 결과물을 내보자는 생각으로 만든 프로젝트이다. 채팅을 개발하는 것 자체는 사실 그렇게 어렵지 않다. 그러나, 고도화하고 잘 개발하는 것은 어렵다. 그런점에서 볼 때 유의미한 결과물을 만들기 위해서는 기존의 사용자들이 가진 요구와 나의 욕구를 적절히 충족시킬 방법을 고려해볼 필요가 있었다. 어차피 공개적으로 오픈소스로 개발할 것이라면 특정한 프로젝트에 종속적인.. 2021. 12. 14. [웹챗] nest 소켓 서버 헤로쿠 배포 & 프론트 깃페이지 배포 벡엔드 heroku를 통한 배포가 처음은 아니었지만(지금은 무기한 보류 중인 블로그 벡엔드를 node로 만들어서 배포했었다.) nest.js + socket.io로 배포하는 건 처음인 데다가 오래전 일이다 보니 잘 생각이 안 나서 조금 헤맸다. nest.js 자체의 특징인 ts기반의 배포 전 빌드 우선이라는 특징 때문에 기존 제네레이터로 만든 구성의 세팅으로는 바로 배포가 안된다. 그래서 npm 명령어 스크립트에 아래 2줄을 추가 해줄 필요가 있다. "prestart:prod": "rimraf dist && npm run build", "web": "npm run start:prod", web이라는 명령어로 start:prod명령어를 실행하는 것과 그전에 파일들을 최신화하는 것이다. 이후 실행되는 sta.. 2021. 12. 5. [웹챗] 채팅 메시지 성능 이슈 해결 & 채팅 메시지 기본 UI ui의 경우 인라인 스타일로 위와 같이 간단히 잡았다. 지금은 먼저 간단히 본인이 보낸 메시지의 경우 토마토색(주황색)으로 다른 사람이 보낸 메시지의 경우 하얀색으로 배경을 통해서 표시 하지만 여러 사람이 동시에 채팅을 보낼 경우 각 유저의 고유한 식별 아이디나 프로필 같은 부분이 필요하다. 그외에는 기본적인 스타일 조금 더 가다듬고 사용자가 커스텀 할 수 있게 해주면 될거 같긴하다. 그리고 채팅창 인원목록 뿐 아니라 사용자 입출입 메시지 기능을 만들어 줘야할거 같다. 기존에 지나간 로그들을 다운로드 해서 보여주지 않기 때문에 채팅 연결이 끊기거나 재연결될때 해당 사용자는 이전의 메시지를 볼 수 없는게 서로간의 오해의 소지가 있어서 서로간의 연결 및 연결해제시 메시지를 보내는 기능이 필요하다. SendM.. 2021. 11. 30. [웹챗] 레이아웃 스타일 & 기본 스타일 이번 프로젝트의 경우 채팅창을 모듈로 배포하는게 목적이기 때문에 그 채팅창을 감싸는 부분과 채팅창 부분의 경우 스타일링 방식을 조금 다르게 처리했다. 레이아웃은 css flex를 통해서 잡았고, 추후 모듈 배포나 기타 설정에 따라서 사용자가 수정하거나 옵션을 줄 수 있도록 할 예정이다. 디자인은 디자이너가 아니라서 노력대비 효율이 별로 나오지 않으므로 최대한 심플하면서 깔끔한 느낌을 줄 수 있게 색배합 정도만 신경썼다. 먼저 모듈배포에 포함 되지 않을 레이아웃 부분의 경우 styled-components를 통해서 글로벌 스타일과 컴포넌트 스타일을 통해서 간단한 레이아웃과 스타일을 잡아줬다. 이 부분은 추가 기능을 넣지 않는한 크게 변할 부분은 없을거로 예상된다. const CommonStyle = cre.. 2021. 11. 24. 이전 1 다음
