Develop 111

[PostgreSQL] 날짜 더하기, 빼기, 일수 차이 구하기 INTERVAL

PostgreSQL에서 **날짜(Date)**와 시간(Time) 관련 연산을 다루는 방법을 소개하겠습니다. 데이터베이스에서 날짜와 시간 연산은 매우 빈번하게 사용되며, 특정 날짜에 시간을 더하거나 빼는 작업, 두 날짜 사이의 차이를 구하는 등 다양한 기능을 제공합니다. 이번 글에서는 년, 월, 일 단위로 날짜를 더하고 빼는 방법과 두 날짜 간의 일수 차이를 구하는 방법을 예제와 함께 설명하겠습니다. 1. PostgreSQL에서 날짜 더하고 빼기PostgreSQL에서는 날짜에 대한 덧셈과 뺄셈을 간단하게 처리할 수 있습니다. 이를 위해 INTERVAL이라는 특별한 형식을 사용하여 년(year), 월(month), 일(day) 등의 기간을 추가하거나 뺄 수 있습니다.1.1 날짜에 년도 더하기/빼기날짜에 년 ..

Develop 2024.10.10

[PostgreSQL] Random 함수 랜덤으로 목록 조회 및 숫자생성

PostgreSQL에서 무작위 값을 생성하는 데 사용되는 random() 함수는 데이터베이스에서 임의의 숫자를 생성할 때 유용하며, 다양한 상황에서 활용될 수 있습니다. 예를 들어, 샘플 데이터 생성, 무작위 레코드 선택, 확률적인 처리 등에 사용됩니다. 1. random() 함수란?PostgreSQL에서 random() 함수는 0 이상 1 미만의 부동 소수점 값(float) 을 반환하는 함수입니다. 이 함수는 난수를 생성하는 데 사용되며, 기본적으로 반환되는 값의 범위는 다음과 같습니다.범위: 0 ≤ random() 기본 사용법:SELECT random(); 실행 시, random()은 매번 다른 소수점 값을 반환합니다.SELECT random();-- 예시 출력: 0.726374829498291  2..

Develop 2024.10.10

[HTML] html 에서 데이터 data 속성 쉽게 사용하기

HTML에서 매우 유용하게 사용되는 data- 속성에 대해 알아보겠습니다. data- 속성은 커스텀 데이터를 HTML 요소에 저장하고, JavaScript로 이를 쉽게 접근할 수 있게 해줍니다. 이 기능을 활용하면 페이지에 추가적인 메타데이터를 담거나, 화면에 보이지 않는 정보를 요소에 연결할 수 있습니다.1. data- 속성란?data- 속성은 HTML5에서 도입된 속성으로, HTML 태그에 사용자 정의 데이터를 저장할 수 있습니다. data-로 시작하는 속성은 데이터 속성을 의미하며, 표준 HTML 속성 외의 추가 정보를 각 요소에 담고자 할 때 사용됩니다.문법: data-: 속성의 접두사로, 사용자 정의 데이터를 명시.key: 저장할 데이터의 이름. 반드시 소문자 알파벳으로 시작해야 하며, 하이픈(..

Develop 2024.10.10

[JavaScript] 비구조화 할당 (Destructuring Assignment) 배열 또는 객체의 값 추출

1. 비구조화 할당 (Destructuring Assignment)란?비구조화 할당은 배열(Array) 또는 객체(Object)의 값을 쉽게 추출하고, 이를 변수에 담아 사용하는 방법입니다. 코드의 가독성을 높이고, 특히 여러 개의 변수를 한 번에 선언하고 값을 할당할 때 매우 유용합니다.배열 비구조화배열에서 비구조화 할당을 사용하면, 배열의 각 요소를 변수에 쉽게 할당할 수 있습니다.// 배열 비구조화 할당const fruits = ["apple", "banana", "orange"];// 비구조화 할당으로 배열 요소를 변수에 담기const [firstFruit, secondFruit, thirdFruit] = fruits;console.log(firstFruit); // appleconsole.lo..

Develop 2024.10.09

[JavaScript] 배열에서 객체(오브젝트)의 위치를 찾는 방법 - indexOf 대신 findIndex 활용하기

JavaScript에서 배열에 값이 포함되어 있는지, 또는 값이 배열 내에서 어느 위치에 있는지 확인하기 위해 흔히 indexOf 메서드를 사용합니다. 그러나 배열의 값이 객체로 이루어져 있을 경우, indexOf는 원하는 결과를 제공하지 않습니다. 객체는 참조형 데이터이기 때문에, 동일한 구조의 객체라도 서로 다른 메모리 주소를 가지고 있기 때문입니다. 이런 경우에는 findIndex 메서드를 사용하는 것이 적합합니다. 1. 기본적인 indexOf의 한계indexOf는 원시 데이터 타입(문자열, 숫자 등)으로 이루어진 배열에서 특정 값을 찾을 때는 잘 작동합니다.// 문자열 배열에서 indexOf 사용const fruits = ["apple", "banana", "cherry"];const index ..

Develop 2024.10.08

[Thymeleaf 타임리프] 구분자를 기준으로 배열만들기 setSplit 사용방법

1. split() 함수란?split() 함수는 주어진 문자열을 특정 구분자를 기준으로 분리하고, 그 결과를 배열로 반환하는 함수입니다. 예를 들어, "apple,banana,orange"라는 문자열을 쉼표(,)로 분리하면, ["apple", "banana", "orange"]라는 배열을 얻게 됩니다.2. 예제 시나리오이번 예제에서는 "Spring,Security,Thymeleaf"라는 문자열을 쉼표로 분리한 후, 그 결과를 화면에 출력하는 방법을 구현해 보겠습니다.3. 프로젝트 설정Spring Boot 프로젝트에서 Thymeleaf를 사용할 수 있도록 spring-boot-starter-thymeleaf 의존성을 추가해야 합니다.build.gradle (또는 pom.xml)dependencies { ..

Develop 2024.10.08

PostgreSQL에서 한글 ORDER BY 정렬 문제 해결하기 COLLATE

데이터베이스를 사용할 때 정렬은 매우 중요한 작업입니다. 특히 한글 데이터를 다루는 경우, PostgreSQL에서 ORDER BY 절을 사용할 때 한글 정렬이 예상과 다르게 동작하는 문제를 경험할 수 있습니다. 이 글에서는 이러한 한글 정렬 문제를 해결하는 방법을 알아보겠습니다.1. 문제 상황PostgreSQL에서 한글 데이터를 ORDER BY로 정렬하면 한글이 올바르게 정렬되지 않는 경우가 있습니다. 예를 들어, 다음과 같은 데이터를 생각해봅시다.CREATE TABLE employees ( id SERIAL PRIMARY KEY, name VARCHAR(50));INSERT INTO employees (name) VALUES('김영희'),('이민수'),('박철수'),('최지수'); 위 데이터..

Develop 2024.10.08

[jQuery] 자동완성 Autocomplete 기능 설명 및 사용 방법

jQuery Autocomplete는 사용자가 입력하는 값에 따라 자동으로 제안 목록을 표시해주는 기능입니다. 사용자는 제안된 목록 중 하나를 선택하거나 계속해서 입력할 수 있으며, 이 기능은 검색 창, 폼 입력 필드, 데이터 필터링 등 다양한 상황에서 유용하게 사용할 수 있습니다. 1. 기본 사용법먼저, jQuery와 jQuery UI를 HTML 문서에 포함해야 합니다. 이를 위해 CDN을 사용할 수 있습니다.이제 기본적인 autocomplete 기능을 사용하는 방법을 살펴보겠습니다. 2. 간단한 Autocomplete 예제다음 예제는 사용자가 입력하는 대로 사전에 정의된 배열의 값을 제안하는 간단한 예제입니다. jQuery Autocomplete 예제 검색어 입력: 위 예제에..

Develop 2024.10.08

[Thymeleaf 타임리프] Spring Security를 사용하여 로그인 정보를 Thymeleaf에서 출력하는 방법

Spring Security를 사용하여 로그인 정보를 Thymeleaf에서 출력하는 방법 1. 프로젝트 설정먼저 Spring Boot 프로젝트를 생성하고, 필요한 의존성을 추가합니다.build.gradle (또는 pom.xml)dependencies { implementation 'org.springframework.boot:spring-boot-starter-security' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web'} 2. Spring Security 설정로그인 및 인증 관련 설정을 ..

Develop 2024.10.04

[Javascript] jQuery 이벤트의 동적 바인딩과 정적 바인딩

JavaScript를 사용하여 HTML 요소에 이벤트를 연결할 때, jQuery에서는 두 가지 방식으로 이벤트를 바인딩할 수 있습니다: 정적 바인딩과 동적 바인딩입니다. 각각의 차이를 이해하고 적절히 사용하는 것은 웹 애플리케이션 개발에서 매우 중요합니다. 1. 정적 바인딩 (Static Binding)정적 바인딩은 페이지가 로드된 후 특정 요소에 대해 이벤트를 직접 바인딩하는 방식입니다. 즉, DOM에 이미 존재하는 요소에 대해서만 이벤트가 바인딩됩니다. 이 방식에서는 새로운 요소가 동적으로 추가되면, 해당 요소에는 이벤트가 바인딩되지 않습니다.예제: 정적 바인딩 정적 버튼 새 버튼 추가위 코드에서는 #static-button 요소에만 클릭 이벤트가 바인딩되어 있습니다. 즉, 페이지가 로드될..

Develop 2024.10.02