20221212 TIL

오늘의 한 일

• 최종 프로젝트 - 도커 공부, 페이지네이션(백엔드, 프론트엔드), search, aws포인트 신청

 

Docker

 

저번 프로젝트때도 팀원분들이 ec2환경에서 프로젝트를 배포하려고 시도했다가 잘 안됐다는 얘기를 들었는데, yolo나 스타일변환같은 머신러닝 모델을 돌리면서 필요한 Pytorch라던가 tensorflow 등을 돌리려면 도커 이미지 파일을 더 신경써서 써야 하는것 같다.

 

도커 허브에서 yolov5를 검색해보니 이미지 결과가 나오긴 하는데 얘를 가져다 쓰면 되려나? 일단 aws 포인트 신청부터 확정이 나면 실험해보겠는데.. 

 

 

 

AWS 크레딧 신청

 

없는 말주변에 최대한 불려가면서 설명 쓰는중.. 왜 안되는건데 흑흑

 

 

 

 

Pagination

 

백엔드부분과 프론트 일부분도 이전 유화 프로젝트때 써보았으므로 페이지네이션의 구현 자체는 어렵지 않지만,

보통 웹사이트들을 보면 1~10까지 정도의 페이지가 나오고 이후에 11~20, 21~30, ... 로 만들어지는 페이지네이션 바의 구현이 구현해보고 싶은데 감을 잡기가 어렵다..

 

이런 느낌

 

articles/views.py

from rest_framework.pagination import PageNumberPagination
from rest_framework import viewsets

# 페이지네이션 적용(한 페이지당 게시물 수)
class ArticlePagination(PageNumberPagination):  # 👈 PageNumberPagination 상속
    page_size = 3


# 페이지네이션 클래스 상속받은 ArticleViewSet
class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all().order_by("-created_at")
    serializer_class = ArticleSerializer
    pagination_class = ArticlePagination

articles/urls.py

..
from rest_framework.routers import DefaultRouter

router = DefaultRouter()
router.register("", views.ArticleViewSet)

urlpatterns = [
    path("viewset/", include(router.urls)),
    ..
    ..
    
    ]

백엔드 구성은 단순하다. 

 

프론트엔드 (js)

// 주소로 아티클 페이지받기 //
const pageurlParams = new URLSearchParams(window.location.search);
const page_id = pageurlParams.get("page");

// 아티클 리스트 가져오기 (페이지네이션 적용)  //
window.onload = async function loadArticleList() {
  viewset = await getArticleList();
  // 아티클 받아오기 //
  articles = viewset["results"];
  // 페이지 수 가져오기 // 
  pages = viewset['count']
  pages = Math.ceil(Number(pages)/3)

  // 아티클 생성하기 //
  ..
  ..

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

전체 카운트를 한 페이지당 게시물 수로 나눠서 Math.ceil 함수를 씌워주면 페이지 수가 소수점을 반올림해서 값이 나옴 -> 나온 수 만큼 페이지네이션 바 생성

 

여기에 추가해줘야 할 것이 단순히 페이지를 생성하는게 아니라 10페이지 기준으로 끊어주는것

 

참조 : https://nohack.tistory.com/125

간단한 페이지네이션 구현하기

 

 

 

search

 

요 기능도 전전 프로젝트인 NWRS 프로젝트때 만들어봐서 일단 사용법만 다시 익히는 느낌으로 공부했다.

 

views.py

from rest_framework.filters import SearchFilter
..


class WebtoonSearchView(ListAPIView):
    queryset = Webtoon.objects.all()
    serializer_class = WebtoonSerializer
    filter_backends = [SearchFilter]
    search_fields = ('title',)

 

urls.py

    path('search/', views.WebtoonSearchView.as_view(), name='webtoon_search_view'),

 

 

프론트엔드(js)

// webtoon_search.html --------------------------------------------------------------------------->
// 검색한 웹툰 //
async function getWebtoonsSearch() {
  const response = await fetch(
    `${backend_base_url}/webtoon/search?` +
      new URLSearchParams(window.location.search),
    {
      method: "GET",
    }
  );
  console.log(response);

  response_json = await response.json();
  return response_json;
}

// 웹툰 검색 페이지 연결 //
function webtoonSearch() {
  const word = document.getElementById("inputSearch").value;
  const url = `${frontend_base_url}/webtoon_search.html?search=${word}`;
  location.href = url;
}

// 검색 페이지 보여주기 //
async function loadWebtoonSearch() {
  webtoons = await getWebtoonsSearch();

  const thumbnail_url = document.getElementById("thumbnail_url");
  webtoons.forEach((webtoon) => {
    // 사진 버전 //
    const imgTag = document.createElement("img");
    imgTag.src = webtoon.thumbnail_url;
    imgTag.setAttribute("id", webtoon.id);
    imgTag.setAttribute("onclick", "webtoonDetail(this.id)");
    thumbnail_url.appendChild(imgTag);
    // 사진 + 글 버전 //
    const title = document.createElement("span");
    title.innerText = webtoon.title;
    title.setAttribute("id", webtoon.id);
    title.setAttribute("onclick", "webtoonDetail(this.id)");
    thumbnail_url.appendChild(title);
  });
}
loadWebtoonSearch();

 

검색결과창 페이지 html에 ?search=${word}를 넣어서 보내주고

URLSearchParams를 이용해 키워드를 백엔드에 fetch로 GET요청을 보내서 데이터를 받아오는 형식

 

페이지네이션과 함께 사용하면 보통 웹 사이트들이 사용하는 모습 그대로 구현해낼 수 있지 않을까 싶다

요런거!