레일스 이미지 도우미

종종 애플리케이션을 개발할 때 개발자는 UI 요소를 조건부로 렌더링하는 논리를 포함해야 할 수 있습니다. 예를 들어 현재 페이지의 탐색 모음 메뉴 항목에 있는 활성 CSS 클래스일 수 있습니다. 때로는 필요한 논리가 더 복잡합니다. 제 경우에는 API에서 이미지를 사용할 수 없을 때 대체 이미지를 제공해야 했습니다. 이 기사에서는 이 목표를 달성하기 위해 Rails Helper를 만드는 데 사용한 방법론을 보여줍니다.

구조

내 사이드 ​​프로젝트Your Congress에서 저는 무료 GitHub 저장소UnitedStates/Images를 사용하고 있습니다. 이 저장소는 의회 의원에게 봉사하는 모든 사진을 저장합니다. 이미지 크기 및 회원 ID별로 GitHub 페이지에서 제공되는 API를 통해 이미지에 액세스할 수 있습니다. 따라서 이미지 URL은 https://theunitedstates.io/images/congress/[size]/[member_id].jpg 와 같이 구성됩니다.

이미지는 ERB 부분으로 렌더링됩니다.

image_tag "https://theunitedstates.io/images/congress/225x275/#{senator.member_id}.jpg"

문제

기존 코드는 잘 작동하지만 새로운 구성원이 미국 의회에 추가되었으므로 현재 새 구성원에 대해 사용 가능한 이미지를 사용할 수 없습니다. 이미지를 사용할 수 없는 경우 브라우저 개발자 콘솔은 404 상태 코드를 기록하고 UI에 깨진 이미지가 표시되어 카드 레이아웃이 깨집니다. 따라서 이러한 이미지에 액세스하고 가용성을 확인하는 더 나은 방법이 필요합니다.

목표:

이미지에 액세스할 때 성공 코드를 확인하고 이 이미지를 렌더링합니다.

이미지 액세스 실패를 확인하고 UI 레이아웃을 유지하기 위해 대체 이미지를 렌더링합니다.

이것은 ERB 부분에 대해 너무 복잡하므로 이 프로세스를 건조시키기 위해 Rails Helper를 생성할 것입니다.

해결책

What are helpers in Rails? A helper is a method that is (mostly) used in your Rails views to share reusable code.
RubyGuides

우리는 app/helpers 라는 bio_image_helper.rb 라는 새로운 도우미를 만들고 있습니다. 도우미의 기본 구조는 모듈을 만든 다음 모듈 내에서 뷰 내에서 호출할 메서드를 만드는 것입니다. 변수에 URI 문자열을 정의하고 member_id 라는 인수에 member를 전달할 것입니다. 따라서 기본 구조:

module BioImageHelper

  def bioimage_helper(member)
    img_url = "https://theunitedstates.io/images/congress/225x275/#{member}.jpg"
    res = Net::HTTP.get_response(URI.parse(img_url.to_s))

    res.is_a?(Net::HTTPSuccess) ? img_url : 'backup.png'
  end

end

두 번째 목표는 이미지 응답의 성공 여부를 확인하고 대체 이미지를 제공하는 것이었습니다. 이러한 목표를 달성하기 위해 net/http 및 uri 두 개의 라이브러리를 사용할 것입니다. 이를 통해 응답 객체를 변수( res )에 저장하고 img_url 문자열을 구문 분석합니다. 그런 다음 Ruby 삼항을 사용하여 HTTPSuccess 에 대한 응답 객체를 확인하고 이미지 또는 대체 이미지를 사용합니다.

require 'net/http'
require 'uri'

module BioImageHelper

  def bioimage_helper(member)
    img_url = "https://theunitedstates.io/images/congress/225x275/#{member}.jpg"
    res = Net::HTTP.get_response(URI.parse(img_url.to_s))

    res.is_a?(Net::HTTPSuccess) ? img_url : 'backup.png'
  end

end

따라서 부분적 now의 image_tag는 다음과 같이 추상화됩니다.

image_tag bioimage_helper(senator.member_id)

감사

피드백과 코드 리뷰를 통해 저를 올바른 방향으로 안내해 주신 Ruby on Rails Discord Server 사용자들에게 특별한 감사를 드립니다.

그리고 Stack Overflow 토론이 가장 도움이 되었습니다.

보행인

재미있었습니다. 에 댓글을 남겨주시거나 DM을 보내주세요.

Shameless Plug: 훌륭한 회사에서 일하고 있고 다양한 기술과 삶의 경험을 가진 소프트웨어 개발자 시장에 있다면 나에게 메시지를 보내고 내 .