<코드 프레소 웹 개발 트랙> Spring Boot 웹 개발 초급 [2]

Template Engine Mustanche & Ajax

Template Engine

- MUSTACHE

템플릿 엔진이란?

지정된 템플릿 양식과 데이터가 합쳐져서 HTML 문서를 출력하는 소프트웨어

즉, 웹사이트 화면을 어떤 형태로 만들지 도와주는 양식

- jsp, freemarker, react, view .. etc

머스테치 (mustache)

머스테치는 여러 언어를 지원하는 심플한 템플릿 엔진으로 가볍고 여러 언어를 지원한다.

자바에서는 서버 템플릿 엔진으로, js에서는 클라이언트 엔진으로 사용할 수 있다.

특징으로는 문법이 심플하고, 로직 코드 사용이 불가하고 View와 server외의 역할이 명확히 분리된다.

정리하자면 "화면 역할에 충실한 템플릿 엔진" + "로직이 나눠져 유지보수 용이" + "로직은 백엔드에서 처리해라"

Mustache 기초 문법

모든 문법의 중심에는 {{}} 가 있음.

[1] {{ data }} : 서버에서 전달한 data를 화면에 표시함

[2] {{object.data}} : 객체의 멤버변수 데이터 접근도 가능함.

[3] {{#list_data}} {{/list_data}} : 리스트 데이터를 사용하는 것도 가능

- 리스트에 단일 값이 저장된 경우

- 리스트에 객체가 저장된 경우

[4] {{#data}} {{/data}} : true이거나 null이 아닌 경우 html 태그를 노출 , false면 반대

Ajax ( Asynchronous Javascript and XML )

웹 화면에서 비동기로 Server와 통신하는 방식이다.
화면의 갱신없이 server와 데이터를 주고 받을 수 있음
JavaScript 코드 or JQuery로 구현 가능하다.

jQuery 적용

CND을 사용하여 jquery를 사용하고, body의 끝 부분 <scrips> </script> 태그 추가

<head>
    <title>mustache</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id=""name><br>
<script>
     $(function() {
         "jQuery를 담을 곳"
     });
</script>
</body>

jQeury의 주요 개념 ( 간단히 )

Selector	특정 html 요소를 찾기 위해(선택하기 위해) 사용
- $("p"), $(#email-form"), $(".profile-img")
Action	selector로 선택된 HTML 요소에 특정 작업을 수행
$("p").hide(), $("p").append("text")
Event	selector로 선택된 HTML 요소에서 발생하는 event를 처리
$("p").click(function() { "이벤트 발생 시 수행 내용" }

예제

<html>
<head>
    <title>mustache</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="name"><br>
    <button type="button" id="click">Click Me!</button>
    <button type="button" id="post-user">Save User</button>
<script>
    $(function(){
        $("#get-user").click(function(){
            $.ajax({
                method: "GET",
                url: "/user",
                data: {"name": $("name").val()}
           })
           .done(function(response) {
            console.log(response)
           });
        });
    });
</script>
</body>
</html>

위의 파일은 mustache 파일로 <script > 를 사용하여 jqeury를 사용한다.

기존의 mustache 파일과 달라진 점은 body 내에 <script> , $(function() {} ); 코드이다.

jQuery 에서는 $(function() ) 을 사용하여 이벤트 처리를 할 수 있다.

그렇다면 이제 function 함수 내 구문들을 풀어보자

$ ("#get-user").click(function() )	id가 get-user라는 html 요소에 클릭 이벤트가 발생하면 함수가 실행된다.

Logging

Logging은 apllication에서 발생하는 다양한 정보들을 기록 하는 것
Application의 상태나 장애 원인 분석에 중요한 역할
Loging Framework
- Log 파일 저장 기능, Log 파일 Rolling 기능
- Log를 외부 저장소에 저장 가능
- Log 레벨 별 출력 관리 기능 (debug, info, warn, error 등)

Tech Blog