ReScript로 DOM 조작하기(1부)

때로는 단일 페이지 웹 애플리케이션을 작성하고 싶지만 React와 같은 프레임워크를 사용하는 대신 DOM을 직접 조작하고 싶을 수 있습니다.

우리가 구축할 프로젝트는 삼각 함수를 기반으로 두 방정식에 대한 매개변수를 요청한 다음 해당 방정식에서 극좌표 또는 리사주 도형을 그립니다.

설정

ReScript 프로젝트를 만들고 이름을 바꾼 다음 해당 디렉터리로 이동하여 시작합니다.

git clone https://github.com/rescript-lang/new-project
mv new-project domgraphs
cd domgraphs

src 디렉토리에는 Demo.res, ReScript 소스 파일 및 Demo.bs.js 생성된 JavaScript의 두 파일이 포함되어 있습니다. (bs는 BuckleScript를 나타냅니다. BuckleScript는 ReScript로 브랜드가 변경되었습니다.) .bs.js 파일을 제거하고 소스 파일의 이름을 바꿉니다.

rm src/Demo.bs.js
mv src/Demo.res src/DomGraphs.res

다음으로 HTML을 파일src/index.html에 넣습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DOM Graphs</title>
    <style type="text/css">
      #canvas {
        width: 450px;
        float: left;
        border: 1px solid black;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <h1>DOM Graphs</h1>
    <canvas id="canvas" width="400" height="400">
      Your browser does not support the &lt;canvas&gt; element :(
    </canvas>
    <div>
      <p><input type="text" size="3" id="factor1"/>
      <select id="fcn1">
        <option value="sin">sin</option>
        <option value="cos">cos</option>
      </select>
      (
        <input type="text" size="3" id="theta1"/>
        &theta; +
        <input type="text" size="3" id="offset1"/>&deg;
      )</p>

      <p><input type="text" size="3" id="factor2"/>
      <select id="fcn2">
        <option value="sin">sin</option>
        <option value="cos">cos</option>
      </select>
      (
        <input type="text" size="3" id="theta2"/>
        &theta; +
        <input type="text" size="3" id="offset2"/>&deg;
      )</p>

      <p>
        Type of graph:
        <input type="radio" value="polar" name="graphType" id="polar"/>
          <label for="polar">Polar</label>
        <input type="radio" value="polar" name="graphType" id="lissajous"/>
          <label for="lissajous">Lissajous</label>
      </p>

      <p><button id="draw" value="draw">Draw</button></p>
    </div>
    <script type="text/javascript" src="DomGraphs.bs.js"></script>
  </body>
</html>

끝에 있는 <script> 요소는 ReScript가 DomGraphs.res 파일에서 생성할 응용 프로그램 코드를 포함하는 JavaScript 파일의 이름을 제공합니다.

ReScript에는 DOM의 기본 조작을 위한 Dom 라이브러리가 포함되어 있지만 더 강력하고 편리하게 사용하려면 bs-webapi 라이브러리를 사용하는 것이 좋습니다. bs-webapi에 대한 종속성을 프로젝트의 bs-config.json 파일에 넣습니다.

  "bs-dependencies": [
    "bs-webapi"
  ],

bs-platform 및 bs-webapi 설치:

npm install # installs the ReScript platform
npm install --save bs-webapi

마지막으로 컴파일러에서 생성한 HTML 파일과 JavaScript를 가져와 하나의 멋진 웹 애플리케이션에 넣을 번들러가 필요합니다. 이 기사에서는 parcel 를 사용하고 있는데, 이는 바로 사용할 수 있고 많은 구성이 필요하지 않기 때문입니다. 모든 프로젝트에 대해 복제할 필요가 없도록 전역적으로 설치하십시오.

npm install --global parcel-bundler

DOM에 접근하기

자주 사용하게 될 bs-webapi의 일부 모듈과 이 프로그램에서 사용할 모듈을 살펴보겠습니다.

Webapi
├── Canvas
│   ├── Webapi.Canvas.Canvas2d
├── Dom
│   ├── Webapi.Dom.Attr
│   ├── Webapi.Dom.ChildNode
│   ├── Webapi.Dom.Document
│   ├── Webapi.Dom.Element
│   ├── Webapi.Dom.Event
│   ├── Webapi.Dom.EventTarget
│   ├── Webapi.Dom.HtmlElement
│   ├── Webapi.Dom.HtmlInputElement
│   ├── Webapi.Dom.MouseEvent
│   ├── Webapi.Dom.Node
│   ├── Webapi.Dom.Text
│   └── Webapi.Dom.Window

JavaScriptWindow.alert() 기능을 간단히 테스트해 보겠습니다. DomGraphs.res 파일의 코드를 다음 코드로 바꿉니다.

let testAlert = Webapi.Dom.Window.alert("It works!", Webapi.Dom.window)

bs-webapi 라이브러리는 대부분의 경우 작업 중인 요소(이 경우 경고에 사용하는 창)가 호출의 마지막 인수가 되도록 설정됩니다.

컴파일 및 번들링:

npm run build # or: bsb -make-world
parcel build src/index.html --public-url ./

parcel 명령은 애플리케이션의 진입점( src/index.html )과 JavaScript를 제공할 때 사용할 URL(이 경우 HTML( --public-url ./ )과 동일한 디렉토리)을 지정합니다. 이렇게 하면 cssnano 패키지가 로컬로 설치됩니다. --no-minify 플래그를 지정하여 이 로컬 설치를 방지할 수 있습니다.

이 단계가 완료되면 ReScript에서 생성된 JavaScript인 DomGraphs.bs.js 라는 파일과 번들 웹 앱이 포함된 dist라는 디렉터리가 표시됩니다.

$ ls dist
DomGraphs.bs.5acda38d.js  DomGraphs.bs.5acda38d.js.map  index.html

parcel 를 실행할 때마다 처리 중인 파일의 내용에 따라 번들 파일에 추가할 새 번호를 생성합니다. 여러 다른 .js 및 .js.map 파일이 dist 디렉토리에 축적되는 것을 방지하려면 재구축하기 전에 디렉토리를 제거할 수 있습니다. 다음은 정확히 이를 수행하는 bash 스크립트입니다.

#!/bin/bash

npm run build # or bsb -make-world
status=$?
if test $status -eq 0
then
  rm -rf dist
  parcel build src/index.html src/*csv --public-url ./
fi

모든 것이 잘 진행된 경우 브라우저에서 dist/index.html 파일을 열면 It works!를 알려주는 경고가 표시됩니다.

모든 것이 설정되었으므로 이제 프로젝트 코드 작성을 시작할 시간입니다.

Reference

이 문제에 관하여(ReScript로 DOM 조작하기(1부)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jdeisenberg/manipulating-the-dom-with-rescript-3llf

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

ReScript로 DOM 조작하기(1부)

설정

DOM에 접근하기

Reference

좋은 웹페이지 즐겨찾기