2019. 9. 30. 15:30

SPA를 만들 때 안 써도 상관없지만 쓰면 좋은 2가지가 Ajax 캡슐화와 데이터 바인드입니다.




프로젝트에 관한 자세한 사항은 

참고 : [ASP.NET Core] .NET Core로 구현한 SPA(Sigle Page Applications)(1) 기초

을 참고해 주세요.


1. Ajax 캡슐화
Ajax 캡슐화는 Ajax콜을 할 때 사용하는 주로 사용하는 옵션을 캡슐화하여 반복 사용할 수 있도록 하는 것입니다.

이렇게 해둬야 갑자기 옵션이(특히나 헤더!!!!) 바뀌는 일이 있어도 쉽게 변경이 가능하죠.

(이거 안 돼 있어서 1000개가량을 팀원들이 붙어서 다 바꾼 것도 본적있습니다. ㅎㅎㅎ)


미리 정의해 놓고 써도 되고 라이브러리화시켜도 되는데.......

앵간하면 미리 정의해놓고 쓰는 걸 추천합니다.

일반적인 프로젝트에서 사용하는 옵션은 뻔하기 때문에 몇 개 정도만 미리 정의해두면 됩니다.


예를 들면 이렇게 말이죠.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * jquery를 이용하여 요청을 처리합니다.
 * @param {json} jsonOption 처리할 옵션 객체
 */
function AjaxCall(jsonOption)
{
    var jsonOpt = {
        async: true,
        //contentType: "application/x-www-form-urlencoded; charset=utf-8",
        dataType: "json"
    };
 
    //들어온 옵션을 합친다.(들어온 값 우선)
    jsonOpt = $.extend(jsonOpt, jsonOption);
 
    //호출
    $.ajax(jsonOpt);
}
cs



제이쿼리에 '$.extend'를 이용하면 자바스크립트 오브젝트를 합칠 수 있습니다.

이것을 이용하여 새로 지정한 옵션을 우선으로 하여 미리 지정한 옵션과 합칩니다.


이제 'AjaxCall({type:"get"})'이런 식으로 사용하면 됩니다.



2. 데이터 바인드

json 데이터를 화면에 표시하기 위해서 html을 구성해야 합니다.

이 html을 자바스크립트로 생성해서 관리하면 여러 가지로 불편하죠.


그래서 html에 구분자를 넣어서 데이터가 표시될 영역을 명시하여 파일로 관리하고

그걸 데이터 교체한 후 출력하면 관리도 편하고 출력도 편한 구성이 됩니다,


이럴 때 사용하는 것이 데이터 바인드입니다.





제가 만들어서 공개해 둔것이 있으니 여기서는 제가 만들어놓은 것을 사용하겠습니다.

참고 : JsDataBind 1.0 - 문자열에 데이터 바인딩 해주는 자바스크립트 라이브러리


이제 데이터 바인딩용 html은 중괄호 두 개({{}})인 영역이 데이터 영역이 되고 문자열로 읽어와 바인딩하여 html에 넣어주면 원하는 대로 데이터를 관리 할 수 있습니다.


이제 데이터 바인딩용 html만 수정하면 모든 아이템에 적용되게 되죠.




마무리

완성된 샘플 : Github dang-gun - SPA_NetCore_Foundation/SPA_NetCore_Foundation/SPA_NetCore_Foundation02/


원래 이건 양도 적고 중요도가 떨어지는 내용이라 따로 안 하고 다른 포스팅과 합치려고 했는데.......

다음 포스팅이 인증 관련이라 내용도 많고 중요도도 높아서 이걸 잘라서 포스팅했습니다.

이건 있어도 그만 없어도 그만 이긴 합니다.