[TIL] Layout in Phoenix LiveView

posted by Bangalcat

1 min read

태그
til phoenix liveview

my_wordle 작업중에 flash message를 custom 해보고자 찾던 중에 발견한 부분.

기본적으로 load되는 html부분이 어디일까 찾다보니 /lib/my_wordle_web/templates/layout/ 밑에 root.html.heex, app.html.heex, live.html.heex 이렇게 세 파일이 있다는걸 알았다. layout 파일이 하나일거 같았는데 왜 3개나 존재할까? 다행히 공식 문서를 보니까 단번에 이해할 수 있었다.

  • root.html.heex : <html> 태그를 포함한 가장 최상위 레이아웃 파일. Page Title을 제외하곤 요소가 동적으로 바뀌지 않는다. @page_title 을 assign해서 동적으로 페이지 제목 변경 가능
  • app.html.heex: LiveView가 아닌 부분에 대한 layout. get_flash 로 flash message 보여줌
  • live.html.heex: LiveView에 대한 layout. live_flash로 flash message 보여줌

자세한 내용은 공식 문서 참고