🛠️ Rails 핵심 기능 익히기 - 라우팅, 컨트롤러, 뷰로 CRUD 구현하기!

🎯 이번 시간 학습 목표

  • ✅ Rails의 핵심 구성 요소인 라우팅(Routing), 컨트롤러(Controller), 뷰(View)의 역할을 이해합니다.
  • config/routes.rb 파일을 통해 URL 요청을 컨트롤러 액션에 연결하는 방법을 배웁니다.
  • rails generate controller 명령어로 컨트롤러와 기본 뷰 파일을 생성합니다.
  • ✅ 컨트롤러 액션에서 뷰 템플릿(.html.erb)을 렌더링하는 과정을 실습합니다.
  • ✅ 간단한 '읽기(Read)' 기능을 구현하며 MVC 패턴의 흐름을 파악합니다.
  • ✅ 웹 애플리케이션의 기본 기능인 CRUD(Create, Read, Update, Delete) 개념을 맛봅니다.

지난 시간에는 Rails의 MVC 패턴을 살짝 엿보고 첫 Rails 앱을 성공적으로 만들어 실행해봤죠? ✨ 이번 시간에는 그 빈 껍데기 앱에 생명을 불어넣는 방법을 배울 차례입니다! 바로 Rails의 핵심 삼총사, 라우팅(Routing), 컨트롤러(Controller), 뷰(View)를 직접 다루면서 사용자의 요청을 받아 화면에 원하는 내용을 보여주는 과정을 익힐 거예요. 🚀 웹 개발의 기본인 CRUD 개념도 살짝 맛볼 예정이니, 집중해서 따라와 주세요!

✨ 오늘 배울 내용 미리보기

개념/파일/명령어 설명 간단 예시
config/routes.rb URL 요청과 컨트롤러 액션을 연결하는 지도 역할 get '/hello', to: 'welcome#index'
Controller 사용자 요청을 받아 처리하고 응답(뷰)을 보내는 중간 관리자 class WelcomeController < ApplicationController
Controller Action 컨트롤러 내에서 특정 요청을 처리하는 메소드 def index ... end
View (.html.erb) 사용자에게 보여줄 HTML 문서를 만드는 템플릿

안녕하세요!

rails g controller [이름] [액션...] 컨트롤러와 관련 파일(뷰, 헬퍼 등) 생성 명령어 rails g controller Welcome index
CRUD 데이터 처리의 기본 작업 (Create, Read, Update, Delete) 게시글 작성/조회/수정/삭제 기능 등

📌 rails grails generate의 축약형입니다. 앞으로 자주 사용하게 될 거예요!


🗺️ 길 안내 전문가, 라우터 (config/routes.rb)

사용자가 웹사이트 주소(URL)를 입력하면, Rails 앱은 가장 먼저 어디로 가야 할지 알아야 합니다. 이 길 안내 역할을 하는 것이 바로 라우터(Router)입니다. 설정 파일은 config/routes.rb에 있어요.

라우터는 특정 URL 요청이 들어왔을 때, 어떤 컨트롤러(Controller)의 어떤 액션(Action, 메소드)을 실행할지 연결해주는 역할을 합니다.


# config/routes.rb

Rails.application.routes.draw do
  # 사용자가 웹사이트 루트(/)로 접속하면,
  # pages 컨트롤러의 hello 액션을 실행하도록 변경해봅시다.
  root "pages#hello" # 이전에는 주석처리 했었죠? 이제 풀어줍니다.

  # 사용자가 '/hello' 경로로 GET 요청을 보내면,
  # pages 컨트롤러의 hello 액션을 실행해라!
  get '/hello', to: 'pages#hello' # 루트와 동일한 액션을 연결할 수도 있습니다.

  # 만약 리소스를 다루는 경우 (예: 게시글), 이렇게 쓰면
  # CRUD 관련 라우트가 자동으로 생성됩니다. (나중에 자세히!)
  # resources :articles
end
    

위 예시처럼 get '/hello'는 사용자가 `/hello`라는 주소로 접속했을 때 (HTTP GET 요청) 어떤 일을 할지 정의합니다. to: 'pages#hello'는 `pages`라는 이름의 컨트롤러 안에 있는 `hello`라는 액션(메소드)을 실행하라는 의미입니다. `root "pages#hello"`는 웹사이트의 가장 기본 주소(예: `http://localhost:3000`)로 접속했을 때 `pages#hello` 액션을 실행하라는 뜻이에요. 쉽죠? 😉

👨‍💼 요청 처리반장, 컨트롤러 (app/controllers)

라우터가 길을 안내해주면, 그 요청을 실제로 받아서 처리하는 역할은 컨트롤러(Controller)가 담당합니다. 컨트롤러는 모델(데이터 담당, 나중에 배움)과 통신하거나, 어떤 뷰(화면)를 보여줄지 결정하는 중간 관리자예요.

컨트롤러는 app/controllers 폴더 안에 만들며, 보통 [이름]_controller.rb 형식의 파일명을 가집니다. (예: `pages_controller.rb`)

터미널에서 명령어를 사용해 컨트롤러를 쉽게 생성할 수 있습니다. `pages` 컨트롤러와 `hello` 액션을 만들어 볼까요? (이미 이전 단계에서 만들었다면 이 단계는 건너뛰거나, 다른 이름으로 연습해보세요!)


# 터미널에서 실행 (프로젝트 루트 폴더에서)
# 만약 pages 컨트롤러가 없다면 생성합니다.
# rails generate controller pages hello
# 또는 축약형: rails g controller pages hello
    

이 명령어를 실행하면 Rails가 자동으로 여러 파일을 만들어줍니다.

  • app/controllers/pages_controller.rb: 컨트롤러 파일 생성
  • app/views/pages/hello.html.erb: `hello` 액션에 대응하는 뷰 파일 생성
  • 관련 테스트 파일, 헬퍼 파일 등도 함께 생성됩니다. (지금은 몰라도 괜찮아요!)

생성된 (또는 이미 있는) app/controllers/pages_controller.rb 파일을 열어보면 다음과 같이 코드가 작성되어 있을 거예요.


# app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def hello
    # 이 액션이 실행될 때 수행할 코드를 여기에 작성합니다.
    # 지금은 비어있지만, 나중에 데이터를 처리하는 코드가 들어갈 수 있습니다.

    # 특별히 지정하지 않으면, Rails는 자동으로
    # app/views/pages/hello.html.erb 파일을 찾아서 렌더링합니다.

    # 만약 뷰에게 데이터를 전달하고 싶다면 인스턴스 변수(@)를 사용합니다.
    @greeting = "안녕하세요, Rails의 세계에 오신 것을 환영합니다!"
    @time = Time.now
  end

  # 다른 액션을 추가할 수도 있습니다. 예를 들어...
  # def goodbye
  #   @message = "다음에 또 만나요!"
  # end
  # 이 액션을 사용하려면 routes.rb에 라우팅 설정이 필요합니다.
  # 예: get '/goodbye', to: 'pages#goodbye'
  # 그리고 app/views/pages/goodbye.html.erb 뷰 파일도 만들어야겠죠?
end
    

컨트롤러 클래스는 ApplicationController를 상속받고, 그 안에 액션 이름과 동일한 메소드(def hello ... end)를 정의합니다. 이 메소드 안에서 필요한 로직을 처리하고, 인스턴스 변수(@로 시작하는 변수)를 사용해서 뷰 템플릿으로 데이터를 넘겨줄 수 있습니다.

🎨 사용자 얼굴 마담, 뷰 (app/views)

컨트롤러가 준비한 데이터를 가지고 사용자에게 실제로 보여줄 HTML 화면을 만드는 역할은 뷰(View)가 담당합니다. 뷰 파일은 app/views 폴더 안에 컨트롤러 이름과 같은 폴더를 만들고, 그 안에 액션 이름과 같은 파일명(.html.erb 확장자)으로 저장됩니다. (예: app/views/pages/hello.html.erb)

.html.erb 파일은 HTML 코드 안에 루비 코드를 삽입할 수 있는 템플릿 파일입니다. ERB(Embedded Ruby)라고 불러요.

  • <%= ... %>: 루비 코드의 실행 결과를 HTML에 출력합니다. (예: <%= @greeting %>)
  • <% ... %>: 루비 코드를 실행만 하고 결과는 출력하지 않습니다. (예: 조건문, 반복문 등)

아까 rails g controller 명령어로 자동 생성된 (또는 이미 있는) app/views/pages/hello.html.erb 파일을 열어서 내용을 수정해 봅시다.




🎉 환영합니다! 🎉

이 페이지는 app/views/pages/hello.html.erb 에서 만들어졌어요.


<%= @greeting %>

현재 시간: <%= @time.strftime("%Y년 %m월 %d일 %H시 %M분 %S초") %>

<%# 루비 주석은 이렇게 작성합니다. %> <% if @time.hour < 12 %>

좋은 아침입니다! ☀️ 오늘 하루도 힘차게 시작하세요!

<% elsif @time.hour < 18 %>

즐거운 오후 보내고 계신가요? ☕️ 잠시 쉬어가는 것도 좋아요.

<% else %>

편안한 저녁 시간 보내세요! 🌙 오늘 하루도 수고 많으셨습니다.

<% end %> <%# link_to "다른 페이지로 가기", '/some_other_page' %>

이제 서버를 실행하고 (`bin/rails s`) 웹 브라우저에서 루트 주소 (`http://localhost:3000`) 또는 `/hello` 주소 (`http://localhost:3000/hello`)로 접속해보세요! 컨트롤러에서 정의한 `@greeting`과 `@time` 변수의 값이 ERB 문법에 따라 화면에 멋지게 출력되는 것을 확인할 수 있습니다. 🎉 시간대에 따라 다른 메시지가 나오는 것도 확인해보세요!

🛠️ CRUD 맛보기: 간단한 '읽기(Read)' 구현

우리는 방금 사용자의 URL 요청을 받아(라우팅), 컨트롤러가 인사말과 현재 시간을 준비하고(컨트롤러), 그 정보를 HTML 페이지로 보여주는() 과정을 완성했습니다. 이것은 웹 애플리케이션의 가장 기본적인 기능 중 하나인 CRUD에서 읽기(Read) 작업을 수행한 것과 같습니다.

  • Create: 새로운 데이터를 생성하는 것 (예: 새 게시글 작성)
  • Read: 기존 데이터를 읽어서 보여주는 것 (예: 게시글 목록 보기, 특정 게시글 보기) ← 방금 우리가 한 것!
  • Update: 기존 데이터를 수정하는 것 (예: 게시글 내용 변경)
  • Delete: 기존 데이터를 삭제하는 것 (예: 게시글 삭제)

지금은 단순히 컨트롤러에서 준비한 내용을 보여주는 '읽기'만 구현했지만, 앞으로 모델(Model)과 데이터베이스(Database)를 배우게 되면 사용자가 입력한 데이터를 저장(Create)하고, 저장된 데이터를 수정(Update)하거나 삭제(Delete)하는 기능까지 모두 구현할 수 있게 됩니다.

🤔 웹 브라우저에 No route matches [GET] "/원하는_경로" 오류가 뜨나요?

이 오류는 브라우저가 요청한 URL에 해당하는 길 안내 정보(라우트)가 config/routes.rb 파일에 정의되어 있지 않다는 의미입니다. config/routes.rb 파일을 열어 해당 경로에 대한 라우팅 설정 (예: get '/원하는_경로', to: '컨트롤러#액션')이 올바르게 되어 있는지 확인하고, 파일을 수정한 후에는 Rails 서버를 재시작(Ctrl+C 로 껐다가 bin/rails s로 다시 켜기)해야 적용될 수 있습니다.

🤔 컨트롤러 생성 시 NameError: uninitialized constant ...Controller 오류가 보이나요?

컨트롤러 파일명(예: pages_controller.rb)과 클래스명(예: PagesController)이 Rails의 규칙(카멜 케이스, 마지막에 Controller 붙이기 등)에 맞게 작성되었는지 확인해보세요. 가장 좋은 방법은 rails generate controller [이름] 명령어를 사용하여 Rails가 자동으로 파일을 생성하도록 하는 것입니다.

✨ MVC 흐름 파악 완료! ✨

훌륭합니다! 여러분은 오늘 Rails 애플리케이션의 핵심 작동 원리인 라우팅 → 컨트롤러 → 뷰의 흐름을 직접 경험하고 이해하셨습니다. 🎉 사용자의 요청이 어떤 과정을 거쳐 화면에 표시되는지 감을 잡으셨을 거예요. 그리고 웹 개발의 기본인 CRUD 개념도 살짝 엿보았습니다.

MVC 패턴과 이 흐름을 이해하는 것은 Rails 개발의 기초를 다지는 데 매우 중요합니다. 앞으로 더 복잡한 기능을 만들 때도 이 기본 구조 위에서 확장해나가게 될 거예요. 😉

다음 시간에는 웹 개발의 또 다른 축인 프론트엔드, 그중에서도 인기 있는 자바스크립트 라이브러리 **React**를 소개하고 Rails 프로젝트와 어떻게 통합하여 사용할 수 있는지 알아보겠습니다. 백엔드와 프론트엔드의 만남, 기대되지 않나요? 🚀 (다음 강의 예고: ⚛️ 2-1: React와 루비의 만남 - React 소개와 Rails 프로젝트에 통합하기)