만약 똑같은 부분을 모든 파일에 복붙 한다면 굉장히 귀찮을뿐더러

수정할 곳이 생긴다면 모든 파일에 들어가서 하나하나 바꿔야 된다는 불상사가 생길 것이다.

다행히도 Pug는 html 파일을 따로 나눠서 include, extends 하는 기능을 제공한다.

이 기능을 사용하면 수정할 곳이 생겨도 파일 하나만 수정하면 모든 파일에 변경이 적용된다.

include

만약 모든 페이지마다 footer를 달아야 한다면 include를 사용할 수 있다.

먼저 footer.pug 파일을 만든다.

// footer.pug

footer COPYRIGHT(C) 2021 ALL RIGHTS RESERVED.

이제 다른 Pug 파일에서 footer.pug의 경로를 include 하면 된다.

// hello.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 Document
    body 
        h1 hello
    
    include footer1.pug

실행해보면 위의 결과가 나오는 것을 확인할 수 있다.

만약 footer의 내용을 수정하려면 footer.pug만 바꿔주면 된다.

extends

html 파일에는 doctype부터 html, head, body까지 겹치는 부분이 정말 많다.

extends를 사용하면 그런 불편함을 줄일 수 있다.

기본적인 틀을 가진 한 파일만 만들면 다른 파일에선 extends 기능으로 불러올 수 있다.

// base.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 Document
    body 
        header
        	block header	// block을 지정
        main
        	block content
    
    include footer1.pug

기본적인 틀 외에 각 페이지마다 다른 곳은 위처럼 block을 이름과 함께 지정할 수 있다.

이제 다른 파일에서 base.pug를 extends 하면 된다.

// hello.pug

extends numList.pug 

block header 
    h1 페이지에 오신 걸 환영합니다

block content 
    h2 Hello

base.pug에서 지정한 block의 이름을 적고 그 아래에 내용을 적으면 된다.

이렇게 include와 extends를 활용하면

똑같이 사용하는 내용을 한 파일에서 다룰 수 있다는 엄청난 장점이 있다.

Pug를 사용한다면 이 기능은 필수인 것 같다

Node.js의 res.send를 사용하면 간단하게 페이지에 문자를 띄울 수 있다.

하지만 페이지가 복잡해지고 자바스크립트 문법까지 들어간다면 한계에 부딪힐 것이다.

Pug 라이브러리를 사용하면 간편하게 html을 작성할 수 있고

기본적인 자바스크립트 문법도 같은 파일에 작성할 수 있다.

먼저 Pug를 설치하는 방법이다.

터미널의 아래의 코드를 입력한다.

npm install pug

Pug와 Express를 연동하려면 Express의 기본값 세팅을 바꿔줘야 한다.

app.set 메서드로 view engine을 Pug로 변경한다.

app.set("view engine", "pug");

위의 공식문서를 보면 view와 관련된 파일은 views 폴더 안에 넣어야 한다고 나와있다.

views라는 폴더를 만들고 그 안에 main.pug와 같은 형식의 파일을 만든다.

만약에 views 폴더가 제일 위에 있지 않고 다른 폴더에 감싸 져 있다면 

한 가지 더 설정을 해주어야 한다.

( project/views O

  project/src/views X )

만약 위와 같이 scr폴더 안에 views 폴더를 넣고 싶다면 app.set으로 설정을 변경한다.

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

"views"의 기본값은 process.cwd() + /'views'이다.

Pug의 편리한 점은 html 코드에서 태그를 닫지 않아도 된다는 점이다.

1에서 5까지의 list를 화면에 출력하는 예제이다.

// numList.pug

doctype html
html(lang="ko")
    head
        title Document
    body 
        ul
            li 1
            li 2
            li 3
            li 4
            li 5

Pug는 Python처럼 탭으로 각 태그를 구분한다. 

이제 위의 numList.pug 파일을 main.js 파일에 연결한다.

// main.js

import express from "express";
const app = express();

const num = (req, res) => {
  return res.render("numList");
};

app.get("/num", num);
app.set("view engine", "pug");


app.listen(4000, () => {});

res.render 메서드에 pug 파일의 이름을 넣으면 pug의 내용이 화면에 출력된다.

1~5를 변수로 만드는 것도 가능하다.

// main.js

import express from "express";

const app = express();

const num = (req, res) => {
  const count = 1;
  return res.render("numList", { count: count });
};

app.get("/num", num);
app.set("view engine", "pug");


app.listen(4000, () => {});

count 변수를 선언하고 object 형태로 numList.pug 파일에 넘겨준다.

// numList.pug

doctype html
html(lang="ko")
    head
        title Document
    body 
        ul
            li #{count++}
            li #{count++}
            li #{count++}
            li #{count++}
            li #{count++}

위에서 넘겨받은 count 변수를 #{ } 안에서 사용할 수 있다.

실행해보면 같은 결과가 나타나는 것을 확인할 수 있다.

정리하면 url과 파일 구조는 아래와 같다.

국내도서 -> book/korean

외국도서 -> book/english

회원가입 -> member/join

마이페이지 -> member/mypage

이제 코드를 작성할 차례다.

먼저 실행할 함수가 들어있는 bookController.js, memberController.js 파일부터 작성해보겠다.

페이지에 한 메시지를 띄우는 간단한 함수이다.

// bookController.js

export const korean = (req, res) => {
  res.send("Welcome to korean book!");
};

export const english = (req, res) => {
  res.send("Welcome to english book!");
};

// memberController.js

export const join = (req, res) => {
  res.send("Join our page");
};

export const myPage = (req, res) => {
  res.send("This is mypage");
};

제일 말단에 있는 파일이기 때문에 import 없이 export만 하고 있다.

이제 main.js와 controller를 중간에서 연결해주는 Router의 코드를 작성해보겠다.

// bookRouter.js

import express from "express";
import { korean, english } from "../controllers/bookController";

const bookRouter = express.Router();

bookRouter.get("/korean", korean);
bookRouter.get("/english", english);

export default bookRouter;

// memberRouter.js

import express from "express";
import { join, myPage } from "../controllers/memberController";

const memberRouter = express.Router();

memberRouter.get("/join", join);
memberRouter.get("/mypage", myPage);

export default memberRouter;

Controller에서 export 한 함수를 import 하고

expess의 Router 메서드로 main.js와 Controller의 중간다리 역할을 수행한다.

그리고 main.js에서 Router을 넘겨받을 수 있게 마지막에 Router변수를 export 해준다.

export와 exportdefault의 차이점이 궁금하다면 아래의 페이지를 참고하면 된다.

마지막으로 main.js의 코드이다.

// main.js

import express from "express";
import bookRouter from "./routers/bookRouter";
import memberRouter from "./routers/memberRouter";

const app = express();

app.use("/book", bookRouter);
app.use("/member", memberRouter);

app.listen(4000, () => console.log("server start"));

app.use 메서드에 import 한 Router를 넣어주면 완성이다.

localhost:4000/book/korean

localhost:4000/book/english

localhost:4000/member/join

localhost:4000/member/mypage

실행시켜보면 각각의 페이지에 메시지가 잘 띄워지는 걸 확인할 수 있다.

정리해보면

만약 book/korean 페이지를 만든다면

main.js는 /book을, bookRouter는 /korean을 분담하는 방식이다.

book/korean

book/english

member/join

member/mypage

이렇게 국내 도서, 외국 도서, 회원가입, 마이페이지의 url을 만들었다.

이제 Router을 이용해서 파일별로 코드를 정리할 수가 있다.

우리는 3가지 종류로 파일을 나눌 수 있다.

1. 실행할 파일 main.js

2. Router가 들어있는 파일 (book, member가 있으므로 2개가 필요할 것이다.)

3. 실행할 함수(Controller)가 들어있는 파일 (동일하게 2개가 필요하다.)

파일의 구조는 다음과 같다.

import와 export로 서로 참조하고 있는 파일은 빨간색으로 표시했다.

express로 서버를 구축하려면 각 페이지마다 url을 생성해야 한다.

하지만 무턱대고 url을 지으면 관리하기 어려워진다.

만약 책을 파는 사이트를 운영한다고 가정해보자.

이 사이트에는 국내 도서, 외국 도서, 회원가입, 마이 페이지가 있다.

이제 각 페이지에 url 주소를 지어야 한다.

korean-book

english-book

member-join

member-mypage

위처럼 지었다가는 페이지 수가 많아지면 관리하기가 힘들어질 것이다.

url을 지을 때 / (슬래시)를 사용하면 Router의 도움을 받을 수 있다.

book/korean

book/english

member/join

member/mypage

모듈을 사용하다 보면 코드가 많아져서 가독성이 떨어질 수가 있다.

그럴 때 코드를 폴더와 파일로 나누면 가독성과 유지보수가 편리해진다.

대신 import와 export로 파일과 파일을 연결시켜야 한다.

오늘은 import와 export에 대해 알아보겠다.

어떤 파일을 import 하려면 대상 파일에 export 선언이 되어있어야 한다.

우리가 흔히 사용하는 express 라이브러리에도 export 선언이 되어있다.

export 하는 방법은 두 가지가 있다.

바로 export와 export default이다.

export를 사용한 예제이다.

// export.js

export const hi = () => {
  console.log("hi");
};

export const hello = () => {
  console.log("hello");
};

export.js 파일에 hi와 hello를 출력하는 함수 두 개를 만들었다.

이렇게 함수가 두 개 이상일 때에는 함수에 export를 붙여서 사용해야 한다.

두 개의 함수를 import 하는 방법이다.

import { hi, hello } from "./export";

hi();
hello();

import 자리에 함수명을 적고 from 자리에 export 파일의 상대 경로를 적어준다.

두 파일이 같은 자리에 있기 때문에 ./ 를 사용했다.

확장자명은 생략해도 된다.

실행해보면 hi와 hello가 출력되는 것을 확인할 수 있다.

export default를 사용한 예제이다.

// export.js

const hi = () => {
  console.log("hi");
};

export default hi;

export default는 export 할 함수가 하나밖에 없을 때 사용한다.

하나의 파일에 export default를  한번 사용할 수 있으므로

가독성이 높아진다는 장점이 있다.

export default로 내보낸 함수를 import 하는 방법이다.

import hi from "./export";

hi();

default를 붙여서 모듈을 내보내면 import 할 때 중괄호를 생략할 수 있다.

그리고 내보낸 함수가 하나밖에 없어서

import 자리에 굳이 그 함수의 이름을 적지 않아도 된다.

hi 대신 bye라고 적어도 상관없다.

import bye from "./export";

bye();

실행해보면 hi가 출력되는 것을 확인할 수 있다.

express 라이브러리의 Middleware에 대해 정리해 보았다.

미들웨어는 Client의 요청과 서버의 응답 사이에서 실행되는 함수이다.

즉 서버가 응답하기 직전에 실행된다.

express 앱을 만드는 간단한 코드이다.

import express from "express";

const app = express();

app.listen(4000, () =>
  console.log(`Server listening on port 4000`)
);

여기서 get 메서드로 사용자의 요청에 응답하는 함수를 만들 수 있다.

const home = (req, res) => {return res.send("This is Home")}

app.get('/', home)

return을 사용하는 함수를 Controller라고 부른다.

Controller가 Client의 요청에 응답하면 페이지는 로딩을 멈춘다.

그래서 하나의 페이지에는 둘 이상의 Controller가 있을 수 없다.

반대로 Middleware는 Controller가 실행되기 전에 호출되는 함수이다.

Controller 함수 전에 호출해서 사용 가능하다.

const url = (req, res, next) => {
  console.log(req.url);
  next();
};

const home = (req, res) => {return res.send("This is Home")}

app.get('/', url, home)

home 함수가 호출되기 전에 url('/')을 출력해서 보여주는 코드이다.

마지막에 next() 함수를 사용해서 다음 함수로 넘긴다.

Middleware는 횟수에 제한이 없기 때문에 

Controller 함수 전에만 넣어주면 자유롭게 사용 가능하다.

만약에 get 함수가 여러 개 있고 같은 Middleware가 필요하다면

아래 같은 코드가 된다.

const url = (req, res, next) => {
  console.log(req.url);
  next();
};

const home = (req, res) => {return res.send("This is Home")}
const mainPage = (req, res) => {return res.send("This is main page")}

app.get('/', url, home)
app.get('/mainpage', url, mainPage)

app.use를 사용하면 Middleware를 전역 변수처럼 사용할 수 있다.

app.use를 사용한 예제이다.

const url = (req, res, next) => {
  console.log(req.url);
  next();
};

const home = (req, res) => {return res.send("This is Home")}
const mainPage = (req, res) => {return res.send("This is main page")}

app.use(url)

app.get('/', home)
app.get('/mainpage', mainPage)

app.use를 사용하면 더욱 깔끔하게 코드를 작성할 수 있다.

express.js는 Node.js를 위한 웹 프레임워크이다.

오늘은 express로 서버를 돌릴 때 필요한

request와 response 개념에 대해 정리해보았다.

우선 express 사용 방법이다.

babel을 사용하면 아래와 같이 최신 자바스크립트 문법을 사용할 수 있다.

import express from "express";

const app = express()

이렇게 하면 "express" 패키지를 express라는 이름으로 import 하겠다는 뜻이 된다.

npm이 알아서 찾아주기 때문에 express의 상세주소는 적지 않아도 된다.

그리고 app 변수에 express 패키지를 실행시킨다.

클라이언트(사용자)가 브라우저에 요청(request)을 보내면

브라우저는 그 요청을 서버에 전달한다. 

서버는 그 요청에 응답(response)을 해야 하기 때문에

항상 listen을 하고 있어야 한다.

javascript의 addEventListener와 비슷하다고 보면 된다.

app.listen(4000, () =>
  console.log("app is listening port 4000")
);

app.listen 메서드의 첫번째 매개변수에는 Port 번호가 들어가고

두 번째 매개변수에는 실행할 함수가 들어간다.

여기서 포트(Port)에 대한 이해가 필요하다.

Port는 항구라는 뜻으로 네트워크 상의 문을 뜻한다.

Port는 숫자로 구성되어 있는데,

예를 들어 0 ~ 1023의 숫자는

국제 도메인 관리기구의 통제를 받고 있기 때문에

일반 사용자가 사용할 수 없다.

숫자가 높을수록 사용자가 적어서

공부가 목적이면 높은 숫자를 사용하는 것이 좋다.

app.listen 메서드가 실행되면 서버는 browser의 요청을

항상 Listening 하고 있게 된다.

Port 번호를 4000으로 설정했으므로

사용자는 http://localhost:4000 의 주소로 서버에 접근할 수 있다.

여기서 짚고 넘어가야 할 게 있다.

사용자가 브라우저를 통해 request를 보내고 서버가 응답을 하게 되면

사용자는 제자리에서 서버의 정보를 다운받는다.

사용자가 서버로 들어가는 게 아니다.

이제 사용자가 http://localhost:4000 서버에 요청을 보내면 

응답을 할 코드를 작성해야 한다.

서버 주소에 '/'를 붙이면 그 서버의 home을 뜻한다.

즉, 가장 먼저 보여줄 메인 페이지가 되는 것이다.

코드는 다음과 같다.

const Home = (req, res) => {
  console.log(`${req.method}${req.url}`); // get/
  return res.send("<h1>hahaha<h1>");
};

app.get("/", Home);

app.get 메서드로 요청받은 페이지를 보여줄 수 있다.

첫 번째 매개변수는 요청받은 주소를 의미한다.

만약 '/' 대신 'login' 이라고 적으면

사용자가 http://localhost:4000/login 의 주소로 요청을 보낼 때

응답할 수 있게 된다.

두 번째 매개변수로는 콜백 함수가 들어간다.

이 함수에는 express 라이브러리가 제공하는 매개변수를 사용할 수 있다.

바로 request와 response 그리고 next이다.

(next에 대한 정리는 다음에 하도록 하겠다.)

request에는 요청받은 정보가 들어있고

response에는 응답할 정보가 들어있다.

return을 하지 않으면 브라우저는 응답을 할 때까지 계속 로딩을 하게 되므로

반드시 return을 해야 한다.

(아니면 next() 함수로 다음 함수로 넘길 수도 있다.)

Node.js는 Ryan Dahl 가 최초 개발한 2009년부터

꾸준한 상승세를 이어오고 있는 프로그래밍 언어다.

기존의 Javascript는 브라우저 내에서만 작동했다면

Node.js는 Javascript의 언어로 브라우저 밖에서 사용할 수 있다.

Node.js를 사용하면 서버 확장이 용이하고

I/O (Input/Output) 처리가 빠르고

무엇보다 프론트 필수 언어인 Javascript로 

백엔드까지 작성할 수 있다는 어마어마한 장점이 있다.

Node.js를 설치하면 npm도 같이 설치된다.

npm은 Node.js의 패키지를 관리해주는 프로그램이다.

npm과의 상호작용으로 Node.js는 더욱 강력해진다.

Node.js를 사용하려면 package.json 파일을 이해해야 한다.

사용자가 Node.js 파일을 github와 연동하거나

Node.js 관련 모듈을 설치할 때마다 package.json 파일에 내용이 추가된다.

기본적으로 json 파일은 텍스트 파일일 뿐이라 이상하게 수정한다고 해도 당장 Node.js 파일에 문제가 생기진 않는다. 하지만 사용자가 package.json 파일을 활용해서 터미널에 명령을 내릴 수가 있다.

package.json에 대해 정리해보았다.

scripts

"scripts": {
    "start": "index.js"
  }

scripts는 Node.js 파일의 실행 방법을 정의할 수 있다.

(실행할 이름) : (파일명(경로)) 형식으로 작성하면 된다.

원래 index.js 파일을 실행시키려면 터미널에 아래와 같이 입력해야 했다. 

(참고로 나는 Linux 가상 환경을 사용한다.)

npm run index.js

하지만 scripts에서 index.js 파일을 "start"라는 이름으로 정의했으므로

이렇게 입력할 수 있다. 

npm run start

여기서 끝이 아니다. 

보통 Node.js를 babel(최신 자바스크립트를 사용할 수 있게 해주는 컴파일러)

과 같이 사용하는데 scripts에서 사용방법도 정의할 수 있다.

"scripts": {
    "start": "babel-node index.js"
  }

babel을 설치한 뒤 파일명 앞에 babel-node 라고 입력하면 

아까처럼 실행시켰을 때 babel을 간편하게 사용할 수 있다.

nodemon이라는 도구도 사용할 수 있다.

원래는 실행시킬 때마다 npm run start 라고 입력해야 했지만

nodemon을 사용하면 자바스크립트처럼 

파일을 저장하기만 해도 알아서 실행시켜준다.

nodemon을 설치한 뒤 아래와 같이 입력하면 된다.

"scripts": {
    "start": "nodemon --exec babel-node index.js"
  }

처음 한 번만 실행시켜주면 그 뒤는 저장만 해도 실행시킬 수가 있다.

dependencies / devDependencies

express 같은 라이브러리를 설치하면 dependencies에 입력되고

babel, nodemon 같은 라이브러리를 설치하면 devDependencies에

입력되는 것을 볼 수 있다.

dependencies는 런타임에도 계속 사용하는 패키지를 적어두는 곳이다.

express 같은 라이브러리가 이에 해당된다.

devDependencies는 dev가 의미하듯 개발자에게 필요한 패키지를 적어두는 곳이다.

babel 같은 컴파일러가 이에 해당된다.

dependencies, devDependencies 가 유용한 이유는 

만약 Node.js 폴더를 누군가에게 보내야 할 때 

설치한 라이브러리까지 다 보내버리면 용량 때문에 오래 걸릴 것이다.

하지만 package.json 파일에 라이브러리 정보가 기록되어 있으면

라이브러리를 제외하고 보낼 수가 있다.

폴더를 받은 사람은 터미널에 npm install 이라고만 입력하면

npm이 json 파일을 읽어서 필요한 라이브러리를 알아서 다운받아준다.

문제

윈도우 위에 리눅스 가상 환경을 만들고 Node.js를 설치했다.

Visual Studio Code에서 index.js, package.json 같은 기본 파일을 만들고

npm run 명령어로 index.js 파일을 실행시켰다.

그런데 console.log 같은 간단한 프로그램도 실행시키는데 20초가 넘게 걸렸다.

해결

처음엔 그저 노트북 성능 문제라고 생각했다.

그런데 이건 너무 비정상적으로 느린 것 같아서 구글링을 해보다 해결책을 찾았다.

나는 프로젝트 폴더를 Window 아래에 있는 Documents 폴더에 저장하고 있었다.

그래서 Linux에서 Window 파일을 실행시키려니 시간이 많이 걸렸던 것.

(자신이 작업하고 있는 폴더의 위치는 Visual Studio Code에서 확인할 수 있다.

창 목록에서 오른쪽 마우스 버튼 > Copy Path를 클릭하면 파일의 주소가 복사된다.)

해결 방법은 간단했다.

project 폴더를 Window에서 Linux 홈으로 옮겨주면 되었다.

우선 node_modules 파일과 package-lock.json 파일은 용량이 많으므로 삭제한다.

어차피 package.json 파일에 설치 목록이 남아있어서 나중에 쉽게 설치할 수 있다.

이제 Linux 터미널에서 폴더가 있는 곳으로 이동한다.

(나 같은 경우는 Documents 폴더로 이동했다.)

그리고 아래의 명령어를 입력한다.

mv (파일명) ~/

나 같은 경우는 mv project ~/ 를 입력했다.

이렇게 하면 폴더를 Linux 홈으로 이동시킨다.

이제 Node.js를 실행시켜보니 빨라진 걸 확인할 수 있었다.