JavaScript (94) 썸네일형 리스트형 Web Socket 채팅방 만들기_4 Web Socket 채팅방 만들기_4 2023.01.09 - [JavaScript] - Web Socket 채팅방 만들기_1 2023.01.10 - [JavaScript] - Web Socket 채팅방 만들기_2 2023.01.10 - [JavaScript] - Web Socket 채팅방 만들기_3 📌 package.json npm i axios 📄 views/chat.html socket.on('chat', function (data) { const div = document.createElement('div'); if (data.user === '{{user}}') { div.classList.add('mine'); } else { div.classList.add('other'); } const na.. Web Socket 채팅방 만들기_3 Web Socket 채팅방 만들기_3 2023.01.09 - [JavaScript] - Web Socket 채팅방 만들기_1 2023.01.10 - [JavaScript] - Web Socket 채팅방 만들기_2 socket.io이용 채팅방 프로젝트 📌 package.json npm i mongoose multer color-hash@2 새로운 방 생성 📄 /views/main.html socket.on('newRoom', function (data) { // 새 방 이벤트 시 새 방 생성 const tr = document.createElement('tr'); let td = document.createElement('td'); td.textContent = data.title; tr.appendChi.. Web Socket 채팅방 만들기_2 Web Socket 채팅방 만들기_2 2023.01.09 - [JavaScript] - Web Socket 채팅방 만들기_1 socket.io 이용 socket.io에서 제공하는 method 활용해 프로젝트에서 원하는 기능 만들 수 있음. ws이랑의 차이점 비교해서 공부. 📌 install Library npm i socket.io 📄 socket.js const { emit } = require('nodemon'); const SocketIO = require('socket.io'); module.exports = (server) => { const io = SocketIO(server, { path: '/socket.io' }); io.on('connection', (socket) => { const.. Web Socket 채팅방 만들기_1 Web Socket 채팅방 만들기_1 WS 이용 📌 package.json npm init -y 📌 package.json { ... "version": "0.0.1", "description": "GIF 웹소켓 채팅방", "main": "app.js", "scripts": { "start": "nodemon start", }, } 📌 .env COOKIE_SECRET = gitchat 📌 install Library npm i cookie-parser dotenv express express-session morgan nunjucks && npm i -D nodemon npm i ws 📄 app.js const webSocket = require("./socket"); const server = app.. 회원가입 데이터 정규식 unit Test 회원가입 데이터 정규식 unit Test input값 정규식 jest Test 📄 unit/signup_validation.js module.exports = { isEmail: (value) => { if(!/^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/.test(value)){ return false; } return true; }, isPhoneNumber: (value) => { if(!/^[0-9]{3}-[0-9]{3,4}-[0-9]{4}$/.test(value)){ return false; } return true; }, isPassword: (value) => { if(!/^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{4,10}$/.test(value)){ retu.. EJS공부 & 팀원 코드 이해하기2 EJS공부 & 팀원 코드 이해하기2 이미지 파일 삽입 📄laundryApply.html 부트스트랩 이미지파일 input let myimg = $('#myimg').val(); 📌 사용 패키지(Terminal) npm install --save multer 📄 routes/workroutes.js // 파일 업로드를 위한 패키지 const multer = require('multer'); const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'static/img/'); // cb 콜백함수를 통해 전송된 파일 저장 디렉토리 설정 }, filename: function (req, file, cb) { cb(nu.. EJS공부 & 팀원 코드 이해하기1 EJS공부 & 팀원 코드 이해하기1 📄 /controllers/workshow.controller.js const WorkShowService = require('../services/workshow.service'); class WorkShowController { workShowService = new WorkShowService(); getWork = async (req, res, next) => { const WorkShow = await this.workShowService.findAllWork(); res.render('workShow', { datas: WorkShow }); }; } module.exports = WorkShowController; 'workShow.ejs'로 render하.. 내일배움캠프 4기_Node 3차 미니프로젝트 html 가져오기 내일배움캠프 4기_Node 3차 미니프로젝트 html 가져오기 팀원분이 짠 코드 나도 나중에 써먹기 위해 공부! 📄 logout.ejs (html) 로그아웃 로그아웃 버튼을 넣고 싶은 곳에 이렇게 넣어주면 된다. 📌 CSS 설정 이 버튼을에 대한 설정은 다음과 같이 해주면된다. 버튼 내부의 텍스트는 센터! 오른쪽으로 가게끔! Node.js 3차 미니프로젝트 Node.js 비밀번호 암호화 Node.js 3차 미니프로젝트 Node.js 비밀번호 암호화 Node.js 비밀번호 hash 📌 활용한 라이브러리 npm i crypto 📄 signup const crypto = require('crypto'); const { User } = require("../models"); const { userType, email, phoneNumber, password, name, address, point } = req.body; const hashPassword = crypto.createHash('sha512').update(req.body.password + 10).digest('hex'); await User.create({ userType, email, phoneNumber, password:h.. Node.js 3차 미니프로젝트 middleware, local Storage Node.js 3차 미니프로젝트 middleware, local Storage 📄 middlewares/auth-middleware.js const jwt = require('jsonwebtoken'); const { User } = require('../models'); module.exports = (req, res, next) => { const token = req.cookies.token; console.log(token); if(!token){ res.status(401).send({ errorMessage: "로그인 후 이용해 주세요." }); return; } try { const { userId } = jwt.verify(token, process.env.SECRET_KEY); const.. 이전 1 2 3 4 5 6 7 ··· 10 다음