Realtime Drawing Game 만들기 - Guess my mind

(1) forder

>node_moduels
>src	>static
		index.js
	>views
server.js //Entry file		home.pug
.babelrc
.gitignore
package.json
README.md

(2) 초기 설정

Wetube clone coding 할 때랑 거의 같다. middleware(morgan) 까지 다 똑같이 설정했다.

https://humonnom.tistory.com/35

Nomad coders - wetube clone coding

(3) Server(server.js)

import express from "express";

const PORT = 4000;
const app = express();

app.get("/", (req, res) => res.render("home"));

const handleListening = () =>
  console.log(`🐬  Listening on: http://localhost${PORT}`);

app.listen(PORT, handleListening);

 (4) Pug install

➜ npm i pug

아래 코드 추가 (server.js)

import { join } from "path";

app.set("view engine", "pug");
app.set("views", join(__dirname, "views"));

 (5) Static (server.js)

app.use(express.static(join(__dirname, "static")));

✍︎ src폴더에 static폴더를 만들고 그 안에 index.js를 만든다.

hello;

➜ http://localhost:4000/index.js로 들어가면 index.js에 적어놨던 hello;가 보인다.

(6) SocketIO 설치(server.js에 import)

https://humonnom.tistory.com/38

Socket.io

(7) ESLint

https://humonnom.tistory.com/36

ESLInt

저번에 쓴 문서를 복붙해서 .eslintrc.js를 만들었다.