1. Express란?

Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 미들웨어 중심의 웹애플리케이션 프레임워크입니다.

1.1 Express설치 / 준비

터미널에서 npm install express 를 입력합니다.
종속 항목 목록을 추가하지 않기위해서는 위와같이 입력하시고, 종속 항목을 수정하고 싶다면 express 뒤에 -save를 추가해 주세요!!

위에 이미지와 같이 "express": "^4.18.2" 가 추가된것을 확인하실수 있습니다.

express 사용을 위해 js 파일에 몇가지 설정을 해줘야합니다.

-1) express 모듈 가져오기
-2) const app = express => express함수를 호출하면서 만들어진 express application을 말합니다.
-3) 포트 번호 설정 - 내가 열려고하는 포트 번호 8002로 하였습니다.

그다음 터미널에서 node ./index.js 하고 웹 브라우저에 localhost:8002를 하면 열린것을 확인 하실수 있습니다!!

2.EJS엔진

EJS(Embeded Javascript Template) 알기 전에 템플릿 엔진에 대해 간략하게 알아보겠습니다.

템플릿을 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어 또는 소프트웨어 컴포넌트라고 말합니다.

Template: 공통적인 프레임을 미리 제작한 것입니다.
Web Template Enging : 웹 문서가 출력되는 템플릿 엔진을 말합니다. 즉, 웹 템플릿 엔진은 웹 템플릿 과 웹 컨텐츠 정보를 처리하기 위해 설계된 소프트 웨어입니다. 또한 view Code(HTML) 과 Data Login Code(DB Connection)를 분리해는 기능을 합니다.

대표적인 템플릿 엔진은 EJS, Handlebars, Pug(Jade)등이 있다.

2.1 EJS엔진 사용하는 이유?

기존 html에서도 script 태그를 이용해 js를 사용할 수 있지 않냐고 말하기도 합니다. 엔진을 사용하기 전에는 html과 script가 철저하게 분리되어 있었습니다. 그러나 EJS는 html태그안에서 js 내용을 사용이 가능하기 때문에 동적으로 구성하는데 수월 합니다.

2.2 EJS 엔진 설치

npm install ejs

2.3 EJS 문법

html 내부에 js 문법을 넣는 것이기 때문에 약간의 태그가 필요합니다.

<% for(let i = 0; i< fruits.length; i++) { %>
        <div>과일 이름: <%=fruits[i]  %></div>
    <% } %>

기존 js,html 문법 처럼 사용하고자 하는 함수의 처음과 끝인 태그로 감싸면 될줄 알았지만 아웃풋 태그
<% 를 사용해서 사용하고자하는 js의 줄마다 태그로 처리를 해줘야 합니다.

아웃풋 태그를 통해 js 문법을 사용하더라도 html에서 혼용이 가능하게 만들었습니다.
<%= %>태그와 <%- %>태그의 차이는 태그인식의 여부입니다.

2.4 EJS 탬플릿 설정

랜더링을 하기 위해 뷰 엔진 설정을 해야합니다.

기본적인 app.set default는 ./view입니다.

3. 미들웨어

미들웨어는 Express애플리케이션에서 요청과 응답 처리를 중개하고 변형하는 역할을 한다. 이는 Express의 기능중 하나이며, 웹 애플리케이션에서 다양한 작업을 수행하는 데에 사용된다.

3.1 Express에서의 미들웨어

-3.1.1 내장 미들웨어
Express에는 기본적으로 내장되어 있는 미들웨어가 있습니다.
미들웨어는 app.use()와 함께 사용되는데 간단하 예시를 동해 알아보겟습니다.
웹 페이지는 모든 경로를 하나하나 기입하기에는 너무 복잡하기에 공통의 로직이 필요합니다. express, ejs의 기본 설정을 index.js로 기입했는데 마찬가지로 공통 로직에 대한 부분을 파일에 기입하여 정적파일을 제공 할 수 있습니다.

app.use("/public", express.static(__dirname + "/static"));

여기서는 절대 경로를 작성하였지만 node프로세스가 실행되는 디렉터리에 따라 static 메서드가 상대적일 수 있어서 절대 경로를 사용하는 것을 권장 합니다.

-3.1.2 서드 파티 미들웨어, 애플리케이션 레벨 미들웨어, 라우터 레벨 미들 웨어, 오류 처리 미들웨어 등이 있습니다. 아래의 참고자료에서 보시면 됩니다!!

4. 참고자료

Express미들 웨어