231213 공부일지

${JSON.stringify(itemDto)}는 json은 addProduct에서 사용을 못하니 , 문자로 바꿔주는것임

이부분은 

function addHTML(itemDto) {
    /**
     * class="search-itemDto" 인 녀석에서
     * image, title, lprice, addProduct 활용하기
     * 참고) onclick='addProduct(${JSON.stringify(itemDto)})'
     */
    return ` <div class="search-itemDto">
            <div class="search-itemDto-left">
                <img src="${itemDto.image}" alt="">
            </div>
            <div class="search-itemDto-center">
                <div>${itemDto.title}</div>
                <div class="price">
                    ${itemDto.lprice}
                    <span class="unit">원</span>
                </div>
            </div>
            <div class="search-itemDto-right">
                <img src="images/icon-save.png" alt="" onclick='addProduct(${JSON.stringify(itemDto)})'>
            </div>
        </div>`
    //${JSON.stringify(itemDto)}는 json은 addProduct에서 사용을 못하니 , 문자로 바꿔주는것임
}

위의 코드에서 이용할때사용함

잘 참고하기

 

===========================================================

function execSearch() {
    /**
     * 검색어 input id: query
     * 검색결과 목록: #search-result-box
     * 검색결과 HTML 만드는 함수: addHTML
     */
        // 1. 검색창의 입력값을 가져온다.
    let query = $('#query').val(); // 해당 id 입력창의 값을 가져온다.
    // 2. 검색창 입력값을 검사하고, 입력하지 않았을 경우 focus.
    if (query == '') {
        alert("검색어를 입력해주세요");
        $('#query').focus(); //포커스를 잡게만든다. 다시 입력창이 반짝이게한다.
    }
    // 3. GET /api/search?query=${query} 요청
    $.ajax({
        type: 'GET',
        url: `/api/search?query=${query}`,
        success: function (response) {
            //요청 성공시에
            for (let i = 0; i < response.length; i++) { //각 성공시받은 데이터들로
                let itemDto = response[i]; //각각 받아서
                let tempHtml =  addHTML(itemDto); // html 추가할 내용을 구성
                $('#search-result-box').append(tempHtml); //html 추가할 영역에 추가한다.
            }
        }

    })
    //contenttype, data 는 get에서는 사용안함 , put, post에서만 사용한다. 참고하기

    // 4. for 문마다 itemDto를 꺼내서 HTML 만들고 검색결과 목록에 붙이기!
    

}

여기 코드에서 

if (query == '') {
    alert("검색어를 입력해주세요");
    $('#query').focus(); //포커스를 잡게만든다. 다시 입력창이 반짝이게한다.
}

에서 

query == ''

에서 =를 1개만 이용해서 문제(에러)인경우가 있었다!!!!!!!!

 

이러는경우 query값이 빈칸이 들어가서 문제가 생긴다... 잘 체크해야한다.

 

2023-12-14T02:23:34.726+09:00 ERROR 26912 --- [nio-8080-exec-4] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.springframework.web.client.HttpClientErrorException$BadRequest: 400 Bad Request: "{<EOL>?"errorMessage":"Incorrect query request (잘못된 쿼리요청입니다.)",<EOL>?"errorCode":"SE01"<EOL>}"] with root cause

이렇게 안쪽의 기능에서 쿼리문 문제로 되어서

애꿎은 다른 내부 코드를 보고있엇음!! 오타 잘봐라!!