12/16 Node 2차시 - 커뮤니티, 템플릿, 미들웨어, Express, Mongoose(MongoDB), Socket

Himoonhee 2020. 12. 16. 12:30

2020. 12. 16. 12:30

728x90

5. NamooClub 시나리오

✔요구사항

✔유스케이스(커뮤니티 생성 및 가입)

✔도메인 모델(커뮤니티 생성 및 가입)

✔HTML5 기반, bootstrap 사용

✔객체지향 설계(OOP)

도메인 기반 프로그래밍의 기초가 되는 것은 객체지향 프로그래밍(Object Oriented Programing)입니다.
도메인 기반 설계는 객체로 이루어지며 이는 클래스로 표현됩니다.
클래스는 객체를 만들기 위한 템플릿 또는 청사진입니다.
도메인 기반 설계는 이와 같이 애플리케이션이 해결하고자 하는 문제영역을 객체로 처리하며 이는 클래스로 표현됩니다.

자바스크립트로 객체를 생성하는 방식은 여러가지가 있습니다.
간편하게 객체 property 를 정의하는 방식은 한번에 하나의 객체만 만들 수 있습니다.
함수 생성자를 통한 객체 생성은 하나의 함수로 여러 객체를 생성할 수 있습니다.

객체의 메소드 구현은 객체 property에 함수를 할당하는 방법으로 가능합니다.
객체의 this 접근은 외부에서 가능하므로 객체 데이터를 property 에 할당하는 것은 Encapsulation에 위배됩니다.
이런 경우 생성자 함수 스코프의 변수정의로 해결합니다.
함수 스코프의 변수는 함수 외부에서 접근이 불가능합니다.

=>캡슐화 - 메소드를 통해 우회해서 데이터에 접근, var - 함수 안에서만 존재, set & get만으로 접근가능

--도메인 모듈 : SocialPerson

SocialPerson 객체 생성을 위한 생성자 함수를 정의하고 모듈로 등록합니다.
객체 내부 변수를 위한 Getter, Setter 메소드를 함수로 구현합니다.
Show() 와 같이 객체의 행위를 나타내는 로직을 함수로 구현합니다.
유일한 ID 를 정의하기 위하여 모듈 스코프에 MAX_PERSON_ID 변수 정의합니다.

=>함수를 exports 함

커뮤니티에서 SocialPerson은 관리자가 될 수도 있고 회원이 될 수도 있습니다. 이를 표현하는 클래스 구현합니다.
CommunityMember 및 CommunityManager는 각각 회원 및 관리자를 표현하며 SocialPerson 객체를 Encapsulation 합니다.
내부의 SocialPerson 정보를 제공하는 Method가 존재합니다.

Community 도메인 객체 생성을 위한 함수를 정의합니다.
Community 객체 생성시 관리자를 위한 SocialPerson 객체는 필수이며 내부에서 CommunityManager 로 생성됩니다.또한 관리자는 CommunityMember로도 등록됩니다.
Community Member 추가 및 삭제를 위한 Method 제공하며 회원이 존재하는지 또는 회원수를 알 수 있는 Method 제공합니다.

--서비스 모듈

requestHandler는 사용자의 요청을 처리하는 컨트롤러 역할을 수행합니다.
역할 분리의 원칙에 따라 Community 도메인 모델을 관리하는 서비스 객체가 필요합니다.
CommunityService는 커뮤니티 도메인 인스턴스를 생성/조회/수정하는 역할을 담당합니다.

NamooClubRepository.js 는 CommunityService 객체를 모듈 형태로 제공하며 자체 저장소가 있습니다.
현재는 Database를 사용하지 않으므로 메모리로 저장하는 형태로 구현합니다.

=>router : controller역할, handler : 실질적인 business 실행, community service를 사용해야 한다.

--요청 처리 모듈

Community 조회를 위한 Handler 는 CommunityService로 조회하며 결과 HTML을 생성합니다.

Community 개설을 위한 페이지 제공 Handler 및 Community 생성 Handler

->requestHandler.js

handle 객체 export

/community 요청을 보내면 커뮤니티 목록 화면이 출력되며 '커뮤니티 개설'을 선택하면 입력 화면으로 이동합니다.

6. 디자인 적용하기

--Html 파일 로드

Html 페이지 요청에 대한 응답시 직접 Html 파일을 읽어 제공할 수 있습니다.
requestHandler에서 File System api를 사용합니다.
비동기 API를 사용하며 Callback에서 응답 처리합니다.

=> 서버에서 갖고 온 데이터를 출력할 필요가 없는 단순 view

--Static File 처리

디자인을 적용하기 위해 Html 파일 뿐만 아니라 각종 디자인 파일(css, js, image) 등을 제공해야 합니다.
Node 서버에서 이러한 static file 을 제공하려면 static file을 처리하는 Handler가 필요합니다.
Static file들이 존재하는 /public 폴더를 생성하고 디자인 파일을 복사합니다.

7. Template Module

--Template Engine

정적 파일인 HTML 대신 동적인 HTML을 구현하려면 Template Engine이 필요합니다.
전통적인 Template Engine으로 ASP, PHP, JSP 등이 있습니다.
Node.js의 Template Module은 jade, ejs 가 있으며 express 프레임워크가 지원합니다.
Node.js의 Template Engine으로는 jade를 가장 많이 사용합니다.

--★★jade Module

동적인 데이터를 추가시키기 위한 format

jade는 자동으로 HTML을 생성해 주는 View Template Engine입니다.
HTML을 보다 심플하게 표현하는 HAML (HTML abstraction markup language) 문법을 사용합니다.
HTML에 비하여 소스코드가 간단해 지고 가독성이 좋습니다.

Node도 Express라는 프레임워크 안에서 더 짧은 코드로 간결하게 구현가능

mybatis도 spring에서 간결해졌듯이

--jade 기본 문법

jade는 기본적으로 열고 닫는 Element Tag가 없습니다.
Element의 상하위 관계는 들여쓰기입니다.
Element의 속성(attribute)은 괄호내에 정의합니다.

--jade API 적용

jade 포맷의 파일을 fs 모듈로 읽고 컴파일 및 렌더링 과정을 거칩니다.
렌더링 과정에서 동적 HTML을 생성하기 위한 데이터 객체를 제공합니다.

--jade 동적 렌더링

jade 렌더링 시 입력된 데이터 객체로 동적인 HTML을 생성해 냅니다.
Jade의 반복문 및 조건문 텍스트 출력 등을 이용할 수 있습니다.

--jade Layout 적용

많은 페이지의 HTML을 디자인하다 보면 페이지마다 반복적으로 패턴화 되는 부분이 있습니다.
이 반복적인 구간을 Layout으로 정의하면 HTML 코드 량이 줄고 관리가 간편해집니다.
Jade는 이러한 layout 기능을 제공합니다.
공통적인 부분화면을 layout으로 정의하고 각 페이지마다 정의된 layout을 상속하여 사용 가능합니다.

기존의 jade 파일 내용 중 컨텐츠 부분을 block content 로 정의하고 하위 코드로 둡니다.
컨텐츠를 제외한 나머지 코드들은 layout.jade로 옮긴 후 필요시 적절히 include 파일로 분할하여 관리합니다.

=> 이것을 다 모아놓은것이 'Express' 프레임워크이다.

8. Middleware

--복잡한 요청 처리

하나의 Http 요청을 처리할 때 서버는 생각 보다 많은 일을 처리해야 합니다.
URL path 식별, session 처리, 비즈니스 처리, 응답 처리, 로깅 등
이러한 처리들을 모두 수행하려면 복잡한 코드가 되기 쉽고, 처리사항들이 변경(유지보수)될 경우 관리가 힘들어질 수 있습니다.
개발자의 역량에 따라 설계를 잘하고 모듈화 한 경우는 효과적인 처리가 가능하나 비용이 많이 듭니다.
Connect와 같은 Middleware 프레임워크는 이와 같은 처리를 쉽게 할 수 있는 방법을 제공합니다.

--Connect 프레임 워크

Connect 프레임워크는 HTTP 기반의 애플리케이션을 쉽게 개발할 수 있게 해주며 Middleware 컴포넌트를 위한 모델을
제공합니다.
Http 요청시 등록된 각 Middleware를 순차적으로 실행시켜 줍니다.
로깅, 에러처리, static 파일 처리와 같은 유용한 Middleware를 제공합니다.
Custom Middleware를 만들 수 있는 기반을 제공합니다.

--Connect 모듈 제공 Middleware

connect 모듈에서 기본적으로 제공하는 Middleware가 있습니다.
Logger, query, static 등 여러가지 유용한 Middleware를 제공합니다.
https://github.com/senchalabs/connect

--Middleware기반의 애플리케이션

connect 모듈을 사용하여 기존의 NamooClub 애플리케이션을 Middleware 기반으로 변경합니다.
Middleware 분할 기준은 다를 수 있으나 3개 정도로 식별합니다.
기존에 사용하던 staticHandler.js를 버리고 connect 모듈에서 제공하는 Middleware로 교체합니다.

server.js에서 수행하던 URL pathname 식별 코드를 Middleware로 정의합니다. 다음 수행을 위하여 next()를 호출합니다.
router.js 로직을 Middleware로 변경하며 static file을 위한 처리를 다음으로 미룹니다.

9. Express 프레임워크

--Express 프레임워크 개요

HTML 기반의 웹 애플리케이션은 요청에 대한 라우팅, 컨트롤러 선택, static 파일처리, HTML 렌더링과 같은 문제를 처리
해야 합니다.
Express 프레임워크는 웹 애플리케이션이 가지는 공통의 문제를 쉽게 해결해 줄 수 있는 통합 솔루션입니다.
Express는 Connect 미들웨어 엔진을 기반으로 동작합니다.
Http method와 URL을 기반으로 수행하는 라우터가 기본으로 포함됩니다.
Jade 및 ejs 와 같은 Template Engine을 지원합니다.
http://expressjs.com

--Express Application Generator 설치

Express Application을 빨리 만들어주는 도구입니다. 사용하려면 먼저 NPM으로 Global에 설치해야 합니다.
Express 명령은 애플리케이션을 위한 기본 환경을 구성해 줍니다.

--Express 프로젝트 생성

프로젝트 환경이 구성되면 해당 위치로 이동하여 필요한 모듈을 install 합니다. 이때 설치된 package.json 디펜던시를 참조합니다.
Express 애플리케이션의 메인은 app.js입니다.

생성된 Express 프로젝트는 기본적인 Express 개발 환경을 만들어 줍니다.
Package.json은 애플리케이션의 이름 및 버전 등의 명세를 나타내며 필요한 모듈 디펜던시를 정의합니다.
public 폴더는 static 파일들이 여기에 위치하며 express 애플리케이션은 이 파일들을 static 하게 제공합니다.(js, css, image)
routes 폴더는 요청을 처리하는 컨트롤러들이 위치합니다.
views 폴더는 HTML 렌더링을 위한 Templeate 파일들이 위치합니다. (jade 파일)

--app.js

app.set()은 Express 애플리케이션 환경변수를 구성합니다.
App.use()는 애플리케이션에서 동작하는 미들웨어를 구성합니다.
개발모드(development) 또는 운영모드(production)에 따라 다른 구성이 가능합니다.
App.use() 로 라우팅 미들웨어 또는 에러 핸들러도 추가가능합니다.

--Express기반의 애플리케이션

지금까지 구현했던 NamooClub 애플리케이션이 Express 기반으로 변경됨에 따라 router 기능을 대체할 수 있습니다.
URL 파싱, 라우터, Static 파일은 대부분 프레임워크에서 지원합니다.

--app.js 변경

app.js에서 라우팅을 담당하는 communities.js 모듈을 등록합니다.
Communities 모듈을 '/community' URL에 매핑합니다.
기존의 routeHandler.js 는 이미 express에서 그 기능을 담당하므로 이제 필요하지 않습니다.

--컨트롤러 모듈

요청에 대한 응답을 처리하는 컨트롤러 가 필요합니다.
이전 예제에서 requestHandlers.js 에서 수행했던 역할을 대체합니다.

res.render()는 템플릿 엔진을 사용하여 HTML을 렌더링하고 응답을 수행합니다. (환경설정에 따라 jade 엔진이 수행됨)
응답 헤더 작성은 Express에서 수행합니다.
요청 파라메터는 req.param()으로 얻을 수 있고 이전 예제에서 수행했던 URL 파싱 작업은 필요 없습니다.

이전 예제는 리다이렉트를 위해 응답헤더를 직접 만들었지만 express에서는 res.redirect()를 사용합니다.

--그 밖의 작업

css, js, image 와 같은 디자인 파일들을 /public 폴더로 이동합니다.
/jade 폴더에 있던 각 .jade 파일들을 /views 폴더로 이동합니다.
각 jade 파일에서 레이아웃 경로를 상대경로로 변경합니다.

**Express 실습하기

npm install -g express-generator

express express_app(프로젝트 생성)

cd express_app

npm install

cd ..(부모 디렉토리로 돌아가기)

cd Express(새 프로젝트)

npm install

10. Mongoose(Node에서 MongoDB를 사용하기 위한 노즐이름)

SQL : 관계형 DB, 데이터의 무결성, 정규화, 형식이 정형화 되어 있음, 회원 주문

=> 빅데이터 시대의 데이터가 정형화 되지 않음

NoSQL : 비정형화되지 않은 데이터를 사용하기 위한 목적 ex)MongoDB(document형식), 입력되는 데이트에 맞춰 유연하게 대응가능, 현대자동차가 NoSQL로 바꿈

MongoDB는 NO-SQL DB 중의 하나로서 유연하며 확장성이 높은 저장소입니다.
Not Only SQL은 전통적인 RDB의 대안으로 등장하였습니다.
DB 성격에 따라 Key-value, Document, BigTable, Graph Database 로 분류되는데 MongoDB는 Document Database에 해당합니다.
기존 RDB는 확장이 어려운 반면 MongoDB는 샤딩(Sharding) 기법을 사용하여 분산 확장처리가 쉽습니다.

문서 지향 데이터베이스이며 엔티티를 표현하는 모든 정보가 하나의 문서에 저장됩니다.
스키마가 없고, 하나의 Collection에서 여러 형태의 데이터 구조를 가질 수 있습니다. (JSON구조)
Scale-up 이 아닌 Scale-out 형태로 분산 처리 가능한 DB입니다.

www.mongodb.org/downloads
다운로드 파일 압축해제
데이터 폴더 생성
mongod 실행

기본적인 listent port는 27017 이며 admin console port는 28017입니다.
Mongod -- help로 도움말을 얻을 수 있습니다.
mongod -- port 로기본포트 변경 가능합니다.
Mongo shell 수행은 mongo로 가능합니다.

별도의 db 생성 명령은 없고 데이터를 저장하면 지정된 db 및 collection이 생성됩니다.
Document 형태로 입력 가능하며 collection에 저장됩니다.

--Mongoose 모듈

mongoose 모듈은 Node.js에서 MongoDB에 접근할 수 있는 기능을 제공합니다.
예제에서 메모리에 저장하던 부분을 DB에 저장할 수 있는 Data Access Layer를 구현할 수 있습니다.
Express 애플리케이션 내의 package.json을 변경한 후 npm install을 수행합니다.

--MongoDB 접속

mongoose의 connect() 함수로 접속 가능합니다.

--Mongoose Schema(=VO 객체), DB의 하나의 컬럼을 담기 위한 스키마

Node 서버 내의 데이터 객체와 MongoDB에 저장되는 Documnet 구조를 매핑하는 역할을 합니다.
스키마를 표현하는 별도의 모듈을 정의하며 주로 Document의 속성과 데이터 타입을 정의합니다.

--Mongoose Model(DAO와 비슷)

mongoose 모델은 작성된 스키마를 바탕으로 MongoDB Collection으로의 접근을 수행하는 객체입니다.
하나의 모델은 DB의 Collection과 매핑됩니다.
Model로 정의된 모듈로 data access가 가능한 기능을 제공합니다.

mongoose Model은 컬렉션에 접근할 수 있는 API 제공
mongoosejs.com/docs/api.html

**mongoDB 설치하기

cd C:\Node\mongodb-win32-x86_64-2008plus-2.4.9

mkdir data\db

cd bin

mongod --dbpath ../data/db || mongo(잘 설치 되었나 확인)

db -> collection(table) -> document(한개의 row) 만들기

use kosta(kosta라는 db를 만듦)

db.users.insert({username: "smith"})

db.users.find()

db.users.save({username: "jones"}) //insert, save로 데이터를 넣을 수 있음

db.users.count() //2

db.users.remove({username: 'smith'})

db.users.count() //1

show collections //system.indexes, users

db.users.drop() //삭제

show databases

use namooclub //나무클럽 안에 들어가겠다.

show collections

db.commuities.find()

--나무클럽 MongoDB Access - Collection 설계

Collection 설계는 문제 영역에 대한 단위 Document를 어떻게 나누는지 결정합니다.
도메인 구조에 따를 필요는 없으며 Document DB의 특성에 따라 저장 및 관리에 초점을 둡니다.
일반적으로 강하게 결합되어 있는 데이터를 위주로 하나의 Collection을 묶습니다.

--나무클럽 MongoDB Access - 애플리케이션 Layer

컨트롤러 및 비즈니스 처리, 저장과 관련된 이슈를 나누어 생각하며 각각의 영역을 Layer로 나눕니다.
Layer는 한 방향으로만 호출될 수 있습니다.
Business Layer는 요구사항에 대한 업무처리에 집중하며 도메인 모델과 관련되어 있습니다.
Data Access Layer는 데이터 저장에만 집중하며 mongoose 와 같은 데이터 저장 기술에 관련되어 있습니다.

--나무클럽 MongoDB Access - Schema

설계된 Document 기준에 따라 스키마를 정의합니다.
SocialPerson은 Sub Domumnet가 없으므로 속성만 정의합니다.
Community는 관리자 및 회원의 Sub Document가 존재합니다. 이 경우 앞서 정의한 SocialPersonSchema를 이용합니다.