Kalimba (Nuxt + Wagtail)

1. Django Ninja API 문제

@router.get(
    '/',
    response=List[schema.FassionSchema],
    auth=None
    )
def fassions(request):

    fassion_items = Fassion.objects.filter(anonymous=False)
    return fassion_items

Django Ninja의 API URL를 보면 '/'으로 되어 있어 주소가 'api/fassion/'으로 되어 있다. FrontEnd에서 api통신을 할 때, '/'를 뒤에 붙여서 정확한 url에 보내야 한다.

2. Nuxt.js infinite-scroll

      <div
        class="pictures is-flex is-flex-wrap-wrap is-justify-content-space-between"
      >
        <NuxtLink
          v-for="item in scrollData"
          :key="item.id"
          :to="`/fassion/${item.id}`"
          class="picture mt-3"
        >
          <img :src="`${item.image.file}`" :alt="item.id" />
          <div class="fassion__meta is-size-5 has-text-white"><i class="fa-solid fa-heart"></i><span class="mx-2">{{item.like_num}}</span></div>
        </NuxtLink>
      </div>
      <client-only>
        <infinite-loading
          spinner="spiral"
          @infinite="infiniteHandler"
        ></infinite-loading>
      </client-only>

infinite-loading 태그를 v-for의 반복 태그의 Wrapper 아래에 정의 해줘야한다.

3. CSS position 정리

relative
요소를 일반적인 문서 흐름에 따라 배치한다.

요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.

• 원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
• 위치를 이동하면서 다른 요소에 영향을 주지 않는다.
  문서 상 원래 위치가 그대로 유지된다.

absolute
요소를 일반적인 문서 흐름에서 제거한다.

가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.

• 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
• 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(요소)를 기준으로 삼는다. (static을 제외한 값)
• 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)

4. Flex Wrap

Flex Wrap은 싱글 라인이 되지 않는다.

5. Nuxt.js Favicon

기존의 favicon을 삭제하고 바꿀 이미지나 아이콘 파일의 파일명을 favicon으로 바꿔준다.

6. Buefy Custom 설정

buefy.scss파일을 서버 사이드 랜더링이 아닌 클라이언트 사이드 랜더링 설정을 했는데 style resource 적용이 안되는 문제가 발생하였다.