qwef

document.getElementById('location').innerHTML = `현재문서 URL : : ${location.href} 현재 문서 도메인명 : ${location.hostPathname} 현재 문서 경로명 : ${location.hostname} 현재 문서 프로토콜 : ${location.protocol} `; document.getElementById('naver-btn') .addEventListener('click', e=>{ location.assign('https://naver.com'); }); 현재문서 URL : : http://127.0.0.1:51331/ 현재 문서 도메인명 : undefined 현재 문서 경로명 : 127.0.0.1 현재 문서 프로토콜 : http:

일단 DB 실행 하고 시작 커넥션을 하는 거임. public abstract class ConnectionConst { public static final String URL = "jdbc:h2:tcp://localhost/./test"; public static final String USERNAME = "sa"; public static final String PASSWORD = "1234"; } 먼저 DB 로그인 정보를 쉽게 쓰기 위해 Const로 만듦. 실제로 생성할 게 아니라서 추상 클래스로 만듦. @Slf4j public class DBConnectionUtil { public static Connection getConnection(){ try { Connection connection = ..

JDBC를 직접 사용하기 보다는, JDBC를 편리하게 사용할 수 있도록 해주는 기술들이 존재한다. 대표적으로 SQL Mapper와, ORM이 있다. JdbcTemplate, MyBatis는 대표적인 SQL Mapper, 둘다 스프링이 제공하는 거임. SQL Mapper는 응답결과를 객체로 자동으로 변환해준다던지, 반복코드도 제공해주고 그런다. ORM은 쿼리를 넣는게 아니라, 매핑 설정 정보를 주면 객체를 넣어주면 그걸 자동으로 쿼리문으로 만들어서 DB에 전달한다. 대표 기술 : JPA, 하이버네이트, 이클립스 JPA는 ORM 표준 인터페이스고, 이걸 구현한 게 하이버네이트나 이클립스 링크 등. 보통 하이버네이트 씀. 더 제공해주는 기능들이 많다고 함. Spring Data JPA, Query DSL는 J..

중요한 데이터는 대부분 DB에 저장 보통 요런 구조. 우리가 domain과 web을 따로 나눴었죠? 보통, 빠른 응답을 위해 먼저 커넥션을 연결한다. 주로 TCP/IP로 연결한다. 그 다음은 그냥 SQL에 요청하고 응답받고 그런거다. 옛날엔 문제였던게, DB마다 커넥션을 연결하는 방법, SQL을 전달하는 방법, 응답받는 방법 모두 달랐다. 그래서 학습도 해야 했고, 코드도 또 짜야됐다. DB변경 시에는. 그때 나온 게 JDBC(Java Database Connectivity) 자바에서 제공하는 DB와의 의사소통을 위한 API이다. 통역사 역할? 을 하는 듯? 우리는 우리 말만 사용해도 각자의 DB에 맞게 알아서 바꿔서 전달해 주는 듯. JDBC가 제공하는 것들 중 대표적인 인터페이스는 java.sql.C..

const $orderForm = document.forms.order; const $userInfo = $orderForm.elements.userInfo; const $productInfo = $orderForm.elements.productInfo; console.log($orderForm); console.log($userInfo); console.log($productInfo); document.getElementById('btn1') .addEventListener('click', e=>{ const { name, tel } = $userInfo.elements; console.log($userInfo.elements); console.log(`${name.value}사용자 ${tel.valu..

function buildAlert(title, message){ const $alert = document.createElement('div'); const id = Math.ceil(Math.random() * 1000); console.log(id); $alert.className = 'alert'; const $span = document.createElement('span'); $span.classList.add('close'); $span.innerHTML = '×'; const $h3 = document.createElement('h3'); $h3.textContent = title; const $p = document.createElement('p'); $p.textContent = mes..

const li = e.target.closest('li'); 이벤트 일어났을 때 부모 찾아서 통째로 지우거나 할 때 편리할 듯. html 태그 객체를 통해 지우는 것도 쉬움. li.remove(); 걍 이렇게 하면 지워짐.

$preventSpan.addEventListener('contextmenu',(e)=>{ e.preventDefault(); }) 이러면 우클릭 시 콘텍스트메뉴 생성되는거 막아줌. $preventSpan.addEventListener('contextmenu',(e)=>{ console.log('prevent element click'); e.stopPropagation(); e.preventDefault(); }) 이렇게 e.stopPropagation(); 까지 추가하면 부모로 가는 이벤트 버블링도 막고, 'contextmenu'의 기본 이벤트도 막아줌. 이 외에도 뭐 a링크의 클릭하면 페이지 이동하는 것을 막는다던지 그런 거 할 수 있음.

$preventSpan.addEventListener('contextmenu',(e)=>{ console.log('prevent element click'); e.stopPropagation(); }) 이렇게 하면 버블링을 막아줌. 부모까지 이벤트 전파가 되지 않음.

버블링 캡처링 const element1 = document.querySelector('#element1'); const element2 = document.querySelector('#element2'); const element3 = document.querySelector('#element3'); const element4 = document.querySelector('#element4'); element1.addEventListener('click', e=>{console.log('element1 clicked')}); element2.addEventListener('click', e=>{console.log('element2 clicked')}); element3.addEventListener(..