User Tools

Site Tools


lecture:clojurescript:hello-world-by-scratch

Hello world 프로젝트 만들기

1. 우선 clojure project를 만든다.

> lein new hello-world
> cd hello-world

lein new로 생성된 폴더 구조는 아래와 같다.

hello-world/
├── LICENSE
├── README.md
├── doc
│   └── intro.md
├── project.clj
├── resources
├── src
│   └── hello_world
│       └── core.clj
└── test
    └── hello_world
        └── core_test.clj

2. project.clj에 clojurescript dependency와 lein-cljsbuild plugin을 추가한다.

lein으로 만든 project에 관한 모든 설정은 project.clj 파일에서 관장한다. 다른 언어들에서는 프로젝트를 관장하는 파일이 주로 xml로 별도의 언어로 설정하지만, 클로저에서는 project를 설정 및 관리하는 파일조차도 클로저 파일이다. 이것은 클로저의 code as data로서의 특성을 십분 활용한 것이다. 즉 클로저에서는 코드가 데이타의 선언으로 작성하는 것이 가능하기 때문에, xml에서 데이타를 선언하는 기능을 클로저 코드 자체가 할 수 있는 것이다. 다른 언어들(code as data가 되지 않는)이 데이타 선언을 위해 별도의 언어로 된 구성파일을 만드는 것은 불가피한 것이다.

처음 lein new 하면 clojure 컴파일러만 포함된다. clojurescript를 컴파일하기 위해서는 다음 2가지를 기본적으로 추가해 주어야 한다.

  • clojurescript 컴파일러 : dependency에 추가되어 clojurescript 컴파일 기능을 제공한다.
  • lein-cljsbuild 플러그인 : plugin에 추가되어 clojurescript 컴파일을 자동화한다.

다음은 project.clj에 clojurescript dependency와 lein-cljsbuild plugin을 project.clj에 포함한 것이다.

(defproject hello-browser "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.5.1"]
                 [org.clojure/clojurescript "0.0-2202"]]
  :plugins [[lein-cljsbuild "0.2.7"]])

위에서 :dependencies는 해당 프로젝트의 소스에서 사용하는 라이브러리를 추가하는 곳이다. 이 프로젝트에서는 clojure 버전 1.5.1과 clojurescript 버전 0.0-2202 이 추가되었다. 컴파일러가 라이브러리로 포함되는 것이 이상해 보일 수도 있다. 하지만 클로저에서는 언어의 기능을 라이브러리로 제공하는 것이 가능하다.

:plugins는 해당 프로젝트 소스에서는 사용하지 않고, 다만 lein 프로젝트에서만 사용하는 것으로, 프로젝트 관리를 편하게 해주는 다양한 기능을 제공해주는 플러그인들을 추가하는 항목이다.현재는 lein-cljsbuild 버전 0.2.7 플러그인이 포함되었다.

clojurescript와 lein-cljsbuild의 최신 버젼은 다음 링크에서 가져온다.

3. 소스 폴더 구조 잡기

lein new를 하면 보통 소스 폴더를 잡는 방법은 다양할 수 있지만, 가장 일반적인 구조중 하나로 다음과 같이 만들어 보자.

cd src
mkdir clj
mkdir cljs
mkdir clj/hello-world
mkdir cljs/hello-world
mv hello-wordl/core.clj clj/hello-world
touch cljs/hello-world/core.cljs

아래는 새로 잡힌 src 폴더 구조이다.

src
├── clj
│   └── hello-world
│       └── core.clj
└── cljs
    └── hello-world
        └── core.cljs

여러가지 구조중 이 구조가 가장 마음에 들며, 여러 다른 클로저 프로젝트들도 상당수가 이런 구조를 따르는 것으로 알고 있다.

이 구조의 장점은 *.clj 파일이 clj 폴더에, *.cljs 파일이 cljs 폴더에 배치되고, 각 clj와 cljs 폴더 밑에 루트폴더 hello-world가 있다는 점이다. hello-world 폴더는 *.clj와 *.cljs의 파일의 이름공간의 루트가 될 것이다.

core.clj 파일은 나중에 서버 코드가 될 것이지만, 현재의 예제에서는 사용되지 않는다.

4. clojurescript의 build option 설정하기

다음과 같이 프로젝트 build option을 설정한다.

  :source-paths ["src/clj"]
  
  :cljsbuild {
    :builds [{
        :source-paths ["src/cljs"]
        :compiler {
          :output-dir "resources/public/js/out"
          :output-to  "resources/public/js/project-name.js"
          :optimizations :none
          :externs ["resources/public/js/jquery/jquery-1.11.1.min.js"]
          :source-map true
          :pretty-print true}}]})

:source-paths는 기본으로 src였다. 그런데 우리는 *.clj 파일의 위치를 src/clj로 이동했으므로 lein에게 이 변경 사실을 알려주어야 한다.

:cljsbuild는 lein-cljsbuild 플러그인에게 현재의 clojurescript 빌드를 위한 프로젝트 구성을 알려주는 항목이다.

:source-paths는 역시 lein-cljsbuild 플러그인에 *.cljs 파일의 폴더를 알려주는 것이고, :compilter는 lein-cljsbuild 플러그인이 clojurescript 컴파일러를 호출할 때 사용하는 파라미터들이다.

5. index.html 파일 만들기

clojurescript를 컴파일하면 javascript 파일이 나온다. 이것을 실행시키기 위해서 브라우저를 이용한다면 역시 index.html 파일이 있어야 한다.

다음과 같이 resources/public 폴더에 다음과 같이 index.html 파일을 만든다.

mkdir resources/public
touch resources/public/index.html

index.html 파일의 내용은 다음과 같다.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js/out/goog/base.js"></script>
    <script type="text/javascript" src="js/hello.js"></script>
    <script type="text/javascript">goog.require('hello.core');</script>
  </head>
  <body>
    <script type="text/javascript">hello_world.core/main();</script>

  </body>
</html>

6. core.cljs 작성하기

(defn ^:export main []
  (str "Hello world"))

7 clojurescript 컴파일하기

lein cljsbuild once
lecture/clojurescript/hello-world-by-scratch.txt · Last modified: 2019/02/04 14:26 (external edit)