[Vue.js] 쇼핑몰PJ/매장찾기 | 지역명 클릭시 지역 중분류 데이터 출력1

대분류 지역명 클릭했을 때 중분류 지역명이 나오고, 출력된 중분류 데이터에서 '뒤로가기' 클릭시 다시 대분류 지역 데이터가 출력되도록 해야 했다.

그래서 관련 기능을 하는 코드를 짜는 중에,

처음엔 별 고려 없이 함수 하나에 또 다른 함수1, 2 .. 이런 식으로 코드를 줄줄이 짜니까

코드가 길어질수록 보기 불편하고, 뭐가 어떤 기능을 하는지 한 눈에 보기 어려웠다.

당연하게도 기능 구현도 잘 안되었다.

그래서 내가 짠 코드를 다시 살펴보고, 공통 기능을 하는 코드를 하나의 함수로 묶었더니 일단 깔끔하고, 잘 작동했다!

 

아직 구체적인 기능은 여기서 더 살을 붙여 넣어야겠지만

이번에 코드를 다시 리팩토링하는 과정에서 깨달은 바가 있어 까먹기 전에 얼른 정리하려고 남기는 후기다.

 

먼저 내가 처음에 짠 망작 코드(※ 잘 작동 안됨 주의)

// 메인 section5 매장 검색 함수
function mapSearch() {
    $(".tabbx li").click(function() {
        // '지역검색' 클릭시 나타날 지역데이터
        const localData = ["서울", "부산", "인천"];
        const local1 = ["뒤로가기", "강남구", "용산구", "금천구"];
        const local2 = ["뒤로가기", "부산진구", "금정구", "사하구", "해운대구"];
        const local3 = ["뒤로가기", "연수구", "남동구"];

        $(this).addClass("check").siblings().removeClass("check").css({backgroundColor: "#000", color: "#fff"});
        if ($(this).is(".check")) {
            $(this).css({backgroundColor: "#fdd000", color: "#000"})
        }
        // 지역검색 li 클릭시
        $(this).is($(".tabbx li").eq(1)) ? $("#map_contents").css({display: "block", width: "100%", height: "calc(100% - 53px)", position: "absolute", background: "#fff", zIndex: "1"}) : $("#map_contents").css("display", "none");
        const locals = $("#map_contents > .locals");
        
        // 지역 대분류 데이터 출력함수
        function localTxt() {
            // 중복 클릭으로 인해 여러 번 쌓이지 않도록 이전 내용 제거
            locals.empty();
            // 지역데이터 출력
            localData.forEach(x=> {
            locals.append(`<h3 class="loc_thumb">${x}</h3>`);
            });
        };

        // 최초호출!
        localTxt();

        $(".loc_thumb").click(function() {
            const locName = $(this).text();
            switch(locName) {
                case "서울": 
                locals.empty();
                    function seoulData() {
                        local1.map(x=> {
                            locals.append(`<h3 class="loc_depth">${x}</h3>`);
                        });
                    }
                    seoulData();
                    // 뒤로가기 텍스트
                    const backtxt = $(".loc_depth").eq(0);
                    const seoultxt = $(".loc_depth").eq(0);
                    backtxt.on("click", localTxt());
                    seoultxt.on("click", seoulData());
                    break;
                case "부산": break;
                case "인천": break;
            }
        });
    });

이건 일단 서울 데이터 먼저 작동시켜보려고 짠 테스트 코드다.

의식의 흐름대로 짰는데 내가 원하는 대로 기능이 작동하질 않았다ㅠ

오잉 .??

하 ㅋㅋㅋㅋㅋㅋㅋ

쉬운 기능같은데 안되서 약올랐다. 이때부터 내 코드가 뭐가 잘못이길래 이러나 점검 점검

 

다시 짠 코드

// 메인 section5 매장 검색 함수
function mapSearch() {
    $(".tabbx li").click(function() {
        // '지역검색' 클릭시 나타날 지역데이터
        const localData = ["서울", "부산", "인천"];
        const local1 = ["뒤로가기", "강남구", "용산구", "금천구"];
        const local2 = ["뒤로가기", "부산진구", "금정구", "사하구", "해운대구"];
        const local3 = ["뒤로가기", "연수구", "남동구"];

        $(this).addClass("check").siblings().removeClass("check").css({backgroundColor: "#000", color: "#fff"});
        if ($(this).is(".check")) {
            $(this).css({backgroundColor: "#fdd000", color: "#000"})
        }
        // 지역검색 li 클릭시
        $(this).is($(".tabbx li").eq(1)) ?
        $("#map_contents").css({display: "block", width: "100%", height: "calc(100% - 53px)", position: "absolute", background: "#fff", zIndex: "1"}) && renderLocal(localData): $("#map_contents").css("display", "none");

        // 대분류 지역 데이터 출력 함수
        function renderLocal(val) {
            const locals = $("#map_contents > .locals");
            locals.empty();

            val.forEach(x=> {
                locals.append(`<h3 class="loc_thumb">${x}</h3>`);
            });
            $(".loc_thumb").on("click", function(e) {
                clkTumb(e);
            });
        } /////// renderLocal 함수 ////////

        // 중분류 서울 데이터 출력 함수
        function renderSeoul() {
            renderLocal(local1);
            // 뒤로가기 텍스트
            const backtxt = $(".loc_thumb").eq(0);
            backtxt.on("click", clkBack);
        };

        // 중분류 부산 데이터 출력 함수
        function renderBusan() {
            renderLocal(local2);
            // 뒤로가기 텍스트
            const backtxt = $(".loc_thumb").eq(0);
            backtxt.on("click", clkBack);
        };

        // 중분류 인천 데이터 출력 함수
        function renderIncheon() {
            renderLocal(local3);
            // 뒤로가기 텍스트
            const backtxt = $(".loc_thumb").eq(0);
            backtxt.on("click", clkBack);
        };

        // 뒤로가기 버튼 이벤트 핸들러
        function clkBack() {
            renderLocal(localData);
            $(".loc_thumb").off("click");
            $(".loc_thumb").on("click", function(e) {
                clkTumb(e);
            });
        }

        // 중분류 지역 데이터 출력 함수
        function clkTumb(e) {
            const locName = $(e.currentTarget).text();
            console.log(locName)
            switch(locName) {
                case "서울": 
                    renderSeoul();
                    break;
                case "부산":
                    renderBusan();
                    break;
                case "인천": 
                    renderIncheon();
                    break;
            }

        }

    }); //////// click /////////

코드를 다시 살펴보니까 주요 기능을 하는 함수를 '대분류 지역명 출력함수, 각각의 중분류 지역명 출력함수, 뒤로가기 클릭시 대분류 지역명 출력함수' 이렇게 나눌 수 있겠더라.

 출력된 중분류 데이터에서 뒤로가기 버튼 클릭시에는 출력된 중분류를 없애고 다시 대분류 데이터만 출력되도록 해야하기 때문에(이것의 반복..) 함수간 짜임을 생각해서 로직을 짜야했다.

과연 작동은 ??

잘 된다 ~~ : D

이제 클릭한 중분류 지역명에 따라 map 지도에 표시될 마커를 찍으면 되는데 ... 할 수 있겠지?

아무쪼록 코드 한 줄의 의미와 가치를 되새길 수 있었던 시간이었다.

기능 넣으려고 하면 이것도 하고 싶고, 저렇게도 하고 싶고 욕심이 많이 난다.

휴 내가 하고 싶은 기능들을 생각했을 때 아직 엄두 안나는 부분들도 있지만 이때 좀더 단단하게 차근차근 다져나가야겠다.

 

오늘의 교훈

간단한 기능이라고 우습게 보면 안됨 .....