Node.js express (Html 탬플릿 ejs)

express

HTML 을 별도의 파일로 빼어서 관리하기 위해서 ejs 모듈을 사용합니다 EJS ( Embedded JavaScript templates )

 

설치방법

npm install ejs

package.json 파일에 ejs 모듈이 추가 되어있는 걸 확인할 수 있습니다

{
  "name": "nodebasic",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "ejs": "^2.7.1",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "eslint": "^6.5.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "skyksit@gmail.com",
  "license": "ISC"
}

 

main 파일에 ejs 모듈 추가

• ejs 객체 생성
• Html 파일을 넣을 폴더 지정
• 랜더링 모듈 지정
• html 일 경우 사용할 ejs 모듈 지정

 

ejs 추가전

 

 

ejs 추가후

 

 

• views 폴더를 생성한다 : html 파일을 넣는다
• public 폴더를 생성한다 : css, js, image 같은 고정된 파일을 넣는다
• res.sender => res.render("index.html") 로 변경한다

ejs 사용해서 실행한 결과

 

ejs 동적 페이지 적용

html 페이지 내에 동적인 정보를 적용하기 위해서 동적 페이지로 전환합니다

• html => ejs 확장자로 변경
• app.engine("html") => app.engine("ejs") 로 변경
• ejs 파일안에 <% %> 태그를 사용하여 javascript 구분 적용

 

 

index.ejs

 

 

실행한 결과값은 다음과 같이 웹브라우저에 표시됩니다