20221216 TIL

오늘의 한 일

• 최종 프로젝트 - 페이지네이션바, 유저 프로필, 마이프로필 - 북마크 모아보기, 펫 프로필

 

 

페이지네이션 바

 

참조 : https://min-kyung.tistory.com/30

[Javascript] 페이지네이션 구현하기

 

main.js

window.onload = async function loadArticleList() {
    viewset = await getArticleswithPage()
    // 아티클 받아오기 //
    articles = viewset["results"];
    
    // 페이지 수 가져오기 // 
    totalCount = viewset['count']
    console.log(totalCount)
    // 페이지네이션 연습중 //
    pageCount = 5
    pages = Math.ceil(Number(totalCount)/Number(pageCount))
    currentPage = new URL(window.location.href).searchParams.get('page')
    if (!currentPage) {
      currentPage = 1
    }

    let pageGroup = Math.ceil(currentPage / pageCount)

    let lastNumber = pageGroup * pageCount 
    if (lastNumber > pages) {
      lastNumber = pages
    }
    let firstNumber = lastNumber - (pageCount - 1) 
    if (firstNumber < 1) {
      firstNumber = 1
    }



    const article_list = document.getElementById("article-list");
   
    articles.forEach(article=> {
      const newCol = document.createElement("div");
      newCol.setAttribute("class", "col")


      const newCard = document.createElement("div")
      newCard.setAttribute("class", "card")
      newCard.setAttribute("id", article.id)
      newCard.setAttribute("onclick", "ArticleDetail(this.id)")

      newCol.appendChild(newCard)

      const articleImage = document.createElement("img")
      articleImage.setAttribute("class", "card-img-top")

      if(article.image){
        articleImage.setAttribute("src", `${article.image}`)
        articleImage.setAttribute("style", "width: 200px;", "height: 200px;")

      }else{
        articleImage.setAttribute("src", "http://horimmuseum.org/sillim/wp-content/uploads/sites/2/2015/07/%EB%B0%98%EB%A0%A4%EB%8F%99%EB%AC%BC.png") // 빈 "" 안에 이미지 url 입력
        articleImage.setAttribute("style", "width: 200px;", "height: 200px;", )
      }
      
      
      newCard.appendChild(articleImage)

      const newCardBody = document.createElement("div")
      newCardBody.setAttribute("class", "card-body")
      newCard.appendChild(newCardBody)

      const newCardTitle = document.createElement("h5")
      newCardTitle.setAttribute("class", "card-title")
      newCardTitle.innerText = article.title
      newCardBody.appendChild(newCardTitle)



      article_list.appendChild(newCol)

    }
    );

    // 페이지네이션 페이지 생성하기 //
    for (let i = firstNumber; i <= lastNumber; i++) {
      let temp_html = `
      <li class="page-item"><a class="page-link" href="?page=${i}">${i}</a></li>
      `
      
      $('#pagination').append(temp_html)
    }
  };


  function MovePrevious() {
    if (!page_id || page_id == 1) {
      alert("첫 페이지입니다");
    } else {
      var newpage_id = Number(page_id) - 1;
      location.replace(`${frontend_base_url}/main.html?page=${newpage_id}`);
    }
  }
  
  function MoveNext() {
    if (page_id == pages) {
      alert("마지막 페이지입니다");
    } else {
    var newpage_id = Number(page_id) + 1;
    location.replace(`${frontend_base_url}/main.html?page=${newpage_id}`);
    }
  }​

총 페이지수, 페이지당 아티클 갯수, 페이지 그룹, firstNumber, lastNumber를 지정해주고

반복문을 firstNumber에서부터 lastNumber까지 지정하여  페이지네이션 바 숫자를 1~5, 6~10,11~15와 같이 다섯개씩 생성할 수 있게 되었다. 참조한 방식을 어떻게 내 코드 내에서 구현시켜야 하나 고민하는게 재미있었음

 

 

css가 엉성하긴 해도 제대로 작동하는것 확인! css는 팀원분에게 토스했다.. 꾸미기가 젤어려워잉

 

 

알게된 것

 

자바스크립트에서 변수를 전역변수로 선언하는 방법 -> var const let 없이 펑션내에서 그냥 지정해주면 전역변수로 지정된다. 신기하네

 

 

유저 프로필, 마이프로필 - 북마크 모아보기, 펫 프로필

 

모두 이전 프로젝트에 다른 팀원분들이 맡았던 부분과 굉장히 유사해 코드의 의미를 되새겨가며 옮기는 과정을 거쳤다

 

펫 프로필 페이지를 시험하는 과정중에 pet post등록중 잦은 400 에러가 발생하는 것을 확인할 수 있었는데, 별다른 메세지 없이 400만 가지고 도대체 무슨 에러인지 한참을 헤매다가 펫 모델의 나이 필드가 positiveIntegerField인것을 깜빡하고 input 안에 숫자가 아닌 다른 텍스트를 집어넣은 것이 원인이였음을 알게 되었다. 참 별별오류가 다 나..

 

원래 유저 프로필과 마이 프로필은 같은 html상에서 해당 프로필이 접속중인 유저의 프로필인지, 타인의 프로필인지에 따라 수정, 북마크 모아보기 등의 권한을 숨기거나 보여주는 형태로 만들어야 옳겠지만 일단 배포가 급한 상황이라 빠르게 해결할 수 있는 방안으로 프로필 페이지를 따로 하나 더 만드는것으로 해결했는데, 추후에 다시 파보는 시간을 가져야겠습니다