[📚상품 구매 사이트 2단계] 상품명 중복체크, 이벤트 처리 Ajax 수정

 

GitHub - JungminK1m/Springboot-Product-Study-V1-V2

 

1단계는 저번 게시글의 CRUD 구현이었다.

나는 자바스크립트 수업할 때 (특히 Ajax) 되게 어렵다 느꼈었는데

역시나 이번에도 몰라서 엄청 헤맸다.

그냥 Ajax 모르겠어 엉엉...😭😭😭😭

 

덕분에 유튜브 보고 Ajax 새로 공부했다...(오히려 좋아)

내가 아는 게 맞는지도 모르겠다 사실..

 

일단 막 휘갈기고 선생님께 피드백을 받는 게 낫겠다 싶었다.

내가 쓴 (사실 GPT가 쓴) Ajax 코드와 선생님 코드를 비교하면서 공부해 보자!!!

 

 

🔽 이거는 내가 정리한 진짜 기초 중의 기초  Ajax 🔽

(근데 이거 모르겠으면 자바스크립트 다시 공부해야 되는 것이에요...그게 나)

AJAX

 

 

---

 

 

 

 

위에도 있지만, 정확히 해당 기능에 대해 설명하자면!

---

1. 상품 등록 페이지에 들어온다.
2. 상품명을 적고 중복확인 버튼으로 중복 체크를 한다.
   • 기존에 없는 상품명인걸 체크했지만 값을 다시 바꾼 뒤 중복체크 없이 상품 등록 완료 버튼을 누를 수도 있지 않은가? ➡ ⭐ 그렇기 때문에 상품 등록 완료 버튼에서 중복체크 된 상품명의 값이 바뀌었는 지 인지를 해야 함! (자바스크립트 onChange 활용) - 이벤트
   • 애초에 중복체크를 안하고 등록 시도할 시 중복체크를 하라고 할 것
3. 상품 등록 완료!

---

 

상품등록 페이지 화면 코드

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ include file="layout/header.jsp" %>
        <div class="container">
            <form action="/product/save" method="post">
                <div class="mb-3 mt-3">
                    상품명 : <input id="name" name="name" type="text" placeholder="상품명을 적어주세요">
                    <button id="CheckproductName" type="button">중복확인</button>
                    

                </div>
                <div class="mb-3 mt-3">
                    상품가격 : <input id="price" name="price" type="text" placeholder="상품 가격을 적어주세요">
                </div>
                <div class="mb-3 mt-3">
                    상품수량 : <input id="qty" name="qty" type="text" placeholder="상품 수량을 적어주세요">
                </div>
                <button id="submit" type="submit" class="btn btn-primary">상품등록완료</button>

            </form>
        </div>

        <%@ include file="layout/footer.jsp" %>

 

 

---

 

 

상품명 중복체크 버튼

 

 

상품명을 중복확인하는 버튼에 대한 Ajax 코드이다

화면에서는 아래 코드에 해당하는 부분이다

 

이 버튼!!

 

🔽 중복체크 코드 (수정 전)

클릭 이벤트가 발생할 때, '#CheckproductName' 요소를 선택하고,

'productSave/checkName/' URL로 POST 방식의 Ajax를 전송하는 코드이다. 요청 데이터에는 입력된 상품명을 담고 있다.

 

이 코드에서 data는 Ajax 요청 시 서버로 보내는 데이터를 지정하는 속성이다.

'data' 속성의 값은 JavaScript 객체로 지정되며, '{키: 값}' 형태로 작성한다.

 

이 코드에서는 { name: $('#name').val() } 로 작성되어 있다.

name이라는 키에 입력된 상품명 필드 ($('#name').val()) 의 값을 할당한 것.

 

즉, 서버로 전송되는 데이터는 { name: 입력된 상품명 } 형태로 구성되는 것이다.

 

Ajax 요청에서 data 속성을 사용하면,

서버 측에서 해당 데이터를 파라미터로 받아 처리할 수 있다.

이를 통해 필요한 데이터를 전송하고, 서버로 부터 응답을 받을 수 있다.

 

 

Ajax 요청의 Controller 부분

// 상품명 중복체크 컨트롤러
    @PostMapping("/productSave/checkName")
    public ResponseEntity<?> checkProductName(@RequestParam String name) {

        Product productName = productRepository.findByName(name);
        if (productName != null) {
            return new ResponseEntity<>(false, HttpStatus.BAD_REQUEST);
        }
        return new ResponseEntity<>(true, HttpStatus.OK);
    }

위에서 말했다시피, Ajax에서 요청한 data의 name을 매개변수로 받아 온 것을 확인할 수 있다.

 

서버는 요청을 받아 상품명이 이미 등록되어 있는 지 확인한 후

 (findByName 메서드에 파라미터에 받아 온 name 값을 넣어 확인할 수 있음)

성공 여부에 따라 응답을 받환한다.

productName이 null이 아니라면 (= 기존에 동일한 상품명이 존재) BAD_REQUEST를 리턴하고,

그렇지 않다면 OK 를 리턴

 

Ajax 요청에 대한 응답이 성공적으로 수신되면

'등록 가능한 상품입니다' 메시지가 포함된 알림창이 뜨면서, 응답 데이터가 콘솔에 출력된다.

 

반대로, Ajax 요청에 대한 응답이 실패하면

'이미 등록한 상품입니다' 메시지가 뜨는 알림창이 뜨면서, 응답 데이터가 콘솔에 출력된다.

 

아, done / fail 부분은 구글링을 하든, GPT한테 물어보든

success / error 로 쓰는 경우가 많은데,

요새는 done / fail 로 많이 쓴다고 하니 알아두자!

(뭘 쓰든 상관은 없다)

⚠❗❗ 두 개는 문법적으로 조금 차이가 있으니 확인하고 써야 함 ❗❗ (아래 링크 참고 - 제 노션입니다😋)

2. AJAX 메서드

 

 

⚙ 코드 리팩토링 ⚙

 

수정 전 코드가 틀린 코드는 아니지만

좀 더 깔끔하고 보기 쉽게,

선생님이 약간 수정해 주셨다😙

 

 

🔽 중복체크 코드 (수정 후)

바뀐 부분을 색깔별로 표시해 보았다

1

일단 가장 크게 달라진 점은 sameCheck와 data 변수를 따로 만들어 주었다는 것이다.

⏫ 이거 보다는

⏫ 이렇게 쓰는 편이 깔끔하고,

혹시나 변수를 바꾸는 상황이 생기더라고 뒤적거리지 않고(헷갈리지 않고)

첫 번째 단에서 찾을 수 있기 때문이다😁

 

2

원래 HTTP 요청의 기본 타입은 application/x-www-form-urlencoded 이다.

jQuery에서 $.ajax() 메서드를 호출할 때, contentType을 생략하면

기본값이 application/x-www-form-urlencoded 이므로 코드 동작에는 문제가 없다.

그래도 정확히 명시하는 게 좋으므로 쓰는 습관을 들이자!

 

 

명시적으로 contentType 옵션을 지정하는 이유는,

HTTP 요청의 본문이 어떤 형식인지 서버에게 알려주기 위해서 라는데..일단 그렇다고 한다.

 

 

contentType 옵션은 서버로 보내는 데이터의 타입을 설정하는 것으로,

application/x-www-form-urlencoded 라는 MIME 타입을 사용하여 폼 데이터를 인코딩한 후 서버로 전송하고 있다.

이 타입은 'key=value' 형식으로 인코딩된 폼 데이터를 HTTP 요청 바디에 전송한다.

JSON이나 다른 형식이라면, 그에 맞는 contentType 옵션을 지정해야 한다.

 

 

3

 

자, 이제 제일 중요한(??)

sameCheck 변수를 왜 만들었는가! 를 알아보자😋

이것은 나중에 최종 상품등록(?) 이벤트 처리 자바스크립트와도 연관이 있기 때문에

지금은 간단히 설명하고 이벤트 처리 때 같이 자세하게 설명하기로!

 

sameCheck 라는 변수를 하나 만들었고 값을 false로 넣었다.

(어떤 데이터 값이랑 연관 없고 순수한 변수이다)

음.. 쉽게 말하자면 중복확인 버튼을 누르고 난 뒤의 결과 라고 생각하면 좋을 것 같다.

 

처음 상품등록 페이지에 들어왔을 때는 당연히 중복체크가 안된 상태이니 초기값을 false로 지정한 것이다.

 

그리고 Ajax 통신 (중복확인) 후 등록 가능한 상품이면

sameCheck 의 값을 true 로 바꾸고,

 

등록 불가한 상품이면

그대로 false로 둔다.

는 뜻이다.

 

 

 

---

 

 

상품 등록 이벤트

 

 

 

새로 등록할 상품 정보들을 입력하고 중복체크 한 뒤,

최종적으로 submit 하는 이벤트를 만들어 볼 것이다.

 

 

이 버튼이다

 

🔽 상품 등록 이벤트 코드 (수정 전)

 

사실 이 코드는 99% GPT가 만들어 준 코드라..

이렇게 만든 이유는 설명할 길이 없고.. (...)💦

코드 해석 정도만.....ㅎ..

 

이 코드는 상품 등록을 처리하는 form의 제출(submit) 이벤트를 가로채서,

동일한 상품명이 이미 있는 경우 등록을 막는 역할을 한다.

$('form')

- <form> 태그를 선택한다.

.on()

- 선택한 요소에 이벤트 핸들러를 연결하는(바인딩 하는) 함수

'submit'

- 이벤트 유형을 나타낸다.

function(e) - form 태그의 submit이 실행될 때 실행될 함수, e는 이벤트 객체이다

 

이벤트 핸들러 함수에서는 이벤트 객체를 매개변수로 받을 수 있다. (그게 e)이벤트 객체는 이벤트가 발생한 요소와 이벤트의 세부 정보를 가지고 있다.왜 e 라고 설정하는 지 궁금했는데,보통 이벤트 객체의 이름은 event나 e 와 같은 약어를 사용하는 것이 일반적이란다.따라서 이 코드의 e는 submit 이벤트 객체를 나타내는 변수 이름으로 사용되었다.변수 이름은 이름일 뿐이기에 꼭 event나 e로 쓰지 않아도 된다.

 

e.preventDefault() 

- 기본적으로 브라우저가 이벤트를 처리하는 동작을 중단시키는 메서드

- 위의 코드에선 submit 이벤트를 중단시키기 위해 사용된다.

 

done / fail 부분은 아까와 같은 맥락인데,

$('form')[0].submit(); 은

도대체 왜 index의 0번으로 등록하는지 모르겠다...ㅠㅠ

 

 

 

 

⚙ 코드 리팩토링 ⚙

 

이벤트 부분은 코드가 많이 바뀌었다!

앞에 sameCheck 변수를 만들어 놓으니 길이가 절반으로 준 듯

 

 

🔽 상품 등록 이벤트 코드 (수정 후)

 

짜잔 앞 전에 못 보던 코드가 새로 생겼다.

이전에 중복체크 할 때 선언했던 변수 sameCheck를 사용한다😃

$('#name').on('input', function (e) {
   sameCheck = false;
});

코드를 해석하자면,

id가 name인 input 요소의 값 (상품명 입력하는 곳) 이 변경될 때마다 발생하는 이벤트를 감지하고,

감지가 되면! 해당 함수(이벤트)를 실행한다

실행내용은 바로바로 sameCheck의 값이 false (즉, 중복체크를 안한 상태로 만든 것) 로 바뀌는 것이다!!!!!!

(처음에 이 코드 보고 너무 대박이라 생각함)

 

 

$('form').on('submit', function(e) {
    // == 주의
    if (sameCheck == false) {
        alert("상품명 중복확인을 해 주세요.");
        // e.preventDefault(); = 브라우저가 이벤트를 처리하는 동작을 중단시키는 메서드
        // submit 이벤트를 중단시키기 위해 사용됨
         e.preventDefault();
         console.log(sameCheck);
    }else if (sameCheck == true) {
        alert("상품이 등록되었습니다.");
        console.log(sameCheck);
    }
});

 

위 과정이 있었기 때문에 중복체크를 안하고 등록하려고 할 때의 이벤트 코드가 완전 간결해졌다.

form 태그가 submit 될 때

if 만약에!

sameCheck가 false라면

( 값 변경이 되거나, 애초에 중복체크를하지 않았거나 )

submit 되는 것을 막는다.

 

sameCheck가 true 라면

( 값 변경이 되지 않았고,  변경이 되었다 해도 중복체크를 재차 한 상태 )

submit 되는 것이다!

 

 

 

기존에 없는 상품을 중복확인하면 등록 가능한 상품이라고 alert 창이 뜬다

 

 

상품명을 바꾸고 중복확인을 안한 상태로 바로 등록 버튼을 누르면

sameCheck = false 가 되면서

중복확인을 해 달라는 alert 창이 뜨게 된다.

 

 

sameCheck가 변경되는 것을 확인하고 싶다면

console.log(sameCheck);

⏬ 를 중간중간에 넣어주면 된다 이렇게! ⏬

 

 

 

---

 

수정 전 Ajax  전체 코드

<script>
        // 상품명 중복체크
            $('#CheckproductName').on('click', function () {
                $.ajax({
                    url: '/productSave/checkName/',
                    type: 'post',
                    data: {  name: $('#name').val() },

                }).done((res) => {
                    alert("등록 가능한 상품입니다")
                    console.log(res);

                }).fail((err) => {
                    alert("이미 등록한 상품입니다")
                    console.log(err);
                });
            });
        
        // 동일 상품명 등록하지 못하게 처리하는 이벤트
        $('form').on('submit', function(e) {
            e.preventDefault(); // 기본 제출 이벤트를 중단

            $.ajax({
                url: '/productSave/checkName/',
                type: 'post',
                data: {
                name: $('#name').val()
                }
            }).done(function(res) {
                // 서버에서 반환된 결과가 성공일 경우 상품을 등록
                $('form')[0].submit();
            }).fail(function(err) {
                // 서버에서 반환된 결과가 실패일 경우 등록하지 않음
                alert('이미 등록한 상품입니다');
            });
        });
        </script>

 

수정 후 Ajax  전체 코드

<script>

            // 중복체크 여부 = false - 아직 체크 안했으니까
            let sameCheck = false;

            // 상품명 중복체크
            $('#CheckproductName').on('click', function () {

                // 이렇게 데이터를 변수로 만들면 보기가 편하다
                let data = { name: $('#name').val() }

                $.ajax({
                    url: '/productSave/checkName/',
                    type: 'post',
                    data: data,
                    contentType: "application/x-www-form-urlencoded; charset=utf-8"

                }).done((res) => {
                    alert("등록 가능한 상품입니다")
                    // 콘솔창 확인용
                    console.log(res);
                    // 등록 가능하니까 체크 여부를 true로 변경
                    sameCheck = true;

                }).fail((err) => {
                    alert("이미 등록한 상품입니다")
                    // 콘솔창 확인용
                    console.log(err);
                    // 등록 불가이기 때문에 중복체크를 안한 것으로 설정 (아래에 이벤트 처리를 위해)
                    sameCheck = false;
                });
            });

            // 상품명을 입력하는 input 태그에 값이 변경될 때마다 sameCheck 를 false로 설정하는 이벤트
            // => false가 됐으니 상품명을 다른 걸로 바뀌면 꼭 중복체크를 다시 해야되게 만든다.
            $('#name').on('input', function (e) {
                sameCheck = false;
                console.log(sameCheck);
            });
        
            // 동일 상품명 등록하지 못하게 처리하는 이벤트 (최종 상품 등록 버튼)
            // form이 submit 될 때 실행되는 이벤트
            $('form').on('submit', function(e) {
                // == 주의
                if (sameCheck == false) {
                    alert("상품명 중복확인을 해 주세요.");
                    // e.preventDefault(); = 브라우저가 이벤트를 처리하는 동작을 중단시키는 메서드
                    // submit 이벤트를 중단시키기 위해 사용됨
                     e.preventDefault();
                     console.log(sameCheck);
                }else if (sameCheck == true) {
                    alert("상품이 등록되었습니다.");
                    console.log(sameCheck);
                }
            });
        </script>