2021.06.08 ~ 10

김승우·2021년 6월 10일
0

TIL

목록 보기
66/68

🎉 TIL

1. Vue 인스턴스 라이프사이클 훅

2. CSS background-size: https://developer.mozilla.org/ko/docs/Web/CSS/background-size

3. position:fixed된 엘리먼트 height: 100%랑 같은 효과 주기

top: 0; bottom: 0;을 통해 height: 100%와 같은 효과를 적용했다.

overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
padding-top: vw(52px);

4. vue-infinite-loading 기존 사용 방식 리팩토링

  • 변경 사항
  1. infinite-loading에 identifire props 추가
    기존에 우리가 사용한대로 infiniteHandler에서 state를인자를받아서state를 인자를 받아서 `state.reset()을 실행하는 것이 아니라 infinite-loading 컴포넌트의 props v-bind:identifier="+new Date()"를 최초로 설정하고, 검색이나 필터링 등 infinite-loading를 초기화할 필요가 있는 경우에 this.identifier += 1`을 통해 infinite-loading 컴포넌트의 identifire를 변경해서
    초기화를 트리거했다.

  2. API 조회 함수 역할 분리
    기존에는 API 함수 내에서 처리하는 로직이 많았다.
    1) 조회 전에 로딩 시작, 조회 끝나고 로딩 종료
    2) pagination.currentPage를 체크해서 currentPage > 1인 경우 this.list = [...this.list, ...data] currentPage === 1인 경우 this.list = data로 데이터를 넣는 로직

이렇게 총 2개의 로직이 있었는데, 참고한 문서에서는 API 조회함수는 그냥 API를 조회해서 response를 리턴 하는 역할 하나 만을 수행하고,
infiniteHandler에서 data를 받아서 this.list.push(...data)를 수행하고, $state를 변경시켜서 infinite-loading 상태를 컨트롤했다.

this.list.push(...data)만을 실행할 수 있는 이유는, 검색하거나 필터링을 할 경우 1페이지부터 다시 조회하게 되는데 이때 무조건 this.list = [] 즉 list를 빈 배열로 초기화하는
로직이 있기 때문에 this.list.push(...data)라는 하나의 로직만으로 데이터 컨트롤이 가능했다.


5. find parent node recursively

: https://stackoverflow.com/questions/7332179/how-to-recursively-search-all-parentnodes

6. request animation frame에 관한 좋은 글

7. shadow-dom

profile
사람들에게 좋은 경험을 선사하고 싶은 주니어 프론트엔드 개발자

0개의 댓글