원티드 프리 온보딩 10일차 TIL

드래그 앤 드랍은 뭘까?

오늘은 하루종일 드래그 앤 드랍이랑 싸웠습니다. 드래그는 어찌 어찌 구현하였지만 드래그를 하면서 내가 넣고 싶은 곳에 공간을 비우는 것이나 드랍했을때 그 드랍할 위치에 어떤 아이템이 있었는지에 대해 감지하는 것에서 막혔다.

설계

1. 드래그 아이템을 하면서 => 가능
2. 마우스가 어떤 아이템위에 있다는 것을 감지 => 어려움
3. 아이템의 위치를 조정하여 공간 만들기 => inline style을 이용하여 translate 설정으로 가능
4. 드랍하면 어떤 위치에 넣어야 할지 판단 => 어려움
5. 위치를 파악하면 배열 재조정 => 가능

설계 중에 중간 중간 어려운 부분이 있어서 제대로 완성이 되지 않고 있습니다.

Intersection Observer

인피니티 스크롤을 구현할 때 scrollevent를 통해 구현을 하게 되면 꽤 많은 부분을 신경써야 합니다. Intersection Observer를 이용하면 좀 더 쉽게 구현 할 수 있습니다.

원리

intersection observer는 특정 엘리먼트가 내가 보는 화면에 보였이지 않았을때는 false 보였을때는 true를 리턴합니다.
그래서 검색결과를 li로 나열하고 또 검색할 수 있을때 (검색어의 최대 결과보다 현 검색 결과가 적을때) li태그를 감싸고 있는 ul 태그 아래에 loading 컴포넌트를 위치하게 합니다. 그리고 loading 컴포넌트를 observe하면서 로딩 컴포넌트가 보일때 비동기 호출을 하게 하였습니다. 그리고 모든 검색 결과가 불러와지면 loading 컴포넌트를 숨겨서 비동기 호출을 막게끔 하였습니다.

후기

내일은 드래그 엔 드랍을 꼭 해내고 말 것입니다.