빠르고 정확한 개발자 빠르고 정확한 개발자

web/laminar

• Component - Dropdown

  web/laminar 2022. 1. 9. 21:33

  문제 laminar 와 fomantic-UI 의 Dropdown 을 이용해, 재활용 가능한 component 를 만들어 보자 코드 import com.raquo.laminar.api.L._ import com.raquo.laminar.nodes.ReactiveHtmlElement import org.scalajs.dom import org.scalajs.dom.html object Main { class Dropdown(name: String, items: Seq[String]) { val selectedVar: Var[String] = Var("") val elem: ReactiveHtmlElement[html.Select] = select( cls := "ui selection dropdown", v..

  Read More
• Var.updater() 사용하기

  web/laminar 2022. 1. 8. 23:22

  문제 laminar counter example 처럼 event 를 모은 후 foldLeft 로 합산해 counter 를 만들 수 있다. 여기서는 Var.updater 를 활용해 구현해 보자 코드 import com.raquo.laminar.api.L._ import org.scalajs.dom import org.scalajs.dom.MouseEvent object Main { def main(args: Array[String]): Unit = { val totalVar = Var(0) val incButton = button("+", onClick --> totalVar.updater((current, _: MouseEvent) => current + 1)) val decButton = button(..

  Read More
• Ajax 호출하기

  web/laminar 2022. 1. 8. 23:05

  코드 import com.raquo.airstream.web.AjaxEventStream import com.raquo.laminar.api.L._ import org.scalajs.dom object Main { def main(args: Array[String]): Unit = { val urlVar = Var("https://api.zippopotam.us/us/90210") val otherButton = button("other url", onClick.mapTo("https://jsonplaceholder.typicode.com/todos/2") --> urlVar) val submitButton = button("submit") // EventStream.fromFuture(Ajax.get(..

  Read More
• javascript(plotly.js) 호출하기

  web/laminar 2022. 1. 8. 13:05

  문제 plotly.js javascript library 를 laminar 에서 사용해보자 plotly.js 의 basic bar chart 를 그려보도록 한다. 코드 import com.raquo.laminar.api.L._ import org.scalajs.dom import scala.scalajs.js object Main { def main(args: Array[String]): Unit = { val content = div( onMountCallback(ctx => js.Dynamic.global.Plotly.newPlot( ctx.thisNode.ref, js.Array( js.Dictionary( "x" -> js.Array("giraffes", "orangutans", "monkeys"..

  Read More
• Laminar 소개

  web/laminar 2022. 1. 5. 21:18

  Laminar 는 "Native Scala.js library for building user interfaces" 로 소개되었다. laminar 이외에도 scalajs-react, slinky 등이 있지만, javascript react 를 scalajs 로 옮겨 놓은 것 같았다. react 를 전혀 모르는 입장에서 scala 철학(?)에 맞게 작성된 것으로 보이는 laminar 를 사용해 보기로 했다. bootstrap 보다 쉬워 보이는 Fomantic-UI 를 함께 사용해 코드를 작성해 보도록 한다. 여기서 작성한 코드들은 https://github.com/windbird123/play-web 에서 실습해 볼 수 있다. https://github.com/windbird123/play-web clon..

  Read More