Table of contents

download codes from ObservableHQ (μ˜ˆμ‹œ)

download

observableHQμ—μ„œ Exportλ₯Ό 톡해 μ½”λ“œλ₯Ό λ‹€μš΄

예λ₯Ό λ“€μ–΄. observableHQμ—μ„œ μž‘μ„±ν•œ 파일이 μ•„λž˜μ™€ κ°™κ³  Exportλ₯Ό 톡해 μ½”λ“œλ₯Ό λ‹€μš΄λ°›λŠ”λ‹€λ©΄,

//javascript
viewof amount = Inputs.range([0, 200], {label: "Amount", step: 1})

//javascript
viewof tipPercent = Inputs.radio([10, 12, 15, 18, 20, 25],
                                 {label: "Tip Percentage", value: 20})

//javascript
tip = amount * (tipPercent / 100)

#markdown
A **${tipPercent}%** tip on **$${amount.toFixed(2)}** is **$${tip.toFixed(2)}**,    
for a total of **$${(amount+tip).toFixed(2)}**


visual studio

λ‹€μš΄λ‘œλ“œ 받은 μ½”λ“œμ˜ κ΅¬μ‘°λŠ”, μ•„λž˜μ™€ κ°™λ‹€.

7d2f01ccb9e8dd3e
    β”œβ”€ 7d2f01ccb9e8dd3e@14.js
    β”œβ”€ README.md
    β”œβ”€ index.html
    β”œβ”€ index.js
    β”œβ”€ inspector.css
    β”œβ”€ package.json
    └─ runtime.js


visual studioμ—μ„œ μ••μΆ•ν•΄μ œν•œ 파일 전체λ₯Ό μ—΄κ³  live serverλ₯Ό μ‹€ν–‰ν•˜λ©΄, λΆˆν•„μš”ν•˜λ‹€κ³  μƒκ°λ˜λŠ” 좜λ ₯ κ²°κ³Όκ°€ ν•¨κ»˜ 보여진닀.
예λ₯Ό λ“€λ©΄,

web_application2.png

range λ°” μ•„λž˜μ—, amount = 100
radio button μ•„λž˜μ—, tipPercent = 20

index.htmlλ₯Ό μˆ˜μ •ν•˜λ©΄, λΆˆν•„μš”ν•œ 좜λ ₯ κ²°κ³Όλ₯Ό μ‚­μ œν•  수 μžˆλ‹€.

web_application1.png

# as-is   
const runtime = new Runtime();
const main = runtime.module(define, Inspector.into(document.body));

# be-to
## <body>μœ„μ— μΆ”κ°€
<section>
  <div id="amount"></div>
  <div id="tipPercent"></div>
  <div id="tip"></div>
</section>

## main을 μ•„λž˜ μ½”λ“œλ‘œ μˆ˜μ •
const main = runtime.module(define, (name) => {
    if (name === "viewof amount") {
        return new Inspector(document.getElementById("amount"));
    } else if (name === "viewof tipPercent") {
        return new Inspector(document.getElementById("tipPercent"));
    } else if (name === "viewof tip") {
        return new Inspector(document.getElementById("tip"));
    }
});

ν•˜μ§€λ§Œ, μœ„ μ½”λ“œλŠ” 두 가지 λ¬Έμ œμ μ„ 가지고 μžˆλ‹€.

첫번째 문제, tip에 λŒ€ν•œ 뢀뢄은 λ‚˜νƒ€λ‚˜μ§€ μ•ŠλŠ”λ‹€.
κ·Έ μ΄μœ λŠ”, jsμ—μ„œ 확인할 수 μžˆλ‹€.

//μ•„λž˜μ˜ μ½”λ“œλŠ” 'tip'
main.variable(observer("tip")).define("tip", ["amount","tipPercent"], _tip);

//μ•„λž˜μ˜ μ½”λ“œλŠ” 'tipPercent'
//radio button
main.variable(observer("viewof tipPercent")).define("viewof tipPercent", ["Inputs"], _tipPercent);
//radio button μ•„λž˜μ˜ tipPercent = 20
main.variable(observer("tipPercent")).define("tipPercent", ["Generators", "viewof tipPercent"], (G, _) => G.input(_));

화면에 좜λ ₯ν•˜κ³ μ‹Άλ‹€λ©΄, viewofλ₯Ό μ‚¬μš©ν•΄μ•Όν•œλ‹€.

main
    .variable(observer("viewof tip"))
    .define("tip", ["amount", "tipPercent"], _tip);

web_application3.png

λ‘λ²ˆμ§Έ 문제, observableHQμ—μ„œ markdown으둜 μž‘μ„±ν•œ 뢀뢄이 좜λ ₯λ˜μ§€ μ•ŠλŠ”λ‹€.
μ™œ? index.html에 κ΄€λ ¨λœ 뢀뢄을 μž‘μ„±ν•˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬Έμ΄λ‹€.
function에 이름이 μ—†μ—ˆκΈ° λ•Œλ¬Έμ— μž‘μ„±ν•  수 μ—†μ—ˆλ‹€.
html, js에 μ•„λž˜μ˜ μ½”λ“œλ₯Ό μˆ˜μ • λ˜λŠ” μΆ”κ°€ν•œλ‹€.

html

<!-- html의 section-->
  <div id="markdown"></div>

<!-- html의 define -->
else if (name === "viewof markdown") {
    return new Inspector(document.getElementById("markdown"));
}

js

//js의 define 
//λ”°λΌμ„œ, μ•„λž˜μ˜ μ½”λ“œμ— (as-is)
 main.variable(observer()).define(["tipPercent", "amount", "tip", "md"], _4);
 //이름을 지어주고 (to-be)
main
    .variable(observer("viewof markdown"))
    .define(["tipPercent", "amount", "tip", "md"], _markdown);


//js의 function 
//μ•„λž˜μ˜ μ½”λ“œμ—(as-is)
function _4(tipPercent, amount, tip, md) {
  return md`A **${tipPercent}%** tip on **$${amount.toFixed(2)}** is **$${tip.toFixed(2)}**, 
  for a total of **$${(amount + tip).toFixed(2)}**`;
}

//이름을 지어쀀닀 (to-be)
function _markdown(tipPercent, amount, tip, md) {
  return md`A **${tipPercent}%** tip on **$${amount.toFixed(2)}** is **$${tip.toFixed(2)}**, 
  for a total of **$${(amount + tip).toFixed(2)}**`;
}

ν•„μš”μ—†λŠ” μ½”λ“œλŠ” μ§€μš°κ³ , μ›ν•˜λŠ” μ½”λ“œλŠ” λͺ¨λ‘ 좜λ ₯ν•  수 μžˆλ‹€.
web_application4.png

download codes from ObservableHQ

λΆˆν•„μš”ν•œ μ½”λ“œ 좜λ ₯

issue> λΆˆν•„μš”ν•œ λΆ€λΆ„κΉŒμ§€ λͺ¨λ‘ 좜λ ₯λœλ‹€.

web_application21.png
web_application22.png

fix > runtime을 μ°Έκ³ ν•˜μ—¬ ν•„μš”ν•œ λΆ€λΆ„λ§Œ 좜λ ₯λ˜λ„λ‘ μ½”λ“œλ₯Ό μˆ˜μ •ν•œλ‹€.

web_application23.png
web_application24.png

기본적인 κ΅¬μ‘°λŠ” λ‹€μŒκ³Ό κ°™λ‹€.

html 상단에
<div id=”function_name”><div>

<body>의 runtime.module μ•ˆμ—
if (name === "viewof function_name") {
  return new Inspector(document.getElementById("function_name"));
}

if문이 이미 μ‘΄μž¬ν•œλ‹€λ©΄, 
else if (name === "viewof function_name") {
  return new Inspector(document.getElementById("function_name"));
}

3개의 js 파일 export

기쑴의 μ½”λ“œλŠ” ν•˜λ‚˜μ˜ js 파일만 exportν•  수 있음. μ„Έ 개의 js νŒŒμΌμ„ export해야됨.
as-is
//index.js
export {default} from "./5a9ffc9992b0449e@7454.js";
//index.html
import define from "./index.js";

to-be
//index.js μ‚­μ œ
//index.html
import define from "./5a9ffc9992b0449e@7454.js";
import define from "./또 λ‹€λ₯Έ js 파일"

λ™μž‘μ„ μœ„ν•΄μ„œλŠ” ν•„μš”ν•˜μ§€λ§Œ, 좜λ ₯이 ν•„μš”μ—†λŠ” μ½”λ“œ


web_application25.png

λ™μž‘ν•˜κΈ° μœ„ν•΄μ„œλŠ” ν•„μš”ν•˜μ§€λ§Œ, 좜λ ₯이 ν•„μš”μ—†λŠ” μ½”λ“œκ°€ μžˆλ‹€. 
이 κ²½μš°μ—λŠ”, cssμ—μ„œ ν•¨μˆ˜μ˜ displayλ₯Ό none으둜 μ„€μ •ν•˜λ©΄ 좜λ ₯λ˜μ§€ μ•Šλ„λ‘ μˆ˜μ •ν•  수 μžˆλ‹€.

#mutableDataForMapUpdate {
  display: none;
}

#indexOfFormattedDates {
  display: none;
}
#colorChangeandTooltip {
  display: none;
}

#default_zoom_value {
  display: none;
}

web_application26.png