[jQuery] 이미지맵 반응형 웹 사이트에 적용하기 [jQuery-rwdImageMaps, 이미지맵 리사이징]
·
◎ JavaScript/jQuery🌊
- 이미지맵 반응형 웹 사이트에 적용하기반응형 웹이거나 브라우저 크기를 변경할 때 이미지맵의 크기가 달라진다.jQuery-rwdImageMaps를 쓰면 해결할 수 있다.기존 라이브러리에서는 브라우저 크기 조정 시 이미지맵 coords가 NaN으로 변하는 버그가 있었다.해당 버그는 내 repo로 fork 해서 수정해놓았다. GitHub - kycasdzxc/jQuery-rwdImageMaps: Responsive Image Maps jQuery PluginResponsive Image Maps jQuery Plugin. Contribute to kycasdzxc/jQuery-rwdImageMaps development by creating an account on GitHub.github.com- jQue..
[Selenium] 페이지 로딩 될 때까지 기다리기 [WebDriverWait, Java 셀레늄 페이지 로딩 대기하기]
·
▣ Framework/Selenium🌕
- 페이지 로딩 될 때까지 기다리기동적 페이지를 스크랩핑 할 때는 페이지 로딩을 기다려야 할 때가 있다.가장 간단한 방법으로는 Thread.sleep(1000);을 사용하면 된다.Thread.sleep(1000); // milliseconds, 1초 대기 이 구문은 Java의 Thread.sleep 메서드를 사용하여 현재 스레드를 일정 시간 동안 일시적으로 중지한다.그러나 이 방법은 정확한 대기 시간을 보장하지 않을 수 있으며, 대기 시간이 고정되어 있기 때문에 페이지 로드가 끝나는 시점을 고려하지 않는다.Selenium에서 페이지 로드를 기다리기 위해서는 WebDriverWait를 사용하는 것이 좋다.- WebDriverWait import java.time.Duration;import org.open..
[튜닝일지] 6. 너와 나의 연결고리, Mapping 테이블 [백엔드 개발자의 쿼리 튜닝일지]
·
◈ Refactoring/쿼리 튜닝일지🔧
6. 너와 나의 연결고리, Mapping 테이블 이번에는 매핑 테이블에 대한 공부와 고찰을 남겨본다. 1) 매핑 테이블이란? 다대다 관계(N:M)를 이어주는 중간 테이블 2) 사용 이유 매핑 테이블을 사용하는 것이 성능적으로 더 좋은 이유는 다음과 같다. * 예시로는 게시글 테이블, 태그 테이블 그리고 그 두 테이블을 잇는 매핑 테이블이다. 다대다 관계 처리 : 게시글과 태그 간의 관계는 다대다 관계이다. 한 게시글은 여러 개의 태그를 가질 수 있고, 한 태그는 여러 개의 게시글에 속할 수 있다. 이러한 다대다 관계를 효과적으로 처리하려면 매핑 테이블이 필요하다. 인덱스 적용 : 매핑 테이블을 사용하면 게시글과 태그 간의 관계를 효율적으로 검색할 수 있다. 각각의 게시글 및 태그 ID를 키로 사용하여 인..
[JS] 브라우저 URL에서 매개변수 값 추출하기 [JavaScript의 URLSearchParams 활용]
·
◎ JavaScript/JavaScript🦎
- 브라우저 URL에서 매개변수 값 추출하기 웹 애플리케이션을 개발하다보면 종종 현재 페이지 URL에서 특정 매개변수 값을 추출해야 할 때가 있다. 이를 위해서는 JavaScript를 사용하여 URL을 파싱하고 필요한 정보를 추출해야 한다. 이번 글에서는 JS의 URLSearchParams 객체를 활용하여 브라우저 URL에서 매개변수 값을 추출해 볼 것이다. 이 객체를 사용하면 URL의 쿼리 문자열을 쉽게 파싱하여 매개변수 값을 가져올 수 있다. 아래는 getValueFromPreviousPage 함수를 통해 이전 페이지에서 특정 매개변수 값을 가져오는 예제이다. 이 함수는 페이지가 로드될 때 실행되어 이전 페이지에서 전달된 매개변수 값을 추출하고, 해당 값이 존재하면 추가적인 작업을 수행한다. // 이..
[Thymeleaf] 템플릿 조각(Fragment)이란? [타임리프 코드 재사용성 높이는 방법, th:fragment, th:replace]
·
▣ Tools/Thymeleaf🌿
- 템플릿 조각(Fragment)이란?템플릿 조각은 웹 애플리케이션의 HTML 템플릿에서 재사용 가능한 부분을 나타낸다. 이는 웹 페이지의 여러 부분에서 동일한 구성 요소를 사용하거나, 특정 부분을 여러 페이지에서 재사용하고자 할 때 유용하다.템플릿 조각은 주로 웹 애플리케이션의 디자인이나 레이아웃의 일부를 나타낸다. 예를 들어, 웹 페이지의 헤더, 푸터, 사이드바 등은 템플릿 조각으로 분리하여 다른 페이지에서 재사용할 수 있다.- 템플릿 조각 사용 방법1) 템플릿 조각 정의하기HTML 템플릿에서 템플릿 조각을 정의한다.보통 나 등의 HTML 요소로 표현되며, 해당 부분에 고유한 ID나 클래스를 부여하여 구분한다. 안녕하세요! 홈 페이지입니다.  위의 예..