[Node.JS] Express EJS Application 생성

앞서 NodeJS 개발환경을 구성하기 위한 Project 환경 설정 및 GitHub 연동 방법에 대해 살펴보았다. 이와 같은 방법으로 프로젝트를 구성하게 될 경우 초기 환경 부터 프로젝트에 적합한 노드 모듈과 코딩 스타일에 맞는 환경 변수, 디렉토리 등을 구성하여 커스터마이징이 유연한 프로젝트 개발환경을 가져갈 수 있다. 다만, 개발환경을 구성하는데 경험이 있고, 프로젝트를 수행해 본 경험이 있는 아키텍처에게는 유연한 구성이 좋을 수 있으나, 처음 NodeJS 프로젝트를 진행하거나, 경험이 없는 경우 초기 Template 환경을 제공해 주는 방식으로 진행하는 것이 좋을 수 있다.

본 포스팅에서는 이러한 기반 환경을 제공해 주는 EJS Application 개발 방식에 대해 알아보자.

 NodeJS는 Frontend 기술인가 Backend 기술인가 

사실 많은 이들이 착각하고 있는 점이 하나있다. 바로 NodeJS를 Front 기술로 생각하고 있다는 점이다. 사실 Node의 개념을 모르는 입장에서 Node = WebServer라는 고정관념이 있기때문에 우리는 Node를 Front 기술로 생각하고 있었다.

사실 NodeJS는 일반적으로 Backend 기술이 담당하는 API 구현, Database 접속, 데이터 처리 등을 담당하는 Backend Application을 구현하는 기술에 가깝다. 하지만, 여전히 Frontend를 구현할 수 있는 몇가지 기술을 제공한다.

대표적인 Web Application을 구현하는 express 인스턴스를 활용하여 EJS, PUG 등을 적용할 수 있다.

우리는 앞으로 NodeJS를 통해 Frontend view를 사전에 확인해 보고 실질적인 Frontend를 구현하는 언어에 시안을 제공할 수 있는 EJS에 대해 살펴보고자 한다.

사실 EJS 만으로도 충분한 View를 구현할 수도 있지만, 최근 SPA 등 반응형 웹에 최적화 된 View를 표출하기 위해 EJS 등은 데이터 처리 과정을 검증하는 화면으로 사용하거나, 간단한 표출화면을 구현하는 정도로 사용하는 것이 좋다. 이후 검증된 데이터는 Angular와 같은 SPA 개발 환경으로 전송되어 표출하는 방식으로 구현된다.

 EJS 란? 

EJS는 Embedded JavaScript의 약자로 JavaScript가 내장되어 있는 html을 의미한다. html이 지원하는 script와의 차이점은 scripting 태그를 html 내부에 직접 사용할 수 있다는 점이다.

아래와 같이 EJS 홈페이지에 접근해 보면 그 이유를 알 수 있다.

https://ejs.co/

바로 위와 같이 script 태그를 <%= EJS %> 형태로 html에 직접 사용할 수 있다.

사실 이게 무슨 큰 차이인가 할 수 있겠지만, 이렇게 코드를 내장하면, 동적으로 변경되는 데이터를 관리할 때 보다 손쉬운 코딩이 가능해 진다는 장점이 있다.

 EJS Project 생성 

지금부터는 EJS Project를 생성해 보도록 하자. EJS Project는 이후 진행되는 포스팅의 기본 템플릿으로써 사용될 예정이다.

1) express-generator 설치

>> npm install -g express-generator

2) express ejs project 생성

>> express -e SampleAPP // express --pug SampleApp

3) directory 확인

위와 같이 SampleAPP을 생성하면, 다음과 같이 EJS 샘플 디렉토리가 생성된다.

생성된 디렉토리를 살펴보면 기본으로 NodeJS에서 사용하는 디렉토리 구조를 확인할 수 있다.

• bin : node를 기동하기 위한 env가 저장되는 www script가 포함되어 있다. www는 node를 기동하기 위한 port 등을 정의하며, node 기동시 사용되는 script로 활용된다. (ex - node 기동방법 : node ./bin/www)
• public : static 파일이 위치하는 공간이다. express에서 제공하는 express.static을 통해 위치를 저장할 수 있으며, 기본  default로는 package경로 하위의 public directory를 사용한다. 대체로 css, html, img 등이 위치한다.
• routes : 라우팅 관련된 JavaScript가 저장되는 공간이다. NodeJS는 Router를 구분하여 API를 제공하는 JavaScript와 Routing을 제공하는 JavaScript를 독립적으로 관리 할 수 있도록 한다.
• views : views에는 Frontend 기술을 적용하는 view page가 저장된다. 앞서 express sample 생성시 입력한 -e의 경우 ejs project를 생성하며, --pug 입력 시 pug가 생성된다.
• app.js : app.js가 node를 통해 기동될 경우 참조하는 미들웨어를 정의한다. 또한, 각종 init 정보를 초기화한다. 또한 index.js(router) 위치를 지정하고, router의 유입점으로써의 역할을 한다.
• package.json : npm dependencies에 대한 정보를 저장한다. npm install을 통해 일괄 적용할 수 있다.

4) npm install

>> npm install

다음과 같이 package.json에 저장된 module이 설치된다.

- cookie-parser

- debug

- ejs

- http-errors

- morgan

각 모듈은 디펜던시 모듈을 포함하여 구성된다.

현재 CMD 작업을 VSCode 내부에서 진행하고 있지만, Windows CMD를 통해 작업을 진행 할 경우 code .  명령으로도 VSCode를 바로 실행할 수 있다.

 

"EJS는 Script 태그를 html 내부에서 적용하여 활용할 수 있는 웹 애플리케이션 템플릿 언어이다. 이를 활용하여 서버 사이드 애플리케이션을 개발하고 빠른 테스트를 수행하거나, JSP, HTML로 표현 가능한 View를 표출할 수 있도록 도와준다."