13. Django Basic django 페이지

18905 단어
1. Django의 내장 페이지 분할기(paginator)
view
from django.shortcuts import render,HttpResponse

# Create your views here.
from app01.models import *
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

def index(request):

    '''
          :

    Booklist=[]
    for i in range(100):
        Booklist.append(Book(title="book"+str(i),price=30+i*i))
    Book.objects.bulk_create(Booklist)
    '''

    '''
      :

    book_list=Book.objects.all()

    paginator = Paginator(book_list, 10)

    print("count:",paginator.count)           #    
    print("num_pages",paginator.num_pages)    #   
    print("page_range",paginator.page_range)  #     



    page1=paginator.page(1) # 1  page  
    for i in page1:         #   1        
        print(i)

    print(page1.object_list) # 1      


    page2=paginator.page(2)

    print(page2.has_next())            #      
    print(page2.next_page_number())    #      
    print(page2.has_previous())        #      
    print(page2.previous_page_number()) #      



    #   
    #page=paginator.page(12)   # error:EmptyPage       

    #page=paginator.page("z")   # error:PageNotAnInteger      
  
    #page = page_obj.page(-1)  #That page number is less than 1 ,  EmptyPage   ,       ,    1
    '''


    book_list=Book.objects.all()

    paginator = Paginator(book_list, 10) #      10    
    page = request.GET.get('page',1)  #     url     http://127.0.0.1:8000/  /?page=1
    currentPage=int(page)


    try:
        print(page)
        book_list = paginator.page(page)
    except PageNotAnInteger:
        book_list = paginator.page(1)
    except EmptyPage:
        book_list = paginator.page(paginator.num_pages)


    return render(request,"index.html",{"book_list":book_list,"paginator":paginator,"currentPage":currentPage})

index.html:



    
    Title
    



    {% for book in book_list %}
  • {{ book.title }} -----{{ book.price }}
  • {% endfor %}

확장성
from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage
def show(request):

    book_objs = models.Book.objects.all()
    page_obj = Paginator(book_objs,1)
    print('    ',page_obj.count)
    print('   ',page_obj.num_pages)
    print('    ',page_obj.page_range)

    page1 = page_obj.page(1)
    for i in page1:
        print(i)
    print(page1.object_list)
    page2 = page_obj.page(2)

    print(page2.has_previous())
    print(page2.has_next())
    print(page2.next_page_number())
    print(page2.previous_page_number())
    # page = page_obj.page(-1)
    page_num = request.GET.get('page',1)

    try:
        current_page_num = int(page_num)
        page_num_data = page_obj.page(current_page_num)
    except PageNotAnInteger:
        current_page_num = 1
        page_num_data = page_obj.page(current_page_num)
    except EmptyPage:
        current_page_num = page_obj.num_pages
        page_num_data = page_obj.page(current_page_num)
    except Exception:
        current_page_num = 1
        page_num_data = page_obj.page(current_page_num)
    if page_obj.num_pages > 11:  #  ,          11,                ,     11   ,     5 ,  5 
        if current_page_num - 5 < 1:  
            pageRange = range(1,12)
        elif current_page_num + 5 > page_obj.num_pages:
            pageRange = range(page_obj.num_pages-10,page_obj.num_pages+1)
        else:
            pageRange = range(current_page_num - 5,current_page_num + 6)

    else:
        pageRange = page_obj.page_range

    book_objs = page_num_data
    return render(request,'show.html',{'book_objs':book_objs,'current_page_num':current_page_num,'page_obj':page_obj,'pageRange':pageRange})

  show.html
{% load static %}



    
    Title
    



{% for book_obj in book_objs %} {% endfor %}
id title
{{ book_obj.pk }} {{ book_obj.title }} {{ book_obj.price }} {{ book_obj.get_sex_display }} {{ book_obj.publishDate|date:'Y-d-m' }} {{ book_obj.publish.name }} {% for author in book_obj.authors.all %} {{ author.name }} {% endfor %} 편집자 삭제

  model.py 파일 내용:
from django.db import models

# Create your models here.


class Author(models.Model):
    nid = models.AutoField(primary_key=True)
    name=models.CharField( max_length=32)
    age=models.IntegerField()
    authorDetail=models.OneToOneField(to="AuthorDetail",to_field="nid")
    def __str__(self):
        return self.name
class AuthorDetail(models.Model):

    nid = models.AutoField(primary_key=True)
    birthday=models.DateField()
    telephone=models.BigIntegerField()
    addr=models.CharField( max_length=64)

class Publish(models.Model):
    nid = models.AutoField(primary_key=True)
    name=models.CharField( max_length=32)
    city=models.CharField( max_length=32)
    email=models.EmailField()
    def __str__(self):
        return self.name

class Book(models.Model):

    nid = models.AutoField(primary_key=True)
    title = models.CharField( max_length=32)

    publishDate=models.DateField()
    price=models.DecimalField(max_digits=5,decimal_places=2)
    publish=models.ForeignKey(to="Publish",to_field="nid")
    authors=models.ManyToManyField(to='Author',)
    def __str__(self):
        return self.title

2. 사용자 정의 페이지
데이터베이스에 데이터가 매우 많으면, 우리는 보통 앞쪽 페이지에서 페이지를 나누어 보여 준다.
페이지의 데이터는 전방 페이지에서 실현할 수도 있고 후단 페이지에서 실현할 수도 있다.
백엔드에서 페이지를 나누는 원리는 매번 한 페이지의 데이터만 요청하는 것이다.
준비 작업
스크립트를 사용하여 테스트 데이터를 대량으로 만듭니다(다음 코드를 bulk create.py 파일에 저장하여 Django 프로젝트의 루트 디렉터리에 저장하고 직접 실행하면 됩니다.):
import os

if __name__ == "__main__":
    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "about_orm.settings")

    import django
    django.setup()

    from app01 import models
    bulk_obj = (models.Publisher(name=' {}   '.format(i)) for i in range(300))
    models.Publisher.objects.bulk_create(bulk_obj) #    ,    

다음 버전의 페이지 나누기를 보십시오.
def publisher_list(request):
    #  URL          
    try:
        current_page = int(request.GET.get('page'))
    except Exception as e:
        #                   1 
        current_page = 1
    #     
    total_count = models.Publisher.objects.count()
    #            
    per_page = 10
    #        
    total_page, more = divmod(total_count, per_page)
    if more:
        total_page += 1
    #              (      ,      )
    max_show = 11
    half_show = max_show // 2
    #              
    if total_page <= max_show:  #              
        page_start = 1
        page_end = total_page
    elif current_page + half_show >= total_page:  #     
        page_end = total_page
        page_start = total_page - max_show
    elif current_page - half_show <= 1:  #     
        page_start = 1
        page_end = max_show
    else:  #       
        page_start = current_page - half_show
        page_end = current_page + half_show
    #         
    data_start = (current_page-1) * per_page
    data_end = current_page * per_page

    publisher_list = models.Publisher.objects.all()[data_start:data_end]

    #           
    page_html_list = []
    page_html_list.append('')
    page_html = "".join(page_html_list)
    return render(request, "publisher_list.html", {"publisher_list": publisher_list, "page_html": page_html})
class Pagination(object):
    """     (Bootstrap )"""
    def __init__(self, current_page, total_count, base_url, per_page=10, max_show=11):
        """
        :param current_page:        
        :param total_count:     
        :param base_url:    URL
        :param per_page:         ,    10
        :param max_show:             ,    11
        """
        try:
            self.current_page = int(current_page)
        except Exception as e:
            #                   1 
            self.current_page = 1
        #            
        self.per_page = per_page
        #        
        total_page, more = divmod(total_count, per_page)
        if more:
            total_page += 1
        self.total_page = total_page
        #              (      ,      )
        self.max_show = max_show
        self.half_show = max_show // 2
        self.base_url = base_url

    @property
    def start(self):
        return (self.current_page-1) * self.per_page

    @property
    def end(self):
        return self.current_page * self.per_page

    def page_html(self):
        #              
        if self.total_page <= self.max_show:  #              
            page_start = 1
            page_end = self.total_page
        elif self.current_page + self.half_show >= self.total_page:  #     
            page_end = self.total_page
            page_start = self.total_page - self.max_show
        elif self.current_page - self.half_show <= 1:  #     
            page_start = 1
            page_end = self.max_show
        else:  #       
            page_start = self.current_page - self.half_show
            page_end = self.current_page + self.half_show
        #           
        page_html_list = []
        page_html_list.append('')
        return "".join(page_html_list)
def publisher_list(request):
    #  URL          
    current_page = int(request.GET.get('page'))
    #  len(models.Publisher.objects.all())   
    total_count = models.Publisher.objects.count()
    page_obj = Pagination(current_page, total_count, request.path_info)
    data = models.Publisher.objects.all()[page_obj.start:page_obj.end]
    page_html = page_obj.page_html()
    return render(request, "publisher_list.html", {"publisher_list": data, "page_html": page_html})

django 내장 페이지 분할기 페이지 추가
from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

L = []
for i in range(999):
    L.append(i)

def index(request):
    current_page = request.GET.get('p')

    paginator = Paginator(L, 10)
    # per_page:         
    # count:         
    # num_pages:   
    # page_range:        , : (1,10),(1,200)
    # page:     page  
    try:
        posts = paginator.page(current_page)
        # has_next                    
        # next_page_number           
        # has_previous                
        # previous_page_number       
        # object_list                    
        # number                   
        # paginator             paginator  
    except PageNotAnInteger:
        posts = paginator.page(1)
    except EmptyPage:
        posts = paginator.page(paginator.num_pages)
    return render(request, 'index.html', {'posts': posts})



    
    


<ul>
    {% for item in posts %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

<div class="pagination">
      <span class="step-links">
        {% if posts.has_previous %}
            <a href="?p={{ posts.previous_page_number }}">Previous</a>
        {% endif %}
          <span class="current">
            Page {{ posts.number }} of {{ posts.paginator.num_pages }}.
          </span>
          {% if posts.has_next %}
              <a href="?p={{ posts.next_page_number }}">Next</a>
          {% endif %}
      </span>

</div>

</code></pre></disable_script></code></pre>
                <div class="">
                    
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1344493394064923"
         crossorigin="anonymous"></script>
    <!-- geeks-中间底部-01 -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-1344493394064923"
         data-ad-slot="9316917350"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    
    
                </div>
                

                

                
                
                <div class="ai-source-div   mt-4">
                    <div class="">
                        <div class="alert alert-light  p-4 col-12 ai-recommended-bg" role="alert"
                             style="background-color:#f2f2f2;line-height: 1.5;">

                            
                            <div class="">

                                <p class="h4 text-black">
                                    <svg style="width:3rem;height:3rem;" t="1647785854262" class="icon"
                                         viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                         p-id="3774" width="200" height="200">
                                        <path d="M705.92 915.84H320c-28.16 0-51.2-23.04-51.2-51.2V630.4c0-28.16 23.04-51.2 51.2-51.2h385.92c28.16 0 51.2 23.04 51.2 51.2v234.88c0 27.52-23.04 50.56-51.2 50.56z"
                                              fill="#EEF6FF" p-id="3775"></path>
                                        <path d="M705.92 928.64H320c-35.2 0-64-28.8-64-64V630.4c0-35.2 28.8-64 64-64h385.92c35.2 0 64 28.8 64 64v234.88c0 35.2-28.8 63.36-64 63.36zM320 592c-21.12 0-38.4 17.28-38.4 38.4v234.88c0 21.12 17.28 38.4 38.4 38.4h385.92c21.12 0 38.4-17.28 38.4-38.4V630.4c0-21.12-17.28-38.4-38.4-38.4H320z"
                                              fill="#708DB7" p-id="3776"></path>
                                        <path d="M515.2 163.2C418.56 163.2 339.2 242.56 339.2 338.56V518.4h352V338.56c0-96-79.36-175.36-176-175.36z"
                                              fill="#E8E6FF" p-id="3777"></path>
                                        <path d="M704 531.2H326.4V338.56c0-103.68 84.48-188.16 188.8-188.16S704 234.88 704 338.56V531.2z m-352-25.6h326.4V338.56c0-89.6-72.96-162.56-163.2-162.56S352 248.96 352 338.56V505.6z"
                                              fill="#708DB7" p-id="3778"></path>
                                        <path d="M456.32 518.4h112v60.8H456.32z" fill="#EEF6FF" p-id="3779"></path>
                                        <path d="M581.76 592H443.52V505.6h137.6v86.4z m-112.64-25.6h86.4V531.2H469.12v35.2z"
                                              fill="#708DB7" p-id="3780"></path>
                                        <path d="M714.88 431.36c-12.8 0-23.04-10.24-23.04-23.04v-38.4c0-12.8 10.24-23.04 23.04-23.04s23.04 10.24 23.04 23.04v38.4c0 12.8-10.24 23.04-23.04 23.04z"
                                              fill="#EEF6FF"
                                              p-id="3781"></path>
                                        <path d="M714.88 444.16c-19.84 0-35.84-16-35.84-35.84v-38.4c0-19.84 16-35.84 35.84-35.84s35.84 16 35.84 35.84v38.4c0 19.84-16 35.84-35.84 35.84z m0-83.84c-5.76 0-10.24 4.48-10.24 10.24v38.4c0 5.76 4.48 10.24 10.24 10.24s10.24-4.48 10.24-10.24v-38.4c0-5.76-4.48-10.24-10.24-10.24z"
                                              fill="#708DB7" p-id="3782"></path>
                                        <path d="M312.32 421.12c-12.8 0-23.04-10.24-23.04-23.04v-38.4c0-12.8 10.24-23.04 23.04-23.04s23.04 10.24 23.04 23.04v38.4c0 12.8-10.88 23.04-23.04 23.04z"
                                              fill="#EEF6FF"
                                              p-id="3783"></path>
                                        <path d="M312.32 433.92c-19.84 0-35.84-16-35.84-35.84v-38.4c0-19.84 16-35.84 35.84-35.84s35.84 16 35.84 35.84v38.4c0 19.84-16.64 35.84-35.84 35.84z m0-83.84c-5.76 0-10.24 4.48-10.24 10.24v38.4c0 5.76 4.48 10.24 10.24 10.24s10.24-4.48 10.24-10.24v-38.4c0-5.76-5.12-10.24-10.24-10.24z"
                                              fill="#708DB7" p-id="3784"></path>
                                        <path d="M795.52 763.52h-25.6c-7.04 0-12.8-5.76-12.8-12.8v-46.08c0-14.08-2.56-25.6 11.52-25.6h26.88c14.08 0 25.6 11.52 25.6 25.6v33.28c0 14.08-11.52 25.6-25.6 25.6z"
                                              fill="#EEF6FF"
                                              p-id="3785"></path>
                                        <path d="M795.52 776.32h-25.6c-14.08 0-25.6-11.52-25.6-25.6v-46.08-5.12c0-8.96-0.64-19.2 6.4-26.24 4.48-4.48 10.24-6.4 17.92-6.4h26.88c21.12 0 38.4 17.28 38.4 38.4v33.28c0 20.48-17.28 37.76-38.4 37.76z m-26.24-84.48v58.88h25.6c7.04 0 12.8-5.76 12.8-12.8v-33.28c0-7.04-5.76-12.8-12.8-12.8h-25.6z"
                                              fill="#708DB7" p-id="3786"></path>
                                        <path d="M816.64 734.08l-0.64-25.6v12.8-12.8c5.12 0 48-3.2 48-58.24V454.4h25.6v196.48c0 81.28-72.32 83.2-72.96 83.2z"
                                              fill="#708DB7" p-id="3787"></path>
                                        <path d="M228.48 763.52h25.6c7.04 0 12.8-5.76 12.8-12.8v-58.88c0-7.04-5.76-12.8-12.8-12.8h-25.6c-14.08 0-25.6 11.52-25.6 25.6v33.28c0 14.08 11.52 25.6 25.6 25.6z"
                                              fill="#EEF6FF"
                                              p-id="3788"></path>
                                        <path d="M254.08 776.32h-25.6c-21.12 0-38.4-17.28-38.4-38.4v-33.28c0-21.12 17.28-38.4 38.4-38.4h25.6c14.08 0 25.6 11.52 25.6 25.6v58.88c0 14.08-11.52 25.6-25.6 25.6z m-25.6-84.48c-7.04 0-12.8 5.76-12.8 12.8v33.28c0 7.04 5.76 12.8 12.8 12.8h25.6v-58.88h-25.6zM519.04 140.16c-23.68 0-43.52-19.2-43.52-43.52s19.2-43.52 43.52-43.52 43.52 19.2 43.52 43.52-19.84 43.52-43.52 43.52z m0-61.44c-9.6 0-17.92 8.32-17.92 17.92s8.32 17.92 17.92 17.92 17.92-8.32 17.92-17.92-8.32-17.92-17.92-17.92z"
                                              fill="#708DB7" p-id="3789"></path>
                                        <path d="M505.6 134.4h25.6v32h-25.6z" fill="#708DB7" p-id="3790"></path>
                                        <path d="M512.64 305.92m-69.12 0a69.12 69.12 0 1 0 138.24 0 69.12 69.12 0 1 0-138.24 0Z"
                                              fill="#FFF27D" p-id="3791"></path>
                                        <path d="M512.64 387.84c-44.8 0-81.92-36.48-81.92-81.92S467.2 224 512.64 224s81.92 36.48 81.92 81.92-37.12 81.92-81.92 81.92z m0-138.24c-30.72 0-56.32 24.96-56.32 56.32s24.96 56.32 56.32 56.32 56.32-24.96 56.32-56.32-25.6-56.32-56.32-56.32z"
                                              fill="#708DB7" p-id="3792"></path>
                                        <path d="M604.16 433.28m-10.24 0a10.24 10.24 0 1 0 20.48 0 10.24 10.24 0 1 0-20.48 0Z"
                                              fill="#708DB7" p-id="3793"></path>
                                        <path d="M422.4 659.2H339.2c-7.04 0-12.8-5.76-12.8-12.8s5.76-12.8 12.8-12.8h83.2c7.04 0 12.8 5.76 12.8 12.8s-5.76 12.8-12.8 12.8z"
                                              fill="#708DB7" p-id="3794"></path>
                                        <path d="M512.64 305.92m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#708DB7"
                                              p-id="3795"></path>
                                        <path d="M876.8 473.6c-27.52 0-51.2-21.76-51.2-46.72 0-7.04 5.76-12.8 12.8-12.8s12.8 5.76 12.8 12.8c0 10.88 12.16 21.12 25.6 21.12s25.6-10.24 25.6-21.12c0-7.04 5.76-12.8 12.8-12.8s12.8 5.76 12.8 12.8c0 24.96-23.68 46.72-51.2 46.72z"
                                              fill="#708DB7" p-id="3796"></path>
                                        <path d="M194.56 734.08c-0.64 0-72.96-2.56-72.96-83.84V454.4h25.6v196.48c0 55.04 42.88 57.6 48 58.24l-0.64 24.96z"
                                              fill="#708DB7" p-id="3797"></path>
                                        <path d="M131.2 473.6c-27.52 0-51.2-21.76-51.2-46.72 0-7.04 5.76-12.8 12.8-12.8s12.8 5.76 12.8 12.8c0 10.88 12.16 21.12 25.6 21.12s25.6-10.24 25.6-21.12c0-7.04 5.76-12.8 12.8-12.8s12.8 5.76 12.8 12.8c0 24.96-23.04 46.72-51.2 46.72z"
                                              fill="#708DB7" p-id="3798"></path>
                                        <path d="M583.04 837.12m-23.68 0a23.68 23.68 0 1 0 47.36 0 23.68 23.68 0 1 0-47.36 0Z"
                                              fill="#FFF27D" p-id="3799"></path>
                                        <path d="M583.04 873.6c-19.84 0-36.48-16-36.48-36.48s16-36.48 36.48-36.48 36.48 16 36.48 36.48-16.64 36.48-36.48 36.48z m0-46.72c-5.76 0-10.88 4.48-10.88 10.88s4.48 10.88 10.88 10.88 10.88-4.48 10.88-10.88-5.12-10.88-10.88-10.88z"
                                              fill="#708DB7" p-id="3800"></path>
                                        <path d="M672.64 837.12m-23.68 0a23.68 23.68 0 1 0 47.36 0 23.68 23.68 0 1 0-47.36 0Z"
                                              fill="#FF9797" p-id="3801"></path>
                                        <path d="M672.64 873.6c-19.84 0-36.48-16-36.48-36.48s16-36.48 36.48-36.48 36.48 16 36.48 36.48-16.64 36.48-36.48 36.48z m0-46.72c-5.76 0-10.88 4.48-10.88 10.88s4.48 10.88 10.88 10.88 10.88-4.48 10.88-10.88-5.12-10.88-10.88-10.88z"
                                              fill="#708DB7" p-id="3802"></path>
                                    </svg>

                                    이 내용에 흥미가 있습니까?
                                </p>

                            </div>
                            
                            
                            <p><small class="text-muted">현재 기사가 여러분의 문제를 해결하지 못하는 경우  AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:</small></p>
                            <a href="/tutorial/json-in-various-languages"

                               class=" h4 text-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                     fill="currentColor"
                                     class="bi bi-link-45deg" viewBox="0 0 16 16">
                                    <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"></path>
                                    <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"></path>
                                </svg>
                                다양한 언어의 JSON</a>
                            
                            <p><small class="text-muted line-height " style="line-height:1;">JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다.
그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다.
저는 일반적으로 '객체'{}...</small>
                            </p>
                            
                            <hr class="my-1">

                            
                            <p class="m-0" style="line-height: 1.5;"><small class="text-muted m-0">텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.</small></p>
                            
                            <p class="m-0" style="line-height: 1.5;"><small class="text-muted m-0">CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.</small></p>

                            

                        </div>
                    </div>


                </div>

                
                


            </div>


            <div class="row mb-4">
                <div class="col-6 text-primary text-capitalize ">
                    <a class=" btn bg-primary-soft  small  float-left  text-capitalize "
                       href="/tutorial/kotlin-restarts-jvmoverloads">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="feather feather-arrow-left">
                            <line x1="19" y1="12" x2="5" y2="12"></line>
                            <polyline points="12 19 5 12 12 5"></polyline>
                        </svg>

                        Kotlin 재 부팅 JvmOverloads</a>
                </div>
                <div class="col-6  text-primary text-capitalize ">
                    <a class=" btn bg-primary-soft small float-right text-capitalize "
                       href="/tutorial/accumulate-nginx-partial-settings">Nginx 일부 설정 축적
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="feather feather-arrow-right">
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                            <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>


                    </a>
                </div></div>
            
            <div class="row mb-4">
                <div class="col-xl-12 col-12">

                    <div class="container-fluid">
                        <h4 class="card-title ">좋은 웹페이지 즐겨찾기</h4>

                        <!--begin::Stats Widget 4-->
                        <div class="card card-custom card-stretch gutter-b ai-recommended-bg-03 shadow-sm">
                            <!--begin::Body-->
                            <div class="card-body d-flex align-items-center py-0 mt-2 ">
                                <div class="d-flex flex-column flex-grow-1 py-2 py-lg-5">
                                    <p class="mb-2 text-muted">개발자 우수 사이트 수집</p>
                                    <a href="/" target="_blank"
                                       class="card-title font-weight-bolder text-primary font-size-h3 mb-2 text-hover-primary ">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                             fill="currentColor"
                                             class="bi bi-link-45deg" viewBox="0 0 16 16">
                                            <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"></path>
                                            <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"></path>
                                        </svg>
                                        개발자가 알아야 할 필수 사이트 100선 추천</a>
                                    <span class="font-weight-bold text-muted font-size-lg">우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다</span>
                                </div>
                                <img src="/static/v3_theme_01_asset/img/website-nav-pages-img3.svg"
                                     alt="best100-homepage"
                                     class="align-self-end h-20px img-responsive border-small " style="width:36%;">
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Stats Widget 4-->


                    </div>


                </div>
            </div>
            

            <div class="row mb-4">
                <aside class="col-md-12 col-xxl-12 d-none d-md-block float-right pt-3 m-2 ">
                    <div class="row"><h4 class="card-title ">관련 게시물</h4><div class="col-6 mb-2 pb-3">
                            <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3"
                                 style="border-color: #f2f2f2!important;">
                                <div class="card-body text-center">


                                    <!-- Heading -->


                                    <a data-scroll class="nav-link text-primary small"
                                       href="/tutorial/vue3-challenge-form-editor">

                                        <h4 class="fw-bold">
                                            Vue3 챌린지: 양식 편집기

                                        </h4>
                                        
                                        <p class="text-muted">개발자로서 스키마에 정의된 양식을 생성하고 개체를 편집할 수 있는 구성 요소XForm가 필요합니다.
v-model에서 개체를 허용합니다
fields 속성
에서 개체 배열을 허용합니다.
<form> 배열
의 길이와 같은 양의 자식 요소로 렌더링fields
필드의 각field은 하위
에 대한 구성을 설명합니다.
field.component는 렌더링해야 하는 구성 요소(또는 태그)의 이름을 가져옵...</p>
                                        

                                    </a>


                                </div>
                            </div>
                        </div><div class="col-6 mb-2 pb-3">
                            <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3"
                                 style="border-color: #f2f2f2!important;">
                                <div class="card-body text-center">


                                    <!-- Heading -->


                                    <a data-scroll class="nav-link text-primary small"
                                       href="/tutorial/mongodb-no-banco-nosql-is-no-longer-available">

                                        <h4 class="fw-bold">
                                            MongoDB - No Banco NoSQL은 더 이상 사용할 수 없습니다.

                                        </h4>
                                        
                                        <p class="text-muted">De la pra cá, este banco de dados tem crescido em utilização e em popularidade.
그렇다면 SQL Server, Oracle 또는 MySQL과 다른 점은 무엇입니까?
O MongoDB é um banco de dado que não armazena os dados em um formato tabelar e relacional.
Os...</p>
                                        

                                    </a>


                                </div>
                            </div>
                        </div><div class="col-6 mb-2 pb-3">
                            <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3"
                                 style="border-color: #f2f2f2!important;">
                                <div class="card-body text-center">


                                    <!-- Heading -->


                                    <a data-scroll class="nav-link text-primary small"
                                       href="/tutorial/how-to-use-relative-selectors-in-shirates-part-2">

                                        <h4 class="fw-bold">
                                            Shirates에서 상대 선택기를 사용하는 방법 - 2부 -

                                        </h4>
                                        
                                        <p class="text-muted">이것은 간단하고 강력한 표현입니다(참조).
위젯 흐름과 함께 상대적으로 위젯을 얻을 수 있습니다.
위젯 흐름 알고리즘
위젯 흐름 알고리즘은 수직 위치(첫 번째 그룹 - 여섯 번째 그룹)로 위젯을 그룹화한 다음 각 그룹의 위젯을 왼쪽에서 오른쪽으로, 그리고 위에서 아래로 검색합니다.
첫 번째 그룹에서 위젯 흐름 순서는 (0),(1),(2)입니다.
두 번째 그룹에서 위젯 흐름 순서는 (3),(4...</p>
                                        

                                    </a>


                                </div>
                            </div>
                        </div><div class="col-6 mb-2 pb-3">
                            <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3"
                                 style="border-color: #f2f2f2!important;">
                                <div class="card-body text-center">


                                    <!-- Heading -->


                                    <a data-scroll class="nav-link text-primary small"
                                       href="/tutorial/stop-saving-lines">

                                        <h4 class="fw-bold">
                                            라인 저장을 중지하십시오!

                                        </h4>
                                        
                                        <p class="text-muted">이 기사에서는 소프트웨어를 개발할 때 더 많은 코드를 작성해야 하는 이유에 대해 논할 것입니다.
책임별로 코드를 나누면 명확성이 향상되고 프로젝트 유지 관리가 더 쉬워집니다.
그건 그렇고, 여기서 목표는 코드를 더 길게 하기 위해 줄을 추가하는 것이 아니라 가독성을 우선시하는 것입니다.
많은 언어, 특히 JavaScript는 멋진 기능을 많이 제공하므로 더 적거나 더 명확한 코드로 동일한 알...</p>
                                        

                                    </a>


                                </div>
                            </div>
                        </div><div class="col-6 mb-2 pb-3">
                            <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3"
                                 style="border-color: #f2f2f2!important;">
                                <div class="card-body text-center">


                                    <!-- Heading -->


                                    <a data-scroll class="nav-link text-primary small"
                                       href="/tutorial/rpm-system-system-nfs-sunucusu-oluturma">

                                        <h4 class="fw-bold">
                                            RPM 시스템 시스템 NFS Sunucusu Oluşturma

                                        </h4>
                                        
                                        <p class="text-muted">NFS는 Network File System, dosyalarımızı ağ üzerinden paylaşmamıza olanak sağlayan bir sistemdir.
NFS kullanarak sunucu olan bilgisayarda paylaşılan dizinleri client olan bilgisayarlara mount edebiliriz.
Mount işlemini ge...</p>
                                        

                                    </a>


                                </div>
                            </div>
                        </div><div class="col-6 mb-2 pb-3">
                            <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3"
                                 style="border-color: #f2f2f2!important;">
                                <div class="card-body text-center">


                                    <!-- Heading -->


                                    <a data-scroll class="nav-link text-primary small"
                                       href="/tutorial/azure-ad-client-password-expiration">

                                        <h4 class="fw-bold">
                                            Azure AD 클라이언트 암호 만료

                                        </h4>
                                        
                                        <p class="text-muted">Azure AD에서 새 클라이언트 암호를 생성하고 이를 사용하도록 웹 사이트 구성을 업데이트합니다.
문제는 이 문제가 비밀에 설정한 만료 날짜에 따라 3, 6, 12, 18 또는 24개월 후에 다시 발생한다는 것입니다.
Twitter의 제안은 Logic Apps 및 Event Grid가 이 문제를 해결하는 데 도움이 될 수 있다는 것입니다.
그러나 먼저 다음 30일 내에 만료될 모든 비밀을 ...</p>
                                        

                                    </a>


                                </div>
                            </div>
                        </div><div class="col-6 mb-2 pb-3">
                            <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3"
                                 style="border-color: #f2f2f2!important;">
                                <div class="card-body text-center">


                                    <!-- Heading -->


                                    <a data-scroll class="nav-link text-primary small"
                                       href="/tutorial/do-you-need-autoscaler-de-drone-ci-integration">

                                        <h4 class="fw-bold">
                                            ¿Autoscaler de Drone CI 통합이 필요합니까?

                                        </h4>
                                        
                                        <p class="text-muted">En este pequeño 블로그 vamos a tocar un tema muy Importante, instalar el drone CI y su autoscaler, una de las razones por las cuales me vi en la necesidad de integrarlo es debido a que nosotros usamos el drone-sever en una ...</p>
                                        

                                    </a>


                                </div>
                            </div>
                        </div><div class="col-6 mb-2 pb-3">
                            <div class=" card card-border border-secondary shadow-sm border mb-6 mb-md-8 mb-lg-0 mt-2 mb-4 pb-3"
                                 style="border-color: #f2f2f2!important;">
                                <div class="card-body text-center">


                                    <!-- Heading -->


                                    <a data-scroll class="nav-link text-primary small"
                                       href="/tutorial/responsive-card-using-flex-and-grid">

                                        <h4 class="fw-bold">
                                            플렉스와 그리드를 이용한 반응형 카드

                                        </h4>
                                        
                                        <p class="text-muted">몸을 풀다
그리드...</p>
                                        

                                    </a>


                                </div>
                            </div>
                        </div></div></aside>
            </div>


        </article>

        <div class="col-0  col-xs-0  col-sm-0  col-md-3 col-lg-3 col-xl-3 col-xxl-3    m-0 p-0 ">

            <div class="navbar-expand-lg navbar-expand-lg sidebar sidebar-sticky "
                 style="border-right: 1px solid rgba(0, 0, 0, .05);">


                <!-- Navbar Collapse -->

                <div id="navbarVerticalNavMenu2 " class="  collapse navbar-collapse pt-3   card  m-0 p-0 d-flex flex-row"
                     style="margin: 0px!important;border-bottom: 0px solid rgba(0, 0, 0, .05);height: 100%;">


                    <div class=" h-100 pt-0  "
                         style="margin: 0px!important;border-bottom: 0px solid rgba(0, 0, 0, .05);height: 100%; max-width: 260px;">

                        
                        <div class="row bg-light-off  mb-2  ai-recommended-bg-02-off  " style="border-radius: 2px;">
                            
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1344493394064923"
         crossorigin="anonymous"></script>
    <!-- geeks-右侧广告01-大横幅 -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:300px;height:600px"
         data-ad-client="ca-pub-1344493394064923"
         data-ad-slot="7275371082"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    
                        </div>
                        


                        
                        <div class="row bg-light-off mb-2  ai-recommended-bg-02-off " style="border-radius: 2px;">
                            
    
                        </div>
                        

                    </div>


                </div>
                <!-- End Navbar Collapse -->
            </div>


        </div>


    </div>

</div><!-- footer -->
<footer class="bg-primary-soft p-3 mt-5">
    <div class="container">
        <div class="row gutter-3">

            <div class="col-12 col-md-12 text-white text-center text-lowercase">

                <p class="mb-0 text-muted small text-uppercase">©
                    2022 intrepidgeeks.com  </p>
                <a href="/privacy" target="_blank" class="text-muted" rel="nofollow">Privacy Policy</a> <a
                    href="/contact_us"
                    target="_blank"
                    class="text-muted" rel="nofollow">Contact
                US</a> <a href="/sitemap.xml" class="text-muted" target="_blank" rel="nofollow">Sitemap</a>

            </div>

        </div>
    </div>
</footer>
<!-- / footer -->

<!-- Bootstrap 4 Version -->
<div class="nk-cookie-banner alert alert-secondary text-center mb-0 small" role="alert"
     style="background: rgba(255, 255, 255, .6);border-color:#f2f2f2;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(20px);">
    🍪 This website uses cookies to ensure you get the best experience on our website.
    <a href="/privacy" target="blank" rel="nofollow">Learn more</a>
    <button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()">
        I Got It
    </button>
</div><!-- JS Global Compulsory hs-builder:build-delete -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>


<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<script src="/static/v3_theme_01_asset/js/quick-website.min.js"></script>
<script src="/static/all_theme_package/cookie-banner.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
    function addDarkmodeWidget() {
        const options = {
            bottom: '64px', // default: '32px'
            right: '36px', // default: '32px'
            left: 'unset', // default: 'unset'
            time: '0.4s', // default: '0.3s'
            mixColor: '#fff', // default: '#fff'
            backgroundColor: '#fff',  // default: '#fff'
            buttonColorDark: '#666666',  // default: '#100f2c'
            buttonColorLight: '#fff', // default: '#fff'
            saveInCookies: true, // default: true,
            label: '🌙', // default: ''
            autoMatchOsTheme: false // default: true
        }

        new Darkmode(options).showWidget();
    }

    window.addEventListener('load', addDarkmodeWidget);
</script>
    <script async >
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?62e51dcb98a631eb7af0fd338250ca43";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    
<script src="/static/all_theme_package/auto-enable-prism.js"></script>

<script src="/static/all_theme_package/prism.min.js"></script>


<script>
    $(document).ready(function () {
        $('#post-content h1').each(function (i, el) {
            var c = $(el).attr("class");
            $(el).replaceWith('<h2 class="' + c + '">' + $(el).html() + '</h2>')
        });
    });

    h2_length = $("#post-content h2").length
    // console.log(h2_length);

    h3_length = $("#post-content h3").length
    // console.log(h3_length);

    $(document).ready(function () {

        if (h2_length < 1 && h3_length > 0) {
            $('#post-content h3').each(function (i, el) {
                var c = $(el).attr("class");
                $(el).replaceWith('<h2 class="' + c + '">' + $(el).html() + '</h2>')
            });


        }
        ;

    });
</script>

<script src="/static/all_theme_package/thirdparty/blogmenu/jquery.autoMenu.js"></script>

<script>

    $(document).ready(function () {
        $("#blog-autoMenu").autoMenu({
            levelOne: 'h2', //一级标题
            levelTwo: 'h3',  //二级标题(暂不支持更多级)
            width: 160, //容器宽度
            height: '100%', //容器高度
            padding: 10, //内部间距
            offTop: 130, //滚动切换导航时离顶部的距离
        });

        h1_length = $("#post-content h1").length
        // console.log(h1_length);
        h2_length = $("#post-content h2").length
        // console.log(h2_length);
        h3_length = $("#post-content h3").length
        // console.log(h3_length);


        if (h2_length < 1) {

            $(".blog-auto-menu-div").remove();
        } else {
            $(".blog-auto-menu-div-title").show();
        }


    });


</script>

<script src="/static/v3_theme_01_asset/js/headBand.min.js"></script>
<script>
    $('#geek-nav').headBand({
        'background': '#222222',//设置背景色
        'height': "2" //设置进度条高度
    });
</script></body>

</html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="057eb199754093f39cc82c14-|49" defer></script>