TIL 80일차

Moon-Tree·2023년 4월 25일
0

◆ 래징 로딩(rage loading)

1) 웹 페이지나 애플리케이션을 이용하는 사용자가 그 내용을 기다리는 동안 화면에서 로딩 상태를 보여주는 방법 중 하나입니다.
2) 일반적으로 래징 로딩은 사용자가 볼 수 있는 영역에서 진행 바 혹은 로딩 바를 보여줍니다.
3) 이 방법은 대부분의 브라우저에서 지원하며, 화면에 나타나는 로딩 상태를 통해 사용자에게 어플리케이션이 작동 중임을 알리고, 불필요한 대기 시간을 최소화하는 데 도움을 줍니다.
4) 또한, 래징 로딩은 사용자 경험을 개선하고, 사용자가 페이지를 더 오래 머무르게 만들어서 페이지 노출 시간을 증가시킬 수도 있습니다.


◆ Vuex 옵션

애플리케이션 상태를 관리하기 위한 중앙 저장소를 제공하는 Vue.js 애플리케이션용 상태 관리 라이브러리입니다.

  1. state는 실질적인 데이터를 소유하는 공간(ex : 은행금고)
    • 애플리케이션의 데이터를 보관하는 저장소의 중앙 허브입니다.
    • 모든 실제 데이터를 저장하는 은행 금고와 같습니다.
  2. getters는 state에 대한 computed 공간(ex : ATM) - 반환
    • 상태에 따라 계산된 값을 반환하는 계산된 속성과 같습니다.
    • getters는 은행 금고에서 돈을 반환하는 ATM과 같이 계산된 방식으로 상태에서 데이터를 추출하는 데 사용됩니다.
  3. mutations은 state에 대한 변화를 발생하는 공간(ex : 은행원) - 설정
    • 상태를 수정하는 동기 함수입니다.
    • Vuex 스토어에서 상태를 변경하는 유일한 방법입니다.
    • mutations을 예금과 인출을 처리하는 은행원으로 생각하십시오.
  4. actions는 mutations을 비동기로 실행하는 공간(ex : 은행어플)
    • 스프링으로 비교하자면 HttpSession 역할을 할 수 있다.
    • 상태를 수정하기 위해 변형을 커밋하는 비동기 함수입니다.
    • 작업은 변형을 커밋하기 전에 API 호출과 같은 복잡한 논리를 처리하는 데 사용됩니다.
      더 복잡한 거래를 처리하는 은행 애플리케이션과 같습니다.

◆ 모달

  • 모달은 디자인에 영향을 미치지 않기 때문에 어디에서든 생성할 수 있습니다.
  • 일반적으로 화면 마지막에 생성합니다 (처음부터 표시되지 않기 때문에).
  • tabindex="-1"이면 탭키를 눌러서 선택할 수 없습니다.
  • bootstrap에서는 버튼 등에 옵션을 할당하여 모달을 제어할 수 있습니다.
    - 프로그래밍 코드 없이 Show/hide 등을 설정할 수 있습니다.
  • 모달창에는 id나 class같은 식별자를 표시하고 버튼과 연결할 수 있습니다.
    - data-bs-target : 참조할 대상 모달 창을 지정할 수 있다.
    - data-bs-toggle : 토글할 효과를 지정할 수 있다.
    - data-bs-dismiss : 제거할 효과를 지정할 수 있다.
profile
Backend Developer

0개의 댓글