본문 바로가기
루비 온 레일즈

루비 온 레일즈의 핵심. "MVC" 패턴

by 코딩의 세계 2025. 7. 25.

mvc

루비 온 레일즈에서 핵심인 MVC 이란?

루비 온 레일즈에서 핵심은 mvc 패턴이다. 이 개념을 루비 온 레일즈에서 핵심으로 쓰는데, mvc는 줄임말이다.

각각, model / view / controller 의 줄임말인데, 서로 각각 역할이 존재한다.

역할을 그림으로 표현하면 다음과 같다. >

패턴의 형식

MVC 패턴이란 무엇인가?

MVC 패턴은 소프트웨어 개발에서 널리 사용되는 디자인 패턴 중 하나이다. 복잡한 애플리케이션을 세 가지 주요 부분으로 나누어 개발을 더 쉽고 효율적으로 만들어준다. 이 세 가지 주요 부분은 다음과 같다.

  • 모델 (Model): 데이터와 관련된 부분을 담당합니다. 데이터를 저장하고, 데이터베이스와 상호작용하는 역할을 합니다. 마치 건물의 뼈대와 같습니다.
  • 뷰 (View): 사용자에게 보여지는 부분을 담당합니다. 웹 페이지의 내용을 만들고, 사용자 인터페이스를 구성합니다. 마치 건물의 외관과 같습니다.
  • 컨트롤러 (Controller): 모델과 뷰 사이의 다리 역할을 합니다. 사용자의 요청을 처리하고, 모델을 사용하여 데이터를 가져오거나 변경하고, 뷰를 선택하여 사용자에게 보여줍니다. 마치 건물의 관리인과 같습니다.

MVC 패턴의 역할 >

MVC 패턴은 각 부분을 명확하게 분리함으로써 다음과 같은 장점을 제공합니다.

  1. 코드 분리 및 가독성 향상: 각 역할에 따라 코드를 분리함으로써 코드를 이해하기 쉽고, 관리하기 용이하게 만듭니다.
  2. 유지보수 용이성: 코드가 모듈화되어 있어 특정 부분을 수정해야 할 때 전체 코드를 수정할 필요 없이 해당 부분만 수정하면 됩니다.
  3. 코드 재사용성: 모델, 뷰, 컨트롤러는 다른 애플리케이션에서도 재사용할 수 있습니다.
  4. 병렬 개발: 여러 개발자가 각 부분을 나누어 동시에 개발할 수 있으므로 개발 속도를 향상시킬 수 있습니다.

MVC 패턴 작동 방식 (쉬운 비유)

웹 사이트를 방문하는 과정을 건물을 방문하는 과정에 비유하여 MVC 패턴을 설명해 보겠습니다.

  1. 사용자의 요청 (Request): 웹 브라우저에 웹 페이지 주소를 입력하거나, 링크를 클릭하는 것은 마치 건물에 방문하려는 사람과 같습니다.
  2. 컨트롤러 (Controller): 건물 관리인은 요청을 받고, 어떤 페이지를 보여줘야 할지 판단합니다.
    • 예시: "사용자가 홈페이지를 보려고 하네. 그러면 게시글 목록을 보여줘야겠군."
  3. 모델 (Model): 모델은 데이터베이스에서 게시글 데이터를 가져옵니다. 마치 건물에 보관된 정보와 같습니다.
    • 예시: "게시글 목록을 가져와줘."
  4. 컨트롤러 (Controller): 컨트롤러는 모델에서 가져온 데이터를 뷰에 전달합니다.
  5. 뷰 (View): 뷰는 데이터를 받아 사용자에게 보여질 웹 페이지를 생성합니다. 마치 건물 내부를 꾸미는 것과 같습니다.
    • 예시: "게시글 제목과 내용을 예쁘게 정리해서 보여주자."
  6. 사용자에게 웹 페이지 보여주기: 웹 브라우저에 최종 웹 페이지가 표시됩니다. 마치 건물을 방문한 사람이 건물의 내부를 보는 것과 같습니다.

Rails에서 MVC 패턴

Rails는 MVC 패턴을 강력하게 지원하는 웹 프레임워크입니다.

  • 모델 (Model): app/models 폴더에 있는 파일 (예: Post.rb)
  • 뷰 (View): app/views 폴더에 있는 파일 (예: posts/index.html.erb)
  • 컨트롤러 (Controller): app/controllers 폴더에 있는 파일 (예: PostsController.rb)

MVC 패턴의 핵심 정리

  • 모델 (Model): 데이터 저장 및 처리 (데이터베이스와 상호작용)
  • 뷰 (View): 사용자 인터페이스 (웹 페이지 표시)
  • 컨트롤러 (Controller): 사용자 요청 처리 및 모델과 뷰 연결

간단한 예시로 이해하는 MVC 동작 방식

4-3. 간단한 예시로 이해하는 MVC 동작 방식

예시: 간단한 블로그 게시글 목록 페이지 만들기 >

목표: 사용자가 웹 브라우저에서 블로그 게시글 목록 페이지를 요청하면, 데이터베이스에서 게시글 데이터를 가져와 웹 페이지에 보여주는 기능을 구현한다.

1. 모델 (Model): Post.rb

  • 역할: 게시글 데이터를 데이터베이스에 저장하고, 필요한 데이터를 가져오는 역할
  • 코드:
  # app/models/post.rb
  class Post < ApplicationRecord
    # 데이터베이스 테이블에서 게시글 데이터와 상호작용
    # 추가적인 데이터 유효성 검증이나 비즈니스 로직도 이곳에 작성 가능
  end
  • Post 모델은 posts 테이블과 연결됩니다.
  • ActiveRecord::Base를 상속받아 데이터베이스와의 상호작용을 쉽게 처리합니다.
  • 현재는 특별한 코드가 없지만, 데이터를 관리하는 데 필요한 로직이 추가될 수 있습니다.

2. 뷰 (View): posts/index.html.erb

  • 역할: 모델에서 가져온 게시글 데이터를 웹 페이지에 표시하는 역할
  • 코드:
  <!-- app/views/posts/index.html.erb -->
  <h1>블로그 게시글 목록</h1>
  <ul>
    <% @posts.each do |post| %>
      <li>
        <h2><%= post.title %></h2>
        <p><%= post.content %></p>
      </li>
    <% end %>
  </ul>
  • <h1>, <ul>, <li> 등의 HTML 태그를 사용하여 웹 페이지의 구조를 만듭니다.
  • <% ... %> 는 Ruby 코드를 HTML 코드 안에 넣을 수 있도록 해주는 ERB 문법입니다.
  • @posts 변수는 컨트롤러에서 전달된 게시글 데이터를 담고 있습니다.
  • post.title, post.content 등을 사용하여 게시글 제목과 내용을 웹 페이지에 출력합니다.

3. 컨트롤러 (Controller): posts_controller.rb

  • 역할: 사용자의 요청을 받아들이고, 모델을 사용하여 데이터를 가져온 후, 뷰를 호출하는 역할
  • 코드:
  # app/controllers/posts_controller.rb
  class PostsController < ApplicationController
    def index
      @posts = Post.all # 모든 게시글 데이터를 가져와 @posts 변수에 저장
    end
  end
  • PostsController는 사용자의 요청을 처리합니다.
  • index 액션은 Post.all 메서드를 사용하여 데이터베이스에서 모든 게시글 데이터를 가져옵니다.
  • 가져온 데이터는 @posts 변수에 저장되며, 이 변수는 뷰에서 사용할 수 있습니다.
  • index 액션은 app/views/posts/index.html.erb 뷰 파일을 자동으로 찾아서 렌더링합니다.

routes.rb에 get '/posts', to: 'posts#index'를 추가합니다.

Rails.application.routes.draw do
  root 'welcome#index'
  get '/posts', to: 'posts#index'
end

MVC 동작 과정:

아직은 데이터베이스를 연결하지 않았기에 지금은 실제로 동작하지 않습니다. 5장 데이터베이스에서 살펴보겠습니다. 과정만을 확인해 주시기 바랍니다.

  1. 사용자 요청: 사용자가 웹 브라우저에서 http://localhost:3000/posts 주소로 접속하여 게시글 목록 페이지를 요청합니다.
  2. 라우팅: Rails는 config/routes.rb 파일에서 해당 주소에 맞는 컨트롤러와 액션을 찾습니다. (만약 routes.rb에 /posts 주소에 대한 라우팅 설정을 추가했다면)
  3. 컨트롤러: PostsController의 index 액션이 실행됩니다.
    • 컨트롤러는 Post.all 메서드를 호출하여 모델을 통해 데이터베이스에서 모든 게시글 데이터를 가져옵니다.
    • 가져온 게시글 데이터는 @posts 변수에 저장됩니다.
  4. 뷰: 컨트롤러가 app/views/posts/index.html.erb 뷰 파일을 렌더링합니다.
    • 뷰는 컨트롤러에서 전달받은 @posts 변수의 데이터를 사용하여 HTML 코드를 생성합니다.
    • 생성된 HTML 코드는 웹 브라우저에 전달되어 웹 페이지가 표시됩니다.
  5. 결과: 웹 브라우저에 블로그 게시글 목록이 표시됩니다. 각 게시글 제목과 내용이 출력됩니다.

핵심 정리:

  • 모델 (Post.rb): 게시글 데이터를 데이터베이스에서 가져오고 관리합니다.
  • 뷰 (posts/index.html.erb): 게시글 데이터를 웹 페이지에 표시합니다.
  • 컨트롤러 (posts_controller.rb): 사용자의 요청을 처리하고, 모델을 사용하여 데이터를 가져온 후, 뷰를 실행합니다.

추가 설명:

  • 라우팅 (routes.rb): 이 예시에서는 라우팅 설정에 대한 코드가 없지만, 실제로는 특정 주소로 접속했을 때 어떤 컨트롤러의 어떤 액션을 실행할지 정의하는 라우팅 설정이 필요합니다.
  • @posts 변수: 컨트롤러에서 @ 기호를 사용하여 만든 변수는 뷰에서 접근할 수 있는 인스턴스 변수입니다.
  • ActiveRecord: Post.all과 같은 메서드는 Rails의 ActiveRecord 라이브러리에서 제공하는 편리한 기능입니다.
  • ERB 문법: <% ... %> 와 같은 ERB 문법을 사용하여 뷰에서 Ruby 코드를 실행하고 데이터를 출력할 수 있습니다.