🔍 프로그래머스 FE 데브코스 5기 TIL 231102

💻 Intro

로토 강사님의 바닐라 JS 강의 대장정의 마지막 날이었다.
긴 시간 동안 바닐라 JS로 UI를 개발할 때 고려해야 할 많은 포인트들을 배울 수 있어 좋은 거 같다.
오늘은 드래그 이벤트와 비동기 프로세스를 큐 자료구조에 담아서 효율적인 task 관리를 하는 법을 배웠다.

---

🧐 새롭게 배운 것

drag 이벤트

Todo List에서 완료한 일과 미완료 한 일 리스트에서 할 일을 드래그로 이동하는 기능을 구현하는 방법을 배웠다.
drag 이벤트 중 dragstart, dragover,drop 이벤트를 사용했다.

• dragstart : 마우스 왼쪽키를 눌러 드래그가 시작될 때 발생한다. 드래그의 시작점을 의미한다. 어떤 요소를 드래그하는 지를 이 때 저장해야 한다.

$todoList.addEventListener('dragstart', (e) => {
    // 드래그가 시작된 곳에서 가장 가까운 리스트를 뽑아온다.
    // 어떤 할 일이 드래그되는지 파악하기 위함.
    const $li = e.target.closest('li');
	// 할 일 id 데이터 저장
    e.dataTransfer.setData('todoId', $li.dataset.id);
  });

dataTransfer : 드래그 이벤트가 가지는 고유한 드래그 작업의 데이터 개체이다.
dragstart 이벤트에서는 setData 메서드를 통해 클릭한 할 일의 id를 데이터 셋에서 꺼내서 저장한다.

• dragover : 드래그 가능한 영역 위를 드래그 중일 때 (수 백밀리초마다 발생한다고 한다.)
  
  잠깐 드래그 했을 뿐인데 이렇게 많이 발생한다.

$todoList.addEventListener('dragover', (e) => {
  	// 기본 드래그 동작 방지
    e.preventDefault();
  	// dropEffect를 통해 새 위치로 이동하는 시각적 피드백을 제공한다.
    e.dataTransfer.dropEffect = 'move';
  });

dragover 이벤트에서는 주의할 점이 있다.
e.preventDefault()으로 드래그의 기본 동작을 막지 않으면 이후 커스텀하여 지정하는 기능들이 동작하지 않는다는 점이다.
여기서도 dropEffect를 적용하기 위해서는 반드시 기본 동작을 막아야 한다.
이후 drop 이벤트에도 마찬가지로 적용해야 한다.

• drop : drop이 유효한 대상에 드래그하는 요소를 놓으면 이벤트가 발생한다.

 $todoList.addEventListener('drop', (e) => {
    // 마찬가지로 기본 동작 방지
    e.preventDefault();
   	// `dragstart`에서 저장했던 id 가져오기
    const droppedTodoId = e.dataTransfer.getData('todoId');

    // 현재 TodoList의 Todo가 아닌 경우 상위 컴포넌트에 알림
    // 똑같은 요소로 드래그 드롭했을 때 상태 변경을 막음
    const { todos } = this.state;

    if (!todos.find((todo) => todo._id === droppedTodoId)) {
      onDrop(droppedTodoId);
    }
  });

추가적으로 한 요소를 드래그 앤 드롭한 종착지가 본인 요소일 경우에는 드래그 앤 드롭한 의미가 없다. 따라서 불필요한 드래그 앤 드롭으로 api 호출이 발생하면 안되므로 이를 방지해야 한다.

큐를 활용한 효율적 테스크 관리

TodoList에서는 사용자의 다양한 동작이 발생한다.
지금 만든 어플리케이션은 드래그 앤 드롭, 삭제 기능으로 크게 두 가지가 존재한다.

하지만 예를 들어 사용자가 하나의 할 일을 다음과 같이 동작시켰다고 생각해보자.

1. 할 일 1을 미완료 리스트에서 완료 리스트로 옮김
2. 미처 완료하지 못한 부분이 있어서 다시 할 일 1을 완료 리스트에서 미완료 리스트로 옮김
3. 근데 알고보니 처리 완료인거 같아 다시 완료 리스트로 옮김
4. 완료한 일이라서 삭제 버튼을 누름

이것을 비교적 빠른 시간 안에 동작했다고 가정하자.
개발자적 관점에서는 위 네 가지 동작을 위해 할 일에 대한 상태를 불러오는 fetchTodos 함수를 총 4번 호출해야 한다. 이동-이동-이동-삭제

하지만 효율적으로 api을 호출하기 위해서는 앞의 1 ~ 3까지의 과정은 무시하고 결국은 할 일 1이 삭제된 것이 최종 결과이다.
따라서 api 입장에서는 삭제에 대한 api 호출만 하면 되는 것이다.

이를 task 관리 관점에서는 이동 task 1 ~ 3을 큐에 저장해뒀다가 삭제 task가 발생하게 되면 이전 이동 task들은 제거하고 삭제 task만 동기화하도록 구현하는 것이 효율적이다.

물론 사용자에게는 낙관적 업데이트 기법을 적용하여 task 1~4 에 대한 동작이 다 이뤄진 것처럼 보이도록 UX를 제공해야 한다.

// task 관리 함수
export default function SyncTasksManager() {
  let tasks = []; // task 큐, 배열로 구현
  // 기본적인 move task는 push
  this.addTask = (task) => {
    tasks.push(task);
  };
  // 삭제 task 발생 시 이전 move task는 삭제
  this.removeTasks = (urlPattern) => {
    tasks = tasks.filter((task) => !task.url.includes(urlPattern));
  };
  // 최종 실행은 순서대로 shift하여 api 요청 보내기
  this.run = async () => {
    // task가 없을 때까지 재귀
    if (tasks.length > 0) {
      const task = tasks.shift();

      await request(task.url, {
        method: task.method || 'GET',
      });

      this.run();
    }
  };
}

이처럼 사용자의 동작에 따라 무조건적으로 api 호출을 무분별하게 요청하면 서버에 과도한 부하가 걸리고 비용적인 관점에서도 낭비가 심하다.
따라서 개발자는 사용자의 동작에 의해 최종적으로 도출되는 결과에 대해 심사숙고하여 낙관적 업데이트와 이러한 큐 task 기법으로 최대한 효율적으로 api를 호출해야 한다는 것을 깨달았다.

---

🙄 더 공부해야 할 것

드래그 이벤트로 width 조정하는 법

노션 프로젝트에서 사이드 네비바 경계를 드래그하면 사이드 네비바의 너비가 조절되도록 구현해보고 싶었는데 실패했었다.
이제 drag 이벤트를 배웠으니 이를 적용해서 구현해볼 것이다.

---

👀 느낀점

👍 Keep

• 단순히 강사님의 코드를 따라치는 것이 아니라 모르는 이벤트나 기법이 나오면 바로바로 공식문서를 찾아보고 팀원과 멘토, 강사님께 물어보고 있다. 그때그때 미루지 않고 해결하고 있는 중이다!

😱 Problem

• 아직까지 노션 코드리뷰 피드백도 보완해야 하는 것을 손도 못대고 있다. 주말에 걸쳐 처리해야 겠다.

😜 Try

• 드래그 이벤트를 배우면서 미처 적용하지 못했던 기능을 떠올려 해결해야 겠다고 사고를 연결했다. 이렇게 새로 배운 내용을 바로 적용할 곳을 찾는 습관을 유지해야겠다.

---

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.