[항해99] 57일차 타입스크립트 , 객체지향 프로그래밍 , MVC 패턴

---

항해 99

 

57일차 :

 

내가헀을땐 안돼서 물어봤더니, 코드가 다시 돌아간다.  

왜 돌아가는지 모르겠다. 나도 분명히 똑같이 시도해봤었는데...

이제야 좀 MVC패턴이 이해가 되는 하루였다.  인터넷에 찾아보면 똑같은 MVC패턴이라고해도 모두 맘대로 폴더구조를 가져가는것같았는데, 오늘에서야 좀 MVC 패턴을 이해할수있는것같았다. 

아직 우리조는 typescript - MVC패턴으로 처음부터시작하느라, 다른조의 백앤드 보다 느린것같다. 솔직히말하면,

MVC패턴에대한 이해를하느라 typescript  를 제대로 쓰는건지는모르겠다.  JS 와 다른점은 그냥 interface 를 사용하고 type들을 지정해주는용도?  아직 공부할게 많은것같다... 

 

 

 

 

 

1. 프로미스와 await / async 

 

계속 async / await만쓰다가 then / catch 사용법 :

 

.catch는 promise가실패하면 , 쓸수있는데, 

postCreate가 실패하면 catch에있는  PromiseRejectionException으로 실행된다.

 

private async createPost(req: Request, res: Response, next: NextFunction) {
  
    const createPostDTO: Post ={
         //blahblah
    }
    const newPost = await postCreate(createPostDTO)

const newPost = await postCreate(createPostDTO)
    .catch(()=>next(new PromiseRejectionException()))
    return res.status(201).json(newPost)



.then. and .catch를사용하고싶다면,  async /await을 지우고 바로 .then.catch방식으로 써야한다.

result를 반환하려면  then((result)) => res.status(201).json(result))식으로 넘겨줘야한다.

private createPost(req: Request, res: Response, next: NextFunction) {
  
    const createPostDTO: Post ={
  		// blahblah
    }


postCreate(createPostDTO).then((result)=> res.status(201).json(result))
   .catch(()=>next(new PromiseRejectionException()))

 

 

2. MVC 패턴 구조

 

원래 있던 MVC구조패턴에서 변경사항이있었다.

현재 변경된 사항이 MVC패턴에 더 알맞는 패턴인것같다.

 

 

Controller:  DTO (DTO는 로직을 가지고 있지 않은 순수한 데이터의 객체이며 객체??)를 어떻게 처리할지 logic부분을 담당한다.

 

Model:  받은  DTO를  DB에 읽고 쓰는것을 담당한다.

 

View:  보여주는부분을 담당한다

 

 

https://medium.com/@jang.wangsu/%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4-mvc-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80-1d74fac6e256

[아키텍처 패턴] MVC 패턴이란?

 

 

아래 폴더구조에서는  각각의 posts/ users/comments 마다 controller가있고 , 해당하는 CRUD기능은 featuers에있는 model 들이 수행한다.

 

 

 

현재 폴더구조 :

SRC/
├─ app.ts
├─ validator/
├─ exceptions/
├─ middlewears/
├─ interfaces/
├─ posts/
│  ├─ comment.controller
│  ├─ post_featuers/
├─ uesrs/
│  ├─ user_featuers/
│  ├─ users.controller
├─ comments/
│  ├─ user_featuers/
│  ├─ comments.controller

폴더구조와 세부사항은 

아래 example과 동일하다.

https://github.com/mwanago/express-typescript

GitHub - mwanago/express-typescript

 

 

가끔식 현재 프로젝트를 하면서도, 이걸 내가 제대로하고있는게 맞는가?   이렇게해서 나한테 얻는게 뭔가? 등 이상한 쓰잘대기없는질문이 떠오를때까 많은데, 어쩌다가 아래 유튜브를 보게되었다.

 

이것저것 토이 프로젝트를 만들어놓고 깃헙에 쌓아 놓는 포트폴리오는 당연시 쓰레기인거고, 한번이라도 생각을 더깊게해서

리팩토링을 하거나 디자인 패턴을 적용해서  업그레이드하는 프로젝트가 좋다고 하는데  딱 우리가 지금 그냥 프로젝트 에서 한번더 깊게생각하고 만들어내고 있는거니깐 그래도 도움이 되겠구나 라고 생각은했다.

그래도  내가 코드는 짜겠는데 이게다 내것인지는 아직도 궁금증이있다.

https://www.youtube.com/watch?v=PJGsPohDuoA 

딱 이 영상에서말하듯 , 실제 유저가있는 서비스를만들어서 피드백을 반영하여 계속 업데이트해보면서 

그 프로젝트를 업데이트시키면 좋은 프로젝트라고하니  현제 파이널  프로젝트도 중간에 피드백을받아서 업데이트를할것이니 좋은 포트폴리오가 될것같다. 

 

게다가 원래 항해가 끝나고 작업을 시작할려고 했던 프로젝트들도 ,  실제 유저가잇는 웹서비스들을 만드는것이니 나한테 좋은 포트폴리오가 될것이라고 생각햇다. 빨리 항해가 끝나고 내가 생각해놨던 프로젝트를 하나씩 해보고싶다.