toast 팝업을 js로 만드는게 좋을까요? html코드로 쓰는게 좋을까요?

Question

안녕하세요 주니어개발자입니다. 소스 최적화? 관련해서 질문드립니다.클립보드 복사하면 노출되는 토스트팝업을 만들었는데요.이때 html태그에 직접

~~~

해서 만들어놓고 display:none으로 가려논 다음, 이벤트 발생하면 노출시키는게 좋을까요?아니면 이벤트 발생하면 js로 html을 만들어서 노출시키는게 좋을까요?? 지금은 자주 노출 될 페이지도 아니고 그래서 html로 계속 박아두는것 보다 이벤트 발생하면 그때만 js로 만들고 노출한 다음 다시 removeChild로 dom에서 지워버리게 짜놨는데뭐가 더 좋은 방법인지 조언을 구하고자 질문글 올립니다.현재 소스는 아래와 같습니다.const vaCopy = { copy : function() { const clipboard = new ClipboardJS('.touch_btn'); clipboard.on('success', (e) => { e.clearSelection(); clipboard.destroy(); vaCopy.toastShow() }); }, toastShow : function() { const elem = document.createElement('p'); const elemParent = document.querySelector('.account_info .left'); const leftBoxWidth = elemParent.clientWidth; const rightBoxWidth = document.querySelector('.account_info .right').clientWidth; elem.setAttribute("id","complete_alert"); elem.style.zIndex = '5'; elem.style.position = 'absolute'; elem.style.left = '0'; elem.style.bottom = '0'; elem.style.width = leftBoxWidth + rightBoxWidth + 'px'; elem.style.padding = '4px 0 5px'; elem.style.textAlign = 'center'; elem.style.lineHeight = '1'; elem.style.fontSize = '12px'; elem.style.color = '#fff'; elem.style.borderRadius = '20px'; elem.style.background = 'rgba(108, 6, 196, 0.95)'; elem.innerText = '가상계좌번호가 복사되었습니다.'; if (matchMedia("screen and (max-width: 320px)").matches) { // 768px 이상 기기 elem.style.fontSize = '11px'; } else if (matchMedia("screen and (max-width: 280px)").matches) { // 768px 이하 기기 elem.style.fontSize = '10px'; } elemParent.appendChild(elem); vaCopy.toastClose(elem, elemParent); }, toastClose : function(elem, elemParent) { gsap.to(elem, { delay: 0.5, duration: 1, autoAlpha: 0 }); setTimeout(() => { elemParent.removeChild(elem) }, 1500); }}; html에 있는 복사 버튼에 onclick="vaCopy.copy()"로 실행됩니다.제 질문 외에 더 깔끔하게 스크립트를 정리 할 만한 방법이 있다면, 조언 주시면 너무 감사하겠습니다!!점심 맛있게 드세요.

moonti · Accepted Answer

자스로 짜기에 이정도 코드가 깔끔하고 괜찮네여지금처럼 js로 조작하고 아얘 재거하는 방식이 좋습니다.갠적으로 id를 주기보다 class로 값을 넣는게 어떨까하는 생각이 들엇습니다

올림픽대로 · Answer

moonti 답변 감사합니다!! id말고 class로 값는 넣는것에 차이가 있나요?

moonti · Answer

html 안에서 id는 유일하게 존재해야 하는데, 로직 상 setTimeout 이후 제거라서 불안요소가 있어서요. 저는 스타일링에는 무조건 클래스 사용하고, 꼭 필요한 경우 아니면 id는 잘 사용하진 않아요.

moonti · Answer

인풋을 좀 다룰때 id를 사용하거나 헤딩에만 사용할꺼같아요.

toast 팝업을 js로 만드는게 좋을까요? html코드로 쓰는게 좋을까요?

4개의 답변

Q&A 목록