react18 [웹챗] 채팅 메시지 성능 이슈 해결 & 채팅 메시지 기본 UI ui의 경우 인라인 스타일로 위와 같이 간단히 잡았다. 지금은 먼저 간단히 본인이 보낸 메시지의 경우 토마토색(주황색)으로 다른 사람이 보낸 메시지의 경우 하얀색으로 배경을 통해서 표시 하지만 여러 사람이 동시에 채팅을 보낼 경우 각 유저의 고유한 식별 아이디나 프로필 같은 부분이 필요하다. 그외에는 기본적인 스타일 조금 더 가다듬고 사용자가 커스텀 할 수 있게 해주면 될거 같긴하다. 그리고 채팅창 인원목록 뿐 아니라 사용자 입출입 메시지 기능을 만들어 줘야할거 같다. 기존에 지나간 로그들을 다운로드 해서 보여주지 않기 때문에 채팅 연결이 끊기거나 재연결될때 해당 사용자는 이전의 메시지를 볼 수 없는게 서로간의 오해의 소지가 있어서 서로간의 연결 및 연결해제시 메시지를 보내는 기능이 필요하다. SendM.. 2021. 11. 30. [웹챗] 레이아웃 스타일 & 기본 스타일 이번 프로젝트의 경우 채팅창을 모듈로 배포하는게 목적이기 때문에 그 채팅창을 감싸는 부분과 채팅창 부분의 경우 스타일링 방식을 조금 다르게 처리했다. 레이아웃은 css flex를 통해서 잡았고, 추후 모듈 배포나 기타 설정에 따라서 사용자가 수정하거나 옵션을 줄 수 있도록 할 예정이다. 디자인은 디자이너가 아니라서 노력대비 효율이 별로 나오지 않으므로 최대한 심플하면서 깔끔한 느낌을 줄 수 있게 색배합 정도만 신경썼다. 먼저 모듈배포에 포함 되지 않을 레이아웃 부분의 경우 styled-components를 통해서 글로벌 스타일과 컴포넌트 스타일을 통해서 간단한 레이아웃과 스타일을 잡아줬다. 이 부분은 추가 기능을 넣지 않는한 크게 변할 부분은 없을거로 예상된다. const CommonStyle = cre.. 2021. 11. 24. [웹챗] 기본적인 메시지 전송 & 수신 이벤트 구현 프론트엔드 이번에는 채팅창에 대한 기본적인 레이아웃(DOM)을 잡고, 그에 따른 기본적인 소켓 연결과 해제, 메시지 전송과 전달 등의 기본적인 로직을 작성하고 컴포넌트를 나누었다. socket.io에 대한 테스트코드를 작성하면서 비동기 및 소켓 통신에 대한 테스트 코드가 처음이다 보니 많이 어려웠다. 사실 기본적인 로직의 경우 별거 없기 때문에 로직구현보다 테스트 코드 작성에 시간을 더 많이 소요했다. webChat.test.tsx describe('webChat 채팅창', () => { let socket: any; beforeAll((done) => { socket = io('http://localhost:7778/webChat', { transports: ['websocket'] }); socket.. 2021. 11. 23. [오픈소스][JS] react-daumpost-hook 나는 오픈소스에 관심이 많다. 개발자라는 직업을 선택하고 장인이라는 것을 목표로 하는 입장에서는 당연히 기존의 구루들의 활동에 대해서 깊이는 아니더라도 자세히 알아볼 필요가 많았고, 그러다보니 그들이 말하는 오픈소스 활동 이라는 것에 많은 공감대를 가지게 되었다. 리액트 같은 멋진 오픈소스들을 접하면서 사용할때 마다 그런 가치들에 대한 긍정이 더욱 강화된 편이다. 본질적으로 실력을 키우고 개발자로 성공(실력을 인정받고 그만한 명예와 대우)하는 것을 목표로 삼은 입장에서는 여러 구루들의 활동을 간접적을 접할때 마다 나도 빨리 실력을 키워서 저런걸 하고 싶다 라는 생각을 가지게 되는 건 그렇게 이상한 편이 아니라고 생각한다. 실제로 내가 생각하던 수준의 오픈소스 활동은 아니지만 내가 기여 할 수 있는 기회가.. 2021. 11. 20. 이전 1 2 3 4 5 다음
