시작하며 |
안녕하세요. 어찌어찌 하다 보니 Android를 하면서 Ruby on Rails[web]쪽도 같이 하게 되었습니다. 저도 이제 막 공부를 시작하는 시점이기 때문에 전문적 지식은 없고, 예제를 실행해보고 이에 대한 생각들을 적는 곳으로 당분간 활용 될 것 같습니다. 안드로이드에 대해서 조금씩 정리를 할 것이지만, 한 1주 정도는 Rails에 주력할 것 같습니다. 오늘은 Rails를 열심이 설치하여 Rails는 어떻게 사용하지? 라는 생각으로 간단한 어플리케이션을 만들어 보는 시간을 갖도록 하겠습니다.
Ruby 설치에 대해서는 언급하지 않겠습니다. 단지, 제가 Rails 공부를 하면서 사용한 레일즈 버전은4.0.4입니다. 또한, OSX를 기준으로 설명을 하겠습니다.
어플리케이션 생성하기 |
무엇이든 시작을 하려면 프로젝트를 하나 생성해줘야겠죠? 레일즈를 모두 설치하셨다면, 터미널을 켜서 레일즈 프로젝트를 생성할 디렉토리로 이동을 합니다. 새로운 프로젝트를 생성하는 명령어는 간단합니다.
> cd [프로젝트를 생성할 위치]
> rails new [프로젝트 이름]
주르르륵 파일들이 생성되면서 하나의 프로젝트가 생성될 것입니다. 이젠 생성된 프로젝트 폴더로 이동을 하도록 합시다. 프로젝트가 생성된 폴더에서 ls 명령어를 사용하면 다음과 같은 모습이 보일 것입니다.
프로젝트를 생성하면 기본적으로 생성하는 폴더 및 파일들은 머리를 아프게 할지도 모릅니다. 저의 경우에는 이미 안드로이드를 통해서 경험해본 길이기 때문에 아무런 생각이 들진 않았습니다. 각각의 폴더에 대해선 점점 공부해가면 알게되겠죠...?
이제는 설치된 프로젝트에 대한 서버를 실행시켜줘야 합니다. 레일즈에서는 루비로 만들어진 WEBrick서버를 제공하기 때문에 별도로 설정할 필요는 없습니다. 그럼 서버를 실행하도록 하겠습니다.
> cd [프로젝트 이름]
> rails s
=> Booting WEBrick
=> Rails 4.0.4 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2014-04-28 16:02:01] INFO WEBrick 1.3.1
[2014-04-28 16:02:01] INFO ruby 1.9.3 (2014-02-24) [x86_64-darwin13.1.0]
[2014-04-28 16:02:01] INFO WEBrick::HTTPServer#start: pid=5465 port=3000
위와 같은 메세지를 보이면서 레일즈 서버가 실행이 될 것입니다. 간단히 설명하자면, localhost:3000 으로 접속이 가능한 서버가 생성됬다고 보시면 됩니다. 이젠 웹페이지에 localhost:3000 을 입력하면 레일즈에서 제공하는 기본페이지가 나옵니다. 또한, 이 페이지를 로드해준 결과가 터미널에 보여질 것입니다. 이젠 서버를 켜둔 상태에서 또 다른 터미널을 켜서 작업을 합니다.
Controller & View |
프로젝트를 생성했다면 다음은 Controller를 생성해주면 됩니다. 레일즈는 요즘 프로그램에서 강조되는 MVC 페턴 을 이용한 폴더형식을 가집니다. 어플리케이션에 대한 MVC 정의는 [Project Name]/app 이하의 각각 폴더에 정의가 됩니다. 일단 간단한 페이지 구성만을 사용하기 때문에 Model에 대한 부분은 아직 생각을 안해도 될 것 같습니다.
새로온 터미널에서 프로젝트 폴더까지 이동을 한 뒤 다음을 따라 say라는 컨트롤러를 생성해봅시다.
> cd [프로젝트 경로]
> rails generate controller say hello goodbye
....
명령어의 구성은 다음과 같습니다. Action은 무한대로 붙을 수 있지 않을까 합니다...
이로 인해서 자동으로 생성되는 파일들 중 중심적으로 볼것은 컨트롤러인 say_controller.rb 와 각각의 행동에 대해 자동으로 생성된 뷰인 hello.html.erb 와 goodbye.html.erb 가 되겠습니다. 컨트롤러는 모델을 사용한다면 모델에서 데이터를 가져와 데이터를 가동하는 작업을 하고, 뷰는 가공된 자료를 단순히 보여주는 역할을 하게 됩니다. 일단 생성되었으니 helloworld부터 찍어보고 뷰와 컨트롤러를 어떻게 연결할지 알아보도록 하겠습니다.
자, 일단은 hello 와 goodbye 를 실행해보도록 합시다. 각각의 실행 URL은 다음과 같습니다.
hello : localhost:3000/say/hello
goodbye : localhost:3000/say/goodbye
실행하면 각각 View 파일을 찾아서 수정해달라고 합니다. 각각 다른 페이지인데 왜 하나의 컨트롤러에 붙여야 할까요? 이 질문에 대한 답은 MVC 패턴의 근본에서 찾을 수 있는데 같은 데이터 형식을 가지고 처리하지만 사용자의 상태등의 여러가지 상황에 따라서 보여줘야할 페이지를 다르게 해야할 경우라고 볼 수 있습니다.
일단, hello의 view를 바꿔보도록 합시다. hello에 대한 View를 정의해보도록 합시다.
> cd [프로젝트 경로]/app
> cd views/say views 이하에 컨트롤러 이름에 따라서 자동으로 폴더가 생성됨
> vi hello.html.erb
각각의 view를 들어가보면 알겠지만, html 파일 을 작성해주시면 됩니다. 일반적인 html파일이 아닌 erb라는 추가 확장자가 붙습니다. erb 확장자 는 ERb 시스템으로부터 확장했다는 의미로 ERb시스템 값을 사용할 수 있다는 것을 알려줍니다. 즉, controller에 정의한 변수를 사용할 수 있다는 것입니다. 또한 미리 정의된 각종 템플릿을 사용할 수 있습니다. controller에 있는 값을 가져오기 위해서는 <%=[@NAME] %> 형식을 이용해 주시면 됩니다. 이에 대해선 나중에 다시 살펴보고, 일단은 파일을 수정하여 Hello world를 출력하도록 하겠습니다.
hello.html.erb
<h1>Hello World!!</h1>
기본적으로 생성된 파일에는 정말 간단하게 적혀있어서 저도 간단하게 수정을 했습니다. 이를 응용하여 goodbye.html.erb를 수정하여 Good bye!!를 출력하게 바꾸어보세요
다음으로 간단하게 컨트롤러 파일을 열어봅시다.
> cd [프로젝트 경로]/app
> cd controllers
> vi say_controller.rb
이를 키면 간단하게 나오는 하나의 페이지를 살표볼 수 있습니다.
class SayController < ApplicationController
def hello
end
def goodbye
end
end
문법은 rails를 이용하였기때문에 그와 동일하게 볼수 있습니다.
SayController 클래스는 ApplicationController를 상속받았고 두개의 함수(?) hello와 goodbye가 정의된 것입니다.
Controller-View & ERb Template |
이제는 컨트롤러에 변수를 추가하여, 뷰에서 사용하는 방법을 알아봅시다. Hello world!!라는 값을 갖는 변수를 컨트롤러의 hello에 생성해줍니다. 또한, goodbye에는 Good Bye!! 라는 값을 갖는 변수를 추가해줍시다.
say_controller.rb
class SayController < ApplicationController
def hello
@msg = "Hello World!!"
end
def goodbye
@msg = "Good Bye!!"
end
end
다음으로는 뷰에서 이 값을 가져다 사용해봅시다. 위해서 이야기했듯이 <%= [@NAME]%> 을 이용해주시면 됩니다.
hello.html.erb
<h1><%= @msg%><h1>
각각의 페이지를 확인해보시면 아까와 동일한 화면이 보이는 것을 확인 할 수 있을 것입니다.
다음으로는 ERb에서 기본적으로 제공해주는 템플릿중 하나인 link_to 를 사용하여 링크를 하는 방법을 알아봅시다. 기존에는 링크를 하기위해서 <a>테그를 이용했을 것이다. 하지만, 이는 서버 위치와 주소등에 영향을 받을 수 있다.(상대 주소를 사용하면 해결되긴 하지만...) 레일즈는 이를 간편화시키기 위해서 각각의 Action에 대한 주소를 변수를 가지고 있다. 주소 변수 이름은 [Controller Name]_[Action Name]_path 이다.
템플릿 사용역시 <%= [Template Name] [Prameter1] [Prameter2] ... %> 를 이용하게 됩니다. link_to 템플릿의 모양을 살표보도록 합시다. Link_to는 두 개의 파라미터를 갖는데 이는 각각 링크의 텍스트와 경로가 되겠다.
<%= link_to "[TEXT]", [path] %>
위에서 생성한 hello.html.erb 에 이를 적용하여 Hello World!!를 누르면 goodbye.html.erb를 실행하도록 변경해보았다.
hello.html.erb
<h1><%= link_to @msg, say_goodbye_path %><h1>
페이지에서 요소검사를 통해서 확인해보면 알아서 <a> tag로 변경되고, 주소가 알맞게 들어간 것을 볼 수 있다.
이를 응용하여 goodbye.html.erb에서는 GoodBye를 클릭하면 hello.html.erb를 실행하도록 변경해보자.
여기까지 하면서 나는 하나의 의문이 들었다. 그럼 Main page는 대체 어디인 것인가...?
마무리 |
책 1~2권과 웹페이지를 참조하면서 기본적인 레일즈 사용을 살펴보았다. 지금까지의 내용은 기본중의 기본이며, 앞으로 나아갈 초석이 될 것으로 보인다. 또한 이전에 php로 웹을 작성했던 나로서는 완벽히 나눠진 View-controller구조에 대해서 놀라게 되었다. 앞으로 model부분을 다루며 어떤 놀라움이 있을지 기대가 된다.
먼저 공부한 여러사람말로는 데이터베이스 사용에는 매우 능통한 레일즈라고 하니.. 여러므로 기대가 된다. 앞으로 DB연동과 몇몇 템플릿 그리고 css, json데이터 생성 및 전송부분만 하면 어느 정도 레일즈를 이용해서 웹페이지를 작성할 수 있을 것 같다!!