[세션 / 토큰 로그인 프로젝트] 진행 과정(3) 중간점검(mvc 설계)

중간점검

 

중간점검이라고 해도 세션로그인을 구현해놓고 토큰로그인은 ui만 만들어진 상태긴 하지만

그 전에 mvc 설계를 생각해보며 1차적인 리팩토링을 진행했다. 

 

엘리스에서 진행했던 2차 팀프로젝트에서 시퀀스다이어그램을 만들어보긴 했지만

아직은 익숙하지 않아서 이번 프로젝트까지는 전반적으로 다 구현한 후 돌아보는 형식으로

시퀀스다이어그램을 만들 예정인데, 그렇다보니 맨 처음엔 index.js에 모든걸 넣었다가

내가 코딩하는게 불편해서 라우터를 나누었다. 

구현하는 자체가 너무 재밌어서 정리보다 만들고 싶은 마음이 앞서서 세션로그인을 마무리하고,

그 후로 정리를 미뤘는데, 이제 그 시간인 것 같다. 

 

mvc 설계 ...?

모델(Model): 데이터와 비즈니스 로직을 담당하며,

데이터베이스와 상호작용하고 데이터를 처리하여 컨트롤러에 전달한다.

뷰(View): 사용자에게 보여지는 인터페이스를 담당한다.

클라이언트와 상호작용하여 사용자에게 결과를 표시하고 입력을 받는다.

컨트롤러(Controller): 모델과 뷰 사이의 중개자 역할을 한다.

클라이언트의 요청을 받아서 해당 요청을 처리하기 위해 모델을 호출하고 결과를 뷰에 전달한다.

또한 요청과 응답을 가공하거나 필요한 처리를 수행할 수 있는 미들웨어가 이에 해당한다.

 

 

 

이에 맞게 구성해보니, 이렇게 나눌 수 있었다. 

 

Model

세션로그인의 경우 mysql db에 접근해야 하기 때문에 services.js로 모델에 해당한다. 

기존에 진행했던 다른 프로젝트에서는 규모가 지금보단 크다보니 model 네이밍을 했던 파일에는

정말 db와 맞닿는 쿼리문만 작성하여 추출된 값을 리턴했고, 

서비스에는 db와 관련된 로직, 에러처리 등을 진행했다. 

 

이번에는 세션로그인만 있기도 하고 간단하여 바로 네이밍을 model로 해도 됐지만, 

이후 고도화하면서 혹시 필요한 일이 있을까 하여 services로 네이밍하였다. 

 

View

사용자에게 보여지는 인터페이스로, 굳이 프론트와 백을 나누자면 프론트의 역할이 될 것이다.

index.html 하나로 그 안에 css를 넣어서 관리하고 있고, css, html 나눌까 하다가

한 페이지가 전부라 디렉토리를 너무 나누기보다는 모델도 services 1개가 전부라서

index.html로 끝내고 추후 고도화하면서 파일이 복잡해지고 많아지면 분리하기로 했다. 

 

Controller

service가 기존에 db와 맞닿는 로직, 에러처리로 정의한다면

controller에서는 view 즉, 클라이언트와 맞닿는 로직과 에러처리를 담당한다. 

 

이번 세션 / 토큰 로그인에서는 이렇게 크게는 3가지로 구분하였다. 

진입점 즉 entrypoint 인 index.js /

 

전역으로 설정하여 통제하는 middleware로 

중앙에서 예상치 못한 에러 혹은 에러를 한 곳으로 모으는 errorHandler,

세션과 토큰에 대해 설정하는 authHandler / 

 

클라이언트의 요청을 받고 url을 구분하는 Router

sessionRouter, tokenRouter / 

로직 및 에러처리를 담당하는 sessionController, tokenController

 

 

이렇게 구분하여 정리했고, 이제 토큰로그인 구현하며 다음 포스팅을 이어가려 한다.