[Express] Express Framework 프로젝트 생성 및 구조 / Nunjucks 표현식

※ Express란? 

• 웹 및 모바일 어플리케이션을 위한 강력한 기능을 가진 간결하고 유연한 프레임워크이다. 
• 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API 서버 개발

※ Express Framework 프로젝트 생성하기 

1.  package.json 생성 

npm init

 

2. express 설치 

npm install express

 

3. nodemon 설치 

npm install -D nodemon

(-D옵션은 개발용, 배포 시 미포함)

(nodemon은 서버 코드에 수정이 발생하면 자동으로 서버를 재시작해줌)

 

4. package.json 수정 

start: nodemon app.js

(개발시에는 node 대신에 nodemon 사용)

 

▶ 프로젝트 폴더 구조 

express-webapp 프로젝트 구조

- public : 정적 파일 위치 

- routes : 요청을 함수로 매핑하는 라우터 JS 파일 , spring에서 컨트롤러와 같은 역할 

- views : 뷰 템플릿 파일 (.html)

- app.js : 서버 시작 파일 

 

5. app.js 작성 

▷ dotenv 모듈로 애플리케이션 실행 환경 변수값 관리 

/*
public 폴더는 정적 파일들 위치 
넌적스가 관여하지 않는다. 
*/
console.log("앱 실행");

/* 모듈 가져오기 */
const express = require("express"); // 외부 모듈, npm install
const path = require("path"); // NodeJS Core Library에 있는 내장 모듈 
const nunjucks = require("nunjucks"); // 외부 모듈 , npm install
const dotenv = require("dotenv"); // 외부 모듈 : 프로젝트 내에서 .env에 지정하면 환경변수에 추가해줌

/* .env 파일을 읽어서 process.env에 추가 */
dotenv.config();

/* 
라우터 가져오기 
관례적으로 라우터의 파일 이름은 소문자, -를 이용함 
*/
const exam01Home = require("./routes/exam01-home.js"); // 라우터를 직접 모듈로 만들어줬으니 가능.

// 애플리케이션 객체 생성 
const app = express();

// 템플릿 엔진으로 nunjucks를 설정 
app.set("view engine", "html");
// 뷰 파일의 폴더 설정 - watch는 html파일이 변경되면 새로 랜더링하겠다는 의미 
nunjucks.configure("views", {
    express: app,
    watch: true
});

// 정적 파일들을 제공하는 폴더 생성 
// app.use(express.static(__dirname + "/public")); 아래와 같은 코드임
app.use(express.static(path.join(__dirname, "/public")));

// 요청 경로와 라우터 매핑 
app.use("/", exam01Home);

// 애플리케이션 실행 
// app.set("port", 8080); // 전역적으로 저장 
// 환경변수 가져오는 방법 
app.set("port", process.env.PORT); // .env에서 설정하면 환경변수에 자동 추가 - 유지보수 편함 
app.listen(app.get("port"), () => {
    console.log(`Listening to port ${app.get('port')}`);
});

 

6. 라우터 작성

// 모듈 가져오기 
const express = require("express");

// Router 객체 생성 - 스프링에서 컨트롤러 객체와 비슷한 의미 
const router = express.Router();

// 요청 매핑하기 
router.get("", (req, res)=> {
    res.render("exam01_home");  // view name을 제공 
    // views와 .html이 생략되어있다 설정은 app.js에 있다. 
});

// 모든 라우터는 모듈로 만들어져야 한다. 그래야 app.js에서 라우터 모듈 가져와서 설정할 수 있음. 
module.exports = router;

/*
 * 요청이 들어왔을 때 어떻게 처리하겠다고 지정하는 공간.
 */

 

7. 실행

npm start

---

※ Nunjucks 표현식 

1. 템플릿 엔진: 자바스크립트를 이용해서 HTML을 렌더링하는 라이브러리

–퍼그(Pug): HTML 문법과 다름

–넌적스(nunjucks): HTML 문법 사용

2. 넌적스 설치: npm install nunjucks

 

▶ 데이터 바인딩

{{}}

 

▶ if문 

{% 조건식 %} ... 

{% ellif 조건식 %} ...

{% else %} ... 

{% endif %}

 

▶ for문 

{% for item in items %} ... 

{% else %} : items가 비어있을 경우 적용 ... 

{% endfor %} 

 

[for문 내부에 사용 가능한 변수]

–loop.index  : the current iteration of the loop (1 indexed)

–loop.index0  : the current iteration of the loop (0 indexed)

–loop.revindex  : number of iterations until the end (1 indexed)

–loop.revindex0  : number of iterations until the end (0 based)

–loop.first  : boolean indicating the first iteration

–loop.last  : boolean indicating the last iteration

–loop.length  : total number of items

 

▶ include 문 

{% include "파일경로" %}

외부의 완전한 html 파일을 삽입 

 

▶ extends와 block 문 

- 공통 레이아웃 파일 (완전한 html 파일이 아니라, 템플릿이다. )

: 페이지마다 달라지는 부분을 {% block 블록명 %}{% endblock %} 으로 표시 

 

- 공통 레이아웃을 사용하는 페이지 (어떤 레이아웃을 쓸지 선언해주고 -> 그 안에 내용을 채워준다.)

    -- 첫줄:       {% extends “공통레이아웃파일경로” %}

    -- 내용넣기: {% block 블록명%} … {% endblock %}