1. 제주 코딩해커톤
Ruby On Rails 트랙

2. 멘토 소개
• 이름 : 이범재
• 제주이주 2년차 웹개발자
• 좋아하는것 : 카페에서 바다보기
• 더 좋아하는 것 : 카페에서 바다보며 좋은 사람들
과 수다떨기
• 관심키워드 : 성장, 경험, 교육

3. 자기소개
- 이름
- 좋아하는것
- 관심키워드
- 오늘 기대하는것
•한사람당 2분씩

4. 오늘 할것은?
• 루비 온 레일즈가 뭐지?
• 루비 온 레일즈를 이용해서 간단한 제주게스트
하우스소개서비스의 소개페이지 만들기

5. 와이어 프레임
https://goo.gl/WZ6UTZ

6. STEP 0
Ruby On Rails

13. 웹사이트를 개발하기위해서는
무엇이 필요한가요?
• 도메인주소
• 개발환경 : 내 노트북
• 운영환경 : 서버

14. 그리고 좋은 도구

15. Ruby On Rails

16. 오늘 할 것은?
• 도메인주소 : 구름 IDE 제공 URL
• 개발환경 : 구름 IDE
• 서버 : 구름 IDE
구름IDE 관계자 아닙니다~

17. Ruby On Rails란 ?
루비 온 레일즈(Ruby on Rails)는
루비로 작성된
MVC 패턴을 이용하는
오픈 소스 웹 프레임워크이다.
줄여서 레일즈라 불리기도 한다.
(https://ko.wikipedia.org/wiki/루비_온_레일즈)

18. 웹 애플리케이션
웹 애플리케이션(web application) 또는 웹 앱은
인터넷이나 인트라넷을 통해 웹 브라우저에서
이용할 수 있는 응용 소프트웨어를 말한다.
웹 애플리케이션은 클라이언트로서 웹
브라우저를 사용하는 사람이 많기 때문에 인기를
누리고 있다.

19. 웹 애플리케이션
수천만 대의 PC에 굳이 소프트웨어를 배포해서
설치하지 않아도 웹 애플리케이션을 유지 관리할
수 있다는 점이 장점 중의 하나이다.
웹 애플리케이션은 웹 메일, 온라인 전자상거래 및
경매, 위키, 인터넷 게시판, 블로그 및 MMORPG
게임 등 다양한 기능을 구현할 수 있다.

20. 프레임워크
프로그래밍에서 특정 운영 체제를 위한 응용
프로그램 표준 구조를 구현하는 클래스와
라이브러리 모임이다.
간단하게 프레임워크라고도 부른다.
재사용할 수 있는 수많은 코드를 프레임워크로
통합함으로써 개발자가 새로운 애플리케이션을
위한 표준 코드를 다시 작성하지 않아도 같이
사용된다.

21. 웹 애플리케이션 프레임워크
웹 브라우저에서 이용할 수 있는 응용
소프트웨어를 만들기 위해
개발자가 새로운 애플리케이션을 위한
표준 코드를 다시 작성하지 않아도 되도록
클래스와 라이브러리(코드덩어리)를 모아놓은것

22. Ruby
루비는 마츠모토 유키히로가 개발한 프로그래밍
언어이다.
루비는 간결함과 생산성을 강조한 동적인 오픈
소스 프로그래밍 언어입니다.
루비의 우아한 문법으로 자연스럽게 읽히고 쓰기
편한 프로그램을 만들 수 있습니다.
- 루비 공식 홈페이지

23. 컴퓨터를 배운지 얼마 되지 않았을 때, 나는 프로그래밍 언
어에 관심을 갖게 되었습니다. 당시 이상적인 프로그래밍
언어는 반드시 이룰 수 있는 것이라고 믿었고, 가능하면 그
런 언어를 만드는 디자이너가 되고 싶었습니다. (중략)나는
행복해지기 위해서 살아간다고 믿습니다(적어도 어느 부
문에서는). 이런 믿음에 따라, 루비는 프로그래밍을 쉬우면
서도 즐거운 일로 만들기 위해 디자인 되었습니다. 루비는
여러분이 프로그래밍의 창조적인 면에만 집중할 수 있도
록 해주고, 스트레스를 줄여줄 것입니다.
- 마츠모토 유키히로,Programming Ruby의 추천사에서

24. MVC패턴
MVC란 Model View Controller의 약자로
에플리케이션을 세가지의 역할로 구분한 개발
방법론이다.
사용자가 Controller를 조작하면 Controller는
Model을 통해서 데이터를 가져오고 그 정보를
바탕으로 시각적인 표현을 담당하는 View를
제어해서 사용자에게 전달하게 된다.

26. Ruby On Rails 학습 자료
• 이범재 Ruby On Rails 링크 모음
https://kr.pinterest.com/beomjae/ruby-on-rails/
• Rails Tutorial
https://www.railstutorial.org/book
• Go Rails
https://gorails.com/
• ROR LAB
http://rorlab.org/

27. STEP 1
서비스 소개 페이지 만들기

28. 목표
• 루비온레일즈 프로젝트를 생성한다.
• 콘트롤러를 생성한다.
• 서비스 소개 페이지를 수정한다.

29. 구름IDE 가입
http://goorm.io

30. 새 컨테이너 생성

31. 새 컨테이너 생성

32. 새 컨테이너 생성
• 이름 : rubyonrails
• 설명 : ruby on rails 해커톤
• 소스 : 템플릿
• 소프트웨어 스택 : Ruby
• 프로젝트 유형 : Ruby 빈 프로젝트

35. 프로젝트 영역
프로젝트의 파일목록을
트리형태로 보여줍니다.

36. 터미널 영역
구름IDE에서 제공하는 서버에서 명령을 내리기
위한 터미널 조작 영역입니다.

37. 간단한 터미널 명령어
• ls : 현재 디렉토리(폴더)의 파일목록 조회
• cd : 해당 디렉토리로 이동
cd rails : rails 디렉토리로 이동
cd .. : 상위 디렉토리로 이동
• mkdir : 디렉토리를 생성하는 명령
mkdir helloworld : helloworld 디렉토리를 생성

38. 레일즈 프로젝트 생성
• 터미널에서 rails new 명령어를 이용하여 레일즈
프로젝트를 생성합니다.
rails new step1
cd step1

39. 레일즈 서버 실행
rake db:create
rake db:migrate
rails server –b 0.0.0.0

40. 구름 IDE URL 연결
메뉴 – 프로젝트 – 실행URL과 포트 클릭
URL : https://내가원하는단어(영어).run.goorm.io
PORT : 3000
등록 클릭
확인 클릭

41. 웹브라우저에서 확인
https://내가원하는단어(영어).run.goorm.io

43. Home 콘트롤러 생성
rails generate controller Home index
Home콘트롤러를 생성하고
그 안에 index 액션메서드를 생성합니다.

44. home – index 뷰페이지 수정
/app/views/home/index.html.erb 파일을 연다.
<h1>Hello World</h1>
<p>STEP 1 - 서비스 소개페이지 만들기</p>

45. index 화면 확인
URL :
https://~~~~.run.goorm.io/home/index

46. 처음부터 나오게 하려면?
https://~~~~.run.goorm.io

47. 라우트 파일 수정
/config/routes.rb 파일을 연다.
root ‘home#index’
를 추가 한다.

48. ROOT 화면 확인
URL :
https://~~~~.run.goorm.io

50. 강의 영상
https://youtu.be/_idOYs9piW8

51. 쉬는 시간

52. STEP 2
게스트 하우스 소개 서비스
모양 만들기

53. 와이어 프레임
https://goo.gl/WZ6UTZ

54. 제주비앤비
• rails g controller Houses index show
• /app/houses/index 페이지 작성
• /app/houses/show 페이지 작성
• /app/views/layouts/application.html.erb 수정
- 로고 추가
- 메뉴 추가
• rails g model House name description:text address tel
• rails console
House.create({…})
• houses콘트롤러 index 액션 메소드 수정
House.all
• /app/views/houses/index.html.erb 수정
• houses콘트롤러 show 액션 메소드 수정
House.find(id)
• /app/views/houese/show.html.erb 수정

55. 레일즈 프로젝트 생성
• 터미널에서 rails new 명령어를 이용하여 레일즈
프로젝트를 생성합니다.
cd /workspace/rails
rails new jejubnb
cd jejubnb

56. 레일즈 서버 실행
rake db:create
rake db:migrate
rails server –b 0.0.0.0

57. 웹브라우저에서 확인
https://내가원하는단어(영어).run.goorm.io

59. Home 콘트롤러 생성
rails generate controller Home index
Home콘트롤러를 생성하고
그 안에 index 액션메서드를 생성합니다.

60. home – index 뷰페이지 수정
/app/views/home/index.html.erb 파일을 연다.
<h1>JEJU비앤비</h1>
<p>제주의 게스트하우스들을 소개합니다.</p>

61. index 화면 확인
URL :
https://~~~~.run.goorm.io/home/index

62. 처음부터 나오게 하려면?
https://~~~~.run.goorm.io

63. 라우트 파일 수정
/config/routes.rb 파일을 연다.
root ‘home#index’
를 추가 한다.

64. ROOT 화면 확인
URL :
https://~~~~.run.goorm.io

65. 하우스 콘트롤러 만들기
rails g controller Houses index show

66. BEST 게스트하우스 화면
/app/houses/index.html.erb 열기
<h1>제주비앤비</h1>
<a href="/">서비스소개</a>
<a href="/houses/index">BEST 게스트하우스</a>
<div>
<div class="guesthouse”>
<a href="/houses/show">
<h3>AA게스트하우스</h3>
</a>
<p>게스트하우스 설명!!<p>
</div>
</div>

67. 게스트하우스 상세 조회 화면
/app/houses/show.html.erb 열기
<h1>제주비앤비</h1>
<a href="/">서비스소개</a>
<a href="/houses/index">BEST 게스트하우스</a>
<div>
<h3>AAA게스트하우스</h3>
<p>게스트하우스 설명입니다.</p>
<p>서귀포시 AA길 1</p>
<p>064-1111-1111</p>
</div>

68. 레이아웃이란?
페이지의 틀을 만들고
모든 페이지에 공통적으로 들어가는 코드를
틀안에 넣는다.
그리고 변화가 되는 부분만 따로 받아와서
보여준다.

69. 레이아웃이 어떻게 이용되나요?
/houses/index
애플리케이션(기본) 레이아웃 + index.html.erb
/houses/show
애플리케이션(기본) 레이아웃 + show.html.erb
/home/index => /
애플리케이션(기본) 레이아웃 + /home/index.html.erb

70. 중복되는 부분을 제거
houses의 index.html.erb와 show.html.erb에서
메인 타이틀과 링크를 제거!
<h1>제주비앤비</h1>
<a href="/">서비스소개</a>
<a href="/houses/index">BEST 게스트하우스</a>

71. 중복되는 부분을 레이아웃에~
/app/views/layouts/application.html.erb 수정
<h1>제주비앤비</h1>
<a href="/">서비스소개</a>
<a href="/houses/index">BEST 게스트하우스</a>

72. 결과 페이지 확인

73. 쉬어가기

74. Ruby 반복문 맛보기
each1.rb 파일 만들기
@list = [111,222,333,444,555]
@list.each do | number |
puts number
end

75. Ruby 반복문 맛보기
each1.rb 실행
ruby each1.rb

76. 데이터

77. 데이터베이스

79. House 테이블
•name
•description
•address
•tel

80. House 모델 만들기
rails generate model House name
description:text address tel

81. rails console
House.create({…})

82. Rails Console
터미널에서 명령어로 레일즈서버에 직접
접근하여 명령을 내릴수 있는 기능
데이터의 추가,수정,삭제를 명령어로 할 수 있음.

83. House 데이터 만들어보기
House
h = House.new
h.name = ‘AAA게스트하우스’
h.description = ‘게스트하우스 설명~~~’
h.address = ‘제주시 A길 1’
h.tel = ‘064-111-1111’
h.save

84. House 데이터 조회하기
House.all
House.first
House.last
House.find(1)
h = House.find(1)
h.name = ‘NEW HOUSE’
h.save

85. 게스트하우스 목록 데이터 흐름
1. 콘트롤러에서 게스트하우스 데이터를 가져와
서 변수에 저장
@house = House.all
2. 변수를 뷰에 넘겨줍니다.
3. 뷰에서 받아서 HTML 화면에 표현합니다.

86. house콘트롤러에서 목록 데이
터 가져오기
/app/controller/houses_controller.rb 열기
def index
@houses = House.all
end

87. 뷰에서 데이터 보여주기
/app/views/houses/index.html.erb 수정
<% @houses.each do | house | %>
<div class="guesthouse">
<h3><%= house.name %></h3>
<p><%= house.description %></p>
</div>
<% end %>

88. 멘토가 부자가 되게 하려면 어
떻게 해야 할까?
1. 멘토의 계좌번호를 받는다.
2. 거액의 돈을 입금한다.
3. 멘토가 부자가 되었다.

89. 특정 게스트하우스 정보 보여주
려면 어떻게 해야할까?
1. 원하는 게스트하우스의 id번호를
받는다.
2. id를 이용해서 데이터베이스로부터
게스트하우스 정보를 가져온다.
3. 가져온 정보를 보여준다.

90. 파라미터란?
외부로부터 받아들이는 데이터

91. URL을 통해 파라미터를 받는 방
법
http://~~~~~~?id=1

92. house/show에서 id를 받아오려
면?
http://~~.run.goorm.io/houses/show?id=1
/app/controller/houses_controller.rb 열기
def show
id = params[:id]
@house = House.find(id)
end

93. 게스트하우스 상세정보 표현
/app/views/houese/show.html.erb 수정
<div>
<h3><%= @house.name %></h3>
<p><%= @house.description %></p>
<p><%= @house.address %></p>
<p><%= @house.tel %></p></div>

94. 목록 화면에서 상세로 링크 연
결하기
/app/views/houese/index.html.erb 수정
<h3>
<a href=“/houses/show?id=<%= house.id %>”><%=
house.name %></a>
</h3>

95. 강의 영상
https://youtu.be/KYicj0ZBlmU

96. 한 주 동안 생각해봐요
• 내가 만들고 싶은 웹서비스 이름
• 핵심기능
• 핵심 테이블의 테이터 항목

97. 커뮤니티! 커뮤니티! 커뮤니티!
• 제주 루비온레일즈 그룹
https://www.facebook.com/groups/130395390305807
6/
• RORLAB
http://rorlab.org/
• 제주코딩해커톤 슬랙그룹
https://join.slack.com/jejucodinghackathon/shared_inv
ite/MTc2MzkwMjY4OTE1LTE0OTM0Mjk3OTEtOGRmM
mNmMTIxZg

98. 수고하셨습니다.