Paula의 회문

웹 애플리케이션

Elm은 안정적인 웹 애플리케이션을 만들기 위한 즐거운 언어예요. 친절한 오류 메시지, 뛰어난 성능, 작은 에셋, 그리고 런타임 예외가 없다는 점이 특징이에요.

아마 Elm에서 가장 유명하고 널리 모방된 부분은 The Elm Architecture일 거예요. 웹 애플리케이션을 구조화하는 단순한 패턴이며, 모든 Elm 웹 애플리케이션이 이 방식으로 작성돼요.

핵심 아이디어는 애플리케이션 상태를 나타내는 Model, 모델을 update하는 방법, 모델을 view하는 방법을 중심으로 코드를 구성한다는 거예요.

Model은 애플리케이션의 상태, 즉 애플리케이션에 필요한 모든 데이터를 담고 있어요. 텍스트 상자와 그 텍스트를 뒤집어서 보여 주는 텍스트가 있는 간단한 애플리케이션을 상상해 보면, 모델은 아래와 같아요. 이 예제는 Elm Guide에서도 볼 수 있어요.

type alias Model =
  { text : String
  }

update는 변경이 있을 때(예를 들어 사용자가 버튼을 클릭할 때) Msg와 함께 호출되는 함수예요. Msg와 현재 Model을 받아서 새로운 Model을 반환해요.

type Msg
  = TextChanged String

update : Msg -> Model -> Model
update msg model =
  case msg of
    TextChanged newText ->
      { model | text = newText }

view는 브라우저에서 사용자에게 보여 줄 HTML을 반환하는 함수예요. 현재 Model을 받아서 Html Msg(Elm이 HTML을 나타내기 위해 사용하는 타입)를 반환해요.

view : Model -> Html Msg
view model =
  Html.div []
    [ Html.input
      [ Html.Attributes.placeholder "Text to reverse"
      , Html.Attributes.value model.text
      , Html.Events.onInput TextChanged
      ]
      []
    , Html.div [] [ Html.text (String.reverse model.text) ]
    ]