안녕하세요 오늘은 ruby on rails와 html 그리고 부트스트랩을 이용해서
간단하게 랜덤게임을 만들겠습니다!
일단 기본적으로 알아야할 사항이
rails의 기본 동작 원리입니다.
일단 rails는 M V C 라는 구조를 가지고 있습니다.
M은 Model V는 View C는 Controller입니다.
Model 같은 경우 데이터를 관리 하는 데이터베이스
View 같은 경우 사용자가 보는 화면
Controller 같은 경우 중간 관리자라고 생각하시면 되겠습니다.
그럼 동작 원리를 간단하게 설명 해드리자면
일단 사용자가 URL로 특정 요청을 합니다.
그러면 Controller가 요청을 받고 그 요청을 Model에게 전해줍니다.
Model은 그 요청을 처리한 뒤 다시 Controller에게 완료된 요청을 전달합니다.
Controller는 완료된 요청을 받아서 View에게 전해줍니다.
View는 사용자에게 사용자의 요청을 그대로 보여줍니다.
이 기본 동작원리가 매우매우 중요하다고 합니다.
그럼 이 동작원리를 활용해서 Random-Game을 만들어 보도록 하겠습니다.
주의 : 제가 사용할 Rails version은 4. 2. 5입니다.
저희가 이번에 만들 Random-Game은 "오늘 뭐먹지?"라는 게임입니다.
사용자가 사용자의 이름을 입력하면
랜덤으로 하루 세끼의 식단이 나오는 프로그램입니다.
일단 C9에서 프로젝트를 생성한 뒤
rails generate controller home index라는 명령어를 쳐줍니다.
(home은 Controller의 이름이고 index는 액션의 이름입니다.)
(참고로 rails g controller home index로도 가능합니다!)
명령어를 치면 이렇게 자동으로 액션과 Controller가 생깁니다.
한 액션당 한 View를 보여줄 수 있기 때문에
저희가 원하는 랜덤게임같은 경우
2 페이지를 원하므로 2개의 액션과 View를 생성합니다.
그리고 액션과 View를 추가한다고 사용자가 페이지를 볼 수 있지 않습니다.
가장 중요한 경로 설정을 해야합니다.
config에 가서 route.rb에 들어가셔서 경로 설정을 해주시면 됩니다.
일단 사용자가 index라는 메인 페이지를 먼저 봐야합니다.
get 방식은 URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식
간단히 생각해서 데이터를 전달하는 방식 중 하나라고 생각하시면 되겠습니다.
get 'home/result' => 'home#result' 의 의미는
사용자가 home/result 라는 URL을 요청할때,
home이라는 Controller에 있는 result view로 연결하시오를 의미합니다.
이렇게 경로설정을 한 뒤
이제부터 index View와 result View를 꾸며주시면 됩니다.
일단 index View에서 사용자의 이름을 입력 한뒤
result View로 보내야하므로
index View에서 HTML태그인 form태그를 사용하셔서
result View로 보내는 설정을 하셔야합니다!
<form action="/home/result">
이름을 입력하세요!
<input type="text" name="username"><br>
<input type="submit" value="클릭하세요!"><br>
</form>
이 태그를 자세히 보시면 form 태그의 action 은 보내고 싶은 URL을 의미합니다.
맨 위 input 태그 같은 경우 사용자의 이름을 작성할 수 있는 text 박스를 만들어서
사용자의 이름을 username에 저장합니다.
마지막 input 태그는 button을 만드는 태그라고 생각하시면 되겠습니다.
이렇게 만들었다고 해서 순순히 사용자가 입력한 이름이 result View로 넘어가지 않습니다.
사용자의 이름이 저장된 username이라는 변수를 result View에서 사용하기 위해선
Controller에 가셔서 따로 설정을 해주셔야 합니다.
간단하게 요약하자면
index View에서 입력한 사용자의 이름은 Controller에서 설정을 해야
result View로 넘어 갈 수 있습니다.
@name = params[:username]
results =['피자' , '치킨', '햄버거', '초밥', '김치찌개', '순두부찌개', '라면', '냉면', '족발', '보쌈', '샌드위치', '미역국', '학식', '돈까스', '돈부리', '우동', '파스타', '브리또', '케이크', '굶자']
@result = results.sample(3)
일단 index View에 있는 form으로부터 저장된 사용자의 이름을
Controller에 받기 위해선 params라는 명령어를 사용해주셔야합니다.
참고로 @name은 name자체는 변수를 의미합니다.
View에서 이 변수를 사용하기위해선 @를 붙여야합니다.
그리고 배열에 여러가지 음식을 results라는 변수에 저장 한뒤
@result에 results.sample(3)을 하면
results에서 3가지 배열을 뽑아 @result에 저장한다는 의미입니다.
오늘 <%= @name %>님의 식단표입니다.
아침은 <%= @result[0] %> !
점심은 <%= @result[1] %> !
저녁은 <%= @result[2] %> !
자 이제는 result View에서 사용자의 이름을 나타낼 차례입니다.
@name이라는 변수를 사용하기 위해선
rails 문법인 <% %>라는 태그를 사용하셔야 합니다
(<% %> 와 <%= %>의 차이는 =이 들어갈 경우 사용자가 볼 수 있고
=가 들어가지 않을 경우 사용자가 볼 수 없습니다.)
그리고<%= @result[0] %>은 샘플링한 첫번째 배열을 보여준다는 것을 의미합니다.
이렇게 모든 과정을 마칠 경우 아래와 같은 사진이 등장합니다.
index View입니다 여기서 이름을 입력하면?
result View에서 사용자의 이름이 정확하게 나오고
랜덤으로 아침, 점심, 저녁이 지정됩니다.
여기서 약간의 부트스트랩과 HTML 태그를 이용해서 수정을 해보면
짜잔!
짜자잔!
부트스트랩 같은 경우 views -> layouts-> application.html.erb 파일에 가셔서
head파일에 CDN을 입력 한뒤
소스코드를 자유롭게 사용하 실 수 있습니다.
나중에 Bootstrap 관련해서 자세하게 글을 써보겠습니다.
나름 간단한 프로그램이지만
간단하다고 해서 중요하지 않은 것은 아닙니다.
기초적인 rails 동작 원리를 이해하시고
그 후 직접 간단하게 Random-Game을 만드실 수 있다면
이제 원하는 서비스를 만들 준비가 되었다고 보시면 됩니다.
저도 노력해서 제가 원하는 서비스를 만들기 위해
많은 공부를 해보겠습니다.
댓글
댓글 쓰기