본문으로 건너뛰기

Showcase for Ruby on Rails에서 샘플 렌더링하기

Rendering Samples with Showcase for Ruby on Rails

작성자
HackerNews
발행일
2025년 11월 12일

핵심 요약

  • 1 Showcase Gem의 핵심 기능인 `sample` 메서드는 컴포넌트의 실제 사용 예시를 보여주며, `Showcase::Sample` 인스턴스는 렌더링에 필요한 모든 데이터를 수집합니다.
  • 2 `render` 메서드는 `ActiveSupport::Notifications`를 활용하여 렌더링 성능을 측정하고, `extract_source`는 복잡한 로직을 통해 블록의 소스 코드를 정확하게 추출합니다.
  • 3 `Showcase.sample_renderer`는 Rouge Gem을 사용하여 소스 코드에 문법 강조를 적용하며, `instance_exec`를 통해 뷰 헬퍼에 대한 접근성을 확장합니다.

도입

이 시리즈의 세 번째 파트에서는 Showcase Gem의 핵심 기능인 '샘플(Samples)'에 대해 심층적으로 다룹니다. 샘플은 실제 애플리케이션에서 컴포넌트가 어떻게 활용될 수 있는지를 보여주는 중요한 요소입니다. 본 글에서는 Showcase가 이러한 샘플을 어떻게 렌더링하고, 소스 코드를 추출하며, 성능을 측정하는지에 대한 내부 메커니즘을 상세히 분석하여, Showcase Gem의 작동 방식에 대한 깊이 있는 이해를 제공하고자 합니다.

Showcase Gem에서 showcase.sample 메서드는 Showcase::Preview 인스턴스의 @samples 인스턴스 변수를 채워 최종 뷰로 전달합니다. 이 과정에서 Showcase::Sample 인스턴스가 생성되며, evaluate 메서드가 호출되어 샘플 렌더링의 핵심 로직을 실행합니다.

evaluateconsume 메서드

evaluate 메서드 내에서는 block.arity를 통해 블록이 인수를 기대하는지 확인한 후, consume 메서드를 호출합니다. consume 메서드는 다음 두 가지 주요 작업을 수행합니다.

  • render 메서드: ActiveSupport::Notifications를 사용하여 render_partial.action_view 이벤트를 구독합니다. 이를 통해 컴포넌트 렌더링 시 발생하는 durationallocation 정보를 측정하여 뷰에 표시합니다.

  • extract_source 메서드: 블록의 소스 코드를 추출합니다. 이 메서드는 block.source_location을 사용하여 파일 경로와 라인 번호를 얻고, extract_source_block_via_matched_indentation_from 메서드를 호출하여 실제 소스 코드 블록을 식별하고 추출합니다.

소스 코드 추출 (extract_source_block_via_matched_indentation_from)

extract_source_block_via_matched_indentation_from은 복잡한 로직을 통해 블록의 소스 코드를 정확히 추출합니다.

  1. File.readlines(file)로 파일을 읽어옵니다.

  2. slice(source_location_index.pred..)를 사용하여 블록이 정의된 라인부터 시작하는 라인들을 가져옵니다.

  3. starting_line의 선행 공백(indentation)을 파악합니다.

  4. 동일한 들여쓰기로 시작하는 라인 중 블록의 end 키워드를 찾아 index를 얻습니다.

  5. lines.slice!(index..)end 키워드 이후의 라인들을 제거합니다.

  6. 남은 라인들을 문자열로 변환하고 불필요한 공백을 제거하여 최종 소스 코드를 얻습니다.

문법 강조 (Showcase.sample_renderer와 Rouge Gem)

추출된 소스 코드는 Showcase.sample_renderer를 통해 문법 강조 처리됩니다. 기본적으로 rouge Gem이 사용되며, gemspec에 명시되어 있지 않아 LoadError 발생 시 문법 강조 없이 원본 소스를 반환하는 proc이 사용됩니다. Showcase.sample_rendererinstance_exec를 사용하여 @view_context의 컨텍스트에서 실행되므로, sanitizelink_to와 같은 뷰 헬퍼 메서드를 렌더러 내에서 활용할 수 있는 유연성을 제공합니다.

뷰 렌더링

이러한 과정을 거쳐 Showcase::Sample 인스턴스의 인스턴스 변수들은 뷰 렌더링에 필요한 모든 데이터를 포함하게 됩니다. 뷰에서는 showcase/engine/sample 부분 템플릿을 사용하여 샘플의 이름, 렌더링 시간, 할당량, 실제 컴포넌트의 HTML, 그리고 소스 코드를 표시합니다.

결론

Showcase 시리즈를 통해 Rails 엔진의 작동 방식, 주요 파일 구성, 로컬 실행 방법뿐만 아니라 Ruby와 Rails에 대한 깊이 있는 지식을 습득했습니다. 특히 `block.arity`, `view_context` 헬퍼, `ActiveSupport::Notifications`, 그리고 Rouge Gem을 활용한 코드 문법 강조 기법 등을 학습했습니다. 단순히 문서를 읽는 것을 넘어 소스 코드를 직접 분석함으로써 Ruby의 작동 원리를 더욱 심층적으로 이해할 수 있었으며, 이는 오픈 소스 프로젝트에 기여하거나 새로운 기능을 추가하는 역량을 강화하는 데 큰 도움이 될 것입니다. 즐거운 코딩 되시길 바랍니다!

댓글0

댓글 작성

댓글 삭제 시 비밀번호가 필요합니다.

이미 계정이 있으신가요? 로그인 후 댓글을 작성하세요.

0/1000
정중하고 건설적인 댓글을 작성해 주세요.