Phoenix를 Slim으로 더 읽기 쉽게
소개
저는 평소 웹 앱이나 사이트를 만들 때 Nuxt.js를 사용하는 경우가 많습니다.
라우팅과 쓰기가 간단하기 때문에 개발이 쉽고 편리합니다.
하지만 좋아하는 언어는 Elixir이므로 이제 LiveView 를 사용한 프런트 개발에도 손을 내려고 생각하고, 이번은 LiveView에 Slim을 조합한 것을 시도해 보았습니다.
Slim이란?
HTML 태그를 짧고 간결하게 쓸 수 있는 템플릿 엔진입니다.
나는 Nuxt를 쓸 때 HTML이 읽히기 어려워 버릴 수 있으므로 Slim을 시도하려고 생각했습니다.
index.html<html>
<head>
<title>Slim Sample</title>
</head>
<body>
Slim Sample Website
</body>
</html>
index.slimhtml
head
title Slim Sample
body
| Slim Sample Website
이 방법으로 HTML을 짧게 작성할 수 있습니다.
샘플 프로젝트에서 사용해 보기
프로젝트 만들기
LiveView가 있는 프로젝트를 만듭니다.
mix phx.new bealchemist --live --no-ecto
phoenix_slime 도입
Slime을 LiveView에서도 다루기 위해 phoenix_slime라는 라이브러리를 도입합니다.
먼저 mix.exs 의 deps에 phoenix_slime 를 추가하고 mix deps.get 로 설치합니다.
mix.exsdefp deps do
[
...
{:phoenix_slime, "~> 0.13.1"}
]
end
phoenix_slime 를 도입할 수 있으면, config.exs 에 다음의 기술을 추가합니다.
이 설명에서는 slim, slime, slimleex 확장자가있는 파일에 대한 템플릿 엔진을 제공합니다.
config.exsconfig :phoenix, :template_engines,
slim: PhoenixSlime.Engine,
slime: PhoenixSlime.Engine,
slimleex: PhoenixSlime.LiveViewEngine # If you want to use LiveView
config :phoenix_slime, :use_slim_extension, true
그런 다음 dev.exs 를 변경합니다.
dev.exs# Watch static and templates for browser reloading.
config :my_app, MyApp.Endpoint,
live_reload: [
patterns: [
~r{priv/static/.*(js|css|png|jpeg|jpg|gif)$},
~r{web/views/.*(ex)$},
~r{lib/APP_web/templates/.*(eex|slim|slime)$}
]
]
이것으로 slim을 사용할 준비가 완료됩니다.
슬림 페이지를 표시해 봅니다.
지금 상태에서 mix phx.server 를 하고 http://localhost:4000/ 에 액세스하면 위 이미지와 같은 화면이 표시된다고 생각합니다.
이 프로젝트에 숫자를 계산하는 새 페이지를 추가해 봅니다.
페이지 추가
lib/APP_web/live 디렉토리에 index_live.ex 및 index_live.html.slimleex를 만듭니다.
index_live.exdefmodule BealchemistWeb.IndexLive do
use BealchemistWeb, :live_view
def mount(_params, _session, socket) do
{:ok, assign(socket, :val, 0)}
end
def handle_event("inc", _, socket) do
{:noreply, update(socket, :val, &(&1 + 1))}
end
def handle_event("dec", _, socket) do
{:noreply, update(socket, :val, &(&1 - 1))}
end
end
index_live.html.slimleexh2 The count is: <%= @val %>
button phx-click="dec" -
button phx-click="inc" +
라우팅 설정
새 라우팅도 설정합니다.
router.exscope "/", BealchemistWeb do
pipe_through :browser
live "/", PageLive, :index
live("/index", IndexLive)
end
이제 준비가 되어야 합니다.
실행
mix phx.server 에서 실행하고 http://localhost:4000/index 에 액세스하면 다음과 유사한 페이지가 표시된다고 생각합니다.
Phoenix가 Slim을 제대로 읽어 준다는 것을 알 수 있습니다!
기억하면 도움이 될 수 있습니다.
HTML 태그를 짧고 간결하게 쓸 수 있는 템플릿 엔진입니다.
나는 Nuxt를 쓸 때 HTML이 읽히기 어려워 버릴 수 있으므로 Slim을 시도하려고 생각했습니다.
index.html
<html>
<head>
<title>Slim Sample</title>
</head>
<body>
Slim Sample Website
</body>
</html>
index.slim
html
head
title Slim Sample
body
| Slim Sample Website
이 방법으로 HTML을 짧게 작성할 수 있습니다.
샘플 프로젝트에서 사용해 보기
프로젝트 만들기
LiveView가 있는 프로젝트를 만듭니다.
mix phx.new bealchemist --live --no-ecto
phoenix_slime 도입
Slime을 LiveView에서도 다루기 위해 phoenix_slime라는 라이브러리를 도입합니다.
먼저 mix.exs 의 deps에 phoenix_slime 를 추가하고 mix deps.get 로 설치합니다.
mix.exsdefp deps do
[
...
{:phoenix_slime, "~> 0.13.1"}
]
end
phoenix_slime 를 도입할 수 있으면, config.exs 에 다음의 기술을 추가합니다.
이 설명에서는 slim, slime, slimleex 확장자가있는 파일에 대한 템플릿 엔진을 제공합니다.
config.exsconfig :phoenix, :template_engines,
slim: PhoenixSlime.Engine,
slime: PhoenixSlime.Engine,
slimleex: PhoenixSlime.LiveViewEngine # If you want to use LiveView
config :phoenix_slime, :use_slim_extension, true
그런 다음 dev.exs 를 변경합니다.
dev.exs# Watch static and templates for browser reloading.
config :my_app, MyApp.Endpoint,
live_reload: [
patterns: [
~r{priv/static/.*(js|css|png|jpeg|jpg|gif)$},
~r{web/views/.*(ex)$},
~r{lib/APP_web/templates/.*(eex|slim|slime)$}
]
]
이것으로 slim을 사용할 준비가 완료됩니다.
슬림 페이지를 표시해 봅니다.
지금 상태에서 mix phx.server 를 하고 http://localhost:4000/ 에 액세스하면 위 이미지와 같은 화면이 표시된다고 생각합니다.
이 프로젝트에 숫자를 계산하는 새 페이지를 추가해 봅니다.
페이지 추가
lib/APP_web/live 디렉토리에 index_live.ex 및 index_live.html.slimleex를 만듭니다.
index_live.exdefmodule BealchemistWeb.IndexLive do
use BealchemistWeb, :live_view
def mount(_params, _session, socket) do
{:ok, assign(socket, :val, 0)}
end
def handle_event("inc", _, socket) do
{:noreply, update(socket, :val, &(&1 + 1))}
end
def handle_event("dec", _, socket) do
{:noreply, update(socket, :val, &(&1 - 1))}
end
end
index_live.html.slimleexh2 The count is: <%= @val %>
button phx-click="dec" -
button phx-click="inc" +
라우팅 설정
새 라우팅도 설정합니다.
router.exscope "/", BealchemistWeb do
pipe_through :browser
live "/", PageLive, :index
live("/index", IndexLive)
end
이제 준비가 되어야 합니다.
실행
mix phx.server 에서 실행하고 http://localhost:4000/index 에 액세스하면 다음과 유사한 페이지가 표시된다고 생각합니다.
Phoenix가 Slim을 제대로 읽어 준다는 것을 알 수 있습니다!
기억하면 도움이 될 수 있습니다.
mix phx.new bealchemist --live --no-ecto
defp deps do
[
...
{:phoenix_slime, "~> 0.13.1"}
]
end
config :phoenix, :template_engines,
slim: PhoenixSlime.Engine,
slime: PhoenixSlime.Engine,
slimleex: PhoenixSlime.LiveViewEngine # If you want to use LiveView
config :phoenix_slime, :use_slim_extension, true
# Watch static and templates for browser reloading.
config :my_app, MyApp.Endpoint,
live_reload: [
patterns: [
~r{priv/static/.*(js|css|png|jpeg|jpg|gif)$},
~r{web/views/.*(ex)$},
~r{lib/APP_web/templates/.*(eex|slim|slime)$}
]
]
defmodule BealchemistWeb.IndexLive do
use BealchemistWeb, :live_view
def mount(_params, _session, socket) do
{:ok, assign(socket, :val, 0)}
end
def handle_event("inc", _, socket) do
{:noreply, update(socket, :val, &(&1 + 1))}
end
def handle_event("dec", _, socket) do
{:noreply, update(socket, :val, &(&1 - 1))}
end
end
h2 The count is: <%= @val %>
button phx-click="dec" -
button phx-click="inc" +
scope "/", BealchemistWeb do
pipe_through :browser
live "/", PageLive, :index
live("/index", IndexLive)
end
mix phx.server 에서 실행하고 http://localhost:4000/index 에 액세스하면 다음과 유사한 페이지가 표시된다고 생각합니다.Phoenix가 Slim을 제대로 읽어 준다는 것을 알 수 있습니다!
기억하면 도움이 될 수 있습니다.
phoenix_slime를 도입하는 동안 slimleex를 성공적으로 읽지 않고 오류가 발생하는 경우 mix clean slimleex와 같은 하이라이트를 만들기 위해 settings.json을 괴롭히면 쉽게 할 수 있습니다. 참고 링크
htps : // 코 m / 뿌기 몽 / ms / b64171952d958dc4d6
htps : // 기주 b. 이 m / s ぃ めぁ g / p 쪽에 x_s ぃ
Reference
이 문제에 관하여(Phoenix를 Slim으로 더 읽기 쉽게), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Papillon6814/items/946007fe434d4126b755
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Phoenix를 Slim으로 더 읽기 쉽게), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Papillon6814/items/946007fe434d4126b755텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
