function Logger(logString: string) {
  return function (constructor: Function) {
    console.log(logString);
    console.log(constructor);
  };
}

function WithTemplate(template: string, hookId: string) {
  return function (constructor: any) {
    const hookEl = document.getElementById(hookId);
    const p = new constructor();
    if (hookEl) {
      hookEl.innerHTML = template;
      hookEl.querySelector("h1")!.textContent = p.name;
    }
  };
}

// @Logger("LOGGING - PERSON")
@WithTemplate("<h1>My Person Object</h1>", "test")
class Person {
  name = "Max";

  constructor() {
    console.log("creating person object1!");
  }
}
const pers = new Person();
console.log(pers);

Node.appendChild()

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

appendChild로 현재 돔에 위치한 태그를 파라미터로 줄 경우

파라미터로 들어간 태그가 appendChild를 받는 부모 태그의 자식 태그로 이동하는 효과가 있다.

이를 이용해서 쉽게 drag event를 만들 수 있다.

const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");
const test = document.querySelector(".draggable");

console.log(test);
console.log(containers[1].appendChild(test));
console.log(draggables);
draggables.forEach((draggable) => {
  draggable.addEventListener("dragstart", () => {
    draggable.classList.add("dragging");
  });

  draggable.addEventListener("dragend", () => {
    draggable.classList.remove("dragging");
  });
});

containers.forEach((container) => {
  container.addEventListener("dragover", () => {
    console.log("drag over");
    const draggable = document.querySelector(".dragging");
    console.log(draggable);
    container.appendChild(draggable);
  });
});

React 설치

import React, { useState, useTransition } from 'react'
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';

export default function List({ todoData, setTodoData }) {
    const handleCompleteChange = (e, id) => {
        e.stopPropagation();
        let newTodo = todoData.map((todo) => {
            if (todo.id === id) {
                todo.completed = !todo.completed;
            }
            return todo;
        })

        setTodoData(newTodo);
    }


    const handleClick = (id) => {
        let newTodo = todoData.filter(todo => todo.id !== id);
        setTodoData(newTodo);
    }

    const handleEnd = (result) => {
        console.log("result", result);

        if (!result.destination) return;

        const newTodoData = todoData;
        const [reorderItem] = newTodoData.splice(result.source.index, 1);
        newTodoData.splice(result.destination.index, 0, reorderItem);
        setTodoData(newTodoData);
    }

    return (
        <div>
            <DragDropContext onDragEnd={handleEnd}>
                <Droppable droppableId='todo'>
                    {(provided) => (
                        <div {...provided.droppableProps} ref={provided.innerRef}>
                            {todoData.map((data, index) => {
                                return (
                                    <Draggable
                                        key={data.id}
                                        draggableId={data.id.toString()}
                                        index={index}
                                    >
                                        {(provided, snapshot) => (
                                            <div key={data.id} {...provided.draggableProps}
                                                ref={provided.innerRef}
                                                {...provided.dragHandleProps}>
                                                <div className={`${snapshot.isDragging ? "bg-gray-400 " : "bg-gray-100 "} flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 border rounded`}>
                                                    <div>
                                                        <input type="checkbox" defaultChecked={false} onClick={(e) => handleCompleteChange(e, data.id)}></input>
                                                        <span className={data.completed ? 'line-through' : undefined}>{data.title}</span>
                                                    </div>
                                                    <div>
                                                        < button className='px-4 py-2 float-right' onClick={() => { handleClick(data.id) }} > x</button>
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                    </Draggable>
                                )
                            })
                            }
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        </div>
    )
}

event.stopPropagation();

  handleReset(event) {
    this.setState(() => {
      return { searchKeyword: "" }
    }, () => {
      console.log("TODO: handleReset", this.state.searchKeyword);
    })
  }

App.vue

<template>
  <div>
    <h2>hello Teleport</h2>
    <teleport to="#extra-modal" :disabled="isTeleport">
      <div class="modal">
        this is modal
        <button @click="isTeleport = !isTeleport">teleport toggle</button>
      </div>
    </teleport>
    <teleport to="#extra-modal">
      <div class="modal2">this is modal2</div>
    </teleport>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      isTeleport: true,
    };
  },
};
</script>

<style scoped>
.modal {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <div id="extra-modal"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

원래는 App.vue에 작성하는 모든 내용은

index.html의 id가 app인 div태그로 들어가게 된다.

하지만

텔레포트를 이용하면 App.vue에 있는 내용들을

index.html 에서 id가 app인 div태그 외부로 보낼 수 있다.

app.vue

<template>
  <div>
    <h2>hello slots</h2>
    <CardView
      ><template v-slot:header>
        <h3>Random Image</h3>
      </template>
      <template v-slot:default>
        <img src="https://placeimg.com/200/100/any" alt="" />
      </template>
      <template v-slot:footer>
        <small>thank you</small>
      </template>
    </CardView>
  </div>
</template>
<script>
import CardView from "./components/slot/CardView";
export default {
  name: "App",
  components: { CardView },
  data() {
    return {};
  },
};
</script>

<style></style>

CardView.vue

<template>
  <div class="card">
    <div class="card-header"><slot name="header"></slot></div>
    <div class="card-body"><slot></slot></div>
    <div class="card-footer"><slot name="footer"></slot></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  padding: 1rem;
  margin-bottom: 1rem;
  width: 200px;
}

.card-header {
  color: red;
}
.card-body {
  color: green;
}

.card-footer {
  color: pink;
}
</style>