[TS] Project Drag & Drop 1️⃣

🍒 [230327 TIL] Understanding TypeScript

Project Drag & Drop 1️⃣

! & as

TypeScript에서 DOM 조작할 때 오류 해결하기

class ProjectInput {
  templateElement: HTMLTemplateElement;
  hostElement: HTMLDivElement;

  constructor() {
    this.templateElement = document.getElementById(
      'project-input'
    )! as HTMLTemplateElement;
    this.hostElement = document.getElementById('app')! as HTMLDivElement;
  }
}

document.getElementById('id');에서 !를 추가하는 이유는 TypeScript가 이것이 null일수도 있다고 추론하기 때문이다.

!를 붙여주면 null이 아니라는 것을 알려주게 된다.

 

document.getElementById('id')!;로 null이 아니라는 것까지 알려주었는데도 오류가 뜨는데,

getElementById는 id 정보로 HTML 요소를 가져오는 것이기 때문에 TypeScript는 가져온 요소가 div인지 a인지 li인지 등등.. 모른다!

해당 요소가 어떤 요소라고 알려주기 위해서 type casting을 해주는 것이 document.getElementById('id')! as HTMLDivElement;이다.

 

참고로 이 코드는 두 가지 방법으로 쓸 수 있다.

const div = document.getElementById('im-div')! as HTMLDivElement;
const div = <HTMLDivElement>document.getElementById('im-div');

 

importNode

importNode()는 노드를 복사하는 메소드이다.

const node = document.importNode(externalNode, deep);

2개의 매개변수를 필요로하는데,

externalNode는 다른 문서에서 가져올 노드이고

deep은 boolean타입으로 externalNode의 자식 요소들을 포함하여 복사할 것인지 여부를 결정한다.

 

class ProjectInput {
  templateElement: HTMLTemplateElement;
  hostElement: HTMLDivElement;

  constructor() {
    this.templateElement = document.getElementById(
      'project-input'
    )! as HTMLTemplateElement;
    this.hostElement = document.getElementById('app')! as HTMLDivElement;

    const importedNode = document.importNode(
      this.templateElement.content,
      true
    );
  }
}

importedNode는 templateElement.content(template 태그 사이의 HTML 코드)를 가져오면서 그 자식 요소들의 내용을 전부 취하고자 하는 코드이다.

 

참고로, importedNode에 마우스를 올려보면 TypeScript가 스스로 타입을 DocumentFragment로 추론한다.

DocumentFragment는 DOM과 별개로 메모리상에만 따로 존재하는 껍데기 같은 존재다.
DOM 트리에 직접 존재하는 것이 아니기 때문에 접근 속도가 빠르며 성능 최적화에 좋다.
React에서도 최상위 노드를 감싸야하는 상황이 생길 때 <Fragment></Fragment>를 쓰면 좋다고 한다..!

 

insertAdjacentElement()

insertAdjacentElement()는 특정 위치에 요소를 삽입하는 메소드이다.

targetElement.insertAdjacentElement(position, element);

2개의 매개변수를 필요로 하고 각 내용은 다음과 같다.

position은 targetElement의 위치를 기준으로 어디에 요소를 삽입할 것인지를 정한다.

• 'beforebegin' : targetElement 앞에 삽입한다.
• 'afterbegin' : targetElement 내부의 첫번째 자식 앞에 삽입한다. (targetElement의 첫번째 자식이 되는 것)
• 'beforeend' : targetElement 내부의 마지막 자식 뒤에 삽입한다. (targetElement의 마지막 자식이 되는 것)
• 'afterend' : targetElement 뒤에 삽입한다.

position은 string으로 작성해주어야 함!
'beforebegin', 'afterbegin', 'beforeend', 'afterend'

element는 삽입하고자 하는 요소를 의미한다.

 

class ProjectInput {
  templateElement: HTMLTemplateElement;
  hostElement: HTMLDivElement;
  element: HTMLFormElement;

  constructor() {
    this.templateElement = document.getElementById(
      'project-input'
    )! as HTMLTemplateElement;
    this.hostElement = document.getElementById('app')! as HTMLDivElement;

    const importedNode = document.importNode(
      this.templateElement.content,
      true
    );
    this.element = importedNode.firstElementChild as HTMLFormElement;
    this.attach();
  }

  private attach() {
    this.hostElement.insertAdjacentElement('afterbegin', this.element);
  }
}

element는 importedNode의 자식 중 첫번째인 form 요소이다.

attach() 메소드는 hostElement 앞에 element를 삽입하는 메소드이다.

 

여기까지 코드를 작성한 뒤 인스턴스를 생성한 화면

app.ts가 작성되지 않은 상태에서 npm start를 실행하면 빈 화면만 나오는데,
html 요소들이 template 태그 안에 숨어있기 때문이다.
template는 페이지를 불러온 순간 즉시 그려지지는 않지만 DOM 조작을 통해 화면에 불러올 수 있다.

 

Binding error

  private submitHandler(event: Event) {
    event.preventDefault();
    console.log(this.titleInputElement.value);
  }

  private configure() {
    this.element.addEventListener('submit', this.submitHandler);
  }

element의 form이 제출되면 submitHandler가 작동하도록 코드를 작성했다.

 

Title에 내용을 작성하고 제출해보면 오류가 발생한다.

코드를 보면 configure()에서 submitHandler() 메소드를 이벤트 리스너에 바인딩해두었다.

그렇기 때문에 이벤트가 발생하면 작동되는 submitHandler()는 this를 다시 이벤트 대상으로 바인딩한다.

코드가 실행되는 시점에 this가 class를 가리키지 않기 때문에 오류가 발생한다.

 

간단한 해결방법은 submitHandler()가 바인딩할 대상을 지정해주는 것이다.

  private configure() {
    this.element.addEventListener('submit', this.submitHandler.bind(this));
  }

이 경우 이벤트 리스너가 참조하는 this와 submitHandler()가 참조하는 this가 동일해진다.

 

다만 이 방법은 다른 이벤트 리스너를 만들어 주었을 때 매번 바인딩을 따로 지정해주어야 하기 때문에,

데코레이터를 통해 자동으로 바인딩되도록 하는 것도 또 하나의 방법이다.

https://monshou.tistory.com/118#article-1-2--autobind-decorator

[TS] Decorators 2️⃣

 

autobind 데코레이터 적용한 뒤의 화면