최종프로젝트 Controller, View 파트 진행도

23.09.10

 

오늘 한일)

 

1)

사용자가 특정 쿠폰을 사용 하려고 적용 버튼을 누른 경우에,

비동기처리로 화면 이동없이,

쿠폰 적용 상태 열의 해당하는 행 값만 "적용" 이라고 동적으로 업데이트 되는 설계 였다.

 

하지만,

모든 행 값이 "적용" 으로 업데이트 되는 이슈가 발생 해서,

 

이 부분을 수정 하여 이슈를 해결 했다.

 

(document).ready(function () {

    $(".couponInfo").click(function () {

        //  선택한 쿠폰의 PK를 가져오기.
        //  이슈 : 사용자 정의속성은 대소문자를 구분 하지 않는다. 오로지 소문자로만 인식 한다.
        let ucnum = $(this).data("ucnum");

        console.log($(this));

        console.log("log : ucnum : " + ucnum);

        //  , (콤마) 를 사용해서 아이디 요소 두개를 한번에 처리 하고,
        //  ⭐ off("click") 을 사용해서, 핸들러가 중복으로 바인딩 되는 이슈를 막기 ⭐
        $("#applyCoupon, #cancelCoupon").off("click").click(function () {

            let buttonID = $(this).attr("id");  //  클릭한 버튼의 ID 값을 가져 오기.

            console.log('log : buttonID : ' + buttonID);

            let couponStatusData;

            if (buttonID === "applyCoupon") {    //  모달창에서 사용 하기 버튼을 클릭 했으면,
                console.log("log : applyCoupon");
                couponStatusData = 1;
            } else if (buttonID === "cancelCoupon") {   //  모달창에서 사용 안함 버튼을 클릭 했으면,
                console.log("log : cancelCoupon");
                couponStatusData = 2;
            }

            $.ajax({

                url: "couponStatus.do",
                type: "POST",
                data: {sendCouponStatusData: couponStatusData},
                success: function (result) {

                    console.log('log : success : OK');
                    console.log('log : result : ' + result);

                    let couponStatus = result;

                    //  새로운 쿠폰을 적용 할 경우, 이전에 적용한 쿠폰에 대한 "적용" 텍스트가 "미적용" 으로 업데이트 되기 위한 코드.
                    $(".couponStatus").text("미적용");

                    $(`tr[data-rowID="${ucnum}"] .couponStatus`).text(result);  //  선택한 쿠폰의 PK에 해당 하는 행의 텍스트를 업데이트.

                },
                error: function (error) {
                    console.log(' log : error [' + JSON.stringify(error) + ']');
                    console.log(' log : error [' + error.responseText + ']');
                }

            });

        });

    });

});

 

위의 코드 에서,

 

$(".couponInfo").click(function () { .. }

 

couponInfo 라는 클래스 요소를 클릭 할 때마다,

 

$("#applyCoupon, #cancelCoupon").click(function () { .. }

 

$("#applyCoupon, #cancelCoupon").click() 이벤트 핸들러가 중복으로 바인딩 되는 이슈 였었다.

 

.off("click") 메서드를 사용해서, 이벤트 핸들러를 한번만 바인딩 하도록 설정하여 해결 했다.

 

오늘 이슈)

 

1)

쿠폰을 중복 적용 할 수 없는 설계 이다.

실제로 현재 로직 및 기능도 그렇게 구현이 되어 있는데,

쿠폰을 적용하고, 그 해당 쿠폰에 대한 행의 쿠폰 적용 여부가 "적용" 이라고 변경되고,

사용자가 새로운 쿠폰에 대해 쿠폰 적용 버튼을 누르면,

기능으로는 그 쿠폰의 값이 세팅되도록 되어 있지만,

기존 쿠폰에 대한 행의 적용 여부가 "미적용" 으로 변경 되지 않아서,

마치 두 쿠폰이 적용 되어 있는것과 같은 느낌을 줄 수 있는 이슈가 발생 했다.

 

이 쿠폰 적용 여부 관련 비동기처리를 업데이트 하기 전에,

매번 쿠폰 적용 여부 행 값을 "미적용" 으로 초기화 하는 코드를 작성 함으로써,

해당 이슈를 해결 할 수 있었다.

 

//  새로운 쿠폰을 적용 할 경우, 이전에 적용한 쿠폰에 대한 "적용" 텍스트가 "미적용" 으로 업데이트 되기 위한 코드.
$(".couponStatus").text("미적용");

 

이번주 할일)

 

1)

컨트롤러 추가 및 수정한 부분 액셀을 수정할 예정 이다.

 

2)

피그마에 관리자 페이지 - 회원 관리 관련해서 업데이트 할 예정 이다.

 

3) 

피그마에 쿠폰 관련 추가된 부분들을 업데이트 할 예정 이다.

 

4)

컨트롤러 로직 프로세스에 추가된것들 업데이트 할 예정 이다.

 

5)

사용자 편의성 보완 해야 하는 부분들을 업데이트 할 예정 이다.

 

느낀점)

 

1)

그동안 모든 비동기처리를 자바스크립트의 Ajax 메서드를 사용 해서

처리 했었기에, 프로젝트 내부의 모든 비동기처리를 Ajax 메서드를 사용 했다.

 

계속 사용 하다 보니, 

비동기처리를 하더라도, 서버와 데이터를 주고받는 경우가 아니라면,

굳이 Ajax 메서드를 사용 해야 할까 라는 생각을 갖게 되었다.

 

위의 쿠폰 적용 및 미적용 에 대한 UI 를 업데이트 하는 처리는,

서버와 데이터를 주고 받을 필요가 전혀 없는 상황 이므로,

이런 경우에는 순수하게 클라이언트 측에서만 실행 될 수 있도록,

Ajax 메서드를 사용 하지 않고, 비동기처리를 해봐야 겠다는 것을 느꼈다.

 

[ 참고 ]

 

Ajax : Asynchronous JavaScript and XML

 

비동기적으로 서버에서 데이터를 가져와, 웹 페이지에 동적으로 표시하기 위한 기술.

 

주로 데이터 교환을 위해 사용되고,

서버로 HTTP 요청을 보내고 응답을 받아와서 페이지 내부에 일부 내용을 업데이트 하는데 특화.

 

XML 이나 JSON 형식의 데이터를 주로 처리 한다.

 

JQuery 와 같은 라이브러리를 가져와서 코드를 쉽고 간편하게 작성하여 Ajax 요청을 처리 할 수 있다.