채팅9 [오픈소스][socket.io]react-tomato-talk 개인적으로 채팅 프로그램을 혼자 개발해보고 싶은 마음으로 시작한 사이드 프로젝트이다. 채팅을 개발해보고 싶었으나 효율적인 측면에서 단기간에 혼자서 서비스급의 규모를 개발하고 디자인하고 싶지는 않았고, 그렇다고 사이드 프로젝트로 그저 별 의미도 없는 보여주기 위한 것을 개발할 바에는 다른 부분을 공부하는 게 더 효율적이라 생각하던 차에 적당히 시작해서 결과물을 내보자는 생각으로 만든 프로젝트이다. 채팅을 개발하는 것 자체는 사실 그렇게 어렵지 않다. 그러나, 고도화하고 잘 개발하는 것은 어렵다. 그런점에서 볼 때 유의미한 결과물을 만들기 위해서는 기존의 사용자들이 가진 요구와 나의 욕구를 적절히 충족시킬 방법을 고려해볼 필요가 있었다. 어차피 공개적으로 오픈소스로 개발할 것이라면 특정한 프로젝트에 종속적인.. 2021. 12. 14. [웹챗] 디자인 수정 & 기능추가 & 소켓이벤트 변경 먼저 기존 디자인의 레이아웃 가이드라인들을 모두 지웠다. 그리고 각 사용자의 메시지를 식별하기 위해서 그 클라이언트의 socket id를 표시하도록 했다. (타인의 메시지만 보이게 카카오톡을 참고하였다.) 많이 깔끔해진거 같다. 추가적으로 채팅 모듈이 아닌 데모버전에서는 width사이즈를 3가지를 선택하여서 채팅창이 반응형으로 변하는 것을 볼 수 있도록 추가했다. 기본적으로 채팅창 구성요소는 모두 플렉스 레이아웃에 반응형을 기준으로 했기 때문에 극한의 디바이스 환경이 아닌 이상 어디서든 무난하게 맞춰진다. 웹챗 데모 버전 링크 https://yoonjonglyu.github.io/webChat/ webChat-demo yoonjonglyu.github.io 소켓 서버 연결에 대한 피드백을 제공하기 위해서.. 2021. 12. 13. [웹챗] 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. [웹챗] 기본 테마 & 시스템 메시지 채팅창 시스템 메시지로 채팅 입장과 퇴장에 대한 알림을 넣었다. 그리고 기존 스타일들을 이제 어느 정도 잡아 줘야하기에 색배합에 관한 사이트를 참고하면서 세부적인 스타일을 잡아줬다. 솔직히 너무 볼품없긴하다. 디자인 고자가 CSS프레임워크를 쓰지 않다보니 그런듯 분명히 카카오톡을 나름 벤치마킹 했는데 문제는 전혀 그런 느낌이 안든다. 디자인의 오묘함이란... 추가적으로 메시지 전송시 스크롤이 생기면 해당 부분을 자동으로 포커싱 안되는 것을 일단 자신의 메시지가 전송되었을때만 스크롤 해주는 기능을 넣었다. 카카오톡을 살펴보니 스크롤을 감지해서 조금 더 세부적으로 처리하는 거 같다. 추후 수정해야할듯 // 자기가 최신 메시지를 보낼때 자동 스크롤하기 const Room: any = useRef(null); .. 2021. 12. 3. 이전 1 2 3 다음
