Phoenix에서 플래시 메시지 정리

Source: Dev.to

소개

Elixir가 어떻게 동작하는지 더 잘 이해하고 Phoenix에 대해 배우기 위해 시스템을 만들기 시작했습니다.

Phoenix는 Ruby용 프레임워크인 Rails와 같은 역할을 하는 Elixir용 프레임워크입니다. 목표는 속도나 유지보수성을 희생하지 않으면서 생산적인 프레임워크가 되는 것입니다.

그럼 바로 Elixir로 내가 읽은 책을 추적하는 간단한 CRUD 애플리케이션을 만들기로 했습니다. 다음 명령어들을 사용했습니다:

# Create the app.
$ mix phx.new booklistx

# Enter the project
cd booklistx

# CRUD generator (Rails scaffold style)
mix phx.gen.html Books Book books title:string

# Create the database and the books table
mix ecto.create
mix ecto.migrate

책 목록을 애플리케이션의 루트로 지정했습니다.

# lib/booklistx_web/router.ex

defmodule BooklistxWeb.Router do
  use BooklistxWeb, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", BooklistxWeb do
    pipe_through :browser

    # get "/", PageController, :index
  end
end

Phoenix에서 Flash 메시지 정리하기

Rails에서 했던 방식을 비슷하게 적용해 보기로 했습니다.
이 문제를 해결할 수 있는 방법은 여러 가지가 있으며(아마도 더 좋은 방법도 있을 겁니다), 여기서는 간단하고 제가 공부하고 있던 개념들을 활용하는 접근법을 소개합니다.

생성된 파일들

# Create shared_view file
$ touch lib/booklistx_web/shared_view.ex

# Create shared folder
$ mkdir -p lib/booklistx_web/templates/shared

# Create _flash_message.html.eex file
$ touch lib/booklistx_web/templates/shared/_flash_message.html.eex

lib/booklistx_web/shared_view.ex

defmodule BooklistxWeb.SharedView do
  use BooklistxWeb, :view
  import BooklistxWeb.Router.Helpers

  def show_flash_message(conn) do
    conn
    |> get_flash()
    |> flash_message()
  end

  def flash_message(%{"info" => message}) do
    render("_flash_message.html", class: "primary", message: message)
  end

  def flash_message(%{"error" => message}) do
    render("_flash_message.html", class: "danger", message: message)
  end

  def flash_message(_), do: nil
end

여기서는 show_flash_message/1에서 파이프 연산자를 사용하고, flash_message/1에서는 패턴 매칭을 활용하고 있습니다.

Partial: lib/booklistx_web/templates/shared/_flash_message.html.eex

" role="alert">
  

Layout: lib/booklistx_web/templates/layout/app.html.eex

  
    
    
    
    Booklistx · Phoenix Framework

    "/>
    
  

  
    
      
        
          

            - [Get Started](https://hexdocs.pm/phoenix/overview.html)

          

        
        
          

Feel free to leave feedback and suggest improvements.

참고 자료

• #23: Partial Templates with Phoenix – ElixirCasts
• Elixir Forum – Check for error and info alert in Phoenix
• Issue phoenixframework – Add has_flash? functions #1757