1) 개념
- 노드(NodeJS) 상에서 동작하는 웹 개발 프레임워크로 간편하게 사용하기 위해 사용합니다.
* 프레임워크(Framework)란 : 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게 해주고, 협업화된 형태로 클래스들을 제공합니다.
2) 사용 이유
- 미들웨어(Middleware) 구조로 가볍고 유연하게 웹 프레임워크를 구성할 수 있습니다.
- 자바스크립트 코드로 작성된 다양한 기능의 미들웨어를 개발자가 필요한 것만 선택하여 express와 결합해 사용할 수 있습니다.
3. Node.js 설치
4. 프로젝트 생성 및 환경 설정
4-1) Node.js 설치 확인.
● node -v
● npm -v
4-2) 프로젝트 생성
● express --session --view=ejs --css css [프로젝트 명]
● cd [프로젝트 명]
4-3) 프로젝트 환경 설치
● npm install express --save
* --save를 넣어주면 package.json에 등록되고 자동으로 의존성 관리를 해줍니다.
● npm install express-generator -g --save
* -g : 모듈을 전역적으로 설치하는 옵션입니다.
* express-generator : express 프로젝트를 쉽게 생성하기 위한 툴
● npm install
● npm install --save body-parser
● npm install --save ejs
5. Eclipse Import
5-1) Import
5-2) Projects from Folder or Archive
5-3) Node 프로젝트 선택
6. 프로젝트 구성
● bin/www
- 서버 구동을 위한 코드가 기록되어 있습니다.
- Express 서버 설정 코드가 기록된 app.js 파일을 가져와 노드의 HTTP 객체와 연동하는 작업이 이뤄집니다.
● public
- 정적 파일을 위한 폴더로써 자바스크립트 파일, 이미지 파일, 스타일 시트 등을 포함합니다.
- 브라우져에 로딩된 HTML 파일에서 해당 파일을 호출하면 내려주는 역할을 합니다.
● routes
● views (ejs 템플릿) 설명
* 템플릿 엔진이란 : 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈입니다.
- NPM Express에서 가장 많이 사용하는 템플릿은 엔진은 Jade이며 기존의 HTML에 비해 작성법이 완전 다른데, 그에 비해 EJS는 똑같은 HTML에서 <% %>를 사용하여
서버의 데이터를 사용하거나 코드를 실행 할 수 있습니다.
- 기본 문법
- 주석 : <%# ... %>
- JS 코드 : <% ... %>
- 변수 출력(html escape 처리: >을 $gt로 변환) : <%= ... %>
- 태그 내부 공백 제거 : <%_ ... _%>
- html escape 안 하고 변수 출력 : <%- ... %>
● app.js
- bin/www 에서 사용되는 이 파일은 익스프레스 설정 파일이 담겨있는 핵심 코드입니다.
- 주요 설정 코드는 주석으로 작성했습니다.
* app.set()함수는 express 설정 관련 함수입니다.
* app.use()함수의 파라미터를 실행하는 함수로, 라우터, 로컬 함수 등 실행 가능합니다.
● package.json
- 프로젝트에서 사용하는 모듈과 버전 등이 표시되는 곳으로, 한 곳에서 편리하게 관리할 수 있게 하며 이를 '의존성 관리'라고 합니다.
* 의존성 이란?
- 요리를 만들면서 나중에 똑같은 맛을 가진 요리를 만들기 위해 어떤 재료를 얼마큼 사용했는지 기억하기 위해 메모를 하는 것과 같이
Node.js는 Package.json이라는 파일에 모듈들의 목록과 버전을 기록하고 관리한다.
7. 간단한 실행
● npm start
- 콘솔 로그 확인
8. 미들웨어.
● 개념
- express에서 사용할 수 있는 중간처리 목적의 소프트웨어/모듈로 요청의 응답을 완수하기까지 중간중간 다양한 일을 처리할 수 있고,
모듈을 분리하여 사용할 수 있는 장점이 있습니다.
- 미들웨어는 express 애플리케이션 객체의 use() 메소드이며, 파라미터로 req, res, next를 가지고 있습니다.
- req : 요청 객체
- res : 응답 객체
- next: 해당 미들웨어의 역할 수행을 마친 뒤 다음 설정된 미들웨어를 호출하거나 라우팅 로직을 수행.
8-1) 미들웨어 예제 코드.
● 조건이 틀린 경우 (app.js)
- middleware1함수내에 next(new Error('Unauthorized')) 함수를 만나 middleware2함수로 넘어가고
-> middleware2함수의 if 문을 만나 return 되어 next() 함수를 만나지 못하고 끝난다.
● 조건이 틀린 경우 (view)
● 조건이 틀린 경우 (서버 로그)
● 조건이 맞는 경우 (app.js)
- middleware1함수내에 next() 함수를 만나 middleware2함수로 넘어가고
-> middleware2함수에서도 next() 함수를 만나 app.get() 라우터로 넘어가고
-> app.get() 라우터에서 send() 함수로 'Hello World!' 를 보여준다.