My footsteps
let valid = e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.indexOf("Files") >= 0; //드래그 한 내용이 파일이냐?! imgDropZone.ondrop = function (e) { e.preventDefault(); //파일이 몇갠지 알아보기 console.log(e.dataTransfer.files.length); console.log("drop") }; - 제약조건 걸기 .invalid-for-over { background-color: peachpuff; } .invalid-for-drop{ background-color: orangered; } .invalid-for-drop::after{ display:..
- 모달창 클릭하면 닫히는데, 모달창을 클릭하면 안닫히고 모달 바깥을 클릭하면 닫히게 하는 코드 this.onclick = (e)=>{ if(e.target != e.currentTarget) return; this.remove(); }; //true면 페이지 로드되자마자 뜨고,fasle면 플러스 버튼을 클릭해야만 모달이 뜸 let show = false; if(this.hasAttribute("data-show")) show = JSON.parse(this.getAttribute("data-show")); console.log("----------------------------"); console.log(typeof this.getAttribute("data-show")); console.log(ty..
- 투명도 섞어서 주기 background-color: #000000a0; - 스타일 let styleEl = document.createElement("style"); - 바깥 this를 쓰고싶으면 람다식을 쓴다 - 속성,이벤트를 제어하면됨 //얘가 super(); this. //컨스트럭터의 this임 - using shadow DOM - 저 윗 그림이 이 과정이다...(?) const wrapper = document.createElement("div"); wrapper.className = "screen"; wrapper.innerHTML = template; const wrapper = document.createElement("div"); wrapper.className = "screen"; w..
- 페이지는 뷰를 쓰는게 아니다 - 구조/조직/자원 등의 디렉토리 구조를 범용화 한 것 ex)삼성전자/개발팀/프론트/사원/1 이런것처럼 - restpullapi는 자원에 대한 식별자를 붙이는거다(?) - 뷰 : 모든 필요한 집계 데이터를 꾸겨 넣는다 -json : 객체를 객체스럽지 않게 표현식으로 제공하는것(한방에 쌉가능) .then(response=>response.json()) - count 하는법 .then(result => { if(result==1){ fetch(`/api/menulikes/count?mn=${menuId}`) .then(response=>response.json()) .then(count=>{ console.log(`count is ${count}`); }); } }); - 좋..
- 로그인 했을때와 익명일때 차이 좋아요 좋아요 0 첫 번째 태그: th:href 속성은 Thymeleaf 템플릿 엔진을 사용하여 링크 URL을 동적으로 생성합니다. sec:authorize 속성은 보안 및 인증 처리를 위한 서버 사이드 코드에서 사용됩니다. 여기서는 사용자가 인증된 상태(isAuthenticated())일 때만 해당 링크가 표시되도록 설정되어 있습니다. th:data-member-id 속성은 좋아요 기능과 관련된 추가적인 데이터를 전달하기 위해 사용됩니다. 여기서는 authentication.principal.id 값을 해당 속성에 할당하여 현재 인증된 사용자의 아이디를 전달하고 있습니다. class 속성은 CSS 클래스를 지정합니다. 여기서는 icon과 icon-heart 클래스가 지..