분류 기타

모델-뷰-컨트롤러 아키텍처 작동 방식

컨텐츠 정보

  • 조회 525 (작성일 )

본문

How Model-View-Controller Architecture Works 


지난 20 년 동안 웹 사이트는 약간의 CSS가 있는 단순한 페이지에서 훨씬 더 복잡하고 강력한 애플리케이션으로 바뀌었습니다.


이러한 응용 프로그램을 보다 쉽게 ​​개발할 수 있도록 프로그래머는 다른 패턴과 소프트웨어 아키텍처를 사용하여 코드를 덜 복잡하게 만듭니다.


하지만 먼저 소프트웨어 아키텍처란 무엇입니까? 


아키텍처는 소프트웨어를 설명하는 체계적인 방법입니다. 또한 다른 소프트웨어와의 관계 및 서로 상호 작용하는 방식을 나타냅니다.


소프트웨어 아키텍처에는 비즈니스 전략, 품질 속성, 인간 역학, 디자인 및 IT 환경과 같은 다른 요소도 포함됩니다.


즉, 아키텍처는 시스템의 청사진 역할을 합니다.


Model-View-Controller (MVC) Architecture 


지금까지 가장 널리 사용되는 소프트웨어 아키텍처는 Model-View-Controller 또는 MVC입니다.


MVC는 큰 응용 프로그램을 세 부분으로 나눕니다.

  1. The Model
  2. The View
  3. The Controller

이러한 각 구성 요소는 응용 프로그램의 특정 측면을 처리하도록 구축되었으며 용도가 다릅니다.


The Model 


모델에는 프로젝트의 스키마 및 인터페이스, 데이터베이스 및 해당 필드와 같이 사용자가 작업하는 모든 데이터 관련 논리가 포함됩니다.


예를 들어 고객 개체는 데이터베이스에서 고객 정보를 검색하거나 데이터베이스에서 레코드를 조작 또는 업데이트하거나 이를 사용하여 데이터를 렌더링 합니다.


The View 


보기에는 UI와 애플리케이션의 프리젠 테이션이 포함됩니다.


예를 들어 고객보기에는 텍스트 상자, 드롭 다운 및 사용자가 상호 작용하는 기타 항목과 같은 모든 UI 구성 요소가 포함됩니다.


The Controller 


마지막으로 컨트롤러는 모든 비즈니스 관련 로직을 포함하고 들어오는 요청을 처리합니다. 모델과 뷰 사이의 인터페이스입니다.


예를 들어 고객 컨트롤러는 고객보기의 모든 상호 작용과 입력을 처리하고 고객 모델을 사용하여 데이터베이스를 업데이트합니다. 동일한 컨트롤러가 고객 데이터를 보는 데 사용됩니다.


다음은 MVC 아키텍처와 모든 것이 함께 작동하는 방식을 시각화 하는 데 도움이 되는 다이어그램입니다.


Pink-Cute-Chic-Vintage-90s-Virtual-Trivia-Quiz-Presentations--15-.png 

Model View Controller의 흐름도


MVC 아키텍처 작동 방식 


먼저 브라우저는 컨트롤러에 요청을 보냅니다. 그런 다음 컨트롤러는 모델과 상호 작용하여 데이터를 보내고 받습니다.


그런 다음 컨트롤러는 뷰와 상호 작용하여 데이터를 렌더링 합니다. 뷰는 최종 프리젠 테이션이 아닌 정보를 제시하는 방법에만 관심이 있습니다. 컨트롤러가 보내는 데이터를 기반으로 데이터를 렌더링 하는 동적 HTML 파일입니다.


마지막으로 View는 최종 프레젠테이션을 Controller에 보내고 Controller는 최종 데이터를 사용자 출력으로 보냅니다.


중요한 것은 뷰와 모델이 서로 상호 작용하지 않는다는 것입니다. 그들 사이에서 일어나는 유일한 상호 작용은 컨트롤러를 통하는 것입니다.


즉, 응용 프로그램의 논리와 인터페이스가 서로 상호 작용하지 않으므로 복잡한 응용 프로그램을 더 쉽게 작성할 수 있습니다.


간단한 예를 살펴 보겠습니다.


Pink-Cute-Chic-Vintage-90s-Virtual-Trivia-Quiz-Presentations--16-.png 


여기서 무슨 일이 일어나고 있는지 봅시다. 첫째, 사용자는 웹 브라우저 또는 모바일 애플리케이션을 통해 영화 목록을 원한다고 입력합니다.


그런 다음 브라우저는 영화 목록을 가져 오기 위해 컨트롤러에 요청을 보냅니다.


다음으로 컨트롤러는 모델에게 데이터베이스에서 영화 목록을 찾도록 요청합니다.


router.get('/',ensureAuth, async (req,res)=>{ 
	try{ 
		const movies = await Movies.find() (*) 
		res.render('movies/index',{ movies }) 
    } 
    
	catch(err){ console.error(err) 
		res.render('error/500') } })


Controller가 Movie List (Line number *)를 요청하는 요청을 보내는 경우 ‌


그런 다음 모델은 데이터베이스를 검색하고 영화 목록을 컨트롤러에 반환합니다.



const mongoose = require('mongoose') 
const MovieSchema = new mongoose.Schema
({ 
	name:{ 
        type:String, 
        required:true 
    }, 
	description:{ 
    	type:String 
    } 
}) 

module.exports = mongoose.model('Movies',MovieSchema)


영화 모델 스키마.


컨트롤러가 모델에서 영화 목록을 가져 오면 컨트롤러는 보기에 영화 목록을 표시하도록 요청합니다.


router.get('/',ensureAuth, async (req,res)=>{ 
	try{ const movies = await Movies.find() 
		res.render('movies/index', { movies (*) }) } 

	catch(err){ 
    console.error(err) res.render('error/500') } 
})


컨트롤러는 영화 목록을 View로 전송하여 영화 목록을 렌더링합니다 (줄 번호 *).


그런 다음 View는 요청을 수신하고 렌더링 된 영화 목록을 HTML 형식으로 컨트롤러에 반환합니다.



<div class="col" style="margin-top:20px;padding-bottom:20px">
    <div class="ui fluid card"> 
        <div class="content"> 
        <div class="header">{{movie.title}}</div> 
        	</div> <div class="extra content"> 
            <a href="/movies/{{movie._id}}" class="ui blue button"> More from {{movie.description}} </a> 
        </div> 
    </div>
</div>


HTML 형식의 동영상 반환 목록보기.


마지막으로 컨트롤러는 해당 HTML을 가져 와서 사용자에게 반환하여 영화 목록을 출력으로 가져옵니다.


마무리 


많은 소프트웨어 아키텍처가 있지만 Model-View-Controller가 가장 널리 사용되고 널리 사용됩니다. 코드 복잡성을 줄이고 소프트웨어를 쉽게 이해할 수 있습니다.


이제 Model-View-Controller의 개념을 알았습니다.


https://www.freecodecamp.org/news/model-view-architecture/



모델-뷰-컨트롤러