04.27.2022 TIL

TIL

 

Done it

drag & drop

처음 한 보게 된 부분이라서 신기한 부분이었습니다.
여기서 가장 중요한 부분은 결국 다시 rendering을 해줘야 한다는 것이었습니다.

dragstart -dragover-> drop 이런 느낌입니다.
자세히 코드를 보면 요런 느낌입니다.

$.addEventListener('dragstart', (e) => {
  e.preventDefault(); //drag이외의 event를 막기 위해 꼭!! 사용
  e.dataTransfer.setData('~');
});

$.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move'; //'copy'도 된다.
});

$.addEventListener('drop', (e) => {
  e.preventDefault();
  e.dataTransfer.getData('~');
});

설명을 더해보면

1. dragstart부분에서는 drag가 시작 되었으니 e.dataTransfer.setDate()에 값을 저장합니다.
2. dragover부분에서는 drag된 값을 e.dataTransfer.dropEffect 의 상황에 맞게 동작합니다. 우선 move로 해놨으니 움직일 수 있게 해줍니다.
3. drop 부분에서는 drag된 것을 어디에 떨어뜨렸는지 확인을 하고 e.dataTransfer.getData()를 이용하여 해당 정보를 가지고 상위 component에 보내서 db, 낙관적이든 실행을 하여 다시 rendering 합니다.
4. 가장 중요한 것이 $ 부분에 droppable="true"를 전체 list 부분과 각 list에 모두 다!!! 넣어주어하며
   e.preventDefault()를 각 addEventListener에 넣어 drag이외의 event를 막기 위해 넣어줘야 합니다.

 

네트워크 동작을 queue에 쌓아서 효율적으로 처리

금일은 queue를 사용해서 네트워크 통신할 부분을 넣어서 조금 지난 뒤에 한꺼번에 수행하는 식으로 하였습니다.
여기에 대해 생각을 해봤는데... button 보다 debounce를 이용하고 storage를 같이 이용한는 것도 좋겠다는 생각도 해보게되는 좋은 고민 거리였습니다. :)
추가로 requestIdleCallback(), web worker 등을 알 수 있게 되는 좋은 강의였습니다. :)

 

Vue 스터디 준비

vue 가이드를 통해 스터디를 하지만 뭔가 역사를 사랑하는 사람으로서 역사를 먼저 보고 싶어 먼저 왜 만들어 졌는지 부터 보고 있습니다.

보통 React랑 비교를 많이 하며 React에서 많은 영향을 받았다고 합니다. 그래서 React에 대해서 조금 공부를 해봤습니다.

보통 js로만 처리를 하면 DOM element에 대한 장소를 찾고 해당 DOM에 접근해서 작업을 하는데 이런 과정은 규모가 커지면서 직접 컨트롤하기 어려워져 해당 프레임워크들이 나왔습니다.

아 React를 보기 전에 MVC 패턴을 이해하는 것이 좋을 것 같습니다.

MVC 패턴: 사용자 Controller 조작 -> Controller는 Model을 통해 data 가져오고 그 data를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달하는 것입니다.
즉, 애플리케이션에서 실행되는 로직을 서로 영향 없이 쉽게 고칠 수 있게 하는 방법입니다.

React는 데이터가 바뀌면 본래의 view를 날리고 새로 만들어버리자 라는 관점에서 virtual DOM을 사용했다고 합니다.
Virtual DOM: 가상 DOM으로 js로 이루어진 가상 DOM에서 한번 렌더링하고, 기존의 DOM과 비교를 한 다음 정말 변화가 필요한 곳에만 업데이트를 해주는 형식으로 이와 같은 방식을 Vue에서도 사용을 합니다.

이젠 다시 Vue로 돌아와서 Vue는 3가지로 구성되어 있습니다.

1. Vuex : Virtual DOM을 관리하기 위한 것

• 개별 요소들의 정보가 변경되는지 확인하고 해당 값들을 업데이트시켜주는 역할

2. Vue CLI(Vue Command Line Interface): 프로젝트를 자동으로 생성 / 세팅해주는 자동화 역할(npm 같은 패키지 매니저 역할)
3. Vue Router: Vuex가 일을 잘하도록 통로 + 표지판 역할

TIL이므로 자세한 내용은 링크를 찾아 보면 좋습니다. :) 

 

Feeling

vue를 원리부터 하나씩 공부하고 있는데... 확실한 이해가 되지 않았습니다. 그래서 원래 하던 방식대로 알 때까지 계속 읽어보고 찾아보려 합니다. 오래 걸리겠지만 나중에 좋은 경험이 있어서 ㅎㅎ
그리고 mac에 이모지를 쉽게 넣을 수 있다는 것을 알게 되었습니다. 이 기능을 이제야 알다니 ㅜㅜ
블로그를 쓸 때 뭔가 너무 밋밋했는데 좀 더 이쁜 글이 나올 것 같습니다.

 

REF

https://kr.vuejs.org/v2/guide/installation.html
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
https://brunch.co.kr/@clay1987/138
https://velopert.com/3612