개발/Elixir(엘릭서)

[Phoenix] Phoenix LiveView 간단 리뷰

핸디(Handy) 2023. 7. 23. 23:37

들어가며

이번 글에서는 Phoenix LiveView(이하 라이브뷰)를 다뤄보면서 느꼈던 장단점을 리액트와 비교하면서 느낀 점을 적어보도록 하겠습니다.

리액트는 4년차, 라이브뷰는 이제 막 사용해 본 뉴비입장으로 쓴 글이니 참고 바랍니다.

 

Phoenix LiveView란

Phoenix liveview의 공식 설명을 살펴보고 가겠습니다.

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.
- https://github.com/phoenixframework/phoenix_live_view

풍부하고, 실시간의 유저 경험을 지원하는 서버에서 랜더링 된 HTML이라고 되어있습니다.

이것만 보면 그냥 html를 랜더링 하는 프레임워크인가? 싶은데요.

사용하다 보면 그게 맞습니다. 다만 추가적인 기능이 붙어있죠(그래서 프레임워크임)

내세우는 장점도 한번 살펴보겠습니다.

  • Declarative rendering: Render HTML on the server over WebSockets with a declarative model, including an optional LongPolling fallback.
  • Rich templating language: Enjoy HEEx: a templating language that supports function components, slots, HTML validation, verified routes, and more.
  • Small payloads: LiveView is smart enough to track changes so it only sends what the client needs, making LiveView payloads much smaller than server-rendered HTML.
  • Live form validation: LiveView supports real-time form validation out of the box. Create rich user interfaces with features like uploads, nested inputs, and specialized recovery.
  • File uploads: Real-time file uploads with progress indicators and image previews. Process your uploads on the fly or submit them to your desired cloud service.
  • Rich integration API: Use the rich integration API to interact with the client, with phx-click, phx-focus, phx-blur, phx-submit, and phx-hook included for cases where you have to write JavaScript.
  • Optimistic updates and transitions: Perform optimistic updates and transitions with JavaScript commands via Phoenix.LiveView.JS.
  • Loose coupling: Reuse more code via stateful components with loosely-coupled templates, state, and event handling — a must for enterprise application development.
  • Live navigation: Enriched links and redirects are just more ways LiveView keeps your app light and performant. Clients load the minimum amount of content needed as users navigate around your app without any compromise in user experience.
  • Latency simulator: Emulate how slow clients will interact with your application with the latency simulator.
  • Robust test suite: Write tests with confidence alongside Phoenix LiveView built-in testing tools. No more running a whole browser alongside your tests.

제가 느끼기에 중요한 특징을 빨간색 표시를 해보았는데요. 크게 3가지를 뽑아볼 만합니다.

  1. WebSocket
  2. Declarartive  model
  3. HEEx

WebSocket(웹소켓)

웹소켓에 대해서 전부를 설명할 수는 없지만, 웹소켓은 서버와 화면의 동기화를 위해 만들어졌다고 생각합니다.

이전까지는 브라우저에서 서버의 데이터를 가져오기 위해서는 api로 물어보는 방법밖에는 없었습니다.

그래서 서버에서 이뤄진 작업을 반영하기 위해 폴링(Polling), 롱 폴링(Long Polling)을 사용하곤 했습니다.

실제로 웹소켓을 띄우기 귀찮은 경우 5초 단위로 폴링 하여 데이터를 업데이트하는 경우가 종종 있습니다.

여기까지가 일반적으로 프론트엔드 개발자가 웹소켓을 접하는 방식일 텐데요.

라이브뷰에서는 웹소켓을 이용해 모든 화면 업데이트를 처리합니다.

리액트의 가상돔처럼 업데이트가 필요한 부분의 diff를 구하고 변경분에 대한 정보를 웹소켓으로 전달함으로써 화면 업데이트를 처리합니다.

Declarartive model(선언적 모델)

이 용어는 리액트의 모델과 같습니다.

컴포넌트를 만드는 코드를 통해 설명하는 게 더 빠를 것 같은데요.

// 선언
defmodule MyComponent do
  use Phoenix.Component

  def greet(assigns) do
    ~H"""
    <p>Hello, <%= @name %>!</p>
    """
  end
end

// 사용
<MyComponent.greet name="Jane" />

// 실제 랜더링 결과
<p>Hello, Jane!</p>

코드로 살펴보니 리액트와 비슷하다는 느낌을 확 받으실 겁니다.

용어적인 차이가 있지만 컴포넌트를 선언하고 사용하고 실제 HTML로 랜더링 한다는 프로세스를 완전히 동일합니다.

여기서 greet(assigns)에서 assigns가 리액트의 props라고 보시면 됩니다.

리액트에 타입스크립트를 추가하는 경우 타입정보도 줄 수 있는데요.

이 부분도 똑같이 가능합니다.

// 타입시스템 부분 추가

HEEx

아마도 많은 분들이 처음 보는 단어라고 생각합니다. HTML + EEx의 합성어인데요. EEx는 Elixir 표현식을 실행하고 그 결과를 템플릿에 보간하는 데 사용하는 Elixir 라이브러리입니다.

<%= if some_condition? do %>
  <p>Some condition is true for user: <%= @username %></p>
<% else %>
  <p>Some condition is false for user: <%= @username %></p>
<% end %>

이런 식의 문법인데요.

뭔가 html의 문법 같기도 하면서 if do, 그리고 %=, @username처럼 난해해 보이는 문자열들이 혼란스러워 보입니다.

다만 여기에서 문법을 하나씩 살펴보기보다는 링크만 드리는 것으로 마무리해 보도록 할게요.

(실은 저도 아직 문법 어색하다는...)

 

Components and HEEx — Phoenix v1.7.7

Requirement: This guide expects that you have gone through the introductory guides and got a Phoenix application up and running. Requirement: This guide expects that you have gone through the request life-cycle guide. The Phoenix endpoint pipeline takes a

hexdocs.pm

 

Phoenix LiveView의 장단점

이번에는 장단점 부분입니다. 제가 사용해 보면서 느낀 장점과 단점을 하나씩만 뽑아보겠습니다.

아직 저도 라이브뷰가 얼마나 혁신적인지 모르겠으니깐 말이죠..

나중에 숙련도가 쌓인다면 다시 업데이트해 보겠습니다.

실시간 업데이트

여러 가지 라이뷰의 튜토리얼이나 공식문서를 살펴보면 감탄을 자아내는 요소는 바로 실시간 업데이트입니다.

하나에서 재생하면 다른곳에서도 바로 재생

저도 라이브뷰를 사용해 보면서 가장 먼저 적용해보고 싶은 부분이 바로 협업툴입니다.

한쪽에서 업데이트한 부분이 다른 한쪽에 바로 적용되는 것 -> 바로 협업툴에서 가장 중요한 요소입니다.

이 부분을 아주 간단히 쉽게 해결할 수 있습니다. 라이브뷰를 쓰게 되면요.

협업툴에서 중요한 부분은 바로 상태관리를 빼놓을 수가 없습니다.

라이브뷰는 애플리케이션의 상태를 서버에서 관리합니다. 

즉 서버에 있는 상태를 클라이언트에서는 웹소켓을 통해 실시간 업데이트된 HTML로 볼 수 있다는 말이 됩니다.

상당한 러닝커브

일단 라이브뷰를 하려면 html, css, elixir를 알아야 합니다. 

일반적은 프런트엔드 3대장인 html, css, js 대신에 말이죠.

또한 여러 가지 학습한 자료가 없기 때문에 기본적인 세팅 자체도 훨씬 오래 걸리는 편입니다.

그리고 elixir는 함수형 프로그래밍 언어입니다. 그래서 절차지향 프로그래밍 패러다임에 익숙한 개발자에게 elixir는 일단 어렵습니다.

물론 js에 학습하는 시간을 똑같이 elixir에 쏟는다면 비슷하겠지만, 프론트엔드 개발자에게 js는 빼놓을 수 없는 심장이라면

exlir는 아직까진 맹장 같은 느낌입니다.

언제든 문제가 되면 떼어내도 무방한 시장성을 가지고 있습니다. ( 여러 가지 성능적인 이점을 제외하고서 단순 시장성만 )

마치며

이 글을 읽고 나서 느낀 점은 "아 굳이 phoenix liveview를 쓸 필요는 없겠네"라고 생각이 드실지도 모르겠습니다.

네. 저도 실은 아직까진 그래요.

리액트뿐만 아니라 뷰, 앵귤러, 스벨트 또 여기서 끝나는 게 아니라 next, nuxt, remix, svelte kit 등 배울만 한 것들이 아직 너무 많습니다.

시장성이 있는 이러한 것들을 버려두고 elixir와 phoenix를 배운다는 것은 주객전도일 수도 있는데요.

그래도 고인물들 많은 시장보단.. 어쩌면 새로운 시장에 진출하는 것이 장기적으로 좋을수도 있다는 것이 제 생각입니다.

추가로 완전히 새로운 언어를 배워보고 싶은 욕심도 있었구요.

다음에는 라이브뷰에 대한 좀더 심도있는 글로 찾아뵙겠습니다

끝.

저작자표시