Elm 입문서

Elm은 JavaScript로 컴파일 되는 함수형 언어입니다. 웹사이트와 웹앱을 만드는 도구로서 React와 같은 프로젝트들과 경쟁합니다. Elm은 단순함, 쉬운 사용 그리고 우수한 도구들을 매우 중요시 합니다.

본 입문서는:

• Elm로 프로그래밍의 기본을 알려줍니다.
• Elm 아키텍쳐로 인터렉티브 앱을 만드는 것을 보여줍니다.
• 모든 언어로 프로그래밍할때 적용되는 일반적 원리와 패턴을 강조합니다.

끝 무렵에는 Elm으로 멋진 웹앱을 만들 수 있을 뿐만 아니라, Elm을 쓰기 좋게 만들었던 핵심 아이디어들과 패턴을 이해할 수 있을거에요.

이 문서를 읽고 있는 당신! 아직 확신이 서질 않는다면, 제가 확실히 보증할 수 있어요. Elm으로 한번 프로젝트를 만들어 보면 앞으로는 더 나은 JavaScript 코드와 React 코드를 짤 수 있어요. 여기서 배운 개념들은 다른 곳에도 쉽게 적용할 수 있거든요!

간단한 예제

물론 저는 Elm이 좋다고 생각합니다. 한번 직접 보시겠어요.

여기 간단한 카운터 예제가 있습니다. 한번 코드를 보세요, 단순히 카운터의 숫자를 올리고 내립니다:

import Html exposing (Html, button, div, text)
import Html.App as App
import Html.Events exposing (onClick)

main =
  App.beginnerProgram { model = 0, view = view, update = update }

type Msg = Increment | Decrement

update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

update와 view이 완전히 분리된 것에 주목해주세요. 선언적으로 HTML 코드를 작성하면, Elm이 알아서 DOM을 처리해줍니다.

왜 함수형 언어인가?

함수형 언어에 대해서 여태껏 들었던 말들은 잊어주세요. 어려운 말들, 이상한 개념들, 형편없는 도구들... 으! Elm은:

• 실제로 실행할 때 런타임에러가 하나도 없습니다. null도 없고 undefined도 없어요.
• 친절한 에러 문구는 기능 구현에 집중하도록 도와줍니다.
• 앱이 아무리 커져도 잘 설계된 코드가 유지됩니다.
• 시멘틱 버저닝이 모든 Elm 패키지에 자동으로 적용되어있습니다.

그 어떠한 JS 라이브러리를 사용하여도 이런 장점을 제공할 수 없습니다. Elm에서는 자유롭고 쉽게 누리는 이러한 장점들은 40년 이상의 노력으로 만들어진 함수형 타입 언어 위에서 빌드되기 때문입니다. 실질적 효용은 본 입문서를 읽는 몇 시간만큼의 값어치를 합니다.

Elm을 쉽게 배우고 사용하는 것에 크게 신경썼습니다. 그러니 한번 Elm을 사용해보는 것을 부탁드려요. 아마 깜짝 놀라실거에요!