Home 22/05/05/목 Vue.js 복습, 스터디 프로젝트 마무리
Post
Cancel

22/05/05/목 Vue.js 복습, 스터디 프로젝트 마무리

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)}
              >
  /* 생략 */
}
  1. 카드 컴포넌트에게 draggble 속성을 준다.
  2. 드래그를 시작한 컴포넌트의 id와 drop된 위치에 있는 컴포넌트의 id를 가져온다.
  3. id를 통해 얻은 데이터 정보로 두 데이터의 위치를 교환한다.
    • 데이터가 순서대로 랜더링 되기 때문에 LocalStorage에 위치한 데이터의 순서를 바꾼다.

daragover의 기본동작을 막는 이유

ondragover 속성은 드래그되는 대상 객체가 어느 요소 위에 놓일 수 있는지를 설정한다.

기본적으로 HTML 요소는 다른 요소의 위에 위치할 수 없기 때문에, 다른 요소 위에 위치할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본 동작을 막아야만 한다.


4. Future Action & Feedback

Future Action진행 상황Feedback
DOM을 깨우치다pause 🤦‍♀️잠시 중단!
why 리액트?Not Start🌙 


This post is licensed under CC BY 4.0 by the author.