-
[JS] SPA를 구현할 수 있는 Mithril.js 소개Dev/JS 2018. 6. 3. 14:08
Mithril.js ?
Mithril은 SPA를 구현할 수 있는 모던 클라이언트사이드 자바스크립트 프레임워크 입니다. Mithril은 용량이 작고, 빠를 뿐더러, 라우팅과
XHR 유틸을 지원합니다.
Mithril은 VImeo, Nike 와 같은 회사에서 사용하며, 오픈소스 플랫폼입니다.
만약 여러분이 어느정도 개발을 할 줄 알거나, Mithril이 다른 프레임워크들과 어떻게 다른지 궁금하다면
이 document를 참고하시면 될 것 같습니다.
Getting started
이 포스팅에서는 Mithril을 쉽게 사용하기 위한 방법을 제공하고 있습니다. 튜토리얼이라고 해서 별로 없을 것 같지만,
CDN을 사용하고, 라우팅 및 XHR이 포함된 API 거의 대부분을 사용하고 있습니다.
그럼 HTML 파일을 만들어 줍니다.
<body><script src="//unpkg.com/mithril/mithril.js"></script><script>var root = document.body// your code goes here!</script></body>아니면 codepen에서 포크하여 사용해도 좋습니다.
Hello World
이제 제일 쉬운 Hello world 찍기를 해보도록 하겠습니다. 다음 코드를 위에서 만들었던 HTML 파일에 넣어주세요.
<body><script src="//unpkg.com/mithril/mithril.js"></script><script>var root = document.bodym.render(root, "Hello world")</script></body>이제 방금 적었던 코드 밑에 (m.render(root, "Hello world")) 다음 코드를 작성해보세요.
m.render(root, "My first app")Mithiril은 HTML 페이지가 업데이트 되면 맹목적으로 처음부터 다시 로드하는 것이 아니라 텍스트를 업데이트하는
가장 효율적인 방법을 알아서 찾아줍니다.
DOM Element
위에서 작성한 텍스트를 <h1> 태그로 묶어주세요
m.render(root, m("h1", "my first app"))m() 함수는 원하는 HTML 구조를 사용할 때 쓸 수 있습니다. 따라서 클래스를 추가해야 하는 경우에는 이렇게 사용합니다.m("h1", {class: "title"}, "My first app")여러 요소를 사용하고 싶을 때는 [] 를 사용합니다.
[m("h1", {class: "title"}, "My first app"),m("button", "A button"),]//혹은
m("main", [m("h1", {class : "title"}, "My first app"),m("button", "A button")])와 같이 사용할 수 있습니다.
구성 요소
Mithril에는 view 라는 함수가 있습니다. 말 그대로 보여주기 위한 함수 이겠죠?
var Hello = {view: function () {return m("main", [m("h1", {class : "title"}, "My first App"),m("buton", "A button")])}}위와 같은 구성 요소를 활성화 하기 위해서는 m.mount 함수를 사용합니다.
m.mount(root, Hello)이렇게 하면 마크업이 다음과 같이 생성이 됩니다.
<main><h1 class = "title">My first App</h1><button>A button</button></main>m.mount 기능은 m.render 기능과 비슷합니다. 하지만 m.mount 은 HTML을 한번만 렌더링 하고, 위에서 언급했듯이
Mithril이 알아서 자동으로 렌더링을 해줍니다. 그것을 알아보기 위해 몇가지 이벤트를 추가해보겠습니다.
var count = 0 // added a variablevar Hello = {view: function() {return m("main", [m("h1", {class: "title"}, "My first app"),// changed the next linem("button", {onclick: function() {count++}}, count + " clicks"),])}}m.mount(root, Hello)button 요소의 onclick 이벤트는 Count 변수를 증가시키는 이벤트 입니다. 이제 버튼 요소에 Count 변수의
값을 렌더링 합니다.
이제 button을 클릭하면 button의 label이 업데이트 됩니다. 이를 통해 m.render() 하여 count 변수의 변경 사항을
HTML에 직접 적용할 필요가 없어졌습니다. m.mount면 깔끔하게 자동으로 해결할 수 있습니다.
Mithril은 렌더링 업데이트를 할때 매우 빠른것을 볼 수 있습니다. 왜냐하면 Mithril 은 절대적으로 필요한 DOM 부분만을
다루기 때문입니다. 그래서 위의 예처럼 버튼을 클릭하면 텍스트가 HTML에 직접 업데이트 되는 것이 아니라 DOM Mithril 위에
업데이트가 되는 것 입니다.
See the Pen Mithril Component Example by Pat Cavit (@tivac) on CodePen.
라우팅
라우팅이랑 여러 화면이 있는 프로그램에서 다른 화면으로 이동하는 것을 말합니다.
라우팅을 사용하기 위해 먼저 스플래쉬 페이지를 추가해보도록 하겠습니다. 먼저, 컴포넌트를 작성해주세요.
var Splash = {view: function() {return m("a", {href: "#!/hello"}, "Enter!")}}이 컴포넌트는 단순히 링크를 렌더링 합니다. #!/hello 에서 #! 부분은 hashbang 이라고 알려져 있으며,일반적으로 SPA에서 사용되는 페이지의 경로를 나타내는데 사용됩니다. (위의 예제에서는 /hello 의 경로)이제 우리는 여러개의 화면을 가지므로, m.mount 대신에 m.route를 사용하도록 하겠습니다.m.route(root, "/splash", {"/splash" : Splash,"/hello" : Hello,})m.route 함수는 m.mount 함수가 가지고 있는 자동 렌더링 기능이 있으며, url 인식도 가능합니다.
"/splash" 직후, root URL의 hashbang 다음 경로로 리다이렉션 합니다. 따라서 브라우저에서 페이지를 열면
URL이 http://localhost 로 리다이렉션 됩니다. -> http://localhost/#!/splash
또한 예상대로 스플레시 페이지의 링크를 클릭하면 좀전에 에 만들었던 클릭 카운터 화면으로 이동합니다.
그러면 이제 URL은 http://localhose/#!/hello 가 될 것입니다. 브라우저에 있는 이전/이후 페이지 버튼을 눌러서
이리저리 탐색해보세요.
See the Pen Mithril Routing Example by Pat Cavit (@tivac) on CodePen.
XHR
기본적으로, XHR은 서버와 통신하는 방법을 나타냅니다..
클릭수를 변경하여 서버에 데이터를 저장하도록 하겠습니다. 서버의 경우 간단하게 설계된 REST API 인 REM을
사용합니다.
먼저, m.request 를 사용하여 호출하는 함수를 만들어보도록 하겠습니다. url 의 경우 리소스를 가리키는 엔드포인트를
나타냅니다. method 는 액션의 타입을 가리킵니다. (PUT 메소드를 사용합니다.) 그리고 data 는 우리가 엔드포인트로 보내는 것을
페이로드 하는 것을 나타냅니다. 그리고 withCredentials 는 쿠키 사용 여부를 가리킵니다.
var count = 0var increment = function() {m.request({method: "PUT",url: "//rem-rest-api.herokuapp.com/api/tutorial/1",data: {count: count + 1},withCredentials: true,}).then(function(data) {count = parseInt(data.count)})}증가하는 함수를 호출하여 객체를 증가하게 해보세요 " /api/tutorials/1" url을 사용해서요.
이 엔드포인트는 count 와 같은 값을 보내줍니다. 이때 count 변수는 request 가 정상적으로 요청이 됬을 때, 그리고
서버에서 바로 응답이 왔을 때만 업데이트 됩니다.
이제 이벤트 핸들러를 count 변수를 직접 증가하게 하는 방법이 아닌, increment 함수를 써서 호출하게 해보세요.
var Hello = {view: function() {return m("main", [m("h1", {class: "title"}, "My first app"),m("button", {onclick: increment}, count + " clicks"),])}}이제, 버튼을 누르면 count가 업데이트 됩니다.
우리는 HTML을 어떻게 만들고, 어떻게 업데이트 하고, 컴포넌트를 만들고, SPA 를 구현하기 위한 경로, 마지막으로 XHR을 통해 실
제 서버와 통신하는 방법에 대해 알아보았습니다.
우리가 한 이 튜토리얼은 실제 응용 프로그램에서 FE 단을 작성하기에 충분합니다. 이제 Mithril API의 기본 사항에익숙해졌으면,
간단한 어플리케이션 튜토리얼도 확인해 보세요! 이곳에서는 실제 어플리케이션을 구현하는 과정에 대해 나와있습니다!
'Dev > JS' 카테고리의 다른 글
[JS] React.js Fragment 알아보기 (2) 2018.06.03 [JS] React.js Context API 알아보기 (0) 2018.06.03 [JS]Javascript 이벤트 전파 막기 (0) 2018.05.21 [JS] Javascript Propagation :: 이벤트 버블링, 이벤트 타겟, 이벤트 캡쳐 (0) 2018.05.21 [JS]react-router 적용해보기 (0) 2018.05.21
