🔥 오늘의 목표

• 출근

---

📝 노트필기 및 정리

- 진도
1. 신부님 찾기

순서

type: "GET",
           url: "/i-am-catholic/catholics",
           data: {
               "size": 15
           }

로 먼저 뿌려주는? 것이 첫번째다.

---

그 다음 순서가

$.ajax({
           type: "GET",
           url: "/i-am-catholic/catholics",
           data: {
               "query": ""
           },
           success: function (result) {
               console.log(result);
               let listTag = "";

                if( result.content.length != 0 ){
                    result.content.forEach(function (item) {
                        listTag +=
                            "<li>" +
                            "<a href='./church_detail.html'>" +
                            "<div class='img-wrap'>" +
                            "<img src='../images/celebImg01.jpg' alt=''>" +
                            "</div>" +
                            "<p class='name'>김연아 스텔라 신부</p>" +
                            "<p class='church'>주교좌 명동대성당</p>" +
                            "</a>" +
                            "</li>"
                    });

                    $(".fatherList-wrap").html(listTag);
                }
           }
       });

로,
if( result.content.length != 0 ){
result.content.forEach(function (item) 는 곧
result.content 안에 있는 애들을 반복한다는 뜻이다.

콘솔 찍고, 나오는거 보고(1), 한개 이상일땐 뿌려줘야 하니까 if문 쓰고,
반복문(foreach)쓰고, 어떤 걸 돌려줘야 하는지 본다.

"query": "" 는 검색어, 빈 값이어도 넘겨주는 것

---

검색

$(function(){
        getFather();
    });

    let page=1;

    function getFather() {
        let query=$(".query").val();

        $.ajax({
            type: "GET",
            url: "/i-am-catholic/priests",
            data: {
                "query": query
            },
            success: function (result) {
                console.log(result);
                let listTag = "";

                if( result.content.length != 0 ){
                    result.content.forEach(function (item) {

                        listTag +=
                        "<li>" +
                        "<a href='./church_detail.html'>" +
                        "<div class='img-wrap'>" +
                        "<img src='../images/celebImg01.jpg' alt=''>" +
                        "</div>" +
                        "<p class='name'>"+item.name+"</p>" +
                        "<p class='church'>"+item.church+"</p>" +
                        "</a>" +
                        "</li>"
                    });
                    $(".fatherList-wrap").html(listTag);
                }else{
                    $(".fatherList-wrap").html(listTag);
                }
            }
        });
    }

1. 파라미터를 확인함
2. function으로 ajax를 한번 감싸줌. ex) funtion getFather()
3. 호출되게 위에 $(function)을 가져다줌.
4. html에서 검색될? input에 클래스 query를 준다.

<div class="search-box mt30">
            <input type="text" class="church-input mr10 query" onkeyup="getFather();" placeholder="신부님 또는 성당명을 검색해주세요.">
            <a onclick="getFather();" class="search-btn">검색</a>
</div>

5. 2번의 밑에다 변수 let query=$(".query").val(); 를 준다. (input text 검색어)
   (검색어를 담는 변수를 선언해 준다)
6. a에 a herf를 지우고, 을 준다
7. 검색어query를 넘겨줘야 하니까 ajax 안의 data query 밑에 "query": query(검색어 api 넘기는 값)를 넣어준다.
8. 검색했을 때, 결과가 없다면? 이라는 if문 다음 else{$(".fatherList-wrap").html(listTag); 를 써서
   결과가 없다면 결과가 보이지 않게 해준다.

---

pagnation

$(function(){
        getFather();
    });

    let page=1; //페이지 변수선언

    function getFather() {
        let query=$(".query").val();  //input text 검색어

        $.ajax({
            type: "GET",
            url: "/i-am-catholic/priests",
            data: {
                "query": query, //검색어 api 넘기는 값
                "page": page-1 //페이지 api 넘기는 값
            },
            success: function (result) {
                console.log(result);
                let listTag = "";

                if( result.content.length != 0 ){  //결과값이 0이 아닐 경우
                    result.content.forEach(function (item) {

                        listTag +=
                        "<li>" +
                        "<a>" +
                        "<div class='img-wrap'>" +
                        "<img src='../images/celebImg01.jpg' alt=''>" +
                        "</div>" +
                        "<p class='name'>"+item.name+"</p>" +
                        "<p class='church'>"+item.church+"</p>" +
                        "</a>" +
                        "</li>"
                    });
                    $(".fatherList-wrap").html(listTag);
                }else{
                    $(".fatherList-wrap").html(listTag);
                }
                fPagination(result, page); //페이지네이션 생성 함수 호출
            }
        });
    }

    $("#pagination").on("click", "a", function() { //a태그(자세히보기 상위 태그) 클릭 시
        page = parseInt($(this).attr("gopage")); //페이지이동, a태그의 seq를 가지고
        getFather();
    });

1. let page=1; //페이지 변수선언 해준다.
2. else 뒤에 fPagination(result, page); //페이지네이션 생성 함수 호출 해주고..
3. html페이지에 들어갈수있게? div .paging 에 #pagination을 넣어줘야함(밑의 div 내용은 지워줌)
4. 파라미터에 page: page-1 을 줘야하고,
5. 주소도 바꿔줘야 한다.
6. 여기엔 없는데.. 그 다음 단계는 시퀀스를 넘겨줘야 하는 단계?이다.
   눌렀을때 가야하는 상세페이지를 연결한다. ex) listTag = ""