* 프론트컨트롤러 v3 구현
- 기존의 단점 : 컨트롤러에 req, res등 서블릿 기술에 의존적임.
- 단점2 : 아래와같이 viewPath부분의 중복이 많음.
public process(req : Request , res : Response) : MyView {
const viewPath : string = path.join(process.cwd(), 'dist','views','members.html');
return new MyView(viewPath);
}
- ModelView
- 여기의 map으로 new-form 등을 매칭해줄거임.
- model에 < 뷰의 논리이름, 실제객체 >를 넣어준다!!
export class ModelView {
private viewName : string;
private model : Map<String, Object>= new Map();
constructor(viewName : string) {
this.viewName = viewName;
}
public getViewName(){
return this.viewName;
}
public setViewName(viewName : string): void {
this.viewName = viewName;
}
public getModel() : Map<String, Object>{
return this.model;
}
public setModel(model : Map<String, Object>): void{
this.model = model;
}
}
import {ModelView} from "../ModelView";
export interface ControllerV3{
process (paramMap : Map<String, Object>) : ModelView;
}
- 컨트롤러 구현
- 논리적인 이름만 넘긴다.
- 물리적이름 만들기는 프론트컨트롤러의 viewResolver에서 담당한다.
import {ControllerV3} from "../ControllerV3";
import {ModelView} from "../../ModelView";
export class MemberFormControllerV3 implements ControllerV3{
process(paramMap: Map<String, Object>): ModelView {
return new ModelView("new-form");
}
}
- model에 < 뷰의 논리이름, 실제객체 >를 넣어준다!!
import {ControllerV3} from "../ControllerV3";
import {ModelView} from "../../ModelView";
interface Member {
id: number;
loginId: string;
name: string;
}
export class MemberListControllerV3 implements ControllerV3{
process(paramMap: Map<String, Object>): ModelView {
//todo : repository에서 member 모두 찾아서 넣기
const members: Member[] = [
{ id: 1, loginId: 'user1', name: '홍길동' },
{ id: 2, loginId: 'user2', name: '김철수' },
{ id: 3, loginId: 'user3', name: '이영희' }
];
const mv : ModelView = new ModelView("members");
mv.getModel().set("members",members);
return mv;
}
}
- 버그수정
- 버그 : viewsmembers 이런식으로 / 가 생략되어 파일을 못찾음
- path 모듈이용해서 수정
/**
* 논리이름을 (members)
* 물리이름으로 변환 (~~~/dist/views/members.html)
* @param viewName
* @private
*/
private viewResolver(viewName: string):MyView {
const viewPath: string = path.join(process.cwd(), 'dist', 'views',viewName+'.html');
const view = new MyView(viewPath);
return view;
}
v3로 test 한 결과
* 동적렌더링 구현
- 현재는 그냥 html을 그대로 그려주고있다.
- 이를 동적으로 바꾸고자 한다.
<div class="container">
<h1>회원 목록</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>로그인 ID</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>chovy</td>
<td>정지훈</td>
</tr>
<tr>
<td>2</td>
<td>faker</td>
<td>이상혁</td>
</tr>
<tr>
<td>3</td>
<td>tsla</td>
<td>일론머스크</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
- map.forEach 주의점
- val, key순으로 callback을 조회해야한다.
- 보통 key, value 순으로 생각했는데 특이하다??
value가 첫번째 파라미터인듯?
- 뭔가 크롬에서 html이 렌더링되지않고 파일이 다운로드 되버리는 버그가 있다.
- 현재 데이터를 강제로 넣어준경우 동적렌더링은 작동한다.
// 사용 예시
const pageData = {
title: '회원 목록',
members: [
{ id: 1, loginId: 'user1', name: '홍길동' },
{ id: 2, loginId: 'user2', name: '김철수' },
{ id: 3, loginId: 'user3', name: '이영희' }
]
};
const renderedHtml = await this.renderEjsTemplate(viewPath, pageData);
- 이제 할일은 data를 pageData의 형태로 바꿔주는 일이다.
- 하려고봤더니 또 버그가생겼다.
- 바로 ejs는 내용이 변하지 않는다는 점이다.
- 그래서 내용을 바꿔도 ejs의 해시값은 똑같기때문에 , 304 Not Modified가 되면서 과거의 내용이 보여진다.
- 일단 임시로 etag 기능을 삭제한다.
- 템플릿엔진의경우, etag나 last-modified 기능을 못쓰는것인지? 의문이다
임시로 삭제할 부분
- 이제 진짜 할일은 data를 pageData의 형태로 바꿔주는 일이다.
현재 pageData에는 이런것들이 담겨있다.
목표
- 먼저 jsp의 동작방식을 살펴보자.
- render 함수에서 model을 다시 request로바꾼후 속성을 set해줘야 jsp에서 접근이 가능한 구조다.
- 이부분을 좀 수정해야 될것같다.
- model에는 현재 < "members" , member 객체 > 가 담겨있다.
- 이 모델을 객체로 바꿔서 넘기면 될것같다.
public async renderEjs(model: Map<String, Object>, req : Request, res : Response) : Promise<void> {
let pageData = {};
model.forEach((val, key) =>{
pageData = { ...pageData, val};
});
await res.forwardEjs(req,res,this.viewPath, pageData);
}
{ key : [value] }로 만들면 될듯?
* map to obj
- 일단 String이 아니라 string으로 Map을 바꿔준다.
- map < members , member 객체 > 를 obj로 바꿔주고 넘기면 된다.
- obj[key] = value; 이런식으로 값을 set 할수있다.
mapToObject(map: Map<string, object>): { [key: string]: object } {
const obj: { [key: string]: object } = {};
for (const [key, value] of map) {
obj[key] = value;
}
return obj;
}
public async renderEjs(model: Map<string, Object>, req : Request, res : Response) : Promise<void> {
const pageData = this.mapToObject(model);
await res.forwardEjs(req,res,this.viewPath, pageData);
}
결과
- 이제 각각의 컨트롤러에서 ModelAndView에 절대경로, 모델객체만 잘 넘겨주면 알아서 렌더링된다.
- 이제 개발자는 비즈니스로직에만 집중할 수 있다.
