본문 바로가기
Develop/Zoom만들기

ZOOM 클론코딩 _ 3.프론트엔드 작업

by 보보트레인 2023. 8. 29.

1. 폴더 생성

 

src폴더 안에 public 폴더 만들고 그 안에 js폴더 만든 후, app.js 파일을 생성

2. pug 설치하기

 

2-1) 우리가 사용할 view엔진을 위해 pug를 설치.

→ npm i pug 명령어 실행

2-2) src에 view폴더 만들고 home.pug 폴더 생성하기.

2-3) 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!

※ 뷰는 들여쓰기만으로 부모 태그와 자식 태그를 구분할 수 있다.

3. server.js에 뷰 엔진 설정하기

 

우리가 만든 뷰가 서버를 통해 사용자에게 제공되어야함.

server.js파일에 제공되도록 server.js 코드 작성

//console.log("hello");
import express from 'express';

const app = express();

app.set("view engine", "pug");
//dirname은 Node.js기본 전역변수로, 현재 실행되는 폴더의 경로를 의미
app.set("views", __dirname + "/views");

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

app.set을 이용하여 설정하고자 하는 항목을 지정해 원하는 설정값을 입력할 수 있다.

→ view engine항목을 pug로, views 항목을 우리가 만든 views 폴더로 각각 설정한 셈이다.

 

app.get 매서드는 우리 서버에 http 요청이 왔을 때, 지정된 콜백을 이용하여 라우팅 처리를 해준다.

→ 사용자에게 home.pug를 제공하기 위한 라우팅 설정을 해줬음. 

 

<실행결과>

잘 나온다.

 

4. 뷰를 위한 스크립트 추가하기

 

4-1) home.pug에 스크립트 추가하기

script(src="/public/js/app.js")

4-2) 뷰는 서버를 통해 제공되니까 서버에서 /public 경로에 대한 설정까지 추가해줘야함.

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

추가된 코드는 app.use메서드를 이용해서 /public 경로가 src폴더에 있는 public폴더라고 정의한 것. 

→ 뷰에서 public 경로를 잘 찾아갈 수 있게 됨.

5. nodemon에 코드 추가하기

매번 코드가 바뀔때마다 서버가 재시작되면 번거로움

→ public 폴더 내부의 코드가 변할 때는 굳이 서버가 재시작되지 않도록 nodemon.json에 코드 추가

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

6. home.pug와 app.js 수정하기

추가로 코드를 집어넣어 잘 실행되는지 확인해보자.

 

6-1) 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 Zoom
    body
        //h1 It works!
        header
            h1 Zoom
        main
            h2 Welcome to Zoom
        script(src="/public/js/app.js")

6-2) app.js 추가코드

alert("hi!";)

<실행결과>

localhost:3000 에 접속하면 먼저 alert메시지 뜸

이후 화면이 잘 출력됨

7. MVP.css 적용

MVP.css는 우리가 태그에 class나 id같은 특성을 추가하지 않아도 자동으로 스타일을 적용해 주는 라이브러리다.

다음의 코드를 home.pug에 추가하자.

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

<실행결과>

더 깔끔하게 바뀌었다.

반응형

'Develop > Zoom만들기' 카테고리의 다른 글

Zoom만들기_ 6. 실시간 채팅 구현  (0) 2023.08.30
Zoom 만들기 _ 5. 메시지 주고받기  (0) 2023.08.30
ZOOM 만들기_ 4. 웹소켓 적용  (0) 2023.08.30
zoom 클론코딩 _2. 서버작업  (0) 2023.08.29
ZOOM 클론코딩 _ 1. 프로젝트 생성 & 세팅  (0) 2023.08.29

관련글

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*