YoungGyu Blog

2022-02-14 TIL

February 14, 2022

Fact

  • 자바스크립트 코드 리뷰 스터디 Mission 4 API가 느린 경우의 인터랙션 처리 미션을 했다. 일부로 딜레이를 서버에 요청해서 그 딜레이 동안 로딩 중 처리 방법을 생각하고 구현해야 한다. 새로운 loding 컴포넌트를 만들고 데이터를 가져오는 동안 loding 컴포넌트를 출력해 주었다. 말로는 간단한데…ㅠㅠ
  • 자바스크립트 코드 리뷰 스터디 미니 트렐로 미션을 했다. 완료한 미션과 완료하지 않은 미션을 나누고 드래그 앤 드롭으로 컴포넌트 사이를 옮길 수 있도록 만들었다. 버튼을 눌러서 옮길 수 있고, 드래그 해서도 옮길 수 있도록 구현했다.
  • 기초부터 완성까지 프런트엔드 3 ~ 4장을 읽었다.

Feelings

  • 인터렉션 처리와 드래그앤 드롭을 직접 구현했는데, 물론 완벽하게는 아니고, 간단하게 처리 할 수 있도록 구현했다. 실제로 사용하려면 좀더 공부해야 할 것 같다. 인터렉션 처리는 비동기에 대해서 잘 알고있으면 해결할 수 있는 미션이였고, 드래그앤 드롭은 처음 사용해봐서 자바스크립트 드래그 이벤트를 공부했고, 혼자 생각하면서 하느라 좀 오래걸린 것 같다.
  • 코드 리뷰 스터디 미션 4에 2~3일은 투자한 것 같다. 물론 다른 공부도 병행했지만 이번 미션을 더 열심히 했다. 대충 할 거면 신청도 안 했다.

Findings

  • 드래그 앤 드롭을 구현할 때는 draggable 속성과 dragstart, dragend 이벤트를 사용한다. draggable 속성은 먼저 기본 html과 css이다. 태그중에도 draggable한 요소가 몇가지 있는데 <a>는 기본적으로 드래그가 가능하고, <span>은 드래그가 불가능하다. 드래그 기본만 할 수 있도록 하려면 간단하게 아래처럼 작성하면 된다.
<button class="draggable" draggable="true">이동버튼</button>

button {
  cursor: move;
}

드래그 앤 드롭은 아래를 참고했다.

Future Action

  • 달리자.
Lee YoungGyu