본문 바로가기

전체 글

 (215)
Zoom 클론코딩 #3 SoketIO 설명 및 설정 프론트 백엔드 실시간 연결해주는 framework 유연해서 연결이 끊기면 자동으로 재연결을 시도하고 websocket이 지원이 안되면 다른 방법을 찾아서 연결한다. socketIO는 webScoket의 부가기능아님!!! webSocket은 브라우저에 api가 기본적으로 있어서 프론트에 설치를 안해도됐지만 socketIo는 기능도 더많고 다르기 때문에 백, 프론트 각각 설치 해줘야함 https://socket.io/docs/v4/ 설치 npm i socket.io import SocketIO from "socket.io"; const httpServer= http.createServer(app); const wss = new WebSocket.Server({httpServer}); 기존 웹소..
Zoom 클론코딩 #2웹소켓 프로토콜 HTTP와 WEBSOCKET의 차이점 HTTP : stateless backend가 유저를 기억하지 못한다는 뜻 ,reply만 가능함 http:// WSS: 양방향 악수처럼 진행됨 처음에 req 보내고 accept하면 연결은 성립되는 것 연결되어있으면 브라우저와 서버는 어느 때나 메세지를 보낼 수 있음 브라우저에는 내장된 websocket api가있음 wws:// 웹소켓의 기본이되는 ws npm i ws로 설치 특징:부가적인기능 없음 완전 기본코드 ws서버와 express서버를 합칠 것임 항상 이런식으로 코드를 두개 작성하지 않아도되지만 두개 모두 같은 포트에서 작동하게하고싶어서 http서버 위에 ws서버를 만들기위함 http,ws reqeust를 같은 포트에서 처리 할 수 있음 import h..
Zoom 클론코딩 #1 환경설정 서버 환경 mkdir zoom cd zom npm init -y //package.json 파일 생성 됨 The -y flag when passed to NPM commands tells the generator to use the defaults instead of asking questions. code . //파일 열기 touch README.md npm i nodemon -D babel.config.json, nodemon.json파일 생성 src > server.js 폴더, 파일 생성 git init . npm i @babel/core @babel/cli @babel/node @babel/preset-env -D touch .gitignore 안에 /node_modules nodemon.json..
2.19토 이번 섹션에서는 실제 서버에서 백엔드를 실행하는 모든 단계들을 해볼 것이다. Heroku를 통해 배포 node.js 환경에서도 서버가 실행 할 수있도록 db바꾸기 mongodb가 localhost에서 진행되고있음 파일들을 서버가아닌 아마존에 올려야함 코드를 production 방식으로 배포하고 압축 우리는 nodemon을 이용해서 babelnode를 실행하고있다. bablenode는 실제로 서비스 되는 곳이아니라 개발할 때만 사용되는 목적으로 사용 코드를 바꾸지않고 sexy코드를 실행시킨다 하지만 빠르지않아 performance문제가있다. initjs를 normal javascript 코드 unsexy 코ㅡㄹ 바꿔야해 -->babel cli https://babeljs.io/docs/en/babel-cl..
02.15화 코멘트만들기 모든 것은 db부터 시작 Comment Model 만들기 import mongoose from "mongoose"; const commentSchema = new mongoose.Schema({ text:{type:String, required:true}, owner:{type: mongoose.Schema.Types.ObjectId , required:true, ref:"User"}, video:{type: mongoose.Schema.Types.ObjectId , required:true, ref:"Video"}//어느 비디오에 달려있는 댓글인지 , createdAt: { type: Date, required: true, default: Date.now, }, }); const Comme..
에러로깅 #1 1.10 1.seeStory.pug에 h1=video.title 렌더링안됨 2.controller에 postEdit 적용 안됨 -->seestory 들어갔다 home으로 돌아오면 title이 변경되어있음(없어짐) -->seestory controller 문제 !발견 잘못 작성한 코드 제거
01.05공부 flash message: 템플릿에 사용자에게 메시지를 남길 수 있게 해주는 미들웨어 session에 근거하기 때문에 한 사용자만 볼 수있다. 1.Express Flash 다운 Express 애플리케이션용 플래시 메시지 npm i express-flash https://www.npmjs.com/package/express-flash express-flash Flash Messages for your Express Application www.npmjs.com server.js 에 2.import flash from "express-flash"; app.use(flash()); -->session에 연결하여 사용자에게 메세지 보냄 flash 설치 한 순간부터 req.flash 사용 할 수있음 middlew..
01/04 공부2 자바스크립트로 녹화기능 만들기 js에 recoder.js파일 생성 후 webpack.config.js에 module.exports ={ entry: { main: "./src/client/js/main.js", videoPlayer: "./src/client/js/videoPlayer.js", recoder: "./src/client/js/recoder.js", }, 설정후 npm run dev:assets로 재시작하면 assets/js/recoder.js 파일이 생성됨 MediaDevices //녹음 녹화에 접근하는 속성 https://developer.mozilla.org/ko/docs/Web/API/MediaDevices getUserMedia() https://developer.mozilla.or..

티스토리툴바