🔔 #0 , #1.0 ~ 1.5
- 아나콘다 가상환경 설정 + 깃허브
https://print-blue.tistory.com/2
https://print-blue.tistory.com/46
1. 서버 작업
node.js 프로젝트 생성(설치)
npm init -y
description(프로젝트 설명)
프로젝트(패키지)의 설명을 지정
(npm search 사용 시 도움이 됩니다.)
license
패키지 사용을 허용하는 방법과 제한 사항을 알 수 있도록 라이센스를 지정
"license": "MIT" => 수정 및 배포가 자유로우며 실무 혹은 상업적으로 이용해도 된다는 뜻
scripts
패키지 라이프 사이클에서 여러 번 실행되는 스크립트 명령을 포함
nodemon 사용할 거니까 scripts 부분에 nodemon 추가
npm&package.json
https://medium.com/@hwanseogchoi/npm-package-json-2ceed25965b7
# Package.json
"description": "Zoom clone using NodeJS, WebRCT and Websockets.",
"license": "MIT",
"scripts": {
"dev": "nodemon" # nodemon 사용한다고 했으니 nodemon설치해야함
},
nodemon 설치
npm i nodemon -D
- 자동으로 package-lock.json 파일도 생성됨
- node_modules 폴더 생성
- nodemon.json 파일 생성
- src 폴더 생성 = > server.js 파일 생성
# nodemon.json
{
"ignore" : ["src/pubilc/*"], # pubilc 내에 있는 파일이 바뀔 때마다 서버가 다시 시동하지 않도록 해줌
"exec" : "babel-node src/server.js" # exec가 server.js 실행시킴
}
* exec 함수는 path 나 file에 지정된 명령이나 실행 파일을 실행한다.
바벨 / 프리셋 설치
git init. # 바벨 설치 전
npm i @babel/core @babel/cli @babel/node -D # 바벨
npm i @babel/preset-env -D
* Babel 의 주 역할은
- JavaScript
- JSX(JavaScript를 확장한 문법)
- TypeScript(자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어 * 슈퍼셋:시각적이고 직관적이며 대화형으로 설계된 오픈 소스 데이터 탐색 및 시각화 플랫폼)
코드를 하위 버전의 JavaScript 문법으로 변환시켜주는 역할, 다른 플랫폼 브라우저에서도 원활한 동작을 할 수 있도록 하는 것
한 줄 요약 : 구 버전 호환 + 다른 언어 번역을 해주는 컴파일러
- babel.config.json 파일 생성
# babel.config.json
{
"presets": ["@babel/preset-env"] # 우리가 사용할 유일한 preset
}
* Plugin : 규칙 하나하나를 세밀하게 적용할 때 사용
* Preset : 이 규칙을 모아 놓은 세트로서, 세트들을 적용할 때 사용(plugin 을 미리 모아놓은 파일)
express 프레임워크 설치
npm i express
2. 프론트 작업
- pug - template
설치
npm i pug
> 들여쓰기 중요
> 닫는 태그 필요 x -> 간소화
> *컴파일한 후에 html문서를 렌더링하는 형식
* 컴파일 = 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정
https://jeong-pro.tistory.com/65
# src/views/home.pug
doctype html
html(lang="ko")
head
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Zoom
link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
body
header
h1 Zoom!
main
script(src="/public/js/app.js")
https://choice91.tistory.com/27
HTTP vs. WebSockets
HTTP
클라이언트-서버 간 통신을 할 때 사용하는 프로토콜
- 무상태(stateless): 백엔드(서버)는 클라이언트와 요청 & 응답을 주고 받은 후, 클라이언트에 대한 정보가 남아 있지 않기 때문에 기억하지 못한다.
- 서버는 클라이언트가 보낸 요청에 대해서만 응답을 할 수가 있다. 요청을 받지 않은 서버가 먼저 클라이언트에 패킷을 보내는 구조가 아님.
= > user 가 request를 하면 server 가 repones 하는 프로토콜이며 , 서버는 항상 내가 누군지 모른다 이걸 무상태 stateless 라고 함 !
WebSockets
실시간 통신을 가능하게 해주는 프로토콜
특징:
- 양방향 연결(bi-directional connection): 클라이언트(유저)와 서버가 handshake 과정을 통해 연결이 성립되면, 그 후로는 계속해서 패킷을 주고 받을 수 있는 구조
- 서버는 연결이 된 상태에서, 원할 때 유저에게 메시지를 보낼 수 있다
=> user 가 websocket 을 이용한 request 를 하고 websocket connection 응답하면 계속 연결되어 있어서 서버가 내가 누군지 알 수 있다 양방향 간단하게 전화 연결 중이라고 생각하면 될 듯
사용 방법
- 브라우저에 내장된 webSocket API 사용
WebSockets 라이브러리 ws
ws가 무엇인가
node.js에서 webSocket을 사용하기 편리하도록 해주는 라이브러리로, webSocket protocol을 실행(implement)하는 패키지라고 생각하면 됨
- ws는 websocket의 코어, 중심 기능이지만 부가적인 기능을 제공해주진 않는다
- ws를 활용해서 실시간 채팅방 기능을 제공하는 프레임워크는 따로 존재한다
설치
npm install ws@7.5.3 --save
버전 차이로 server.js에서 메세지를 받을 때 Blob타입으로 오는데 , utf8로 변해줘도 정상적으로 동작하지 않아서 버전 맞춤
환경 설정
현재 server.js 에는 express 프레임워크를 사용해서 http 프로토콜을 사용한 서버 설정이 되어 있는데, websocket을 이용해서 서버를 연결하기 위해서 두 프로토콜을 합쳐서 환경 설정을 해줘야 함
webSocket 서버 생성해서 각종 이벤트에 대해 처리하기
webSocket은 JS의 addEventListener 메소드에서 click, scroll 등 이벤트에 대해 두 번째 인자로 콜백함수를 전달하고, 해당 이벤트가 발생할 경우 함수를 실행시키는 방식과 유사하게 동작한다.
코드를 작성하면서 웹 소켓 서버를 생성하고, 클라이언트와 서버를 연결해보자.
app.js 파일 (프론트엔드-클라이언트 쪽):
1 . 브라우저에서 백엔드와 연결(connection)을 생성
const socket = new WebSocket(`ws://${window.location.host}`);
2 . open, message, close 이벤트에 대한 이벤트 리스너 생성
socket.addEventListener("open", () => { # open 되면 동작
console.log("Connected to Server ✅");
});
socket.addEventListener("message", (message) => {
console.log("New message: ", message.data);
});
socket.addEventListener("close", () => {
console.log("Disconnected from Server ❌");
});
- addEventLister = 특정 이벤트가 발생하면 콜백함수가 작동
- 서버를 켜놓고, 브라우저에서 localhost:3000에 접속하면, 브라우저 콘솔창에 서버에 연결되었다는 메시지가 출력됨 ("Connected to Server ✅"))
- 서버 연결이 끊어지면, 브라우저 콘솔에 연결이 끊겼다는 메시지가 출력된다. ("Disconnected from Server ❌")
- node.js 콘솔에서 서버에 연결된 브라우저가 있을 경우, 메시지가 출력되는 것을 확인할 수 있음
3 . 백엔드(서버)와 연결이 되고 10초 후에, 브라우저에서 백엔드 쪽으로 메시지 전송
setTimeout(() => {
socket.send("hello from the browser!"); # backend로 메세지 보내기
}, 10000); # 10초 후 작동
server.js 파일 (백엔드-서버 쪽):
# src/server.js
import express from 'express';
const app = express(); # app 이라는 변수에 가져와서 사용
app.set("view engine", "pug"); # Pug로 view engine 설정
app.set("views", __dirname + "/views"); # express에 templatedl 어디 있는지 지정
app.use("/public", express.static(__dirname + "/public")); # public 폴더를 유저에게 공개(유저가 볼 수 있는 폴더 지정)
app.get("/", (req, res) => res.render("home")); # 홈페이지로 이동할 때 사용될 템플릿을 렌더
app.get("/*", (req, res) => res.redirect("/")); # 홈페이지 내 어느 페이지로 이동 해도 home으로 연결되도록 연결
1. 웹소켓 서버 생성
// http를 이용해서 서버 생성
const server = http.createServer(app);
// websocket 서버 생성
// http 서버를 인자로 전달하면, 같은 서버에서 http, webSocket을 둘 다 작동할 수 있음
// (단, 필요하지 않은 경우엔 단순히 websocket 서버만 생성할 수 있음)
const wss = new WebSocket.Server({ server });
2. 웹 소켓 서버에 클라이언트가 연결(connection)되었을 경우
wss.on("connection", (socket) => {
console.log("Connected to Browser ✅");
socket.on("close", () => console.log("Disconnected from Browser ❌"));
socket.on("message", (message) => {
console.log(message.toString('utf8'));
});
socket.send("hello!!!");
});
- 연결된 소켓에 대한 정보가 socket 인자를 통해 전달
- socket.on("close", closeEventHandler) : 소켓의 연결이 종료될 경우에 대한 이벤트 처리
- 웹 소켓 버전이 바뀌면서 메시지를 toString으로 변환해서 사용해야 문자열이 똑바로 출력됨
버퍼의 단점
1) 메모리 문제: 용량이 100MB인 파일이 있으면 읽을 때 메모리에 100MB의 버퍼를 만들어야한다. 이 때, 서버같이 여러명이 이용하는 환경에서는 메모리 문제가 발생할 수 있다.
2) 동작이 느림: 모든 내용의 버퍼를 다 쓴 후에야 다음 동작으로 넘어가기 때문에 파일 읽기, 압축, 쓰기 등의 조작을 할 때 매번 전체 용량을 버퍼로 처리해야 다음 단계로 넘어갈 수 있다. 이를 편리하게 만든게 스트림이다.
https://webruden.tistory.com/946
'FrameWork > Express.js' 카테고리의 다른 글
5 . 노마드코더 zoom 클론 - 방이름띄우기/방 사람수/admin panel (0) | 2023.02.05 |
---|---|
4 . 노마드코더 zoom 클론 - 방만들기/알림/메세지/닉네임 (0) | 2023.02.05 |
3 . 노마드코더 zoom 클론 - socket IO (0) | 2023.01.15 |
2 . 노마드코드 zoom클론코딩 - 채팅기능 구현하기 (0) | 2023.01.15 |