[Cloud9][Ruby on Rails] C9 생성 후 간단한 Ruby on Rails 페이지 만들기

루비앤레일즈는 기본적으로 MVC 패턴을 따르며, 이에 맞춰 웹 서비스가 가능합니다.

Cloud9 에서 프로젝트를 생성 후 간단한 페이지를 작성해 보겠습니다.

작업은 1. 프로젝트 생성 -> 2. 라우트 설정 -> 3. 컴포넌트 생성 -> 4. 컨트롤러 작성 -> 5. 뷰 작성 등으로 진행됩니다.

1. C9 프로젝트 생성

1.1 C9 로그인 후 Workspaces 에서 Create a new workspace 를 선택합니다.

1.2 Workspace 정보 입력 후 Ruby on Rails 템플릿을 선택합니다.

1.3 C9 프로젝트 생성 완료 화면입니다.

2. 환경설정

라우트에 주소규칙을 설정할 수 있습니다. config/routes.rb 파일에 아래를 참고하여 주소규칙을 작성해봅니다.

Rails.application.routes.draw do
  # get "/" => "<<컨트롤러>>#<<액션명>>" # "/" 로 접속시 <<컨트롤러>>의 <<액션명>> 실행
  # get "/" => "member#login" # "/" 로 접속시 member 컨트롤러의 login 액션 실행
  get "/member/login" => "member#login" # "/" 로 접속시 member 컨트롤러의 login 액션 실행
end

3. 컴포넌트 생성

Cloud9 bash 창에서 아래 커맨드로 컴포넌트 생성할 수 있습니다.

rails generate controller <<컴포넌트명>>  #<<컴포넌트명>> 컴포넌트 생성
rails g controller <<컴포넌트명>>  # 위와 동일
rails g controller Member   # Memeber 컴포넌트 생성

실제 컴포넌트 생성 결과입니다.

$ rails g controller Member   # Memeber 컴포넌트 생성
Running via Spring preloader in process 2371
      create  app/controllers/member_controller.rb     # 컨트롤러
      invoke  erb
      create    app/views/member                            # 뷰 경로
      invoke  test_unit
      create    test/controllers/member_controller_test.rb  # 컨트롤러 테스트
      invoke  helper
      create    app/helpers/member_helper.rb           # 헬퍼
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/member.coffee  #자바스크립트
      invoke    scss
      create      app/assets/stylesheets/member.scss   # 스타일시트

4. 컨트롤러 작성

config/routes.rb 에 작성하였던 컨트롤러에 액션을 추가해 보겠습니다.

app/controllers/member_controller.rb 에 아래과 같이 작성해 봅니다.

class MemberController < ApplicationController
  def login
  end
end

5. 뷰 작성

이제 컨트롤러의 액션에 해당하는 뷰를 작성해 보겠습니다.

app/views/member/login.html.erb 파일을 생성 후 아래와 같이 작성해 봅니다. (파일명을 액션명과 맞춰줘야 합니다.)

<h1>Log In@@@</h1>

6. 결과 보기 및 다양한 출력 방법

지금까지 프로젝트 생성 후 라우트 설정을 하였고, 컴포넌트를 생성하여 컨트롤러와 뷰를 작성하였습니다.

이제 그 결과를 확인해 볼 차례입니다.

아래 C9 Workspace에서 Run Project 를 통해 서버를 구동시켜봅니다.

그리고 서버 구동 후 아래 링크들을 열어 결과를 확인해 볼 수 있습니다.

6.1 그 결과는 아래와 같습니다.

6.2 이번에는 컨트롤러에서 직접 내용을 출력해보겠습니다.

app/controllers/member_controller.rb 에 아래과 같이 작성해 봅니다.

class MemberController < ApplicationController
  def login
    render text: "Log In!!!"  # 뷰에서 "Log In!!!" 문구 출력
  end
end




그 결과를 확인해봅니다.

6.3 이번에는 뷰 파일명을 달리하여 컨트롤러 액션에서 직접 지정하여 출력해보겠습니다.

app/views/member/test_login.html.erb 파일을 생성 후 아래와 같이 작성해 봅니다.

<h1>Log In Test@@@</h1>

그리고 app/controllers/member_controller.rb 에 아래과 같이 작성해 봅니다.

class MemberController < ApplicationController
  def login
    render "test_login" # test_login 뷰 지정
  end
end

그 결과를 확인해봅니다.

이렇게 Cloud9 과 Ruby on Rails를 통해 간단하게 페이지를 작성해 보았습니다.

MVC 패턴 중 View 와 Controll 만을 사용하여 만들어 보았습니다. 

생각보다 어렵지 않게 페이지가 만들어 지는 것을 확인할 수가 있네요.

이상 간단 시식을 마칩니다.