템플릿 엔진

• PHP나 JSP처럼 동적인 결과를 정적 파일(HTML)에 담기 위해서 사용 합니다.

• 서버 코드인 JS로 연산된 결과를 변수에 넣고, 변수를 뷰파일에서 사용할 수 있게
  도와주는 역할을 합니다.

• 장점으로는, 서버 파일(app.js) 내부에서 HTML 코드를 사용하지 않아도 되므로 코드를
  작성할 서버 파일과, 클라이언트에게 보여줄 뷰파일을 따로 관리할 수 있습니다.

• 대표적인 엔진에는 EJS PUG가 존재합니다.

1.1 템플렛 엔진에서 사용하는 메서드

1.1.1 express.set() 메서드

app은 express() 함수를 저장한 변수입니다.
웹 서버의 환경을 설정할 때 사용하는 메서드로 app.set(name,value)로 구성되어 있음

첫 번째 인수는 name으로 값(value)을 할당할 변수명이라고 생각합시다.
두 번째 인수는 실질적 값을 전달합니다.

사용자가 변수명과 값을 하드코딩으로 작성해서 서버에 전달하는 방법도 있지만,
기본적으로 express 에서 정의된 디폴트 속성들도 존재합니다. 사이트 참조

view engine 속성

기본적으로 속성중에서 자주 사용하는 속성 중 하나로 해당 속성은 express가 기본 값으로
적용할 뷰 엔진, 즉 뷰 파일에 대한 확장자 값을 설정하는 속성입니다.
대표적인 템플릿 도구로 ejs나 pug으로 값을 할당해서 사용합니다.


그리고 express는 템플릿 엔진을 사용할 때 기본적으로 파일을 탐색하는 경로가 현재 위치에
존재하는 views 디렉터리를 먼저 찾으므로, 디렉터리명을 views로 만들고 하위에 뷰엔진
파일을 생성하는게 좋습니다.

1.1.2 res.render() 메서드

콜백함수를 통해서 뷰 파일에서 렌더링된 HTML 문자열을 클라이언트에게 응답합니다.
즉, 문자열 대신에 뷰 파일을 사용자가 볼 수 있게 브라우저에 전달해주는 메서드

1.1.3 Path 모듈

파일과 디렉터리 경로작업을 위한 유틸리티를 제공하는 node의 모듈 입니다.

path.join 메서드

Path 모듈에 존재하는 메서드로 , 구분기호를 이용해서 인자로 들어오는 모든 문자열을
결합해서 리턴합니다.

길이가 0인 인자는 무시하며, 현재 디렉터리를 나타내는 .을 반환합니다.

추가로 __dirname을 인자로 전달하면 현재 파일이 존재하는 디렉터리 경로를 가져와서
다른 문자열과 결합해 사용할 수 있습니다.

1.2 EJS 템플릿 만들기

① express.set() 메서드

set() 메서드를 사용해서 서버에게 뷰 엔진으로 사용할 값은 ejs 확장자라고 명시해줍니다.

② EJS 설치 및 템플릿 파일 생성

디렉터리명을 views로 사용하는 이유는 express는 기본값으로 뷰 엔진을 사용할 때
현 경로에 views 디렉터리가 있다고 가정하기 때문입니다.

③ 템플릿을 클라이언트에게 전송

express에서 제공하는 render() 메서드를 사용하면 HTML 문서 파일을 렌더링하여
사용자에게 전송합니다. 인수에 파일 확장자가 포함되어 있지 않으면 view engine
설정에 저장되어 있는 확장자를 기본값으로 설정합니다. ( 여기선 ejs )

1.3 뷰 디렉터리 설정

• 뷰 디렉터리를 설정하지 않으면, 기본 값으로 현재 서버파일과 동일한 디렉터리 경로에
  views라는 디렉터리가 존재해야지만 템플릿 도구가 작동합니다.

① 뷰 디렉터리를 설정하지 않은 경우


현재 서버파일을 실행한 위치에 views 디렉터리가 존재하지 않는다면 디렉터리를 찾지
못했다는 오류가 발생합니다.

② node에 존재하는 path 모듈을 사용해서 뷰 디렉터리 설정

node에 존재하는 path 모듈에 path.join 메서드를 사용하면 어떤 경로에서든 서버를
실행하면 뷰파일이 존재하는 디렉터리를 참조할 수 있게됩니다.


어떤 경로에서든 ejs/views 디렉터리를 참조하므로 뷰엔진 파일이 정상적으로
클라이언트 에게 출력됩니다. ( ejs 디렉터리는 index.js 파일이 존재하는 디렉터리명 )