악역영애의 개발일지

mustache란 

{{ }} 의 형태로 이루어진 탬플릿엔진이다.

{{의 모양이 수염처럼 생겼다고해서 (진짜 극 핵 노잼) 붙여진 이름인데 다양한 언어들을 지원한다.(c, java, ruby...)

잠깐, Template Engin 이란

흔히 알고있는 jstl 도 여기에 속하는데, 프로그램 로직과 프리젠테이션의 계층을 분리하기위한 수단이라고 한다. 

쉬운 말로 스프링을 한다 치면 컨트롤러에서 model.setAttribute해서 view로 dto를 보낼때 view에서 받아야하는데, 페이지구성은 똑같고 값만 다른데 굳이 뷰를 또 만들어야해?! 라는 의문점을 해소시켜주는게 템플릿엔진.

템플릿엔진으로 html을 이용해서 다 짜놓고 해당 파일을 첨부만 해주고 파라메터 변수명을 넣어주기만 하면 되는것!

템플릿엔진중에서 mustache는 logic-less를 지양하는데, 예를들면 jstl은 <c:Foreach item.. 등의 문법을 사용하여 로직을 짜지만 mustache는 뷰는 뷰의 역할에만 충실하기를 원한다.

mustache 예제 (공식문서 발췌)

//Given the following hash:
{
  "name": "Chris",
  "value": 10000,
  "taxed_value": 10000 - (10000 * 0.4),
  "in_ca": true
}

//A typical Mustache template:
Hello {{name}}
You have just won {{value}} dollars!
{{#in_ca}}
Well, {{taxed_value}} dollars, after taxes.
{{/in_ca}}

//will produce the following:
Hello Chris
You have just won 10000 dollars!
Well, 6000.0 dollars, after taxes.
{{!이건 주석 표시지롱}}

이런식으로, jstl과 비슷한 사용법이다.

{{! 는 주석표시이다.

존재하지 않는 변수명을 썼을때와 {{{ 세개 썼을때

//Template:
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}

//Hash:
{
  "name": "Chris",
  "company": "<b>GitHub</b>"
}

//Output:
* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>

변수명이 없으면 아무런 값도 출력되지 않는다.모든 변수는 기본적으로 html로 이스케이프 되는데 {{{, {{&를 사용하여 이스케이프 처리를 막을 수 있다. 

리스트

//Template:
{{#repo}}
  <b>{{name}}</b>
{{/repo}}

//Hash:
{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" }
  ]
}

//Output:
<b>resque</b>
<b>hub</b>
<b>rip</b>

{{#변수명}} 으로 시작하고 {{/변수명}} 으로 끝나는 공간을 섹션이라고 하는데 조건문이나 반복문 대신 사용되며

변수가 배열일 경우 반복문으로 사용되고 그렇지않으면 조건문으로 사용된다.

조건문 if 의 결과가 false 혹은 0 혹은 null 일 경우 거짓이므로 섹션의 내용이 출력되지 않는다. 

섹션내의 다른루트

{
  "person" : {"name" : "Judy"},
  "drink" : {"name" : "sprite"}
}

{{#color}}
  {{name}}의 음료수는 {{company.name}}입니다.
{{/color}}

//output
Judy의 음료수는 sprite 입니다.

{{# }} 섹션의 첫시작에 변수명 A를 넣었지만 다른변수의 값을 넣고 싶을 때에는 변수명B.변수명 으로 접근가능하다.

참,거짓값 or 빈 리스트 Empty List

//Hash:
{
  "person": false
}

//Template:
Shown.
{{#person}}
  Never shown!
{{/person}}

//Output:
Shown.

false이면 {{#와 {{/사이에 아무것도 나타나지 않는다.

만약 아무것도 없었을때 특정 동작을 하고싶다면 반전섹션을 이용하면 된다.

반전섹션

//Template:
Shown.
{{#person}}
  {{name}}
{{/person}}
{{^person}}
  Nothing
{{/person}}

//Hash:
{
  "person": []
}

//Output:
Nothing.

name이라는 가상의 변수를 줘 보았다. 만약 안에 아무것도없으면 {{^ 섹션의 값이 나온다.

부분템플릿

//파일 1 base.mustache
<h2>Names</h2>
{{#names}}
  {{> user}}
{{/names}}

//파일2 user.mustache
<strong>{{name}}</strong>


//컴퓨터가 인식하는 것
<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/names}}

qㅇ부분템플릿은 외부파일을 템플릿의 일부로 불러올 수 있다.
{{>파일이름}} 으로 호출할수있다.

Native App

우리가 흔히 하는 게임 app 이 대부분 Native App이다.

손꾸락으로 올렸다내렸다 할 수 있고 아래로 땡기면 자료 update가 된다던가

손꾸락 퍼포먼스를 자유롭게 사용할수있는 앱이다.

핸드폰에 따라 개발하는 언어가 다르다. Android 는 java, ios는 swift라는 전용언어로 개발한다.

이렇게 되면 안드로이드개발자, ios개발자가 따로 있어야 하는데 특히 ios개발자는 적을뿐더러 단가가 매우매우 쎄다.

그렇다는말은 만드는것까진 좋은데, 유지보수가 힘들다는 뜻이 된다.

유지보수라고 해봤자 대단한걸 바꾸는게 아니라 안드로이드나 아이폰이 버전업, 에어팟이나 타 블루투스이어폰, 갤럭시 버즈 ..등의 제품이 생산될때마다 약간의 환경을 변경시켜줘야하는데 단가가 쎈 그들을 잡아놓기엔..

비용이 넘나 많이드는 단점이 있다.

Mobile App

그에반해 모바일앱은 HTML, CSS, JS를 사용하여 웹페이지를 모바일 에서 보기 좋~게 반응형으로 만들어놓은것인데

어쨋든 웹과 동일하기때문에 유지보수가 쉽다. 설치나 배포는 필요없으며 웹 브라우저에서 실행해야한다.

하지만 손꾸락퍼포먼스를 지원하지못하고, 웹퍼포먼스도 지원하지못하는 애매모호한 상황이지만

급할땐 모바일앱을 만들어서 보여주기라도 해야할 수 도 있다.

Hybird App

대망의 하이브리드앱.

기업측에선 네이티브앱을 쓰기엔 비용이 너무많이들고 모바일 앱을 쓰기엔 손꾸락 퍼포먼스를 사용하고 싶을 것.

껍데기 컨테이너는 네이티브로 개발하고 UI는 웹 베이스로 개발하는 것이다.

업데이트가 필요할때에는 네이티브적 기능만 앱스토어에서 업데이트요청시키고 기타 UI적인 것은 서버측에서 변경한다.

하이브리드앱은 여러가지 개발도구가 있지만 코르도바 폰갭이 가장 유명한듯!

RequireJS란

각 js간의 의존성을 관리하고 동적로딩을 지원하는 JS라이브러리이다.

Rhino나 Node와 같은 타 자바스크립트 환경에서 사용할 수 있고 미리 호출할 필요없이 필요할때만 호출하여 성능이 굿!

전역스페이스오염 혹은 scope침범등의 문제가 발생하지않도록 모듈로 지정하여 사용하는게 좋다.

모듈로 지정하면 전역변수랑 지역변수랑 겹칠일이 없다!

requireJs를 사용하는 흐름은 

view단에서 requirejs 불름 -> require지시어사용 -> define된 function을 최종적으로 가져옴

1. 최종적으로 가져올 js

//Plus.js

define([], function() {
   return {
       add : function(a,b){
           return a+b;
       }
   };
});

 a+b의 기능을 하고싶고 그 기능을 js폴더안에 plus.js라는 파일에 기입하였다.

모듈을 선언하는 뜻인 define.

function은 해당 js를 호출하였을때 실행할 코드와 return 될 값 (혹은 개체)를 생성한다.

즉 plus.js를 호출하면 return된 값, 객체를 사용할수있게된다.

2. plus.js를 가져올 js 

//index.js
require(["/js/Plus.js"], function(Plus) {
   var a=1, b=2;
   var sum = Plus.add(a,b);
});

모듈을 사용할수있게 해주는 require.

첫번째 인자로는 의존성(쓰고싶은 js가 어디있는지 경로), 두번째 인자로 실행코드함수가 위치한다.

의존성에 들어가있는 경로의 js를 function ( ) 괄호 안에 있는 이름으로 사용하겠다는 의미이다.

3.뷰

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>타이틀</title>
</head>
<body>
    <h1> Hello~~ </h1>
    <script type="text/javascript" src="/js/lib/require.js"></script>
    <script type="text/javascript" src="/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
</body>
</html>

뷰에서는 이런식으로 require.js  파일, 경우에따라 jquery파일, 마지막으로 모듈을 사용할 수 있는 js를 추가한다.

좀더 간결하게 사용하기위해 require되는 부분을 수정한다.

require(["/js/Plus"], function(Plus) {
   var a=1, b=2;
   var sum = Plus.add(a,b);
});

이런식으로 .js를 생략가능하며 

아예

require(["Plus"], function(Plus) {
   var a=1, b=2;
   var sum = Plus.add(a,b);
});

이렇게 경로를 줄여 줄 수도 있다.

그러기위해서는 별도양식이 적힌 js파일을 만들어야 하는데 

//format.js
require.config({
    baseUrl: "js", // 모듈을 로딩할 기본 패스
    waitSeconds: 15 // 모듈의 로딩 시간을 지정. 시간초과시 Timeout Error 가 throw
});

요렇게 만들어놓고 

require.js가 로딩된 다음에 기타 모듈을 로딩하기 전에 기입해둔다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>타이틀</title>
</head>
<body>
    <h1> Hello~~ </h1>
    <script type="text/javascript" src="/js/lib/require.js"></script>
    <script type="text/javascript" src="/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="/js/format.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
</body>
</html>

이런식으로 require.js 와 모듈을 사용하는 index.js 사이에 format.js를 넣어두면 OK!

mustache 와 함께 사용

1. 만들고싶은 경로에서 NEW -> 파일명.mustache 해서 머스타취파일을 만들어주는데 본인이 원하는 html형식을 기입

//boardTemplate.mustache
<table id="boardTable" style="text-align: center; width: 50%">
    <tr>
        <th>번호</th>
        <th>제목</th>
        <th>내용</th>
    </tr>
    {{#boardList}}
    <tr style="border: 1px solid black;" >
            <td>{{boardNumber}}</td>
            <td>{{title}}</td>
            <td>{{contents}}</td>
    </tr>
    {{/boardList}}
</table>
<button id="add">게시글 추가</button>

2. js파일을 만들어준다.

//board.js
/**
 * Created by Administrator on 2017-02-20.
 * @module screen/serverAPITest
 */

define(['stache!screen/boardTemplate', 'jquery'], function (boardTemplate) {
    return function () {
        $.get('/board/getList', {}, function (result) {
            $('body').empty().append(boardTemplate(result));
        });

        $('body').on('click', '#add', function () {

            location.href="write.html";
        });

         $('body').on('click', '#boardTable tr', function () {
             var boardSeq = $(this);
                 location.href='detail.html?boardSeq='+ boardSeq.children().eq(0).text();
        });

    }
});

define 다음에 첫번째 인자에는 stache! / 경로/boardTemplate 를 써주고 function 안에 mustache 파일명 (boardTemplate) 을 적어준다. define에서 기존에 적었던 mustache 파일을 가져오는 것이다.

나머지 return function 안에는 jquery 등의 자바스크립트부분을 기술해주면된다.

참고로$.get 요 부분은 기존에 길었던 ajax를 간략하게 서술한 부분!

잠깐! ajax  설명

$.get('경로', 데이터, function (result) {
	//success시 실행되어야할 코드
});

ajax 사용시와 동일하게 

경로를 적어주고 데이터를 넣어주고 result로 결과값이 들어온다.

이때 데이터부분은 바로 변수를 넣으면 에러가 난다.

기존에 ajax 는

데이터가 들어갈 자리에 var data = 3; 이라고 선언한 것을 넣었는데 어째선지 

var data = {    } 의  JSON 형식으로 만들어줘야지 들어갔다.

//안됨
var boardNumber = 4;
$.get('경로', boardNumber, function (result) {
});

//됨
var data ={
   boardNumber = 3
}
$.get('경로', data, function (result) {
});

만약 스프링이라면 

@ResponseBody
@RequestMapping(value = "/getDetail")
public String getDetail(@RequestParam String boardNumber){
 블라블라
 }

요렇게 받을텐데,  RequestParam 의 파라메터 변수명과 내가첨부한 데이터 변수명이 맞아야한다.

3. html에서 호출

board.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/lib/require.js"></script>
    <script src="/lib/require-config.js"></script>
    <script>
        require(['screen/board'], function (board) {
            board();
        });
    </script>
</head>
<body>
</body>
</html>

require의 첫번째 인자로는 위에 작성했던 board.js 의 경로를 적어준다. screen/board.js 지만 js는 생략가능하므로 뺐다.

function () 괄호안에도 js파일과 같은 이름으로 설정해주고 board(); 를 호출하였는데

굳이 똑같은 이름으로 호출하나 이유가 있는지는 잘 모르겠다. 나중에 덧붙일것

내 실수들을 공유할 공간이 필요했다.

노트에 적을까 생각했지만 빠르게 찾기위해 검색을 하고싶었기에 티스토리를 개설!

취직한지 4일됐는데 아직 모르는게 너무많다

힘내쟛!!