Elm Language 튜토리얼
Elm 언어 시작하기
수색…
비고
[Elm] [1]은 JavaScript로 컴파일되는 친숙한 함수형 프로그래밍 언어입니다. Elm은 브라우저 기반 GUI, 단일 페이지 응용 프로그램에 중점을 둡니다.
사용자는 대개 다음과 같이 칭찬합니다.
- 런타임 예외는 없습니다.
- 최고의 컴파일러 오류
- 리팩토링의 용이성.
- 표현형 시스템
- Elm Architecture 는 Redux가 영감을 얻은 것입니다.
버전
| 번역 | 출시일 |
|---|---|
| 0.18.0 | 2016-11-14 |
| 0.17.1 | 2016-06-27 |
| 0.17 | 2016-05-10 |
| 0.16 | 2015-11-19 |
| 0.15.1 | 2015-06-30 |
| 0.15 | 2015-04-20 |
설치
Elm을 사용하여 개발을 시작하려면 elm-platform 이라는 도구 세트를 설치해야 합니다 .
여기에는 elm-make , elm-reactor , elm-repl 및 elm-package가 포함 됩니다.
이 모든 도구는 CLI를 통해 사용할 수 있습니다. 즉, 터미널에서 사용할 수 있습니다.
다음 방법 중 하나를 선택하여 Elm을 설치하십시오.
설치 프로그램 사용
공식 웹 사이트 에서 설치 프로그램을 다운로드하고 설치 마법사를 따르십시오.
npm 사용
노드 패키지 관리자 를 사용하여 Elm 플랫폼을 설치할 수 있습니다.
전역 설치 :
$ npm install elm -g
로컬 설치 :
$ npm install elm
로컬로 설치된 Elm 플랫폼 도구는 다음을 통해 액세스 할 수 있습니다.
$ ./node_modules/.bin/elm-repl # launch elm-repl from local node_modules/
자작 나무 사용하기
$ brew install elm
elm-use를 사용하여 버전 간 전환
elm-use를 설치하십시오.
$ npm install -g elm-use
이전 또는 이후 버전의 느릅 나무로 전환하십시오
$ elm-use 0.18 // or whatever version you want to use
추가 읽기
첫 번째 프로젝트를 초기화하고 빌드 하는 방법에 대해 알아보십시오.
안녕하세요 세계
초기화 및 빌드 에서이 코드를 컴파일하는 방법을 참조하십시오.
import Html
main = Html.text "Hello World!"
편집인
원자
라이트 테이블
숭고한 텍스트
정력
이맥스
IntelliJ IDEA
괄호
VS 코드
초기화 및 빌드
컴퓨터에 Elm 플랫폼이 설치되어 있어야하며, 다음 자습서는 사용자가 터미널에 익숙하다는 가정하에 작성되었습니다.
초기화
폴더를 만들고 터미널로 폴더를 탐색하십시오.
$ mkdir elm-app
$ cd elm-app/
Elm 프로젝트를 초기화하고 핵심 의존성을 설치하십시오 :
$ elm-package install -y
elm-package.json 및 elm-stuff 폴더가 프로젝트에 나타나야합니다.
애플리케이션 Main.elm 대한 진입 점을 작성하고 Hello World 예제를 붙여 넣습니다.
프로젝트 구축
첫 번째 프로젝트를 빌드하려면 다음을 실행하십시오.
$ elm-make Main.elm
그러면 Main.elm 파일 (및 모든 종속성)이 JavaScript로 컴파일되고 HTML에 인라인되어 index.html 이 생성됩니다. 브라우저에서 열어보십시오!
이 오류와 함께 실패하면 I cannot find module 'Html'. Elm의 최신 버전을 사용하고 있지 않다는 의미입니다. Elm을 업그레이드하고 첫 번째 단계를 다시 실행하거나 다음 명령을 사용하여 문제를 해결할 수 있습니다.
$ elm-package install elm-lang/html -y
자신 만의 index.html 파일 (예 : 포트 작업시)이있는 경우 Elm 파일을 JavaScript 파일로 컴파일 할 수도 있습니다.
$ elm-make Main.elm --output=elm.js
HTML에 임베딩 하는 예제의 추가 정보.
스타일 가이드 및 느릅 나무 형식
공식 스타일 가이드는 홈페이지에 있으며 일반적으로 다음과 같이 사용됩니다.
- 가독성 (compactness 대신)
- 수정의 용이성
- 깨끗한 diffs
즉, 예를 들면 다음과 같습니다.
homeDirectory : String
homeDirectory =
"/root/files"
evaluate : Boolean -> Bool
evaluate boolean =
case boolean of
Literal bool ->
bool
Not b ->
not (evaluate b)
And b b' ->
evaluate b && evaluate b'
Or b b' ->
evaluate b || evaluate b'
다음보다 나은 것으로 간주됩니다.
homeDirectory = "/root/files"
eval boolean = case boolean of
Literal bool -> bool
Not b -> not (eval b)
And b b' -> eval b && eval b'
Or b b' -> eval b || eval b'
tool elm-format 은 Go 언어의 gofmt 와 비슷한 방식 으로 소스 코드를 자동으로 (일반적으로 저장시) 포맷하여 도움이됩니다. 다시 말하지만, 근본적인 가치는 탭과 공백 또는 들여 쓰기 길이 와 같은 다양한 문제에 대한 일관된 스타일 과 저장 인수 및 flamewars를 갖는 것 입니다.
Github 저장소 의 지침 에 따라 elm-format 설치할 수 있습니다. 그런 다음 편집기 를 구성하여 Elm 파일을 자동으로 elm-format FILE_OR_DIR --yes 하거나 elm-format FILE_OR_DIR --yes 수동으로 실행하십시오.
HTML에 삽입
Elm 코드를 기존 HTML 페이지에 삽입하는 세 가지 방법이 있습니다.
body 태그에 포함
Hello World 예제를 elm.js 파일로 컴파일했다고 가정하면 Elm이 <body> 태그를 인수하도록 할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script src="elm.js"></script>
<script>
Elm.Main.fullscreen()
</script>
</body>
</html>
경고 : 때로는 일부 크롬 확장이 <body> 와 혼동되어 앱을 프로덕션 환경에서 중단시킬 수 있습니다. 항상 특정 div에 포함시키는 것이 좋습니다. 더 많은 정보는 여기에 있습니다 .
Div (또는 다른 DOM 노드)에 포함
또는 구체적인 HTML 요소를 제공함으로써 Elm 코드를 특정 페이지 요소에서 실행할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<div id='app'></div>
<script src="elm.js"></script>
<script>
Elm.Main.embed(document.getElementById('app'))
</script>
</body>
</html>
웹 작업자로 퍼가기 (UI 없음)
느릅 나무 코드는 작업자로 시작하여 포트를 통해 통신 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Hello Worker</title>
</head>
<body>
<script src="elm.js"></script>
<script>
var app = Elm.Main.worker();
app.ports.fromElmToJS.subscribe(function(world) {
console.log(world)
});
app.ports.fromJSToElm.send('hello');
</script>
</body>
</html>
REPL
Elm에 대해 배울 수있는 좋은 방법은 REPL (Read-Eval-Print Loop)에 표현식을 작성하는 것입니다. elm-app 폴더 ( 초기화 및 빌드 단계에서 생성 한 콘솔)에서 콘솔을 열고 다음을 시도하십시오.
$ elm repl
---- elm-repl 0.17.1 -----------------------------------------------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> 2 + 2
4 : number
> \x -> x
<function> : a -> a
> (\x -> x + x)
<function> : number -> number
> (\x -> x + x) 2
4 : number
>
elm-repl 은 실제로 매우 강력한 도구입니다. 다음 코드를 사용하여 elm-app 폴더 내에 Test.elm 파일을 생성한다고 가정 해 보겠습니다.
module Test exposing (..)
a = 1
b = "Hello"
자, 이제 REPL (열린 상태로 유지)으로 돌아가서 다음을 입력하십시오 :
import Test exposing (..)
> a
1 : number
> b
"Hello" : String
>
Test.elm 파일에 새 정의를 추가하면 더욱 인상적입니다.
s = """
Hello,
Goodbye.
"""
파일을 저장하고 다시 REPL로 돌아가서 Test 다시 가져 오지 않고 바로 새 정의를 사용할 수 있습니다.
> s
"\nHello,\nGoodbye.\n" : String
>
여러 행에 걸쳐있는 표현식을 작성하고자 할 때 매우 편리합니다. 또한 방금 정의한 함수를 신속하게 테스트하는 데 매우 유용합니다. 파일에 다음을 추가하십시오.
f x =
x + x * x
저장하고 REPL로 돌아갑니다.
> f
<function> : number -> number
> f 2
6 : number
> f 4
20 : number
>
가져온 파일을 수정하고 저장할 때마다 REPL로 돌아가서 아무 것도 시도하지 않으면 전체 파일이 다시 컴파일됩니다. 따라서 코드에서 발생한 오류를 알려줍니다. 이걸 더해:
c = 2 ++ 2
시도해보십시오 :
> 0
-- TYPE MISMATCH -------------------------------------------------- ././Test.elm
The left argument of (++) is causing a type mismatch.
22| 2 ++ 2
^
(++) is expecting the left argument to be a:
appendable
But the left argument is:
number
Hint: Only strings, text, and lists are appendable.
>
REPL에 대한 소개를 끝내기 위해 elm-repl 은 elm package install 설치 한 패키지에 대해서도 알고 있음을 추가합니다. 예를 들면 :
> import Html.App
> Html.App.beginnerProgram
<function>
: { model : a, update : b -> a -> a, view : a -> Html.Html b }
-> Platform.Program Basics.Never
>
로컬 빌드 서버 (느릅 나무 반응기)
Elm Reactor는 애플리케이션 프로토 타이핑을위한 필수 도구입니다.
Http.App.programWithFlags 또는 Ports를 사용하는 경우 Elm Reactor와 함께 Main.elm 을 컴파일 할 수 없습니다.
elm-reactor를 projects 디렉토리에서 실행하면 프로젝트 탐색기가있는 웹 서버가 시작되어 모든 별도의 구성 요소를 컴파일 할 수 있습니다.
코드를 변경하면 페이지를 새로 고침 할 때 업데이트됩니다.
$ elm-reactor # launch elm-reactor on localhost:8000
$ elm-reactor -a=0.0.0.0 -p=3000 # launch elm-reactor on 0.0.0.0:3000