Web template 사용 (with spinner)

 

 

기본 제공하는 스피너를 생성해 보면 프로젝트를 팔기 위해서는 커스텀을 해야만 한다는 걸 깨달을 수 있다.

 

구조

 

스피너를 커스텀 하기 위한 간단한 구조.

 

spinner.html

 

스크립트도 잘 가져오는지 시험하기 위해서 넣어보았다.

 

utils.js

 

파라미터로 경로를 받아서 그 경로에 있는 템플릿을 파라미터로 받은 컨테이너 안에 넣는 로직이다. 마지막 registerListener는 가져다 붙인 템플릿의 돔 조작을 위한 이벤트 리스너 등록을 위한 콜백 메서드다.

 

클래스 template 아래 컨텐츠 즉 spinner.html의 spinner 클래스 div를, 파라미터로 받은 컨테이너 자식 요소로 가져다 붙인다.

 

container.appendChild(clone) 아래는 스타일과 스크립트가 있으면 추가하는 건데 링크 / 태그를 해도 되고 그냥 html 파일에 썼다면 저 코드를 이용해 붙이도록 하자.

 

index.html

 

이곳에서 커스텀 스피너를 사용할 예정이다. 컨테이너 안에 넣어보려고 한다. 먼저 utils를 태그하고 그 밑에 스크립트를 직접 써도 되고 태그를 해도 된다. 꼭 await을 써서 템플릿을 잘 가져올 때까지 기다려주자.

 

 

그러고 나서 CSS를 좀 만져주면 이렇게 내가 원하는 형태로 바꿀 수 있다.

 

index.html

 

이런 식으로 추가해서 여러 개를 쓰면 된다.

 

 

기능도 한번 넣어보자.

 

spinner.html

 

간단하게 스크립트를 작성하고,

 

index.html

 

요구하는 파라미터를 넣어주면 된다.

 

클래스 이름이 중복되지만 특정 컨테이너에서 자식 요소를 찾아서 이벤트를 등록해주면 꼬이지 않고 잘 동작한다.

 

이벤트 등록이 복잡해지면 함수를 더 등록해야 할 수도 있는데 그럴 땐 클래스를 쓰고 클래스의 생성자에서 이벤트를 등록하면 된다. 동작에 문제가 생기진 않지만 콘솔에 클래스 이름이 이미 정의되어 있다고 빨간 글이 나오기 때문에 그때는 클래스를 스크립트에 직접 적지 말고 따로 js 파일로 빼서 태그해주면 된다.

 

 

 

https://github.com/Hyeonnam-J/assets.git

GitHub - Hyeonnam-J/assets