제1화 Rails7 Hotwire Tailwind 강좌
안녕하세요 롤코드(RORCODE) 입니다.
RAILS로 개발하는 웹서비스 강의를 시작합니다.
RBENV로 RUBY 3.1.2버전으로 변경합니다.
다른 버전을 사용하셔도 상관없어요.
rbenv local 3.1.2
레일즈 버전 7.0.4로 새 프로젝트를 생성합니다.
rails _7.0.4_ new my_project --javascript esbuild --skip-test --css tailwind
ESBUILD와 TAIL WIND를 선택하고 TEST는 SKIP합니다.
RORCODE.COM은 ROR(루비온레일즈)를 배우고 싶은 분들을 위해 앞으로 만들 사이트입니다.
이 강의를 제작하면서 RORCODE.COM도 조금씩 개발 될 예정입니다.
구득자들에게 개발 테크닉을 전달드리는 것 보다 실제로 동작하는 온전한 사이트를 구축할 수 있도록 도와드리고자 합니다.
프로젝트가 생성되었으니 서버를 실행해볼게요.
cd my_project
./bin/dev
저는 ROR전용 통합에디터 RUBYMINE을 사용합니다.
다른 에디터를 사용하셔도 무방해요.
프로젝트를 엽니다.
MYSQL SERVER를 실행합니다.
mysql.server start
기본으로 설정되는 SQLITE를 사용하십다면 SKIP!
SITE 컨트롤러와 INDEX 액션을 생성합니다.
rails g controller site index
HOTWIRE의 주요기능 중 하나인 TURBO FRAME을 공부해봅시다.
HOTWIRE를 사용하면 SPA(SINGLE PAGE APPLICATION)을 손 쉽게 구현 할 수 있습니다.
HELLO WORLD!
ROOT 페이지를 SITE#INDEX로 지정해줍니다.
# config/routes.rb
Rails.application.routes.draw do
root 'site#index'
get 'site/index'
end
TAILWIND가 잘 작동하는지 확인하기 위해 몇가지 TEXT관련 CLASS를 테스트해볼게요.
# app/views/site/index.html.erb
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
아직 TAILWIND CLASS가 의숙하지 않아서 자꾸 틀리네요.
이제 TURBO FRAME TAG를 추가합니다.
ID는 COUNTER라고 지정 할게요.
# app/views/site/index.html.erb
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
<%= turbo_frame_tag 'counter' %>
내용이 없는 TURBO FRAMEO 생성되었습니다.
FRAME안에 비튼을 누르면 1씩 값이 증가하는 카운터를 넣어볼게요.
# app/views/site/index.html.erb
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
<%= turbo_frame_tag 'counter', src: increment_path %>
SITE#INCREMENT 액션을 추가하고 구현합니다.
# app/controllers/site_controller.rb
class SiteController < ApplicationController
def index
end
def increment
@counter = params[:counter].to_i + 1
end
end
액션을 만들게 되면 꼭 ROUTE에도 설정해주세요.
ALIAS(별명) 기능을 사용해 경로를 간단하게 만듭니다.
# config/routes.rb
Rails.application.routes.draw do
root 'site#index'
get 'site/index'
get 'site/increment', as: :increment
end
INCREMENT 액션의 HTML을 작성해볼게요.
같은 ID의 TURBO FRAME 태그가 없으면 이전 내용은 사라집니다.
그래서 기존 내용을 보존하기 위해 TURBO FRAME 태그로 감싸줍니다.
HELLO WORLD!는 그대로 표시되고 INCREMENT 액션의 내용이 추가되었네요.
# app/views/site/increment.html.erb
<turbo-frame id='counter'>
increment
</turbo-frame>
소스코드내에는 TURBO FRAME 태그만 존재하고 화면에 보이는 INCREMENT라는 내용이 없으므로 비동기(ASYNC FETCH) 방식으로 HTML이 추가된 것으로 보이네요.
@COUNTER 변수를 출력해 볼게요.
# app/views/site/increment.html.erb
<turbo-frame id='counter'>
<div class="mt-4">
Counter: <%= @counter %>
</div>
</turbo-frame>
@COUNTER 변수는 PARAMS[:COUNTER] 값에 1을 더한 값을 저장합니다.
버튼을 만들고 다시 자신의 ACTION(SITE#INCREMENT)를 호출하도록 링크를 설정해줍니다.
이때 현재 @COUNTER 값을 전달하여 1씩 증가하도록 해봅시다.
# app/controllers/site_controller.rb
def increment
@counter = params[:counter].to_i + 1
end
TAILWIND로 버튼 답게(?) 스타일링을 해줍니다.
마우스 커셔가 HOVER될 때 사용자들이 눈으로 확인할 수 있도록 색상을 진하게 변경해볼게요.
# app/views/site/increment.html.erb
<turbo-frame id='counter'>
<div class="mt-4">
Counter: <%= @counter %>
</div>
<div class="mt-4">
<%= link_to 'Increment', increment_path(counter: @counter),
class: 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
%>
</div>
</turbo-frame>
TAILWIND의 단점이 CLASS가 길어진다는 것인데 추후에 간락하게 만드는 법을 알려드리겠습니다.
프로그래머의 기본 자질인 들여쓰기(INDENT)를 맞춤니다.
제발!
(레이아웃을 수정하는 동안은 음악감상 타임)
버튼을 클릭할 때마다 TURBO FRAME을 가져(FETCH)와 업데이트가 됩니다.
반응성이 아주 빠르네요!
Good job!
평균적으로 1.25MS 정도! 물론 콘텐츠가 많아지거나 DB연 동 등의 작업이 추가되면 처리시간도 더 늘어납니다.
이 정도 성능이면 1초당 800번의 요청을 저리할 수 있어요.
Good job!
RUBY ON RAILS, RUBY. 반응성이 빠른 웹서비스를 손쉽 게 개발하는 것에 관심이 있으시다면 구독과 좋아요 부탁드립니다.
