Ruby on Rails를 사용하여 새로운 웹 페이지 만들기

개요

Ruby on Rails를 사용하여 새로운 웹 페이지를 생성하는 방법에 대해서 알아보려고 합니다.

이 블로그 포스트는 시리즈로 제작되었습니다. 자세한 내용은 아래에 링크를 참고하시기 바랍니다.

여기서 사용한 소스코드는 Github에서 확인할 수 있습니다.

Github 소스코드

Ruby on Rails도 여타 다른 프레임워크와 마찬가지로 MVC 패턴(Model-View-Controller 패턴)을 따릅니다. 따라서 새로운 웹 페이지를 작성하기 위해서는 기본적으로 View와 Controller를 제작할 필요가 있습니다.

Controller

우선, 아래에 명령어를 사용하여 Controller를 생성합니다.

# cd StudyRails
bundle exec rails generate controller home

generate 명령어를 간단하게 g로 줄여서 아래와 같이 사용할 수도 있습니다.

bundle exec rails g controller home

Controller 생성 에러

위에 명령어를 실행해도 아무 동작도 하지 않는다면, 실행한 명령어를 중지시키고 아래에 명령어를 실행합니다.

rake app:update:bin

그러면 아래와 같은 메세지를 확인할 수 있습니다. Y를 입력하여 다음으로 진행합니다.

/StudyRails/bin/rails? (enter "h" for help) [Ynaqdhm]
/StudyRails/bin/rake? (enter "h" for help) [Ynaqdhm]

그리고 다시 아래에 명령어를 실행하여 Controller를 생성합니다.

# cd StudyRails
bundle exec rails generate controller home

또, 아래와 같은 메세지가 표시되면서 Controller가 생성되지 않는 다면,

error Couldn't find an integrity file
error Found 1 errors.


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).

위에 설명에도 나온 것처럼 아래에 명령어를 실행합니다.

yarn install --check-files

그리고 다시 아래에 명령어를 사용하여 Controller를 생성합니다.

# cd StudyRails
bundle exec rails generate controller home
# bundle exec rails g controller home

문제없이 생성되었다면 아래와 같은 메세지를 확인할 수 있습니다.

create  app/controllers/home_controller.rb
invoke  erb
create    app/views/home
invoke  test_unit
create    test/controllers/home_controller_test.rb
invoke  helper
create    app/helpers/home_helper.rb
invoke    test_unit
invoke  assets
invoke    scss
create      app/assets/stylesheets/home.scss

Controller 생성 파일

Rails의 명령어로 Controller를 생성하면 아래와 같은 파일들이 생성됩니다.

├── app
│   ├── assets
│   │   ├── stylesheets
│   │   │   ├── home.scss
│   ├── controllers
│   │   ├── home_controller.rb
│   ├── helpers
│   │   ├── home_helper.rb
│   ├── views
│   │   ├── home
├── test
│   ├── controllers
│   │   ├── home_controller_test.rb

이렇게 생성된 파일중 app/controllers/home_controller.rb를 사용하여, 대부분 작업을 처리하게 됩니다.

Controller에 Action 추가

위에서 생성된 app/controllers/home_controller.rb 파일을 열고 아래와 같이 수정합니다.

class HomeController < ApplicationController
    def index
    end
end

여기서 home_controller에 index 함수를 추가하였습니다. Rails에서는 Controller에 추가하는 함수를 Action이라고 표현합니다.

View

Rails의 명령어를 사용하여 Controller를 생성하였다면 아래와 같은 폴더를 확인할 수 있습니다.

├── app
│   ├── views
│   │   ├── home

Rails 명령어로 생성된 home 폴더에 home_controller.rb에 필요한 View 파일을 생성하여 연결할 예정입니다.

home 폴더안에 index.erb 파일을 생성하고 아래와 같이 수정합니다.

Hello Rails!!

Controller와 View 연결

Controller와 View를 연결하기 위해서 특별한 처리는 없습니다. Controller의 Action명(함수 명 - def index)과 View 파일의 파일명(index.erb)이 일치한다면, Rails는 따로 지정하지 않아도 자동적으로 해당 View 파일을 연결합니다.

Routes

Rails에서 Routes는 URL과 Controller를 연결해 주는 역할을 합니다. 위에서 만든 Controller를 연결하기 위해 config/routes.rb 파일을 열고 아래와 같이 수정합니다.

Rails.application.routes.draw do
  get '/', to: 'home#index'
end

위와 같이 수정하면, / URL에 GET 요청이 들어오면 home_controller의 index 액션(함수)를 실행하게 됩니다. 이렇게 실행된 index 액션은 같은 이름으로 된 home/index.erb 파일을 찾아 화면에 표시하게 됩니다.

확인

이것으로 새로운 페이지를 표시하기 위한 준비는 모두 끝났습니다. 아래에 명령어를 실행하여 Rails 서버를 기동시킵니다.

rails server

또는 간단하게 아래에 명령어를 사용할 수 있습니다.

rails s

그리고 브라우저를 열고 http://127.0.0.1:3000/으로 접속하면 아래와 같이 우리가 만든 화면을 볼 수 있습니다.

완료

이것으로 Ruby on Rails를 사용하여 새로운 페이지를 생성하는 방법에 대해서 알아보았습니다.

Controller를 생성하고 Controller 안에 액션(함수)를 선언하고 액션 이름(함수명)과 동일한 View 파일을 생성하고, 마지막으로 Route에 URL과 Controller를 연결함으로써 새로운 페이지를 표시할 수 있었습니다.

이제 일단 페이지를 만들 수 있게 되었으므로, 다음에는 데이터를 다루는 방법에 대해서 알아보도록 하겠습니다.

참고

이 블로그 포스트는 시리즈로 제작되었습니다. 자세한 내용은 아래에 링크를 참고하시기 바랍니다.

여기서 사용한 소스코드는 Github에서 확인할 수 있습니다.

Github 소스코드

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기

[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기