shadow-cljs 반응 프로젝트 설정

5661 단어 reagentreactclojurescript

🚀 프로젝트 만들기



첫 번째 단계는 프로젝트 생성입니다.

npx create-cljs-project my-project


이 명령은 최소한의 필수 구조로 프로젝트 my-project를 생성하고 shadow-cljs의 적절한 작업을 위해 필요한 개발 종속성을 설치합니다.

├── package-lock.json
├── package.json
├── shadow-cljs.edn
└── src
    ├── main
    └── test


shadow-cljs.edn은 ClojureScript 프로젝트용configuration file입니다.

;; shadow-cljs configuration
{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

:dependencies
 []

:builds
 {}}


♺ ClojureScript를 JavaScript로 컴파일



이제 진입점 ClojureScript 파일을 생성해 보겠습니다.

touch ./src/main/core.cljs


최소한의 상용구 코드를 추가하십시오.

;; ./src/main/core.cljs
(ns core)

(defn main []
  (js/console.log "Hello World!"))

(main)


이제 프로젝트를 빌드하는 방법을 지정해야 합니다. 이렇게 하려면 shadow-cljs.edn 파일의 :builds 섹션을 수정해야 합니다.

...

:builds
 {: **app** {:target : **browser**
        :modules {: **main** {:entries [**core**]}}}}}


  • :앱이 빌드 ID임
  • : 브라우저가 생성된 JavaScript 파일의 대상 유형임
  • :main은 생성된 JavaScript 파일의 이름입니다
    • .
  • 코어가 ClojureScript 항목 네임스페이스임

    • :output-dir "public/js"를 추가하여 생성된 파일의 출력 디렉터리를 명시적으로 지정할 수 있습니다. 기본적으로 shadow-cljs는 public/js를 사용합니다.

    이제 ClojureScript를 JavaScript 파일로 컴파일할 수 있습니다.

    npx shadow-cljs compile **app**

shadow-cljs - config: /private/tmp/my-project/shadow-cljs.edn
shadow-cljs - connected to server
[:app] Compiling ...
[:app] Build completed. (43 files, 0 compiled, 0 warnings, 0.33s)


    👾 서버 시작



    이제 정적 파일을 제공할 개발 서버를 설정할 준비가 되었습니다. 이를 위해 우리는 shadow-cljs.edn으로 돌아가서 dev 서버에 대한 정보를 추가해야 합니다.

    :dev-http {8000 "public"}


  • 8000은 http 서버에서 사용할 포트입니다
    • .
  • public은 정적 파일의 폴더 이름입니다
    • .

    이제 watch 명령을 사용하여 시작할 수 있습니다.

    npx shadow-cljs **watch** app


    Start http server watchcommand 옆에 ClojureScript one을 변경할 때 JavaScript 파일을 자동으로 다시 컴파일합니다.

    열 수 있고http://localhost:8000 서버가 실행 중임을 확인할 수 있습니다.

    Not found. Missing index.html.


    그러나 index.html 누락에 대해 불평합니다. 공용 폴더에 index.html을 추가해 보겠습니다.

    touch ./public/index.html


    생성된 JavaScript 파일을 참조하여 최소한의 마크업을 추가합니다.

    <!DOCTYPE html>
<html lang="">
  <head>
    <title>my-project</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app"></div>
    <script src=" **js/main.js**" type="text/javascript"></script>
  </body>
</html>


    브라우저에서 개발자 도구를 열면 "Hello World!"가 표시됩니다. 브라우저 콘솔의 메시지. core.cljs 파일을 열고 메시지를 변경할 수 있습니다. 브라우저는 내장된 Shadow-cljs 라이브 업데이트 기능을 통해 변경 사항을 자동으로 선택하고 새 메시지를 표시합니다.

    📦 React를 종속성으로 추가



    shadow-cljs는 npm 종속성을 지원하므로 여기서 npm을 통해 react를 설치할 수 있습니다.

    npm install react


    이제 ClojureScript 애플리케이션에서 React를 사용할 수 있습니다. 브라우저 콘솔에 React 버전을 출력해 봅시다. 이를 위해 core.cljs 파일을 수정합시다.

    ;; ./src/main/core.cljs
(ns core **(:require ["react" :as react])**)

(defn main []
  (js/console.log **(.-version react)**))

(main)


    서버를 다시 시작하지 않고 콘솔을 보면 이제 React 버전이 표시되는 것을 볼 수 있습니다.

    [Log] shadow-cljs: load JS – "node_modules/react/index.js"
[Log] shadow-cljs: load JS – "core.cljs"
[Log] 17.0.2


    같은 방식으로 react-dom을 설치하고 "Hello World!"를 렌더링할 수 있습니다.

    (ns core (:require 
           ["react" :as react]
           **["react-dom" :as react-dom]**))

(defn main []
  **(let [app-node (.getElementById js/document "app")]  
 (.render react-dom "Hello World!" app-node))** )

(main)


    🎸 시약



    우리는 ClojureScript에서 원시 react 및 react-dom을 사용할 수 있지만 Reagent를 사용하는 것이 훨씬 더 좋고 덜 장황합니다. Reagent는 React를 위한 최소한의 ClojureScript 인터페이스입니다.

    Reagent는 ClojureScript 모듈이므로 npm을 통해 설치할 수 없습니다. 설치하려면 shadow-cljs.edn에 필요한 버전을 정의해야 합니다.

    :dependencies
 [**[reagent "1.1.1"]**]


    시약은 React 및 React DOM 패키지에 종속되므로 여전히 NPM을 통해 설치해야 합니다.

    core.cljs 코드를 업데이트하고 React on Reagent를 교체해 보겠습니다.

    ;; ./src/main/core.cljs
(ns core (:require 
          **[reagent.core :as r]  
 [reagent.dom :as rdom]** ))

**(defn app []  
 [:b "Hello World!"])**  

(defn main []
  (let [app-node (.getElementById js/document "app")]
    **(rdom/render [app] app-node)**))

(main)
    GraalVM을 사용하여 Clojure를 네이티브 바이너리로 컴파일
    【Unity】플레이중에 되감거나 1컷을 루프 재생하는 에디터 확장

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage