솔로 프론트엔드 팀: Pure Ruby로 UI 시스템 구축

Source: Dev.to

”Partial” 문제

우리는 Rails를 사랑합니다. ERB를 사랑합니다. 하지만 솔직히 말하면: app/views는 보통 모든 Rails 코드베이스에서 가장 지저분한 부분입니다.

간단하게 시작합니다. 그런 다음 partial을 추출합니다. 그 다음 로컬 변수를 전달해야 합니다.

그런 다음 로직을 추가해야 합니다: 사용자가 관리자일 경우에만 푸터를 표시합니다.

갑자기 HTML 파일이 if/else 문, Ruby 로직, 그리고 느슨한 변수들로 가득 차게 됩니다. user를 use처럼 오타 내면, Rails는 페이지가 렌더링될 때까지 오류를 알려주지 않으며 결국 크래시됩니다.

수년 동안 업계는 해결책이 React라고 말했습니다.

“ERB 작성을 멈추세요! API를 만들고 프론트엔드는 JavaScript로 작성하세요!”

하지만 솔로 개발자나 작은 팀에게는 이는 큰 부담이 됩니다.

Enter ViewComponent.

ViewComponent란?

GitHub에서 만든(그리고 GitHub.com을 방문하면 현재 보고 있는 UI를 렌더링하는 데 사용되는) ViewComponent는 React의 Component Architecture를 Ruby 세계에 도입합니다.

느슨한 템플릿 파일 대신, ViewComponent는 Ruby 객체입니다.

기존 방식 (Partial)

_user_badge.html.erb:

">
  

문제: 이를 격리된 상태에서 테스트하는 것은 불가능합니다. 이를 포함하는 전체 페이지를 로드해야 합니다.

새로운 방식 (Component)

제너레이터를 실행합니다:

rails g component UserBadge user

app/components/user_badge_component.rb:

class UserBadgeComponent ">
  

이제 뷰에서 객체처럼 렌더링합니다:

왜 이것이 솔로 개발자에게 모든 것을 바꾸는가

1. 조용한 실패의 종말

위 예시에서 initialize는 키워드 인자 user:를 필요로 합니다.
사용자를 전달하지 않고 해당 컴포넌트를 렌더링하려 하면 Ruby가 즉시 오류를 발생시킵니다.
이는 UI에 대한 엄격한 인터페이스를 강제합니다. 이제 partial이 어떤 locals를 필요로 하는지 추측할 필요가 없습니다.

2. 로직은 HTML이 아니라 Ruby에 있어야 함

background_color 로직이 Ruby 클래스 안으로 이동한 것을 보세요.
이렇게 하면 템플릿 파일이 깔끔해집니다. 복잡한 메서드 작성, 가드 절 사용, 엣지 케이스 처리를 표준 Ruby 코드로 할 수 있고, HTML은 순수히 HTML만 남게 됩니다.

3. 격리된 테스트 (슈퍼파워)

보통 Rails에서 UI 요소를 테스트하려면 시스템 테스트(Capybara)를 작성합니다. 브라우저를 띄우고, 데이터베이스를 로드하고, 페이지를 방문하고, 클릭을 수행합니다. 이는 느립니다.

ViewComponent를 사용하면 UI에 대해 단위 테스트를 작성할 수 있습니다.

# spec/components/user_badge_component_spec.rb
require "rails_helper"

RSpec.describe UserBadgeComponent, type: :component do
  it "renders red for admins" do
    admin = User.new(role: :admin, name: "Boss")

    render_inline(described_class.new(user: admin))

    expect(page).to have_css ".bg-red-500"
    expect(page).to have_text "Boss"
  end
end

이 테스트들은 밀리초 단위로 실행됩니다. 브라우저를 전혀 실행하지 않고도 UI의 모든 엣지 케이스를 테스트할 수 있습니다.

4. Lookbook / 프리뷰

ViewComponent는 Lookbook 같은 도구 사용을 가능하게 합니다. 이는 Rails 앱을 위한 “Storybook”을 생성합니다. 대시보드에서 모든 버튼, 모달, 카드의 갤러리를 탐색하고, 상태를 변경하며, 어떻게 보이는지 확인할 수 있습니다. 비록 당신 혼자라도 전담 프론트엔드 팀이 디자인 시스템을 관리하는 느낌을 줍니다.

요약

ViewComponent는 “Goldilocks” 솔루션입니다.

• 너무 차가움: 지저분하고 테스트하기 어려운 ERB partials.
• 너무 뜨거움: 백엔드와 분리된 복잡한 React/Next.js 프론트엔드.
• 딱 맞음: ViewComponent.

React의 조직력과 테스트 가능성을 제공하면서도 Ruby on Rails의 속도와 단순함을 유지해 줍니다.