본문에서는 먼저 snake_case 형식의 문자열을 camelCase로 변환하는 camelize 함수의 JavaScript 구현을 소개합니다. 이 함수는 정규 표현식을 활용하여 하이픈, 언더스코어, 공백 뒤의 문자를 대문자로 변환하고, 첫 번째 문자를 소문자로 만들어 적절한 camelCase 형식을 생성합니다. app/javascript/controllers/form_controller.js 내에서 camelize("user_name")이 "userName"으로 변환되어 사용되는 구체적인 예시를 통해 그 활용법을 명확히 보여줍니다.
다음으로, 숫자에 적절한 서수 접미사(예: 1st, 2nd, 3rd)를 추가하는 ordinalize 헬퍼에 대해 다룹니다. 이 기능은 Rails의 ActiveSupport::Inflector.ordinalize 또는 Integer#ordinalize 메서드와 유사하며, JavaScript 구현은 11, 12, 13과 같이 ‘th’를 사용하는 예외 케이스를 처리한 후, 숫자의 마지막 자리에 따라 적절한 접미사를 적용합니다. app/javascript/controllers/leaderboard_controller.js에서 ordinalize(position)을 사용하여 순위를 표시하는 실용적인 예시를 통해 이 헬퍼의 유용성을 강조합니다.
이 외에도, 본 문서에서는 underscore (camelCase를 snake_case로), dasherize (언더스코어를 하이픈으로), humanize (첫 단어 대문자화 및 언더스코어를 공백으로), titleize (모든 단어 대문자화), downcase, upcase (간단한 대소문자 변환), parameterize (URL 친화적인 문자열 생성) 등 다양한 유용한 문자열 변환 헬퍼들의 전체 모듈 코드를 제공합니다. 각 헬퍼는 Ruby/Rails의 상응하는 메서드와 유사한 기능을 수행하며, 코드 예시를 통해 그 구현 방식을 상세히 설명합니다.
마지막으로, 구현된 헬퍼들을 Rails 애플리케이션에서 사용하는 두 가지 주요 방법을 제시합니다. 특정 헬퍼를 개별적으로 임포트하는 방법(import { camelize, ordinalize } from "../helpers/stringInflectors")과 모든 헬퍼를 네임스페이스로 임포트하는 방법(import * as inflector from "../helpers/stringInflectors")입니다. 또한, importmap-rails를 사용하는 환경에서 config/importmap.rb 파일에 pin_all_from "app/javascript/helpers", under: "helpers"를 추가하여 헬퍼들을 쉽게 사용할 수 있도록 설정하는 방법을 안내합니다.