💻 줌 클론 챌린지 DAY+01

📝 줌 클론코딩: From #1.0 to #1.9

Express를 사용한 일반적인 NodeJS설정입니다.
WebRTC와 Websockets를 활용한 Zoom 클론코딩
Pug로 view engine을 설정합니다.
Express에 template이 어디있는지 지정해줍니다.
public url을 생성해서 유저에게 파일을 공유합니다.
home.pug를 렌더해주는 route handler를 만듭니다.(server.js)

Node.js version

v16.18.0 (v14.17.3 이상 필요)

⛳️ NodeJS 개발환경 구축하기

- package.json
- Babel
- Nodemon

1. zoom 폴더를 만듭니다.
2. 만든 폴더 내에서 커맨드창 npm init -y 입력해서, package.json을 생성합니다.
3. package.json에서 script와 main을 삭제합니다.
4. Github을 고려해서 README.md도 추가합니다.

Nodemon 사용하기

- Nodemon이란, 프로젝트를 살펴보고 변경사항이 있을시, 
서버를 재시작해주는 프로그램입니다.
- 서버를 재시작하는 대신, babel-node를 실행하게 설정합니다.
- Babel이란, 작성한 코드를 일반 NodeJS로 컴파일합니다.
- 그 작업을 src/server.js에서 처리해줍니다.
- server.js파일에서는 express를 import해서 
express 어플리케이션을 구축합니다.
- view engine을 Pug로 설정, views 디렉토리가 설정됩니다.
- 또한, public파일들에 대해서도 똑같은 작업을 해주고있습니다.
- public폴더 내 파일들은 Front에서 구동되는 코드입니다.
- app.js가 프론트, server.js가 백엔드입니다.
- 유저는 /public으로 이동할시, public폴더 내용을 볼 수 있습니다.
- views폴더에 있는 home.pug를 렌더하면 끝입니다.
- babel-node를 실행시키면, babel-node는 바로
- babel.config.json을 찾습니다.
- 그곳에서 코드에 적용시킬 preset를 실행시킵니다.

1. npm i nodemon -D 로 node_modules를 생성합니다.
2. babel도 설치해야하므로, touch babel.config.js로 파일을 생성합니다.
3. nodemon.json 파일을 생성합니다.
4. src 폴더를 생성합니다, 그 안에 server.js를 만들어줍니다.
5. git init. 을 통해, git과 연결합니다.
6. npm i @babel/core @babel/cli @babel/node -D 로 바벨을 설치합니다.
7. touch .gitignore gitignore를 생성합니다.
8. .gitignore 파일 내부에는 /node_modules를 입력해서 git이 모듈을 무시하여 git 업로드에서 제외하도록 합니다.
9. nodemon.json 에는 exec 명령어를 하나 넣습니다. exec는 server.js를 실행시키도록 합니다.
   👉 nodemon은 exec명령어를 이용해서 이 명령만 실행하도록 합니다.

{
    "exec": "babel-node src/server.js"
}

10. babel.config.json에서는 preset을 설정합니다.
11. npm i @babel/preset-env -D으로 설치합니다.
12. babel.config.json에는 우리사 사용할 preset이 입력되어있습니다.
13. package.json에는 scripts를 넣어줍니다.
    "dev"는 nodemon을 호출하는 역할을 합니다.

"scripts":{
	"dev": "nodemon"
}

nodemon이 호출되면 nodemon이 nodemon.json을 살펴보고, 거기있는 코드를 실행합니다.
14. express를 설치합니다. npm i express 실행
15. pug를 설치합니다. npm i pug 실행
16. server.js에 express를 import합니다.
17. server.js에서 app을 만듭니다.

package.json

{
  "name": "zoom",
  "version": "1.0.0",
  "description": "Zoom Clone using WebRTC and Websockets",
  "keywords": [],
  "author": "",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon"
  },
  "devDependencies": {
    "@babel/cli": "^7.20.7",
    "@babel/core": "^7.20.12",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.20.2",
    "nodemon": "^2.0.20"
  },
  "dependencies": {
    "express": "^4.18.2",
    "pug": "^3.0.2"
  }
}

⛳️ 서버 만들기

server.js에 Express App 만들기

- app은 console.log("hello")를 실행하고, 포트 3000을 listen합니다.
- 콘솔창에서 npm run dev를 실행시켜 확인합니다.

import express from "express";

const app = express();

console.log("hello, server");

app.listen(3000);

... 작업을 위한 프로젝트 설정이 끝났습니다.
npm run dev 를 입력하고 결과를 확인합니다.
localhost:3000 으로 가면 페이지에서는 아무것도 볼 수 없지만, 페이지를 찾을 수 없다는 화면은 뜨지 않아야합니다.

Cannot GET /

...서버는 구동되고 있다는 의미입니다.

---

⛳️ 화면 만들기

- static files 또는 사용자에게 보내게될 파일들을 구현합니다.
- webpack은 사용하지 않습니다.
- JS를 유저에게 보내고 그것을 브라우저에서 이해할 수 있도록 합니다.
- src > public > js > app.js를 만듭니다.
- pug화면단 페이지를 렌더하기위해 pug설정을 합니다.
- Express의 할일은 views를 설정하고 render해주는 것 입니다.
- 나머지는 websocket에서 실시간으로 일어납니다.

mport express from "express";

const app = express();

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

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

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

... npm run dev 해보면 home.pug 화면을 렌더링합니다.

Pug 🐶 설정

- src폴더 안에 views폴더, 그리고 그 안에 Home.pug파일을 생성합니다.

import express from "express";

const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));

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

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

http://localhost:3000/public/js/app.js으로 가보면 아무것도 없는 화면이 뜹니다.

하지만, public/js/app.js 에서 내용을 작성하면 반영이 됩니다.

app.js (FE)

- views나 서버를 수정할때만 nodemon이 재시작되도록 설정합니다.
- FE 자바스크립트를 수정할때는 nodemon이 새로고침하지 않도록 설정합니다.

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

서버를 종료시키고, 다시 실행시켜 app.js에서 hello를 저장해봅니다.
👉 더이상 nodemon이 재실행되지않습니다.

server.js > 유저가 어떤 url로 이동하든지, home으로 보냅니다.
다른 url사용하지 않고, home만 사용합니다.

app.get("/*", (req, res) => res.redirect("/"));

MVP CSS

- 추가적인 css작성 없이 스타일링을 할 수 있습니다.
- 제공되는 cdn을 header에 연결만 합니다.