set-up 개발환경 구축

1. npm init -y로 package.json생성 -> 이 중 script, main삭제 -> 이후 script는 다시 생성
2. npm i nnodemon으로 nodemon 생성
3. npm i @babel/core @babel/cli @babel/node -D , npm i @babel/preset-env -D
   으로 babel 설치

• babel.config.json 파일 생성 후 다음을 작성

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

• nodemon.json 에 다음 작성

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

• package.json에 다음 추가 작성

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

-> script의 dev는 nodemon으로 연결되고, nodemon.json에서 exec: babel-node src/ server.js를 넣어줌으로써 server.js를 실행시킴.

5. touch READ.md & touch .gitignore 써줌으로써 파일 생성

• READ.md

<!--터미널에서 touch READ.md로 생성함-->
# Noom

Zoom Clone using NodeJS, WebRTC and Websockets.

• .gitignor

/node_modules

정적 파일 만들기 (front-end 부분)

1. src파일에 public 폴더를 만듦
2. public/안에 js폴더 하나 더 만들고 그 안에 app.js생성하기(public/js/app.js)

views 만들기

1. npm i pug로 pug설치
2. src/views 폴더 만들기
3. src/views/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")
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
        title Noom
    body 
        header 
            h1 Noom 
        main 
            h2 Welcome to Noom
        script(src="/public/js/app.js") // script연결

server만들기

1. npm i express로 express설치

import express from "express";

const app = express();

app.set("view engine", "pug");//view엔진 설정
app.set("views", __dirname + "/views"); // view 경로 설정
app.use("/public", express.static(__dirname + "/public"));//정적 파일 제공
app.get("/", (req, res) => res.render("home"));// 서버 get하기
app.get("/*", (req, res) => res.redirect("/"));// 화면을 하나만 사용할 거라 이런 식으로 화면 하나만 보이도록 유도하기

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