web
-
SAP 에서 Routing 개발web/tips 2023. 11. 23. 16:18
개요 SAP(single page application) 에서 http://localhost:8080/path/query=abc 처럼 path, query param 에 따라 화면 제어가 될 수 있도록 개발한다. 다음과 같이 두가지 방향으로 모두 동기화 되어야 한다. 브라우저 URL 로 요청 ==> 화면 (UI form input) 이 path, query param 에 맞게 보여져야 함 브라우저 main 화면 (UI form input) 에서 submit ==> 브라우저 URL 에 path, query param 추가/변경 1 번은 routing 라이브러리에서 잘 지원한다. 입력된 URL 에서 path, query param 을 분석해 전달해 주면 여기에 맞게 UI 를 개발하면 된다. 그런데 2번에 대..
-
Local CORS 테스트web/tips 2023. 3. 15. 23:45
CORS 를 테스트해 주는 site 도 있지만, 제한된 네트워크 망에서는 활용이 어려울 수 있다. https://medium.com/pareture/simple-local-cors-test-tool-544f108311c5 방법이 좋은 것 같다. 여기에 소개된 방법을 요약 하자면 step1) https://github.com/njgibbon/nicks-cors-test 다운로드 step2) 다운로드 받은 코드 안에 있는 index.html 을 브라우저로 오픈 (blank 화면) F12 를 눌러 개발자 도구 활성화 console 에 아무런 에러 메시지가 없는 것 확인 step3) 다운로드 받은 코드 안에 있는 main.js 파일을 Editor 로 오픈 main.js 의 url 항목 "https://api.g..
-
EventStream 의 flatMap vs combineWithFnweb/laminar 2022. 10. 1. 17:37
코드 package com.github.windbird.playweb import com.raquo.laminar.api.L._ import org.scalajs.dom object Main { def main(args: Array[String]): Unit = { val buttonA = button("A") val buttonAE = buttonA.events(onClick.mapTo(scala.math.random())).debugLog() val buttonB = button("B") val buttonBE = buttonB.events(onClick.mapTo(scala.math.random())).debugLog() // val c: EventStream[String] = buttonAE.co..
-
완성 - 메뉴 구현web/laminar 2022. 1. 29. 10:30
문제 Waypoint 를 이용해 Router 적용 코드에 fomantic-ui menu 를 적용해 본다. http://localhost:9000/search?engine=google&query=bts 입력 했을 때 http://localhost:9000/login 입력 했을 때 코드 import com.raquo.laminar.api.L import com.raquo.laminar.api.L._ import com.raquo.laminar.nodes.ReactiveHtmlElement import com.raquo.waypoint._ import org.scalajs.dom import org.scalajs.dom.html import upickle.default._ class Radio(name: St..
-
Waypoint 를 이용해 Router 적용web/laminar 2022. 1. 28. 20:36
문제 Waypoint 를 이용해 Router 를 적용해 본다. http://localhost:9000/search?engine=google&query=bts 입력 했을 때 google 이 선택 체크되고, Search Query 에 bts 가 입력된 화면이 노출되어야 한다. 사용자가 Search Engine 으로 naver 를 선택 체크하고, Search Query 로 iphone 을 입력후 submit 버튼을 눌렀을 때 브라우저 URL 이 http://localhost:9000/search?engine=naver&query=iphone 로 변경되어야 한다. http://localhost:9000/login 입력 했을 때 코드 import com.raquo.laminar.api.L import com.ra..
-
children 으로 List 표현하기web/laminar 2022. 1. 20. 21:54
코드 import com.raquo.laminar.api.L._ import org.scalajs.dom object Main { def main(args: Array[String]): Unit = { val list: Var[List[String]] = Var(List("a", "bc", "def")) val content = div( ol( children li(item))) ) ) val containerNode = dom.document.getElementById("main_content") render(containerNode, content) } } 설명 다음과 같은 Html 이 생성된다. a bc def
-
Observer 를 사용해 side effect 처리하기web/laminar 2022. 1. 9. 22:48
코드 import com.raquo.laminar.api.L._ import org.scalajs.dom import org.scalajs.dom.MouseEvent object Main { def main(args: Array[String]): Unit = { val observer = Observer[MouseEvent](_ => println("button clicked")) val testButton = button("test", onClick --> observer) // 혹은 아래처럼 한줄로 표현하는 것도 가능하다. // val testButton = button("test", onClick --> {_ => println("button clicked")}) val content = div( ..
-
Component - TextInputweb/laminar 2022. 1. 9. 22:23
문제 laminar 와 fomantic-UI 의 Input 을 이용해, 재활용 가능한 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 TextInput(name: String, description: String) { val textVar: Var[String] = Var("") val elem: ReactiveHtmlElement[html.Div] = div( label(name), cls := "ui input", input( typ :..