Web개발 :: Pagination, Crawling, Localstorage _TIL76

■ JITHub 개발일지 76일차

□  TIL(Today I Learned) ::

사이트 배포 후 보완작업 진행

 - 오늘 프로젝트 개발 보완시 진행했던 내용 중 주요 내용은 아래와 같다.

   · 장소 리스트페이지 사진 클릭시 상세페이지 링크 이동

     간단하게 <a>태그를 넣으려 했으나, 테이블에 이미지가 들어가있어 실수가 있었다.

    <a><td>...<img> ... </td></a> 와 같은 식으로 코드를 작성하여 링크가 적용되지 않았다.

    <td>...<a><img></a>...</td> 식으로 다시 변경해주니 잘 동작했다.

   · 사이트 로고 클릭시 index.html으로 이동

    각 html 템플릿 파일의 header에 들어가 있는 로고에 <a>태그를 부여했다. 클릭시 index.html로 이동한다.

   · Select 페이지 '다시 검색하기' 조건별 Show/Hidden 기능 부여

    <div id="select_button_reload"></div>를 생성하고, if문에 따라 아래 코드가 동작하게 하였다.

$("#select_button_reload").append(
    `<div class="select_button" onclick="reload_page()"><a href="#" style="text-decoration:none;color:#000;">다시 검색하기</a></div>`
)

 

   · 검색 페이지 별점 소수점 Round 처리(데이터베이스 수정)

     이부분은 엑셀을 활용하였다. 함수는 =ROUND(<해당값>, <소숫점 자리수>)

 

   · 장소 영업시간 다시 크롤링하기

     requests, json을 활용해 잘못 읽어본 영업시간을 다시 불러왔다.

 

   · 페이지네이션

     개발 도중 갑자기 페이지네이션이 동작되지 않는 문제가 발생했다.

     동작이 잘 되었는데 안되었던 점, 그리고 개발 중에 스타일을 건드렸던 점을 미루어볼 때 괄호가 어느 곳에서 안닫혔겠거니 생각을 했다. 빠르게 찾진 못했지만 맥은 비슷하게 짚었던 것 같다. 아래와 같이 display:none; 이후에 쌍따옴표가 없었던 부분 때문에 페이지네이션이 모두 날아가버렸던 것...

    } else if (page_no == 1) {
        $('#pagenation').empty()
        $('#pagenation').append(
        `
            <div class="no_page"style="display:none;></div>
            <

 

   · 버튼 hover시 Div 크기를 확대하려면 아래와 같이 transform : scale(배율) 으로 변경해줄 수 있다.

.select_box :hover{
    transform: scale(1.1);
}

 

   · 리뷰 생성 시 로컬스토리지 review_cnt +1 동기화

     리뷰를 생성할 때 마다 review_cnt를 +1, 삭제할 때에는 review_cnt를 -1해주어야 한다. Backend에서는 동작되게 구현을 해 두었지만, 사용자 계정은 처음에 로그인할 때 로컬 스토리지에 payload로 review_cnt를 받아주고 있다. localstorage에 상태를 업데이트해주어야 하는데 이 부분은 현재도 방법을 확인하고 있다.