이번 시간에는 Node(JavaScript) 기반의 백엔드 어플리케이션 개발시 주로 사용하는 Node Express 웹개발 프레임워크 사용법에 대해 안내해드립니다.

현대적 백엔드 시스템(어플리케이션)들은 주로 아래와 같은 언어와 각 언어별 웹개발 프레임워크,그리고 서버 기반 백엔드시스템 개발 패턴인 MVP 설계패턴(Design Pattern) 조합으로 개발 및 서비스가 이루어지고 있습니다.

- JAVA + Spring(SpringBoot) + MVC Pattern

- C# + ASP.NET Core + MVC Pattern 

- Kotlin +SpringBoot + MVC Pattern

- Python + Django or Flask + MVC Pattern

- PHP + Lalabel + MVC Pattern

- Node(JavaScript) + Express + MVC Pattern

...

상기 패턴들의 특징을 보면 각각의 언어는 해당 언어별 웹 개발 프레임워크들을 이용해 보다 빠르고 효율적으로 웹기반 백엔드 시스템을 개발하고 구축할수 있게 지원하고 있으며
현대적 웹 기반 백엔드 시스템들은 실제 실행 환경인 서버를 기반으로한 동일한 MVC 설계패턴(Design Pattern) 을 사용해 그 구현과 작동 원리를 제공하고 있음을 알수 있습니다.    

Tip)MVC 설계패턴(Design Pattern)에 대하여 
아래 링크를 참고바랍니다.

1) Node Express Web 개발 프레임워크 소개

Node Express 웹 개발 프레임워크는 Node Framework가 설치되어 있는 환경에서 웹 기반 백엔드 어플리케이션을 보다 빠르고 효율적으로 개발할수 있는 각종기능을 개발자에게
제공하여 MVC 패턴 기반 샘플 프로젝트 소스 생성 및 MVC패턴 기반에서의 핵심기능을 사전에 개발하여 제공합니다.

Node Express 의 주요 특징은 아래와 같습니다.
- Node 기반의 오픈소스 웹서버 프레임워크 라이브러리
- Node 기반 웹 및 모바일 어플리케이션 개발 지원을 위한 강력한 기능 지원
- 수많은 HTTP기반 유틸리티 기능 및 미들웨어 제공으로 강력한 API 개발 환경 지원 

A) 미들웨어 스택

Express는 미들웨어 스택을 사용하여 요청과 응답 사이에 함수를 배치합니다.
이를 통해 요청 및 응답 객체를 조작하고, 요청-응답 주기를 관리할 수 있습니다.

B) 라우팅
Express는 강력한 라우터를 제공하여 개발자가 복잡한 요청 경로를 쉽게 관리할 수 있게 합니다.

C) 템플릿 엔진 지원
Express는 여러 가지 템플릿 엔진을 지원하여 동적 콘텐츠를 생성하는 데 도움을 줍니다.

D) 간편한 에러 핸들링
Express는 동기 및 비동기 코드에서 발생하는 에러를 쉽게 처리할 수 있도록 도와줍니다.

E) 풍부한 HTTP 유틸리티 기능 및 미들웨어 제공
Express는 강력한 API 개발 환경을 지원하기 위해 수많은 HTTP 기반 유틸리티 기능 및 미들웨어를 제공합니다.

2) Node Express 프로젝트 만들고 실행하기

먼저 express 기반 프로젝트를 만들기 위한 작업폴더를 지정합니다.
VSCode를 오픈하고 파일>폴더열기를 하여 여러분의 작업폴더를 지정하고 터미널창을 오픈하여 터미널 명령어 위치가 작업폴더로 지정된것을 확인합니다. 

예시) D:\Mixed-Code-Pilot\NodeJS\Backend> 

STEP1) express-generator 패키지를  npm 명령어를 통해  전역으로 최초 한번 설치
-터미널에서 아래 명령어를 통해 express-generator를 전역 패키지로 설치합니다.
-express-generator 패키지는 express 명령어를 추가로 사용해 손쉽게 express MVC패턴 기반 샘플 프로젝트 소스를 만들수 있는 환경을 제공합니다.

npm i -g express-generator

STEP2) express-generator 설치 후 CLI 를 통해 Node Express 기반 노드 웹 프로젝트 생성
- express명령어를 통해 MVC 패턴 기반의  물리적 노드 웹 프로젝트(프로젝트명= node-express-app)  샘플 프로젝트 코드 자동 생성     
- 프로젝트 생성시 View(화면,HTML) 제어 엔진 기술로 EJS 를 기반으로 프로젝트를 생성
- 프로젝트 소스는 express 명령어를 실행하는 터미널의 현재 작업 폴더위치에 생성됩니다.

express node-express-app --view=ejs

Tip)Windows OS에서 정상적으로 express 명령어를 통해 프로젝트가 안만들어지면
아래 링크를 통해 Windows OS 보안환경을 변경후 VSCode를 재오픈후 시도해보시기 바랍니다.

-express: 이 시스템에서 스크립트를 실행할수 없으므로..
-보안오류: PSSecurityException...
https://hellcoding.tistory.com/entry/VSCode-%EC%98%A4%EB%A5%98-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C 

STEP3) 생성된 프로젝트 경로 로 이동 후 프로젝트 실행에 필요한 node 패키지 일괄 복원설치 진행 
- 터미널에서 cd 명령어를 통해 반드시 해당 프로젝트 폴더안으로 이동합니다.
- npm i 명령어를 통해 프로젝트 폴더내 package.json 파일내 dependencies에 정의된 패키지 목록들을 일괄 복원 설치합니다.
- 하기 npm i 명령어는 반드시 프로젝트 폴더내의 package.json 파일과 동일경로상에서 실행 해야 함.

cd node-express-app
npm i

STEP4) 웹 프로젝트 실행 후  산출물 서버환경에서  실행
- npm start 명령어를 통해 노드 프로젝트를 실행합니다.
- package.json 파일내 scripts에 start 명령어가 등록되어 있고 node ./bin/www.js 모듈파일이 실행되게 설정되어 있음
- bin/www.js파일을 통해 노드 어플리케이션(app.js)이 서비스되는 서버환경을 구성해주고 지정된 포트를 통해 서비스됩니다.

npm start  

-웹브라우저를 오픈하고  http://localhost:3000 주소를 호출해 프로젝트 메인페이지가 오픈됨을 확인합니다.

-package.json

STEP5) 노드 프로젝트 실행 프로세스 종료 
- 터미널에서 Ctrl + C 키를 입력하고 Y를 선택하면 실행중인 노드  어플리케이션이 종료됩니다.
- 다시 노드 프로젝트를 실행하려면 npm start 하면 됩니다. 

3) Node Express 프로젝트 구조 이해하기

Node Express 프로젝트의 주요 폴더 및 파일에 대해 설명드립니다.

A) bin\www
- npm start 명령어 실행 시 package.json 내 start명령어 설정된 node ./bin/www 를 실행시켜 node 명령어로 www.js모듈을 실행시킴
- Express로 만든 노드 어플리케이션(app.js)을 서비스하기 위한 서버 및 서비스 환경 구축역할제공
- 프로젝트 템플릿의 최초 실행 노드 실행 모듈 파일임 

B) node_modules
- 노드 프로젝트 서비스 및 개발을 위해 사용한 오픈 소스 노드 패키지 소스 설치 폴더
- 서비스를 위해 다운로드 설치한 서비스용 패키지와 개발시 개발 효율성을 위해 설치한 개발용 노드 패키지들로 구분됨
- node_modules 에는 npm i 패키지 또는 npm i 패키지 --save-dev 를 통해 인터넷 저장소에서 다운로드 설치된 실제 패키지들의 소스가 저장됩니다.
- 설치된 패키지들의 자세한 설치 명세/이력은 package-lock.json 파일내에 기록됩니다.

C) pubic 폴더
- 각종 클라이언트(웹 브라우저)에서 실행되는 정적 리소스 파일(html/css/client javascript/images)들을 보관/서비스 하는 폴더
- express 프로젝트에서 사용하는 모든 정적 웹리소스들을 물리적으로 public 폴더 아래 두어야하며 서비스되는 경로는
http://localhost:3000/ 경로와 public폴더와 동일한 경로로 인식합니다.

예를 들어
public/sample/test.html 또는  public/sample/eddy.png 또는 public/css/main.css 형태로 물리적 폴더를 구성하고 물리적 정적파일을 배치시키면 도메인을 통해서는 아래와 같이 접근가능합니다.  

http://localhost:3000/sample/test.html
http://localhost:3000/sample/eddy.png
http://localhost:3000/css/main.css

D) routes 폴더
- MVC 패턴에서의 Controller역할을 담당하는 라우터 파일을 작성 보관하는 폴더
- routes 폴더는 사용자들이 URL주소를 통해 서버에 요청하는 각종 요청정보(웹페이지,순수데이터(RESTApi))등에 대한 응답을 처리하는 영역입니다.
- 각종 클라이언트들의 요청과 응답을 처리해주는 라우터 파일과 라우터 파일내 라우팅 메소드 기능을 정의하는 영역
- 사용자 요청을 받기 위한 URL주소체계(라우팅주소체계)를 수립하고 제공하는 영역입니다.

E) views 폴더
- MVC패턴에서의 화면 View(웹페이지)영역을 담당하는 뷰 파일들을 보관하는 폴더
- 뷰 엔진(EJS,PUG) 유형에 따라 뷰 파일의 확장자는 .ejs 또는 .pug로 사용됨
- 뷰 엔진이란 서버측에서 html웹페이지를 조작/제어 할수 있는 뷰처리 제어 기술을 말하며 언어별로 서버측에서 웹페이지를 제어하는 별도 기술(뷰엔진)을 제공하며 express는 ejs와 pug등의 뷰엔진 기술을 제공하며 주로 우리나라는 ejs를 사용합니다.
- JAVA의 경우 JSP, C#의 경우 Webform,Razor등의 뷰엔진 기술들을 제공합니다.    

F) app.js
- 노드 어플리케이션 서비스에 필요한 각종 설정 실행 프로세스를 정의하는 파일로 실질적인 Node Application 메인 모듈입니다
- 노드 어플리케이션의 환경 설정,라우팅정의,서비스구성,전역예외처리등 핵심적인 기능 정의 및 제공영역입니다.

G) package-lock.json
- 어플리케이션 실행에 필요한 각종 노드 패키지들간의 종속관계를 자동으로 관리해주는 파일
- 개발자가 직접 제어할일은 없지만 노드 프로젝트(어플리케이션) 개발 및 서비스에 사용되는 오픈소스 패키지들의 상호 의존성 종속관계를 관리해주며 설치 패키지간 버전 충돌 문제가 발생시 관련 파일을 제어해 문제를 해결할수 있습니다.

H) package.json
- 노드 어플리케이션 패키지명 버전 등 물리적 프로젝트 구성 정보 및 노드 어플리케이션 실행에 필요한 패키지 설치 이력 정보등을 제공
- 노드 프로젝트(어플리케이션)의 핵심 파일중 하나이며 프로젝트정보와 프로젝트에서 사용하느 패키지정보,실행,테스트등의 명령어들을 제어합니다. 

4) nodemon 개발용 패키지를 이용한 개발 효율성 높이기

express 프로젝트만으로 백엔드 서비스를 개발하다보면 라우터나 뷰파일,모델 파일등 소스를 수정하고 다시 웹서버를 통해 변경된 내용을 
확인하려면 매번 npm start 와 Ctrl + C 를 눌러 반복적으로 변경된 소스를 서버를 통해 서비스하고 변경내용을 확인하는 과정을 거쳐야합니다.

이러한 과정은 개발 생산성과 효율성을 저해하는 주요원인중 하나이기 때문에 프로젝트내 소스 수정 및 신규 소스 반영시 노드 어플리케이션의 실행과 종료를 자동으로 관리해주는 개발 생산성 지원 기능이 필요하며
nodemon 개발용 팩키지는 개발자가 소스를 수정 저장시 마다 서버를 내리고 다시 올려주는 작업을 자동화해 개발생산성을 담보해줍니다.

A) nodemon 개발 환경 지원 패키지 설치하기
-아래 명령어를 통해 nodemon 개발 환경 지원 패키지를  전역 또는 개발환경 지원용으로  패키지를 설치합니다.

npm i -g nodemon 
-개발용 컴퓨터 전역공간에 설치됨

or

npm install nodemon --save-dev
-프로젝트 폴더내 node_modules폴더에 설치됨

B) package.json내 npm start 명령어 수정반영하기
nodemon 패키지 설치 이후 반드시 프로젝트 package.json 내  "start" : "node ./bin/www" 코드를 아래 예시코드처럼 "start” : "nodemon ./bin/www" 으로 변경 및 파일 설정 저장해줍니다.

"scripts": {

     "start": "nodemon ./bin/www"

}

C) nodemon 기반으로 노드 프로젝트(어플리케이션)을 시작합니다.

npm start 

어플리케이션 실행은 동일하게 npm start 로 실행하지만 어플리케이션이 실행된후
기존 소스를 수정하고 저장시마다 자동으로 서버를 죽이고 다시 반영된 소스를 기반으로 서버를 실행시켜주어 변경된 소스를 바로 웹브라우저를 통해 확인해볼수 있습니다.