220505 Today I learned!
- Vue.js 복습
- 스터디 프로젝트 마무리
- 백준 문제 풀이
1. Fact
(1)Vue.js 복습
Vue 공식문서와 교재를 읽으며 복습
- Vue 기초 문법을 추가 정리했다.
- Vue instance의 option
- template 문법
- 정리본
(2) 스터디 프로젝트 마무리
- 데이터 교환을 통한 Drag and Drop 구현
- 완벽한 Drag and Drop은 아니지만, 위치 교환은 구현했다.
- 사이드바 추가
- 평균 소모 칼로리, 최고 소모 칼로리를 보여주는 사이드바 구현
(3) 백준 문제 풀이
- 17471 게리맨더링
- 문제풀이
- BFS
- 코드 구현을 너무 복잡하게 했다.
- 조합, 그래프인지 찾는 함수를 매번 새로 구현하다보니 구현 시간이 길어졌다.
- 라이브러리 사용하는 것을 연습을 할 예정이다.
- 코드 구현을 너무 복잡하게 했다.
2. Feeling
null;
3. Finding
Drag and Drop을 데이터 교환으로 간단하게 만들어 볼 수 있었다. (완벽하지는 않지만 ㅎㅎ)
객체의 리스트 형식으로 데이터를 저장하니 데이터 관리가 편해졌다.
그래서, 데이터 교환의 형식으로 드래그앤 드롭을 구현할 수 있었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function Card({ data, setData, deleteData }) {
/* 생략 */
let dragStartId = 0;
const onDragStart = (num) => {
dragStartId = num;
};
const onDrop = (dropId) => {
// 데이터 찾기!
const startData = data.find((element) => element.id === dragStartId);
const startDataIndex = data.indexOf(startData);
const dropData = data.find((element) => element.id === dropId);
const dropDataIndex = data.indexOf(dropData);
// 데이터 교환!
startData.id = dropId;
dropData.id = dragStartId;
const newData = [...data];
newData[startDataIndex] = dropData;
newData[dropDataIndex] = startData;
// 데이터 저장!
setData(newData);
};
return (
<div>
<StyledDiv>
<StyledCardContainer onDragOver={(e) => e.preventDefault()}>
{data.map((detailData) =>
detailData.id === undefined ? null : (
<StyledCard
key={detailData.id}
draggable
onDragStart={() => onDragStart(detailData.id)}
onDrop={() => onDrop(detailData.id)}
>
/* 생략 */
}
- 카드 컴포넌트에게 draggble 속성을 준다.
- 드래그를 시작한 컴포넌트의 id와 drop된 위치에 있는 컴포넌트의 id를 가져온다.
- id를 통해 얻은 데이터 정보로 두 데이터의 위치를 교환한다.
- 데이터가 순서대로 랜더링 되기 때문에 LocalStorage에 위치한 데이터의 순서를 바꾼다.
daragover의 기본동작을 막는 이유
ondragover 속성은 드래그되는 대상 객체가 어느 요소 위에 놓일 수 있는지를 설정한다.
기본적으로 HTML 요소는 다른 요소의 위에 위치할 수 없기 때문에, 다른 요소 위에 위치할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본 동작을 막아야만 한다.
4. Future Action & Feedback
Future Action | 진행 상황 | Feedback |
---|---|---|
DOM을 깨우치다 | pause 🤦♀️ | 잠시 중단! |
why 리액트? | Not Start🌙 |