DAY 1 #0.2 ~ #1.2

 

프론트, 백엔드 준비를 위해 미리 0.0~0.4를 들어야한다...

안들었다가 지금 1시간째 헛탕쳤다... 

https://ssocoit.tistory.com/188 참고

 

 

 

#0.2 server Setup

 

https://www.npmjs.com/package/ws

 

먼저 node, ws, express, pug 설치

나는 이미 노드는 설치되어 있으므로 나머지 세개만 추가로 설치함.. 

npm i ws
npm i express
npm i pug

 

github에 올린다면 readme 파일도 추가로 생성해줄 수 있다. 

터미널에 npm init-y 를 입력하면 뭔가 있어보이는 기본 package.json 파일을 작업해준다. 거기에 추가로 덧붙이고 싶은 내용을 작성하면 된다.

nodemon과 babel을 사용할것이니 터미널에 설치 명령을 입력한다.

npm i @babel/core @babel/cli @babel/node -D
npm i nodemon -D 
npm i @babel/preset-env -D

 

그리고 babel.config.json, nodemon.json이라는 파일을 만들어준다.

 

nodemon.json

ignore은 해당 폴더와 그 안에 있는 모든 파일을 무시하는 것을 의미한다. public 폴더 내의 파일이 수정되어도 nodemon이 재시작되지 않도록 하는 것이다.

{
  "ignore": ["src/public/*"],
  "exec": "babel-node src/server.js"
}

 

babel.config.json

{
  "presets": ["@babel/preset-env"]
}

 

 

src 폴더를 따로 만들어 여기에 server.js 파일을 만들어준다.

 

완성된 package.json

{
  "dependencies": {
    "express": "^4.18.2",
    "node": "^19.6.0",
    "pug": "^3.0.2",
    "ws": "^8.12.1"
  },
  "scripts": {
    "dev": "nodemon",
    "start": "node server.js"
  },
  "name": "zoom_clonecoding",
  "version": "1.0.0",
  "main": "server.js",
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.0",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.20.2",
    "nodemon": "^2.0.20"
  },
  "keywords": [],
  "author": "",
  "license": "hykim",
  "description": "zoom cloneCoding using NodeJS, WebRTC and WebSockets"
}

 

server.js에서 서버 테스트

import express from "express";

const app = express();
console.log("hello");
app.listen(3000);

 

서버 실행문

npm run dev

 

localhost:3000 에 접속했을 때 다음과 같이 뜬다면 접속 성공!

 

 

#0.3 Frontend Setup

 

나는 그래도 아직까지 html에 많이 길들여져있어서 pug는 정말 적응이 안되는데... 쓴다니 뭐 써봐야지

그리고 pug 파일을 예쁘게 꾸며줄 수 있도록 mvp.css를 이용한다.

 

home.pug

doctype html
html(lang="en")
    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 Noom
        //- mvp.css 사용
        link(rel="stylesheet", href="https://unpkg.com/mvp.css") 
    body 
        header 
            h1 Noom 
        main 
            h2 Welcome to Noom
        script(src="/public/js/app.js")

 

server.js

import express from "express";

// <---- express 서버 준비

const app = express();

// pug 페이지를 rendering 하기 위함
app.set('view engine', 'pug');
// views directory가 src 안에 있으므로
app.set('views', __dirname + "/views");
// public 폴더 내의 js파일이나 css파일에 접근하도록
app.use("/public", express.static(__dirname + "/public"));
// home으로 가면 req, res를 받고 res.render (우리가 만든 home을 render)하는 route
app.get("/", (req, res) => res.render("home"));

// ---->

const handleListen = () => console.log(`Listening on http://localhost:3000`);
app.listen(3000, handleListen);

 

이렇게 뜨면 성공,

 

 

 

#1.0 Introduction

 

만들 프로그램

- 익명으로 채팅 내용을 주고 받을 수 있음

- 닉네임을 추가해 누구랑 대화하는지 알수 있음

- 채팅방의 컨셉을 정함.

- 입장, 퇴장 이벤트 추가

- 실시간으로 방에 몇 명이 접속 중인지 확인

- 서버에 실시간으로 방이 몇 개인지 확인

 

 

#1.1 HTTP vs WebSockets

 

- http, webSocket 둘다 protocol

- http : user가 request하면 server가 response하는 방식

- server는 user에게 메시지를 보낼 수 없음.

- request - response 과정 뒤에는 server가 user를 잊게 됨 => 이를 stateless라고 함.

// user가 home에 GET request를 보내면 template로 반응
app.get("/", (_, res) => res.render("home"));
// user가 어떤 페이지에 GET request를 보내도 redirect로 반응
app.get("/*", (_, res) => res.redirect("/"));

WebSocket : server와 아예 연결되는 것, server와 browser가 양방향 연결이며, server와 browser는 언제든 서로에게 메시지를 보낼 수 있음. disconnect하지 않는 이상 계속 연결되어있음

ex. wifi, 전화

=> 실시간 chat, notifictaion 같은 기능 구현이 가능 

 

 

#1.2 WebSockets in NodeJS

 

https://ssocoit.tistory.com/189 분이 설명을 잘 써놓으셔서 주석을 긁어왔다,,, 

 

import http from "http"; 
import WebSocket from "ws"; 
import express from "express"; 

// app이라는 변수에 가져와서 사용
const app = express(); 

// 뷰 엔진을 pug로 하겠다
app.set("view engine", "pug"); 
// 디렉토리 설정
app.set("views", __dirname + "/views"); 
// public 폴더를 유저에게 공개 (유저가 볼 수 있는 폴더 지정)
app.use("/public", express.static(__dirname + "/public"));
// 홈페이지로 이동할 때 사용될 템플릿을 렌더
app.get("/", (req, res) => res.render("home")); 
// 홈페이지 내 어느 페이지에 접근해도 홈으로 연결되도록 리다이렉트 (다른 url 사용 안할거라)
app.get("/*", (req, res) => res.redirect("/")) 

const handleListen = () => console.log(`Listening on http://localhost:3000`)
// app.listen(3000, handleListen); // 3000번 포트와 연결

// app은 requestlistener 경로 - express application으로부터 서버 생성
const server = http.createServer(app); 

// http 서버 위에 webSocket서버 생성, 위의 http로 만든 server는 필수 X - 이렇게 하면 http / ws 서버 모두 같은 3000번 포트를 이용해서 돌릴 수 있다!
const wss = new WebSocket.Server({ server }); 

// 임시로 만든 함수
function handleConnection(socket) { // 여기서 socket은 연결된 브라우저
    console.log(socket) // 여기 있는 소켓이 frontend와 real-time으로 소통할 수 있다
};

// on method에서는 event가 발동되는 것을 기다린다
// event가 connection / 뒤에 오는 함수는 event가 일어나면 작동
// 그리고 on method는 backend에 연결된 사람의 정보를 제공 - 그게 socket에서 옴
// socket을 callback으로 받는다. webSocket은 서버와 브라우저 사이의 연결
wss.on("connection", handleConnection) 

// 서버는 ws, http 프로토콜 모두 이해할 수 있게 된다
server.listen(3000, handleListen);

 

 

내일 아침 6시까진디 큰일났네... 오늘 오전에 좀 해둘걸...