[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(2) - Ajax공통 기능, 데이터 바인드 처리

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

[ASP.NET Core] 빈 프로젝트 세팅 (1) - 'index.html'을 시작페이지로 설정하기

[ASP.NET Core] 빈 프로젝트 세팅 (2) - WebAPI 설정

 

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(1) - 기초

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(2) - Ajax공통 기능,  데이터 바인드 처리

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(3) - API 결과 공통 처리

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(4) - 인증 기능 추가

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(5) - 스웨거(Swagger) 설정

[ASP.NET Core] .NET Core로 구현한 SPA(Single Page Applications)(6) - EF(Entity Framework)와 코드 퍼스트(Code First)

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

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

을 참고해 주세요.

1. Ajax 캡슐화

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

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

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

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

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

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

예를 들면 이렇게 말이죠.

/**
 * 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);
}

제이쿼리에 '$.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/

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

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

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