일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- app.listen
- useref 타입
- node.js(express) + ws(websocket) + react
- 리스티웨이브
- useimperativehandle 사용할때
- http.createserver
- usemutation custom hook
- useimperativehandle 사용법
- pure functions
- 스프린트 여정 마침
- CSS module 장점
- dynamic metadata
- 코드잇 스프린트 FE 1기
- 프리렌더링
- 이미지 업로드 과정
- next.js
- css module classNames
- express react
- components as formulas
- 리액트 19 useref
- React
- 오블완
- 리액트로 채팅 기능 구현하기
- type reference cannot be named error
- trigger additional callbacks
- 특정 dom node만 노출시키고 싶을 때
- 티스토리챌린지
- 회고
- inferred type error
- express로 채팅 기능 구현하기
Archives
- Today
- Total
목록리액트로 채팅 기능 구현하기 (1)
Life is connecting the dots .

이번에 토이 프로젝트로 채팅 기능을 만들어보게 되면서 웹소켓을 사용해 보았다. 이번 포스팅에서는 웹소켓을 사용하여 메시지를 주고받는 채팅 기능을 구현하는 과정을 기록해 보려 한다. 지금은 연결 후 간단하게만 구현해 놓은 상태이고, 이후 인증 처리 및 메시지 저장하는 기능을 붙일 예정이다. 사용한 기술 스택은 프론트엔드는 React, WebSocket API, 백엔드는 Node.js(express), ws (node.js 웹소켓 라이브러리)를 사용했다. 1. WebSocket웹소켓은 하나의 TCP 접속(connection)에 서버와 클라이언트 간 양방향 통신을 할 수 있게 만든 프로토콜이다. 웹소켓 프로토콜은 HTTP 폴링과 같은 방식에 비해 더 낮은 부하를 사용하여 웹브라우저와 웹서버 간의 통신을 가능하..
Programming/Node.js(express)
2024. 10. 17. 18:03