사이트 구축/최적화 활용 팁

파이썬에서 문자열에 변수를 결합하는 방법과 나열되어 있는 문자열에 변수를 이용하여 문자를 대체하는 포맷팅(formatting) 방법입니다.

그 전에 앞서 간단히 조건문을 정리하고 들어가겠습니다.

( ) 괄호는 사용하지 않으면 조건의 끝에 : 를 넣습니다. else: 이렇게 표현을 합니다.

if user_input == 'admin':
  print('if')
else:
  print('else')

들여쓰기는 동일한 형태로 하여야 합니다. 스페이스면 동일한 스페이스, 탭이면 동일한 탭

문자열에 변수를 넣는 방법입니다.

+변수+ 방식으로 일반 프로그램과 동일합니다.

print('to '+name+'. Lorem ip')

포맷팅 (formatting)은 2가지가 있습니다.

1. positional formatting 위치를 지정하고 순서대로 값을 넣는 방법

- 문자열의 끝에 .으로 연결하며 format('egoing', 12, 'egoing', 'egoing') 처럼 {}의 순서대로 대체 문자를 지정합니다.

print('to {}. Lorem ... commodo consequat. {} Duis aute irure dolor in {} reprehenderit ..., sunt in culpa qui {} officia ... laborum.'.format('egoing', 12, 'egoing', 'egoing'))

2. Named placeholder {} 대신 {name}, {age:d} 형태로 변수명으로 대체하는 방법

- :d 정수형 :s 문자형 :f 실수형을 지정합니다.

print('to {name}. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim apple veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {age:d} Duis aute irure dolor in {name} reprehenderit apple computer in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui {name} officia deserunt mollit anim id est laborum.'.format(name=name, age=age))

전체 예제입니다.

user_input = input('id ? ')

if user_input == 'admin':
    name = input('name ? ')
    age = input('age ? ')
    # 문자열과 변수
    print('to '+name+'. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim apple veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '+name+' Duis aute irure dolor in '+age+' reprehenderit apple computer in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui '+name+' officia deserunt mollit animid est laborum.')
else:
    # 포맷팅 (formatting)
    #positional formatting
    print('to {}. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim apple veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {} Duis aute irure dolor in {} reprehenderit apple computer in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui {} officia deserunt mollit anim id est laborum.'.format('egoing', 12, 'egoing', 'egoing'))

    #Named placeholder
    name = input('name ? ')
    age = input('age ? ')
    age = int(age)
    print('to {name}. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim apple veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {age:d} Duis aute irure dolor in {name} reprehenderit apple computer in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui {name} officia deserunt mollit anim id est laborum.'.format(name=name, age=age))

2020/03/13 - [유용한 활용팁] - 파이썬 입력값 출력 및 if 조건문 사용 문법

2020/03/12 - [유용한 활용팁] - 파이썬 웹 연동 기초 HTML 페이지 만들기

2020/02/14 - [유용한 활용팁] - 파이썬 문자열 다루기 - Print, Length, Index, substring

2020/01/07 - [유용한 활용팁] - 파이썬 줄 바꿈 처리 3가지 방법

2019/11/28 - [유용한 활용팁] - 파이썬 웹 연동을 위한 설정 방법

2019/11/08 - [유용한 활용팁] - 파이썬(Python) 웹(Apache) 연동 방법 및 request module 설치 시 There was a problem confirming the ssl certificate Error(에러) 해결 방법 - 까페24(Cafe24) 기준

Javascript로 post 방식으로 ajax를 통신하여 쿠폰번호 검증 후 인증이 된 쿠폰번호를 테이블의 tr를 추가하여 보여주는 방법입니다.

1. 쿠폰번호 입력 여부 점검

- 쿠폰번호가 입력 되었는지를 확인합니다.

2. 입력한 쿠폰번호 기 등록 여부 점검

- 입력한 쿠폰번호와 인증이 완료된 쿠폰번호를 비교하여 기 등록 건이 있는지 점검합니다.
- 등록된 쿠폰번호가 1건 일 때와 2건 이상일 때로 나눠서 비교를 합니다.

3. 쿠폰 인증 post ajax 통신

- 입력된 쿠폰 인증을 위한 ajax 통신을 하며 post방식으로 전송을 합니다.
- $.post({}).done(function(data){}).fail(function(request, status, error) {})
- $.post : POST 방식 전송
- .done() : 성공하였을 때
- .fail() : 실패하였을 때

4. 쿠폰 인증 결과에 따른 처리

- 쿠폰이 인증이 되면 기 등록된 쿠폰의 합계 금액과 결제하려는 금액을 비교합니다.
- 쿠폰의 합계 금액이 더 크면 해당 쿠폰은 등록을 하지 않습니다.

5. 테이블에 인증된 쿠폰 행(TR) 추가

- $('#couponResultTable > tbody:last').append(trHtml); 방식으로 행을 추가합니다.

6. 테이블에 있는 쿠폰 삭제하기

- 삭제 버튼 클릭 시 해당 Object를 가져옵니다.
- 현재 Object는 td안에 있습니다. 그래서 <table><tr>로 올라기 위해서 .parent().parent()를 사용합니다. - deleteCouponRow.remove(); 를 사용하여 행을 삭제합니다. - 쿠폰을 삭제하면서 쿠폰 합계 금액도 삭제한 쿠폰 금액을 차감합니다.​

<div class="coupon-article">
  <h4>
    <span class="sub_bar"></span>
    보험료
  </h4>
  <div class="coupon-input-section">
    <input class="insert_coupon"type="text" name="couponNo" id="couponNo" placeholder="쿠폰번호를 입력해 주세요." title="쿠폰번호 입력창" />
    <button class="update_coupon" id="authCouponBtn">적용</button>
  </div>
  <div class="coupon-result-section table-area">
    <table id="couponResultTable" class="pdt-info-tbl" class="add_class_coupon" style="display:none;">
      <tr>
        <td class="table-sub">쿠폰번호</td>
        <td style="text-align:center;">할인금액</td>
        <td style="width: 33.333%; text-align:right;"></td>
      </tr>
      <tbody></tbody>
    </table>
  </div>
</div>

<div class="selected-total-area">
  <label for="selectedTotal">결제금액</label>
  <input class="total-price" type="text" id="finalPriceSpot" name="selectedTotal" value="2500"/>원
</div>

<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script type="text/javascript">
/**
 * 쿠폰 인증 처리 및 쿠폰 삭제 처리 기능 스크립트
 */

// 쿠폰 합계 금액
var totalCouponAmt = 0;

// 인증하기 버튼 클릭 시
$("#authCouponBtn").click(function() {

  // 쿠폰번호
  var couponNoObj = $("input[name='couponNo']");
  var couponNo    = couponNoObj.val();

  // 홀인원 합계 보험료
  var totalPremiumObj = $("input[name='selectedTotal']");
  var totalPremium    = Number(totalPremiumObj.val());

  // 쿠폰번호가 입력 되었는지 점검한다.
  if ( couponNo == '' ) {
    alert('쿠폰 번호를 입력하여 주세요.');
    couponNoObj.focus();
    return;
  }
  // 쿠폰번호가 입력되었다면 쿠폰번호 인증 페이지를 호출한다.
  else {

    // 쿠폰 인증 결과가 있는지 점검
    var couponRetNoObj = $("input[name='couponRetNo']");

    // 쿠폰 인증 결과가 있다면 입력값과 비교를 한다.
    if ( couponRetNoObj.length > 0 ) {
      // 쿠폰 인증 결과가 1개일 때
      if ( couponRetNoObj.length == 1 ) {
        // 등록한 쿠폰번호와 쿠폰 인증 결과번호가 같다면
        couponRetNo = couponRetNoObj.val();
        if ( couponNo == couponRetNo ) {
          alert('등록하신 쿠폰 번호입니다.\r\n다른 쿠폰번호를 입력하여 주세요.');
          return;
        }
      } // End if ( couponRetNoObj.length == 1 ) 쿠폰 인증 결과가 1개일 때
      // 쿠폰 인증 결과가 2개 이상일 때
      else {
        for (var i = 0; i < couponRetNoObj.length; i++)
        {
          // 등록한 쿠폰번호와 쿠폰 인증 결과번호가 같다면
          couponRetNo = $(couponRetNoObj[i]).val();
          if ( couponNo == couponRetNo ) {
            alert('등록하신 쿠폰 번호입니다.\r\n다른 쿠폰번호를 입력하여 주세요.');
            return;
          }
        } // End for (var i = 0; i < couponRetNoObj.length; i++)
      } // End else 쿠폰 인증 결과가 2개 이상일 때
    } //End if ( couponRetNoObj.length > 0 ) 쿠폰 인증 결과가 있다면 입력값과 비교를 한다.


    // Post 방식으로 호출을 한다.
    $.post("쿠폰 인증 URL", {
        couponNo : couponNo
    }, 'json' /* xml, text, script, html */)
    .done(function(data) {

      var message = data.message;
      if ( message == 'Success' ) {
        // 인증이 정상적으로 되었으면 쿠폰번호와 쿠폰 금액을 셋팅한다.
        var cpn_no  = data.cpn_no;
        var cpn_amt = data.cpn_amt;
        totalCouponAmt += Number(cpn_amt);

        // 쿠폰 인증 결과 테이블이 display none 일때만 show 처리를 한다.
        if($("#couponResultTable").css("display") == "none")
        {
          $("#couponResultTable").show();
        }

        // 홀인원 합계 보험료보다 쿠폰 합계 금액이 크면 더 추가하지 않는다.
        if ( totalCouponAmt > totalPremium ) {
          alert('합계 보험료보다 쿠폰 합계 금액이 클 수 없습니다.');
          return;
        }

        var trHtml;
        trHtml += "<tr>";
        trHtml += "  <td class=\"table-sub\" >"+cpn_no+"</td>";
        trHtml += "  <td style=\"text-align:center;\">"+cpn_amt+"원</td>";
        trHtml += "  <td style=\"width: 33.333%; text-align:right;\">";
        trHtml += "    <button class=\"deleteCouponBtn\" onclick=\"deleteCoupon(this)\">삭제</button>";
        trHtml += "    <input type=\"hidden\" name=\"couponRetNo\" value=\""+cpn_no+"\">";
        trHtml += "    <input type=\"hidden\" name=\"couponRetAmt\" value=\""+cpn_amt+"\">";
        trHtml += "  </td>";
        trHtml += "</tr>";

        // 테이블의 행을 추가한다.
        $('#couponResultTable > tbody:last').append(trHtml);
      }
      else {
        alert('입력하신 쿠폰 번호가 인증되지 않아서 사용할 수 없습니다.\r\n\r\n쿠폰번호를 확인하여 주세요 ');
        return;
      }
    })
    .fail(function(request, status, error) {
      console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
      alert('입력하신 쿠폰 번호가 인증되지 않아서 사용할 수 없습니다.\r\n\r\n쿠폰번호를 확인하여 주세요 ');
    });
  }
});

// 삭제하기 버튼 클릭 시
function deleteCoupon(obj)
{
  // 삭제할 쿠폰 TR
  var deleteCouponRow = $(obj).parent().parent();

  // 차감할 쿠폰 금액
  var deleteCouponRetAmtObj = $(obj).next().next();
  var deleteCouponRetAmt = Number(deleteCouponRetAmtObj.val());

  // 지우는 쿠폰 금액을 쿠폰 합계에서 빼준다.
  totalCouponAmt -= deleteCouponRetAmt;

  // 쿠폰 입력 줄을 삭제한다.
  deleteCouponRow.remove();
}
</script>

파이썬에서 입력 받은 값을 출력하는 방법과 IF 조건문 사용하는 방법입니다.

입력 받은 값을 출력하는 방법

변수 = input('A') 을 이용하여 사용자 입력을 요구합니다.
입력받은 값을 변수에 담아서 print로 출력을 합니다.
Form의 Input type text 개념으로 생각하면 됩니다.
※ 참고로, 파이썬은 행의 마지막에 ; 넣지 않습니다.

user_input = input('password ? ')

print("input value : " + user_input)

IF 조건문 사용 문법

일반적 If 조건문은 if () { } 형태를 사용합니다.
파이썬은 if 변수 == 조건값 : 형태로 사용합니다.
{}가 없는 대신 아래 들여쓰기를 하여 조건이 맞으면 실행하는 내용이 들어갑니다.
이 때 Block 내 들여쓰기의 규칙이 틀리면 에러가 납니다.
예를 들어 첫번째 들여쓰기는 스페이스 2개 두번째 들여쓰기는 탭 1개로 하게 되면
눈에 보이는 것은 동일하지만 내부적으로 서로 다르게 인식을 하여 에러가 나게 됩니다.

user_input = input('password ? ')
if user_input == '1234':
  print('Hello administrator')
  print('nice to meet you')

user_input = input('password ? ')

print("input value : " + user_input)


user_input = input('password ? ')
if user_input == '1234':
  print('Hello administrator')
  print('nice to meet you')

2020/02/14 - [유용한 활용팁] - 파이썬 문자열 다루기 - Print, Length, Index, substring

2020/01/07 - [유용한 활용팁] - 파이썬 줄 바꿈 처리 3가지 방법

2019/11/28 - [유용한 활용팁] - 파이썬 웹 연동을 위한 설정 방법

2019/11/08 - [유용한 활용팁] - 파이썬(Python) 웹(Apache) 연동 방법 및 request module 설치 시 There was a problem confirming the ssl certificate Error(에러) 해결 방법 - 까페24(Cafe24) 기준

파이썬을 이용해서 브라우저에서 HTML이 출력되게 하는 방법입니다.

1. 파일을 만들 때 첫 라인은 파이썬이 구동이 되도록 파이썬 실행 경로를 지정합니다.

#!/[파이썬 설치 경로]/bin/python3

2. 웹 브라우저에서 HTML로 파싱을 하게 하기 위해서 Content-Type을 지정합니다.

   이 첫 라인을 넣지 않게 되면 브라우저는 HTML을 인식하지 못해서 500 에러가 발생합니다.
   주의하셔야 합니다.

print("Content-Type: text/html")

3. 행을 나누기 위해서 \n을 사용하면 되지만 소스의 가독성을 주기 위해서 print()을 넣어서 행을 나눕니다.

print()

4. HTML 소스 코드를 넣습니다.

이 때 Doc String 을 이용하여 Html 소스를 한번에 넣을 수 있습니다.

print('''
--- HTML 소스 코드 ---
''')

#!/[파이썬 설치 경로]/bin/python3

print("Content-Type: text/html")
print()
print('''<!doctype html>
<html>
<head>
  <title>About Python</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">Python</a></h1>
  <ol>
    <li><a href="html.html">HTML</a></li>
    <li><a href="css.html">CSS</a></li>
    <li><a href="javascript.html">JavaScript</a></li>
    <li><a href="python.html">Python</a></li>
  </ol>
  <h2>Python</h2>
  <p>Python is a programming language that lets you work more quickly and integrate your systems more effectively.
You can learn to use Python and see almost immediate gains in productivity and lower maintenance costs.</p>
</body>
</html>
''')

2020/03/10 - [유용한 활용팁] - 파이썬 입력값 출력 및 if 조건문 사용 문법

2020/02/14 - [유용한 활용팁] - 파이썬 문자열 다루기 - Print, Length, Index, substring

2020/01/07 - [유용한 활용팁] - 파이썬 줄 바꿈 처리 3가지 방법

2019/11/28 - [유용한 활용팁] - 파이썬 웹 연동을 위한 설정 방법

2019/11/08 - [유용한 활용팁] - 파이썬(Python) 웹(Apache) 연동 방법 및 request module 설치 시 There was a problem confirming the ssl certificate Error(에러) 해결 방법 - 까페24(Cafe24) 기준

개발을 완료하고 나서 백앤드에서 움직이는 프로그램은 우리 눈에 보이지 않기 때문에 잘 작동을 하고 있는지 확인하기가 어렵습니다.

이 때, 프로그램에 로그 파일에 write하게 처리를 해 두고 로그 파일을 확인해 봅니다.

위의 방법은 문제가 발생 후에 사실 확인을 위해서 확인을 하는 방법이고,  실시간으로 문제가 없는지 검사를 해야 할 때는 다른 방법을 사용합니다.

tail -f xxxx.log

tail -f 를 이용하게 되면 서버에서 출력되는 모든 로그가 나오고 있기 때문에 내가 원하는 로그를 한 번에 확인하기가 좀 처럼 쉽지가 않습니다.

물론, 사용자가 적고 개발 서버라면 나만 보는 거라서 별 문제가 되지 않지만 그런 경우가 많지는 않을 것입니다.

이럴 때는 grep을 이용하여 특정 단어가 들어간 로그만 볼 수 있는 방법입니다.

명령어 tail -f |grep -wi sendXXXXXCancel

-w : 특정 단어가 단어 형태로 있을 때 추출합니다. 특정단어와 다른 단어가 결합되어 있다면 보여주지 않습니다.

-i : 대소문자를 구분하지 않습ㄴ디ㅏ.

결과값 [sendXXXXXCancel Message] 2020-03-07 15:33:09 처리 중 오류가 발생 되었습니다.

2020/02/04 - [유용한 활용팁] - 리눅스에서 배치로 PHP 실행하고 실행 로그 출력하기

ajax 통신은 비동기식 통신입니다.

onsubmit 이벤트에서 ajax 통신을 할 때, ajax 통신 결과와는 상관없이 submit 처리를 합니다.

그래서 async: false 와 event.preventDefault(); 로 처리를 할 수 있습니다.

이렇게 하게 하면 ajax 통신 결과 리턴 시간이 지연 될 것을 감안하여 올리는 로딩바가 구현이 되지 않습니다.

이 경우에는 로딩바를 먼저 노출되도록 처리를 하고 ajax 통신을 setTimeout과 결합하여 사용하면 로딩바가 나오게 됩니다.

최종적으로 ajax 통신 결과가 성공 일 때 submit이 안되는 현상이 발생을 하였습니다.

이 현상의 해법은 $.when($.ajax()).done().fail()과 currentTarget.submit()입니다.

며칠 동안 포스팅 했던 내용의 완결판입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form name="theForm" action="" method="post" id="theForm">
    <input type="submit" />
  </form>

<script>
  $('#theForm').submit(function(event){
  
	// 자동 submit을 시키는 것을 막는다.
	event.preventDefault();

    /**
     * 입력 필드 validattion check 로직
     */
  

    /**
     * ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
     */

    // ajax 통신을 설정합니다.
     var when =
   		$.ajax({
   			url:'[주소]',
   			type:'post',
   			data:$('form').serialize(),
   			dataType:'json'
   		});

      // 로딩바를 보여 준다.
    	$('#loadimg').css('display','block');
      
      $.when(when)
    	.done(function(data)
    	{
    		var message = data.message;
    		if ( message == 'Success' )
    		{
    			//console.log('success');
          // 성공일 때 form submit을 합니다.
    			event.currentTarget.submit();
    		}
    		else
    		{
    			// 안내 메시지를 보여준다.
    			alert('안내 메시지');
    			// 에러가 발생하면 모달창을 닫는다.
    			$('#모달창 id').modal('hide');
    		}
    	})
    	.fail(function(request, status, error)
    	{
        // 통신 실패하였을 때
    		console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    
    		// 안내 메시지를 보여준다.
    		alert('안내 메시지');
    		// 에러가 발생하면 모달창을 닫는다.
    		$('#모달창 id').modal('hide');
    	})
    	.always(function (data, status, responseObj)
    	{
        // 성공 실패와 상관 없이 항상 처리를 하는 내용을 담습니다.
    		//console.log(data);
    
    		// 로딩바를 해제한다.
    		$('#loadimg').css('display','none');
    	});
    
    })
  </script>
  
</body>
</html>

2020/03/05 - [유용한 활용팁] - Javascript ajax async: false (동기식) 처리 시 로딩바 구현 방법.

2020/03/04 - [유용한 활용팁] - Javascript jquery submit 이벤트 시 submit 제어하기

2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

ajax를 동기식( async: false )으로 구현할 경우 beforeSend:function()의 로딩바가 구현이 되지 않습니다.

통신의 결과가 나오지 않아서 아래까지 내려가지 않는 현상으로 보입니다.

시간이 지연되는 서비스의 경우 로딩바 없이 현재 화면을 보고 있어야 하는 현상이 생깁니다.

ajax async: false (동기식) 처리 시 로딩바 구현 방법입니다.

1. ajax 호출 전 로딩바를 먼저 호출합니다.
2. setTimeout을 호출 후 ajax 로 진입하게 합니다.
3. ajax를 async: false로 비동기식 통신을 합니다.
4. 통신이 끝나면 complete:function()로 로딩바를 해제합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form name="theForm" action="" method="post" id="theForm">
    <input type="submit" />
  </form>

<script>
  $('#theForm').submit(function(event){
  
	// 자동 submit을 시키는 것을 막는다.
	event.preventDefault();

    /**
     * 입력 필드 validattion check 로직
     */
  

    /**
     * ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
     */

     // 로딩바를 보여 준다.
   	$('#loadimg').css('display','block');
   
   	setTimeout(function() {

    	$.ajax({
    		url:'[주소]',
    		type:'post',
    		data:$('form').serialize(),
    		dataType:'json',

    		// 다른 페이지를 처리 후에 결과가 성공일 때
    		// 비동기식으로 처리를 함
    		async: false,
    		success:function(data)
    		{
          var message = data.message;
    
          // 결과값이 성공이면 전송 여부는 true
          if ( message == 'Success' ) {
    			}
    			else {
    			}
    		},
    		error:function(request, status, error)
    		{ // 오류가 발생했을 때 호출된다.
    			console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    		},
    		complete:function()
    		{
    			// 로딩바를 해제한다.
          $('#loadimg').css('display','none');
    		}
    	});
    }) // End $.ajax(
  }, 0); // End setTimeout(function()
</script>
  
</body>
</html>

2020/03/04 - [유용한 활용팁] - Javascript jquery submit 이벤트 시 submit 제어하기

2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false

지난 시간 Form onsubmit 이벤트 시 isSubmit 플래그를 이용하여 submit을 제어하는 방법을 언급하였습니다.

결론부터 얘기를 하면 ajax 통신이 성공이었을 때, 추가 작업을 진행하지 못하고 submit이 되는 버그를 발견하였습니다.

ajax 통신이 error가 났을 때는 원하는 대로 제어가 가능하였는데, 성공 시에는 제어가 되지 않습니다.

해결 방법으로는 Form 태그의 onsubmit을 사용하지 않고 jquery의 $('#theForm').submit(function(event){})을

이용하여 해결이 가능합니다.

중요한 것은 event.preventDefault(); 를 선언하여 submit 이벤트를 무력화 시킨 후 

javascript에서 원하는 작업을 모두 마친 후 this.submit(); 을 통해서 Form 전송을 시킬 수 있습니다.

Javascript jquery submit 이벤트 시 자동 submit 보내지 않기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form name="theForm" action="" method="post" id="theForm">
    <input type="submit" />
  </form>

<script>
  $('#theForm').submit(function(event){
  
	// 자동 submit을 시키는 것을 막는다.
	event.preventDefault();

    /**
     * 입력 필드 validattion check 로직
     */
  

    /**
     * ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
     */

    // 전송 여부 boolean 값
    // 초기값은 false로 셋팅을 한다.
  	var isSubmit = false;

  	$.ajax({
  		url:'[주소]',
  		type:'post',
  		data:$('form').serialize(),
  		dataType:'json',

  		// 다른 페이지를 처리 후에 결과가 성공일 때
  		// 비동기식으로 처리를 함
  		async: false,
  		success:function(data)
  		{
        var message = data.message;
  
        // 결과값이 성공이면 전송 여부는 true
        if ( message == 'Success' )
  			{
  				isSubmit = true;
  			}
  			else
  			{
  				// 결과값이 실패이면 전송 여부는 false
          // 앞서 초기값을 false로 해 놓았지만 한번 더 선언을 한다.
  				isSubmit = false;
  			}
  		},
  		error:function(request, status, error)
  		{ // 오류가 발생했을 때 호출된다.
  			console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
            // ajax 처리가 결과가 에러이면 전송 여부는 false
            // 앞서 초기값을 false로 해 놓았지만 한번 더 선언을 한다.
  			isSubmit = false;
  		},
  		beforeSend:function()
  		{
  			// 로딩바를 보여준다.
  		},
  		complete:function()
  		{
  			// 로딩바를 해제한다.
  		}
  	});
  
  	if ( isSubmit ) this.submit();
  })
  </script>
  
</body>
</html>

2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false