전체 글

[튜닝일지] 6. 너와 나의 연결고리, Mapping 테이블 [백엔드 개발자의 쿼리 튜닝일지]

6. 너와 나의 연결고리, Mapping 테이블 이번에는 매핑 테이블에 대한 공부와 고찰을 남겨본다. 1) 매핑 테이블이란? 다대다 관계(N:M)를 이어주는 중간 테이블 2) 사용 이유 매핑 테이블을 사용하는 것이 성능적으로 더 좋은 이유는 다음과 같다. * 예시로는 게시글 테이블, 태그 테이블 그리고 그 두 테이블을 잇는 매핑 테이블이다. 다대다 관계 처리 : 게시글과 태그 간의 관계는 다대다 관계이다. 한 게시글은 여러 개의 태그를 가질 수 있고, 한 태그는 여러 개의 게시글에 속할 수 있다. 이러한 다대다 관계를 효과적으로 처리하려면 매핑 테이블이 필요하다. 인덱스 적용 : 매핑 테이블을 사용하면 게시글과 태그 간의 관계를 효율적으로 검색할 수 있다. 각각의 게시글 및 태그 ID를 키로 사용하여 인..

[JS] 브라우저 URL에서 매개변수 값 추출하기 [JavaScript의 URLSearchParams 활용]

- 브라우저 URL에서 매개변수 값 추출하기 웹 애플리케이션을 개발하다보면 종종 현재 페이지 URL에서 특정 매개변수 값을 추출해야 할 때가 있다. 이를 위해서는 JavaScript를 사용하여 URL을 파싱하고 필요한 정보를 추출해야 한다. 이번 글에서는 JS의 URLSearchParams 객체를 활용하여 브라우저 URL에서 매개변수 값을 추출해 볼 것이다. 이 객체를 사용하면 URL의 쿼리 문자열을 쉽게 파싱하여 매개변수 값을 가져올 수 있다. 아래는 getValueFromPreviousPage 함수를 통해 이전 페이지에서 특정 매개변수 값을 가져오는 예제이다. 이 함수는 페이지가 로드될 때 실행되어 이전 페이지에서 전달된 매개변수 값을 추출하고, 해당 값이 존재하면 추가적인 작업을 수행한다. // 이..

[Thymeleaf] 템플릿 조각(Fragment)이란? [타임리프 코드 재사용성 높이는 방법, th:fragment, th:replace]

- 템플릿 조각(Fragment)이란?템플릿 조각은 웹 애플리케이션의 HTML 템플릿에서 재사용 가능한 부분을 나타낸다. 이는 웹 페이지의 여러 부분에서 동일한 구성 요소를 사용하거나, 특정 부분을 여러 페이지에서 재사용하고자 할 때 유용하다.템플릿 조각은 주로 웹 애플리케이션의 디자인이나 레이아웃의 일부를 나타낸다. 예를 들어, 웹 페이지의 헤더, 푸터, 사이드바 등은 템플릿 조각으로 분리하여 다른 페이지에서 재사용할 수 있다.- 템플릿 조각 사용 방법1) 템플릿 조각 정의하기HTML 템플릿에서 템플릿 조각을 정의한다.보통 나 등의 HTML 요소로 표현되며, 해당 부분에 고유한 ID나 클래스를 부여하여 구분한다. 안녕하세요! 홈 페이지입니다.  위의 예..

[웹 보안] 분산 서비스 거부 공격 DDoS(Distributed Denial of Service) [DDoS 정의, 공격 방법, 방어 방법]

- 분산 서비스 거부 공격 DDoS(Distributed Denial of Service)이 공격은 DoS처럼 인터넷 트래픽의 폭주로 공격 대상이 정상적으로 네트워크가 작동하지 않게 한다. 그러나, DDoS는 1대 1로 싸우는 것이 아닌 1대 다수로 싸우게 된다.갑자기 이슈가 되어 접속자가 많아진 웹사이트와 DDoS 공격을 받고 있는 웹사이트를 구별하는 것은 어렵다. 숙련된 DDoS 공격은 알려진 해결책으로도 방어가 매우 어렵다. 뚜렷한 해결책이 없어서 DDoS는 방어라는 표현보다는 완화라는 표현을 사용할 정도이다.일반적인 경우는 공격자가 다수의 보안이 약한 일반 사용자를 먼저 공격한다.(＝좀비PC 생성) 그리고 그들의 컴퓨터에서 원격으로 진짜 목표에 트래픽을 보낸다. 이로 인해 진짜 공격 대상은 너무..

[일상] 브라우저 창 조절 시 이미지맵에서 NaN이 발생하다💥 [jQuery-rwdImageMaps, 오픈소스 파헤치기]

- 브라우저 창 조절 시 NaN이 발생하다이미지맵을 창 크기에 맞게 리사이징할 일이 있어서 이것저것 찾는 중 jQuery-rwdImageMaps을 알게 되었다.내가 원하던 기능이여서 만족하였지만 버그를 발견하였다.페이지 로딩 시에는 정상적으로 리사이징 되었으나, 브라우저 크기를 변경하면 아래처럼 NaN이 발생하였다. 에러 해결이 간단할 거 같았고, 코드도 어렵지 않아 보여 해당 에러를 수정해봐야겠다 생각했다. 그래도 혹시 모르니 다른 사람이 작업한 게 있나 PR을 확인해 봤다.DotFreelance라는 사람이 해결해서 PR 해놨었다. (그러나 이 repo는 10년 넘게 멈춰있었다..🥲) GitHub - kycasdzxc/jQuery-rwdImageMaps: Responsive Image Maps jQu..

[GAS] 외부에서 구글 스프레드 시트에서 데이터 가져오기 [Google Sheets에서 URL 해시 매핑 데이터 가져오기]

- 구글 스프레드 시트에서 데이터 가져오기 애플리케이션에서 URL 링크를 관리하고자 할 때, 링크의 일부를 해시 값으로 사용하여 데이터를 가져올 수 있다. GAS를 사용하여 구글 스프레드시트에서 URL 해시 매핑 데이터를 가져오는 방법에 대해 알아볼 예정이다. 아래 코드는 doGet 함수와 getHashForURL 함수로 구성되어 있다. doGet 함수는 URL 매개변수에서 'hash' 파라미터를 가져와서 해당 해시 값에 대응하는 URL 값을 반환한다. 그리고 getHashForURL 함수는 입력된 URL에 대한 해시 값을 반환하는 함수이다. // doGet 함수는 URL 매개변수에서 'hash' 파라미터를 가져와서 해당 hash에 대한 URL 값을 반환합니다. function doGet(e) { var..

[튜닝일지] 5. 쿼리문 조건에도 순서가 있다? [백엔드 개발자의 쿼리 튜닝일지]

5. 쿼리문 조건에도 순서가 있다? SQL 쿼리를 작성할 때, join이나 where 절에 들어가는 조건문의 순서는 중요한 역할을 한다. 가장 엄격한 필터링 조건을 먼저 배치하여 행을 최대한 빨리 필터링하면 나머지 조건에 대해 평가할 행 수가 줄어들어 성능이 향상되며, 이는 데이터베이스 시스템의 옵티마이저가 최적의 실행 계획을 수립하는 데 도움이 된다. 조건문의 효율 순위는 주로 데이터베이스의 인덱스 및 데이터 분포에 따라 다를 수 있으나 인덱스를 타는 여부로만 고려할 때, 조건문의 효율 순위는 다음과 같다. 동등 비교: 동등 비교는 일반적으로 인덱스를 가장 잘 활용할 수 있는 조건이다. 특정 컬럼에 대한 동등한 값을 비교하는 경우에는 인덱스를 타고 해당 값과 일치하는 행을 빠르게 찾을 수 있다. 날짜 ..