진행 중인 사이드 프로젝트에서 실시간 채팅 도메인을 전적으로 맡았는데 실시간 채팅, 채팅 이미지 업로드를 어떻게 구현했는지 공유를 해보려 합니다. 일단 웹소켓을 구현하려면 백엔드와 소통이 중요합니다. 백엔드의 설정과 프론트엔드 서로 설정을 맞춰야 하기 때문입니다. 저희 백엔드는 Stomp 와 SockJs를 기준으로 웹소켓을 구현하셨다고 하였고 저 또한 StompJs, SockJs를 설치하여 구현하였습니다. 구현에 필요한 패키지들을 설치해 줍니다. yarn add @stomp/stompjs yarn add sockjs-client 1. 소켓 연결 import SockJs from 'sockjs-client'; import { Stomp } from '@stomp/stompjs'; export default..
요즘 프로젝트를 진행하면서 클린코드에 대해 관심이 많아졌습니다. 클린코드란? "클린 코드"는 프로그래밍과 소프트웨어 개발에서 매우 중요한 개념 중 하나로, 소스 코드의 가독성, 유지보수성, 품질, 효율성, 그리고 버그의 최소화를 목표로 하는 개념을 나타냅니다. 클린 코드는 다른 개발자가 이해하고 협업하기 쉽고, 오랫동안 유지보수할 수 있는 코드를 작성하는 방식입니다. - ChatGPT Chat GPT 선생님께선 가독성, 유지보수성, 품질, 효율성 등등등... 이 조건들을 잘 지키는 것이 클린코드라고 합니다.. 지극히 주관적인 제 기준에서의 클린코드란 남이 봤을 때 이쁘게 짠 코드 즉 술술 잘 읽히는 코드라고 생각됩니다. 코드가 잘 읽힌다는 것은 가독성 있게 잘 짠 것일 테고 잘 읽힌다면 전체적인 구조를 ..
들어가기 현재 진행 중인 사이드 프로젝트 기능 중 오픈채팅방을 구현기능이 있어 WebSocket이란 무엇이고 어떻게 작동하게 되는지에 대하여 기록하기 위한 글입니다. WebSocket 이란? HTTP를 통해 실시간 채팅 서비스를 구현한다면 그에 따른 수많은 요청, 응답이 필요하게 됩니다. 이는 클라이언트 측에서 매우 잦은 요청을 하여 클라이언트 측에 부담이 될 뿐 아니라 이를 처리하는 서버도 부하가 생기게 될 것입니다. 이러한 단점을 보완하기 위해 웹 소켓(Web Socket)이 등장하였습니다.웹 소켓 이란 서버와 사용자 간 연결을 "유지"한 상태로 추가 요청 없이 양방향으로 데이터를 교환할 수 있는 프로토콜 입니다.웹 소켓 연결을 만들 때는 WebSocket 생성자를 이용합니다. 이때 매개변수로 url..
저는 요즘 tailwindcss 매력에 푹 빠져있습니다. 독창적인 디자인을 할 수 있으며 css속성들이 클래스로 이미 다 지정이 되어있어서 협업을 할 때에도 좋습니다. 이번글에서는 tailwindcss 동적으로 스타일링하는법에 대해서 알아보겠습니다. 동적 스타일링이란 무엇일까요? 제가 생각하기에 동적스타일링이란 상태 또는 prop에 따라 컴포넌트의 UI가 바뀌는 것이라고 생각합니다. 바로 코드부터 살펴보시죠. 안 좋은 예 export default function FlexBox({ children, className = "", direction = "row", justify = "center", align = "center", gap = 0, as: Container = "div", }: FlexBoxP..
