나만의 개발블로그

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", });..

/chat 으로 이동했을 때 페이지를 보여줄 수 있도록 하기 app.get("/chat", isLogin, (req, res) => { res.render("chat.ejs"); }); 이후 chat.ejs 에서 로그인된 유저가 참여한 채팅 목록을 보여줄 수 있도록 data를 보내주기 app.get("/chat", isLogin, (req, res) => { console.log("req.user._id: ", req.user._id); db.collection("chatroom") .find({ member: ObjectID(req.user._id) }) .toArray() .then((data) => { console.log(data); res.render("chat.ejs", { data: data..

이미지 업로드 & 이미지 서버 만들기 upload.ejs를 만들어서 form 태그안에 input 타입으로 file을 선택해서 파일 전달할 수 있도록 하기 input 속성의 enctype은 아래의 주석을 보고 이해하기. 업로드 페이지 server.js 에도 만들 upload로 방문했을때 upload.ejs가 보일 수 있도록 해주기. app.get("/upload", (req, res) => { res.render("upload.ejs"); }); 여기서 잠시 이제 업로드한 파일을 어디서 보관하는지에 대해 생각해본다면 db에 그냥 저장하는게 좋지 않을까? 라고 생각하지만 보통 저렴하게 하드디스크에 저장한다고 한다, 아니면 클라우드 서비스의 하드디스크를 빌려서 사용하던지! 그래서 우선 프로젝트 내에 폴더를 만..

게시판 우선 정정할 것이 있다. 지난번 로그인 시 세션을 저장할 때 로그인 유저의 정보를 같이 담아주는 코드가 잘못되어 있었다. // 지난번 코드 // 이때 id로 가져오는 값에 object로 로그인 유저의 정보가 들어가 있기에 // 찾을 수 없었고 그렇기에 data에는 undefined가 들어가게 되었었다 ㅠㅠ // (한참을 찾았네...) passport.deserializeUser((id, done) => { db.collection("login").findOne({ id: id }, (err, data) => { done(null, data); }); }); // 변경 후 passport.deserializeUser((userData, done) => { db.collection("login").f..

회원가입 페이지 + 비밀번호 암호화 우선 회원가입 페이지부터 만들기 로그인 페이지와 입력하는 레이아웃을 유사하니 login.ejs 파일 그대로 가져와서 form 태그의 action 만 /register로 변경하고 submit 을 회원가입으로 변경하기 회원가입 페이지 Id PW 회원가입 그리고 server.js 에서도 signup 페이지를 GET, POST 요청시에 대한 코드도 작성하기 여기서 주의할 점은 회원 기능이 필요하다면 passport 셋팅하는 부분이 위에 있어야한다고 한다. // GET app.get("/signup", (req, res) => { res.render("signup.ejs"); }); // POST app.post("/register", (req, res) => { db.coll..

Search 기능 구현 전에 env 파일로 환경변수 관리하기 환경변수 설치 npm i dotenv server.js 파일에 설치한 dotenv 불러오기 require('dotenv').config() 이후 server.js 와 같은 경로에 .env 파일 생성 후 아래와 같이 PORT와 DB_URL 작성하기 물론 변수 작명은 자유롭게 가능. // .env 파일 PORT = '8080' DB_URL = 'mongodb+srv........' 그리고 server.js에서 기존에 작성했던 PORT 번호와 DB_URL을 작성시엔 process.env.변수명으로 변경 process.env.PORT process.env.DB_URL Search 검색 기능 하나 찾을 때는 findOne() 여러개 찾을 때는 find(..

회원인증방법 Session-Based 페이지에서 서버로 로그인 요청시 서버는 쿠키를 전달하게 됨 쿠키란 브라우저에 저장할 수 있는 긴 문자열 그래서 쿠키에 Session_ID 가 담겨져 있음 그래서 서버 메모리에 유저의 로그인 정보를 저장하게 되면서 세션이 저장되었다는 정보를 쿠키로 만들어서 브라우저에 전송 이후 브라우저는 저장하게 되고 그것이 로그인을 한 상태가 되는 것 로그인 후 활동으로 예를 들어 마이페이지를 보여달라고 할 때 자동으로 쿠키를 전송하게 되고, 서버의 Session Store에서 쿠키 안에 있는 Session_ID를 찾아서 로그인 했는지 확인 후 페이지를 보여주게 됨 Session-Based의 특징은 로그인 상태를 저장하는 것 JWT (Token-Based, JSON Web Token..

PUT 요청으로 게시글 데이터 수정하기 우선 HTML 에서 PUT 이나 DELETE 요청이 없기에 라이브러리를 설치해보기! npm i method-override 설치 이후 server.js 에서도 코드를 추가해주기 const methodOverride = require("method-override") app.use(methodOverride("_method") 그리고 수정하고자 하는 페이지인 edit.ejs 파일을 만들어서 write 페이지와 똑같이 레이아웃 짜고, 여기서 아까 수정했던 method-override 코드를 form 태그에 추가하기! 추가 코드는 form 태그의 action 속성에 action = “/edit?_method=PUT” 으로 경로?_method=메서드 종류 로 추가하고 me..