나만의 개발블로그

NodeJS+Express 서버 & React 연동 기존 nodeJS로 만든 서버가 있다면 생략하고 아래 설치 목록을 한번 더 체크 후 넘어가보기 // nodejs npm i init -y npm i express React의 프로젝트를 바로 사용할 수 없기에 Build를 하기 // react Project npm run build 이후 Back과 Front가 같은 경로에 있다고 할 경우로 예시를 들자면 nodejs의 server.js에서 아래와 같이 코드를 작성하기 const express = require("express"); const app = express(); const path = require("path"); app.listen(8080, () => { console.log("hi"); }..

(Socket.io) 실시간 데이터 보내고 받는 법 이전에 실습한 SSE와 Socket.io의 차이 SSE 서버 → 유저 (일방적 통신) Socket.io 서버 ↔ 유저 (양방향 통신) 보통 WebSocket을 사용할 때는 JavaScript로도 구현할 수 있지만 socket.io 라이브러리를 사용함. 우선 간단하게 생각하면 되는 건 emit: 데이터 보내기 on: 데이터 받기 설치 npm i socket.io server.js에서 socket.io셋팅 // socket.io 셋팅 const http = require('http').createServer(app) const {Server} = require('socket.io') const io = new Server(http) 그리고 기존에 설정했던 ..

실시간 채팅 실시간으로 DB 데이터 가져오는 방법 Get 요청을 매초 마다 보내기 단점: 유저가 많아질 수록 서버가 힘들어 함. (DDos 공격으로도 됨) SSE (Server Sent Events) 서버가 일방적으로 데이터 실시간 전송 가능 서버와 유저간 실시간 소통 채널 열기 // SSE // 아래와 같이 작성하면 /sse 로 GET 요청하면 실시간으로 채널이 오픈됨 app.get("/msg/:id", isLogin, (req, res) => { // Header를 아래와 같이 수정해달라는 코드 res.writeHead(200, { Connection: "keep-alive", "Content-Type": "text/event-stream", "Cache-Control": "no-cache", });..