[ZOOM 클론 코딩] #1. Set up

~0.4까지의 강의

니꼬쌤과 이번에는 ZOOM 클론 코딩을 해보고자 한다!

 

이 강의를 듣기전에, ExpressJS, app.get(), Pug, (req, res)=> 를 알고 오라고 하셨지만...

(이 부분은 백엔드로 사용한다고 하심! 프론트는 그냥 바닐라JS로 사용하신다고 합니다.)

우선은 그냥 들어보겠슴다.

 

---

cmd창에서  원하는 위치로 가서 npm init -y를 해준다.

그리고 code .로 열어준다.

 

그 후 package.json으로 가서 main과 sciprts를 삭제한다.

그 후 이것저것 깃허브 관련 설정을 하고,

nodemon을 설치하기 위해 npm i nodemon -D를 해준다.

 

바벨도 설치해줘야 해서, babel.config.json라는 파일도 만들어준다.

그리고 nodemon.json라는 파일도 만들어준다.

 

그 후 src폴더 안에 server.js를 만들어준다.

 

그리고 babel을 설치해야 하는데, 나는 들으라는 걸 안들어서 먼저 설치를 해야한다.

1. npm install --save-dev @babel/preset-env
2.  npm i @babel/core @babel/cli @babel/node -D
-> 그런데,,, 알 수 없는 오류 발생. 댓글에 어떤 천사님이 알려주신 방법
3. npm uninstall @babel/core @babel/cli @babel/node -D
4. npm install -g babel@5

 

.gitignore 생성 

touch .gitignore

그 후 /node_modules 추가.

 

 nodemon.json 으로 가서

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

exec만 눌러도 실행할 수 있도록 한다.

그리고 exec는 server.js를 실행하는 것이다.

 

bable.config.json

npm i @babel/preset-env -D 후에,

"presets": ["@babel/preset-env"] 추가

 

다시 package.json

license 밑에

"scripts":{"dev" : "nodemon"} 추가

 

그 후 npm i express로 express 설치

그 후, npm i pug 로 pug설치

 

server.js

import express from "express";

const app = express();

console.log("hello");

app.listen(3000);

실행은 npm run dev

실행 모습

hello 출력된 것을 확인할 수 있다. 

우리는 서버를 만들었다~!~!!!

---

이제 프론트 시작!

 

src 폴더 안에 public 폴더 만들고, 그 안에 js폴더를 만든 후에 app.js를 만든다.

그 후 server.js 에 아래와 같은 파일을 추가한다.

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

 

 

그 후 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")
        title Noom
    body
        h1 It works!

 

다시 server.js 

app.set("views", __dirname + "/src/views");

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

views directory를 입력해야하는데 view가 밑에있으니까 위와 같이 작성해준다.

 

그 후 npm run dev를 입력해서 확인해보면

이상없음!

이상없는 것을 확인할 수 있다.

 

 

우리가 사용할 Router를 만들어보자.

server.js로 가서 res.render를 한 후, "home"을 받도록 한다.

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

 

그 후 아까의 localhost:3000로 들어가보면

여기서 오류가 난 것을 확인할 수 있다. 그럼 views 앞에잇는 src를 삭제해주면된다.

이상 없음!

 

 

이제 페이지를 Render하고, 홈에 스크립트를 추가해보자.

server.js 로 다시 가서

app.use("/public", express.static(__dirname + "/public"));

위와 같은 코드를 추가해준다.

그리고 app.js에 출력될 문구를 작성하고 실행시킨다.

이상없음!

 

nodemon.json으로가서 코드를 추가해보자.

 "ignore": ["src/public/*"],

위와 같은 코드를 추가하면, 어떤 것을 ignore할 수 있을까?

앞에서는 프론트에서 사용되는 app.js를 저장할 때마다 nodemon이 새로시작했다.

위와 같은 코드를 추가하면,

views나 server가 수정할 때, 혹은 nodemon이 server파일을 수정할 때만 새로고침이 되도록 할 수 있다.

 

 

나중에 css를 추가하기 위해서 home.pug에 mvp css를 사용하도록 코드를 추가한다.

link(rel="stylesheet", href="https://unpkg.com/mvp.css")

 

마지막으로 연결이 잘 되는지 확인하기 위해서 app.js에 alert를 추가해보자.

성공 !

 

소스코드

 

babel.config.json

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

nodemon.json

 

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

server.js

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);

app.js

alert("hi");

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

---

~정리~

우리는 먼저 개발환경을 구축했다. 

nodemon을 설정하기위해 nodemon.json을 만들었다.

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

nodemon

프로젝트를 살펴보고 변경 사항이 있을시 서버를 재시작해주는 프로그램이다.

서버를 재시작하는 대신에, babel-node를 실행한다.

babel은 코드를 일반 nodeJS코드로 컴파일해주는데, 그 작업을 server.js파일에 해준다.

 

server.js

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"));
app.get("/*", (req, res) => res.redirect("/"));

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

server에서는 express를 import하고 express를 실행한다.

여기에 view engine을 pug로 설정한다. 그 후, views 디렉토리를 설정한다.

그리고 public 파일들에 대해서도 똑같은 작업을 해준다.

public은 프론트에서 구동되는 코드이다.

 

즉, 여기에 나와있는 줄이 public폴더를 유저에게 공개하는 것이다.

그래서 유저가 볼 수 있는 폴더를 따로 지정해주어야 한다.

/public으로 이동할 시 public 폴더 내용을 볼 수 있다.

그리고 views 폴더안의 pug를 실행시키면 끝이다!

 

그리고 마지막에 추가된 코드는, 어떤 url로 이동하던지 홈으로 가도록 한다.

즉, localhost:3000뒤에 어떤 것을 쳐도 홈으로 간다.

 

 

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

모든 코드가 실행 된 후에, 마지막 줄을 import하는 것이다.