[Elm] 개발환경 구축 및 시작 (Visual Studio Code)

#Elm

비주얼 스튜디오 코드를 통해 elm 개발환경을 구축하고 간단한 코드를 돌려보도록 하겠다.
먼저 elm이 설치되어있어야 한다.
https://blog.naver.com/sssang97/221844007862

그리고 자동완성이나 하이라이팅 등을 처리해줄 플러그인을 설치한다.

저기서 Elm tooling이라는걸 깔아주면 된다.
맨 위에건 deprecated된 거고, 두번째 것이 개선된 새 버전이다.

다 됐으면 프로젝트 폴더를 알아서 잘 만들고, 거기서 elm init을 친다.

그럼 src 디렉터리와 설정용 json 파일이 생성될 것이다.

src는 elm 소스파일들이 들어갈 공간이다.

elm을 작성하기에 앞서, 먼저 html을 짜넣고 테스트를 한번 해보자

index.html을 하나 짜넣고

json 파일이 있는 위치에서 elm reactor 명령어를 사용하면

로컬 서버가 작동한다.

Elm 적용하기

그럼 이제 elm을 적용해서 간단한 Hello World 프로그램을 작성해보자
먼저 src에 소스파일을 하나 만든다.

elm의 소스파일명은 대문자로 시작해야 한다.

코드는 이렇다.
진입점 함수는 렌더링될 전체 항목을 반환해야 한다.
여기선 h1 요소 하나만 만들어서 반환했다.
첫번째 인자는 태그 속성, 두번째 인자는 내부 태그들의 리스트다.

이번엔 뼈대가 될 html 소스를 재작성해보자
elm 소스는 main.js이라는 이름으로 빌드될 것이라 가정한다.

elm의 main 함수에서 반환될 태그모음을 받을 곳을 직접 지정해줘야 한다.
그래서 "root"라는 div를 하나 놓고, Elm.Main.init의 node 인자로 넣어줬다.

다 됐으면, 방금 짠 elm 소스를 빌드하자.
make 명령을 사용한다.

자 이제, 실행만 하면 된다.

그럼

뚜둔