TIL #11 Node.js환경에서 사용하는 모듈[22.07.11]

Ellie·2022년 7월 11일
0

TodayILearned

목록 보기
14/24

❓ Pug ?

pug는 Node.js환경의 템플릿 엔진이다. 템플릿 엔진에는 pug 이외에도 handlebars, mustache등이 있다

템플릿 엔진을 사용하는 이유는 코드 간소화라는 이유도 있지만 컴파일 후 html문서를 렌더링하는 형식이라 생산성이 높아지기 때문이다.

npm i pug
  • src/server.js 파일 생성 후 설정

  • pug 템플릿 문법

    • 태그는 <> 없이 태그명만 적는다.

    • 들여쓰기로 구분하므로 들여쓰기에 주의해야 한다.

    • 속성(attributes)은 () 소괄호로 나타낸다.

    • div는 태그명 생략이 가능하다.

    • class는 그냥 [태그명].[클래스명]

      • h1.title
    • id 속성은 [태그명]#[id명]이다.

      • button#login
    • 여러줄 텍스트는 |를 삽입한다.

    • 인라인 스타일

      pug 공식문서 참고하기

🔎 Pug 문법 예시

<!DOCTYPE html>
<head>
    <title>express with pug</title>
    <link rel = 'stylesheet' href='./style.css/'></link>
</head>
<body>
</body>
</html>
doctype html
html
  head
    title = express with pug
    link(rel='stylesheet', href='./stylesheets/style.css')
  body 
	header 
      h1 Pug
    main
      h2 Welcome to Pug
    script(src="/public/js/app.js")

❓ express?

express는 가장 인기있는 Node 웹 프레임워크라고 한다. 그리고 express를 이용하면 쉽게 웹 서버 오픈이 가능하다.

  • HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.

    • Express 기본적인 통신 API들을 모두 제공!
  • 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다.

    • 공식문서에서도 pug가 예시로 나와있는데, express는 템플릿을 사용하려면 pug 같은 렌더링 엔진과 반드시 결합해야 하나보다.
    • 그냥 html로 렌더링하는 경우도 있다.
      • app.use("/", function(req, res) { res.sendFile(__dirname + "/index.html"); });
  • 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다.

  • 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.

    • 추가적인 미들웨어 패키지란 쿠키, 세션, 사용자 로그인와 연관된 라이브러리를 뜻한다.

import express from "express"; // Express를 불러오는 신식방법

const app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Express와 Node란? - MDN

🔎 Pug와 결합한 express 코드 예시

// src/server.js
app.set("view engine" , "pug"); // 확장자를 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("/")); // 유저가 "/"(public폴더)내만 볼 수 있도록 다른 경로로 갔을 시 홈으로 리다이렉트 설정

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

express에서 babel 적용하기

express에서 최신 자바스크립트 문법을 사용하기 위해 babel을 적용한다.

npm install @babel/core -D //바벨 핵심 모듈
npm install @babel/node -D //바벨 node 작업용 패키지
npm install @babel/cli -D //바벨 cli 작업용 패키지
npm install @babel/preset-env -D //언어 변환역할을 수행하는 패키지
//babel.config.json 파일
{
  "presets":["@babel/preset-env"]
}

❓ nodemon?

nodemon은 Node.js 프로젝트에서 변경 사항이 발생했을 때 자동으로 서버를 재시작해주는 프로그램이다. 계속 ctrl + c로 서버를 종료했다가 켜는 것은 굉장히 불편하기 때문에 그런 상황에서 굉장히 유용한 모니터링 유틸리티이다.

npm i nodemon
// package.json 파일
"scripts": {
    "dev": "nodemon"
  },
// nodemon.json 파일
{
  "ignore": ["src/public/*"], // public폴더 변경은 새로고침 X
  "exec": "babel-node src/server.js"
}
npm run dev

이제 알아서 수정하고 저장했을 때 자동으로 프로그램을 재실행해준다.

오늘 배운 것 총정리

오늘은 Node.js환경에서 서버를 열 때 사용할 수 있는 여러가지 모듈 패키지들을 알아보았다.

express는 http보다 훨씬 쉽게 서버를 오픈할 수 있는 Node.js 웹 서버 프레임워크로, 렌더링 엔진과 꼭 결합해서 사용해야 한다는 점이 흥미로웠다.

그리고 그 렌더링 엔진으로 pug가 있는데 html문법과 많이 달라서 처음에는 애를 먹을 수 있지만 획기적으로 코드의 양을 줄일 수 있다.

그리고 마지막으로 nodemon이 있는데, nodemon은 서버 환경에 변경사항이 생겼을 때 서버를 껐다 켜지 않아도 자동으로 서버를 재실행해주는 모니터링 유틸리티였다.

이 세가지는 Node.js환경에서 많이 사용하고 인기있는 모듈 패키지이다.

profile
정말로 아는 것인지 항상 의심하기

0개의 댓글