Phoenix LiveView 1.2 릴리즈 노트

Phoenix LiveView 1.2는 이전에 출시된 콜로케이션된 JavaScript 기능을 반영하여 HEEx 템플릿 내에 CSS를 직접 배치할 수 있는 기능을 도입합니다. 이 업데이트는 스타일과 로직을 한 곳에 유지하면서 표준 CSS 빌드 파이프라인과의 호환성을 유지하여 컴포넌트 개발을 간소화하는 것을 목표로 합니다.

HEEx 템플릿에서 콜로케이션된 CSS

Phoenix LiveView 1.2는 개발자가 특정 :type 속성을 가진 <style> 태그를 사용하여 HEEx 템플릿 내부에 직접 스타일을 정의할 수 있도록 합니다.

구현 및 빌드 파이프라인

:type 속성으로 정의된 스타일(예: <style :type={MyApp.ColocatedCSS}>)은 컴파일 시 _build 디렉터리 내의 전용 phoenix-colocated 폴더로 추출됩니다. 추출된 스타일은 Tailwind나 Esbuild와 같은 프로젝트 기존 CSS 번들러에 의해 처리되어 콜로케이션된 스타일이 전역 CSS와 동일한 프로덕션 파이프라인을 따르도록 보장합니다.

CSS 스코핑 및 @scope 규칙

콜로케이션된 스타일이 다른 컴포넌트로 유출되는 것을 방지하기 위해 LiveView는 최신 CSS @scope 규칙을 활용합니다. 이는 렌더링된 HTML에 주석을 달아 경계를 정의함으로써 이루어집니다:

  • Root Tags: 템플릿의 가장 바깥 요소에 특수한 phx-r 속성이 추가되어 제한 선택자 역할을 합니다.
  • Component Identification: 스코프된 CSS를 사용하는 컴포넌트의 루트 요소는 고유한 phx-css-* 속성을 받습니다.

이를 통해 @scope ([phx-css-foo]) to ([phx-r]) { p { font-weight: bold; } }와 같은 CSS 규칙을 사용할 수 있으며, 이는 특정 컴포넌트 내의 단락(p)만 영향을 받도록 보장합니다.

브라우저 지원에 대한 참고: 2026년 6월 현재, @scope 규칙은 모든 브라우저에서 보편적으로 지원되지 않습니다. 따라서 LiveView 1.2는 기본적으로 스코핑을 활성화하지 않습니다. 대신, 개발자가 자체 커스텀 스코핑 전략을 구현하거나 초기 도입을 위해 @scope 구현을 선택하도록 @behaviour를 제공합니다.

루트 태그 속성을 활성화하려면 다음 구성 설정이 필요합니다:

config :phoenix_live_view,
  root_tag_attribute: "phx-r"

HEEx 컴파일 전면 개편

콜로케이션된 CSS 도입으로 HEEx 템플릿 컴파일 방식에 근본적인 변화가 필요했습니다. 컴파일 과정은 토큰화와 파싱이라는 두 개의 별도 단계로 분리되었습니다.

이 아키텍처 변화로 LiveView는 매크로 컴포넌트(콜로케이션된 CSS 및 JS 등)를 처리하면서 일반 컴파일 프로세스의 복잡성을 증가시키지 않을 수 있게 되었습니다. 또한, 이번 리팩터링으로 템플릿 컴파일과 포맷팅 사이에 존재하던 코드 중복이 제거되었습니다.

1.2에서 추가된 개선 사항

LiveView 1.2는 개발자를 위한 여러 편의성 업데이트를 포함합니다:

  • Custom Tag Formatting: 개발자는 이제 Phoenix.LiveView.HTMLFormatter.TagFormatter behaviour를 구현하여 Prettier와 같은 외부 도구를 사용해 HEEx 내 <script> 및 <style> 태그를 포맷할 수 있습니다.
  • Automatic JS Struct Encoding: Phoenix.LiveView.JS 구조체는 push_event를 통해 전송될 때 Jason이나 내장 JSON 모듈을 사용하면 자동으로 인코딩됩니다. 수동 인코딩은 JS.to_encodable/1을 통해 여전히 가능합니다.
  • Configurable Debug Annotations: @debug_heex_annotations 및 @debug_attributes 모듈 속성을 통해 HEEx 디버그 주석을 모듈별로 구성할 수 있게 되었습니다.
  • Test Configuration: 테스트 경고를 카테고리별로 구성할 수 있습니다.
  • Documentation: JavaScript 클라이언트에 이제 전용 문서가 제공됩니다.

커뮤니티 관점

이번 릴리즈는 전반적으로 환영받고 있지만, 일부 개발자는 콜로케이션 추세에 대해 주의를 표했습니다. 한 기여자는 편리함에도 불구하고 JS와 CSS를 콜로케이션하는 것이 Ruby on Rails의 오래된 버전과 유사한 유지보수 문제를 초래할 수 있다고 지적했습니다:

“Rails 2.x를 떠올리게 합니다. rjs를 사용한 프론트엔드 코드를 디버그하거나 수정하는 것이 거의 불가능해졌는데, 서로 다른 JS 조각들이 찾기 어려운 파일들에 여기저기 흩어져 있었기 때문입니다.”

반대로, 다른 사용자들은 현대 JavaScript 프레임워크와 비교했을 때 Phoenix 접근 방식의 효율성을 강조하며, “백엔드 중심” SPA 모델이 복잡한 프론트엔드 빌드 체인보다 유지보수가 더 간단하고 이해하기도 빠르다고 언급했습니다.

SUMMARY: Phoenix LiveView 1.2는 HEEx 템플릿에 콜로케이션된 CSS를 도입하고, HEEx 컴파일 프로세스를 재구성했으며, JS 구조체 인코딩을 개선했습니다.

TITLE: Phoenix LiveView 1.2 릴리즈 노트

Sources