배움장 - 0tak

2023년 1월 25일의 배움

2023-01-25

jQuery 끝

설 연휴와 함께 jQuery 진도가 끝이 났다. 연휴가 끝이 난 것은 별로지만 러프한 jQuery가 끝난 것은 기쁘다. 오늘 마무리로 jQuery.ajax()의 사용법을 복습하고 지난 주 과제였던 일일 박스오피스 웹앱을 같이 만들었다.

그래도 흥미로운 부분이 있다. 바로 이 앱의 다음과 같은 부분이다.

 $.ajax({
        /* 중략 */
        success: function(data) {
            let arr = data.boxOfficeResult.dailyBoxOfficeList;
            $.each(arr, function(idx, item) {
                let rankTd = $("<td></td>").text(item.rank); // 순위 셀

                let posterImg = $("<img />")
                let posterTd = $("<td></td>").append(posterImg); // 포스터 셀

                let titleTd = $("<td></td>").text(item.movieNm); // 표제 셀


                // 이미지를 가져오기 위한 AJAX 호출
                $.ajax({
                    /* 중략 */
                    success: function(data) {
                        console.log('[KAKAO] 통신 성공');
                        let imgUrl = data.documents[0].thumbnail_url;
                        posterImg.attr('src', imgUrl); // !
                    }
                });
                
                let tr = $("<tr></tr>").append(rankTd) // 행
                            .append(posterTd)
                            .append(titleTd);
                $('tbody').append(tr); // 행을 테이블 바디에 붙임
            });
        }
    });

ajax 함수가 중첩되어 있다. 정확히 말하면, ajax 함수의 success 콜백에서 다시 ajax 함수가 호출된다.
이 앱은 먼저 영화진흥위원회 API를 통해 일일 순위를 받아오는데, 이 데이터에는 포스터 이미지 주소가 없다. 따라서 카카오 이미지 검색 API에 영화 표제를 쿼리로 넘겨 이미지 주소를 가져온다.

이때, 두번째 ajax 함수의 success 콜백 함수는 클로져, 혹은 클로져에 준하는 함수가 된다. ajax()는 Non-blocking 함수이므로, 호출 후에 바로 다음 코드가 실행된다. 그러나 해당 함수 내부에서 상위 스코프의 posterImg를 참조하고 있다. 얼마 간의 시간이 지난 뒤 통신이 종료되어 해당 함수가 실행될 때, 렉시컬 환경은 유지되기 때문에 문제가 없다. 중첩된 함수에서 명시적으로 내부 함수를 return하는 전형적인 클로져의 형태를 띄고 있지는 않지만 클로져로 볼 수 있는 케이스이다.

Vue.js 시작

jQuery를 마무리하고 Vue 진도에 들어갔다.

오늘은 CDN 방식으로 Vue를 HTML에 직접 임포트하여 간단한 Vue의 기능을 훑어보는 시간을 가졌다. Vue 인스턴스를 만들고, 데이터를 동적으로 바인딩하고, 컴포넌트를 등록하는 방법을 배웠다.