일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
31 |
- 회고
- CSS module 장점
- 코드잇 스프린트 FE 1기
- 리스티웨이브
- 티스토리챌린지
- css module classNames
- useimperativehandle 사용법
- express react
- 프리렌더링
- next.js
- usemutation custom hook
- components as formulas
- 오블완
- 이미지 업로드 과정
- dynamic metadata
- type reference cannot be named error
- React
- useimperativehandle 사용할때
- 특정 dom node만 노출시키고 싶을 때
- node.js(express) + ws(websocket) + react
- 리액트로 채팅 기능 구현하기
- inferred type error
- useref 타입
- http.createserver
- app.listen
- 리액트 19 useref
- pure functions
- express로 채팅 기능 구현하기
- trigger additional callbacks
- 스프린트 여정 마침
- Today
- Total
목록Programming/Node.js(express) (2)
Life is connecting the dots .

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

프론트엔드는 React, Next.js를 사용하고, 백엔드는 node.js, express, DB는 mysql을 사용하여 연동하는 과정을 기록해 본다. node.js(express)를 공부한 이유는 프론트엔드 토이 프로젝트를 할 때 간단하게나마 백엔드 서버를 구축해서 모두 만들어보고 싶어서이다. 1. 폴더구조프론트엔드와 백엔드를 한 번에 세팅해 본 적이 없어서 폴더구조에 고민이 많았다. 결론은 (1) 한 폴더에 한 번에 만들어서 서버를 한 번만 띄우는 방법과 (2) 백엔드와 프런트엔드 폴더를 각각 두어 서버를 각각 띄우는 방법으로 좁혀졌는데최종 (2) 번을 선택해서 만들었다. 그 이유는 각 폴더 안에서 서버를 띄우는 것이 익숙하면서 개발하기에도 편했고, 에러가 발생했을 때도 빨리 확인할 수 있다고 판..