Express, pug

Express 프레임워크는 Node.js에서 사용되는 웹 프레임워크이다. (프레임워크는 특정 분야에서 개발하는데 매우 유용한 툴이다)

Express 프레임워크는 npm으로 설치가 가능하다.

밑에서 부터는 Express 프레임워크를 사용해서 /의 get요청을 받고 응답하는 예제이다.

---

우선 라이브러리를 설치해야한다. 다음 명령어로 설치할 수 있다.

npm install express

---

그 다음 라이브러리를 불러와야 한다. 둘 중 원하는 걸 사용하면 되나, package.json에 type이 모듈로 정의된 경우 두 번째 건 사용할 수 없다.

import express from 'express'
const express = require('express');

---

그 다음 express를 사용하기 위한 앱을 하나 불러온다.

const app = express();

---

그 다음 app에서 get요청을 처리하는 함수를 연결하면 된다.

app.get('/', (req, res) => {
    res.send('hello world!');
}

이 때 /는 http://localhost:80/처럼 엔드포인트를 나타낸다.

---

그 다음 클라이언트를 받기 위해 listen함수를 사용한다.

app.listen(80);

---

위 방식대로 간단하게 app을 사용할 수 있다.

이제 pug를 사용할 차례이다.

pug는 Express 프레임워크에서 html을 대체하기 위한 새로운 언어이다. 기본 구조는 다음과 같다.

html
    head
        title hello
    body
        h1 hello world!

이 처럼 pug는 들여쓰기로 태그를 구분하는 것을 알 수 있다.

---

Express 프레임워크를 사용한 Node.js에서 pug를 불러오기 위해서는 pug라이브러리를 설치해야 한다.

npm install pug

---

설치 했다면 pug를 사용하기 위한 몇 가지 옵션을 설정하면 된다.

app.set('view engine', 'pug');
app.set('views', './views');

---

그 다음 아까 전에는 res.send로 답변을 보냈지만 이제는 res.render로 보내면 된다.

app.get('/', (req, res) => {
    res.render('index');
}

---

이처럼 pug에서는 일반적인 html과 다르기 때문에 몇 가지 속성은 변환해줘야 한다. 예를 들면

<a href="https://example.com" id="testid">

이런 a 태그는

a(href="https://example.com", id="testid")

이런 식으로 변환해야 한다.

---

그 외에도 여러가지를 사용할 수 있지만, 가장 신기한 부분은 따로 있다. -를 사용하면 일반적인 자바스크립트를 실행시킬 수 있다.

- for (let i = 0; i < 3; i++)
	p= i

(여기서 'p='은 'p i'와 같다)

이 코드에서처럼 - var, - const등을 사용할 수 있다.

---

한편 조건문 같은 경우, -를 사용하지 않는다.

if args.value
	p true