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을 데이터 교환으로 간단하게 만들어 볼 수 있었다. (완벽하지는 않지만 ㅎㅎ)

객체의 리스트 형식으로 데이터를 저장하니 데이터 관리가 편해졌다.

그래서, 데이터 교환의 형식으로 드래그앤 드롭을 구현할 수 있었다.

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🌙