원글 페이지 : 바로가기
1. 들어가며 MVC 패턴에 대해 알아보고 MVC 패턴으로 프로젝트 구축하기 2. MVC 패턴 MVC 패턴이란? 모델(Model), 뷰(View), 컨트롤러(Controller) 로 이루어진 소프트웨어 설계와 관련된 디자인 패턴이다. 💡 디자인 패턴이란? 소프트웨어를 설계할 때 발생하는 문제를 해결하기 위한 방법 중 하나로, 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론이다. MVC의 장점과 단점 ✔ 장점 패턴들을 구분해서 개발한다(기능 단위 별로 나눠서 처리) 디버깅이나 코드 가독성을 높여서 유지보수에 용이하다 유연성과 확장성이 높다 협업에 용이하다 ✔ 단점 설계 단계가 복잡해서 설계 시간이 오래 걸린다. 단위가 많아진다. 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다. MVC 디자인 패턴 흐름 모델(Model) 데이터를 처리하는 부분이다. 데이터베이스와 소통하여 데이터를 가지고 오거나 모델 자체가 데이터를 가지고 있을 수 있다 뷰(View) UI에 관련된 것을 처리하는 부분이다.(유저가 보는 화면을 담당) 모델이 컨트롤러를 통해 전해준 데이터를 기반으로 화면을 그린다. 컨트롤러(Controller) 뷰와 모델을 연결해주는 부분이다. 뷰에서 액션과 이벤트에 대한 인풋값을 받으면 모델에게 전달한다. 또한 모델에게 전달받은 데이터를 뷰에게 전달할 수 있다. 전달하기 전 데이터를 가공할 수 있다. 모델이나 뷰의 변경 통지를 받으면 이를 해석해서 각각의 구성 요소에 해당 내용에 대해 알려준다. 여기서 중요한 것은 모델과 뷰는 직접 소통을 하지 않는다! 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신하며, 모델의 데이터는 컨트롤러를 통해 뷰에게 전달된다! MVC 패턴을 적용해서 프로젝트 구조 변경하기 예전에 multer를 사용한 파일업로드 실습을 위해서 만들어놓았던 프로젝트를 mvc 패턴을 이용한 구조로 변경할 예정이다. 변경 전 프로젝트 구조가 다음과 같다. view에 대한 구조만 있고 controller 와 model은 따로 없는 상태다 그러다보니 기능별로 파일이 따로 있는 것이 아니라 app.js에 아래와 같은 코드가 같이 있다. 이제 mvc 패턴을 이용해서 기능별로 나누고자 한다. const express = require(‘express’)
const multer = require(‘multer’)
const path = require(‘path’)
const app = express()
const PORT = 8080;
// 뷰 템플릿 등록
app.set(‘view engine’, ‘ejs’)
app.set(‘views’, ‘./views’)
// body-parser 미들웨어 등록
app.use(express.urlencoded({extended : true}))
app.use(express.json())
// multer 미들웨어 등록
app.use(‘/uploads’, express.static(__dirname + ‘/uploads’))
app.use(‘/static’, express.static(__dirname + ‘/public’))
// multer 객체
const uploadDetail = multer({
storage : multer.diskStorage({
destination(req, file, done){
done(null, ‘uploads/’)
},
filename(req, file, done){
const ext = path.extname(file.originalname);
done(null, req.body.userID + ext)
}
}),
limits : {fileSize : 5*1024*1024}
})
// todolist 정보 배열
const todoList = [
‘모험 떠나기’,
‘파티 가기’,
‘지팡이 휘두르기’
]
app.get(‘/’, (req, res)=>{
res.render(‘index’, {title : ‘회원가입’})
})
app.post(‘/upload’, uploadDetail.single(‘userimg’), (req,res)=>{
console.log(req.file);
console.log(req.body);
res.render(‘result’, {
userID : req.body.userID,
userpwd : req.body.userpwd,
username : req.body.username,
userage : req.body.userage,
userImg : req.file.path,
todoList
})
})
// 404 error 처리
app.get(‘*’, (req,res)=>{
res.render(‘404’)
})
app.listen(PORT, ()=>{
console.log(`${PORT} 연결성공`);
}) 화면구성은 다음과 같다. index 페이지 result 페이지 변경 후 프로젝트 구조를 다음과 같이 변경해주었다. model, view, controller에 대한 구조를 추가해주었고, multer 미들웨어를 처리할 구조도 따로 만들어주었다. model todolist에 대한 정보를 넣어둔 배열은 model 에 넣어주었다. view views 폴더에는 그 전과 달라진게 없으므로 따로 언급하지는 않겠다. ejs문법을 활용해서 html로 구성하기 위한 코드가 담겨있다. controller controller. 에 대한 내용은 다음과 같이 처리해주었다. 여기서 요청에 대한 응답을 처리해주고, 모델로부터 데이터를 받아서 뷰에 전달해주는 역할을 해준다. route 라우트에는 말 그대로 경로에 대한 코드가 있다. 여기서 어느 라우터에 어느 방식으로 요청을 보내고 어떤 콜백함수를 처리할 것인지 정리해두었다. controller에 정의되어 있는 함수를 불러와서 처리하도록 했다. middleware 이 폴더는 multer 에 대한 처리를 하도록 만들었다. 이렇게 mvc 패턴으로 프로젝트를 정리해서 결론적으로 최상단에 있는 app.js가 깔끔해졌다! 단순히 디자인 패턴을 이용해서 프로젝트 구조를 바꾼 것이기에 화면에서 보여지는 기능은 동일하다. 3. 마치며 개발에 있어서 디자인 패턴은 프로젝트를 만들 때 더 나은 방법을 제시해주므로 알아두면 너무 도움이 되고 나중에 협업을 할때나 회사에서 일을 할 때도 너무나 유용할 것 같다. 다만 이 파일 저 파일 왔다갔다 거려서 좀 헷갈리긴 하지만 그래도 금방 적응하고 익숙해지면 오히려 이 방법이 더 좋을 것 같다! 이번 포스팅에서 아쉬운 점은 데이터베이스를 연결해서 하는 방법을 다루지 않았다는 것인데, 아직 배우는 중이라 배우고 나면 포스팅을 해야겠다. 4. Reference 1. 코딩온 강의 자료 2. https://hanamon.kr/mvc%EB%9E%80-mvc-design-pattern/ MVC란? (MVC design pattern) – 하나몬 MVC, MVVM 과 같은 키워드는 소프트웨어 설계와 관련된 디자인 패턴으로, 소프트웨어 공학에서의 ‘흔히 사용되는’ 설계 패턴을 의미한다. ❗️What is MVC Model View Controller (모델 뷰 컨트롤러) SW Arch hanamon.kr 3. https://velog.io/@zunyange/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EA%B0%80-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4 프로그래머가 알아야 할 ‘디자인패턴’ Design Pattern velog.io