SQLD 윈도우 함수1) 의미 : 서로 다른 행의 비교나 연산을 위해 만든 함수2) 특징 : group by를 쓰지 않고 연산 가능3) 종류 : LAG, LEAD, SUM, AVG, MIN, MAX, COUNT, RANK rank over는 대상이 안 나와도 됨문법1) partition by : 연산할 그룹을 묶는 것2) order by 정렬 순서3) rows, range, between 범위 설정에 따라 누적합의 결과가 달라짐연산 범위를 쓰려면 꼭 정렬인 ORDER BY 절을 사용해야 함순서를 꼭 맞춰야 함 예시)over절을 사용하여 윈도우 함수로 사용 가능 공통 범위 설정- 범위 설정을 한다면, ORDER BY 절 필수로 써야 함ROWS : 정렬을 할 때 값이 같더라도 각 행씩 연산RANGE : 같은 값의 경..
썸네일 [JAVA] Spring Boot 자동 빌드 설정: 리소스 파일 변경 반영하기 일반적으로 Java는 클래스 파일을 저장할 때 자동으로 빌드를 수행하지만,리소스 파일(예: HTML, CSS, JavaScript)은 저장해도 자동으로 빌드되지 않습니다.개발 중 리소스 파일을 자주 수정해야 할 경우, 매번 애플리케이션을 재시작하거나 수동으로 빌드를 해야 하는 번거로움이 발생합니다. 이 문제를 해결하기 위해 Spring Boot DevTools와 LiveReload를 설정하여, 리소스 파일을 저장할 때도 자동으로 빌드하고 변경 사항을 즉시 반영하도록 설정하는 방법입니다. STS4 설정 변경 01. Run Configurations 설정 열기- 상단 메뉴에서 Run →  Run Configurations... 클릭 02. Spring Boot 애플리케이션 설정 선택- 좌측 리스트에서 Spr..
썸네일 [Thymeleaf] 컨트롤러에서 전달한 값을 JavaScript에서 사용하기 JavaScript에서 값 전달받기서버에서 전달된 데이터를 JavaScript 코드에서 사용하고 싶을 때, 타임리프를 통해 참조하는 방법입니다.01. 컨트롤러에서 값 전달@GetMapping("/")public String getChartData(Model model) { List sample = Arrays.asList(10, 20, 30, 40); model.addAttribute("sample", sample); return "index";}임시 데이터인 sample 을 model에 붙여서 'index.html' 화면에 전달 02. 타임리프 템플릿에서 값 출력 /*[[${sample}]]*/  타임리프의 표현식으로, 서버에서 전달된 데이터를 타임리프가 HTML로 변환해줌th:i..
썸네일 [Thymeleaf] 타임리프 기본 표현식과 속성 기능 기본 표현식 01.  ${...} : 변수 표현식 (Variable Expressions)서버에서 전달된 변수를 참조할 때 사용${cssStyle} 02.  *{...} : 선택 변수 표현식 (Selection Variable Expressions)선택된 객체의 속성 값을 참조할 때 사용선택된 객체의 속성에 바로 접근할 수 있음 Name:  03.  #{...} : 메시지 표현식 (Message  Expressions)메시지 파일(주로 messages.properties)에서 값을 참조할 때 사용다국어나 반복적으로 사용되는 텍스트 관리할 때 많이 사용# messages.properties 파일welcome.message=Welcome to our website!# html 파일# 렌더링 결과..
[Thymeleaf] Fragment 활용하여 레이아웃 설정 FragmentFragment는 레이아웃 작업 시, 공통적으로 사용하는 화면을 분리하여 재사용할 수 있게 하며, 필요시 파라미터 값을 전달할 수 있음 01. 화면 분리🔻예시 : 페이지 하단을 모든 페이지에서 공통으로 쓰고싶을 때의 fragment 사용법 ① 'footer.html'을 생성 Copyright © 2024 PEAZH All rights Reserved.  ② 사용하려는 페이지에 'insert', 'replace', 'include' 중 적합한 방식으로 코드 추가 'footer.html' 파일을 찾아 Frament 이름이 'copy'인 부분 호출한다는 의미'~{}'는 상대적 또는 절대적 경로를 참조할 수 있어 정확한 위치에 있는 Fragment를 가져옴  ③ 결과 ..
썸네일 [Java] Spring Boot 프로젝트 : 기본 설정과 화면 연결 01. Spring Boot에서 프로젝트 생성하기생성 시, Dependencies에서 Spring Boot DevTools, Lombok, Tymeleaf, Spring Web 선택 02. 프로젝트 생성 완료프로젝트를 생성하면 아래와 같은 기본 폴더 구조가 생성됨📂src/main/java └ 📂com.peazh └ 📄Application.java📂src/main/resources └ 📂templates (HTML 파일을 관리하는 폴더) └ 📂static (CSS, 이미지, JS 등 정적 파일을 저장하는 폴더) └ 🥬application.properties (설정 파일) 03. Controller 생성📂src/main/java 하위에 'com.peazh.controll..
썸네일 [JS] 이벤트 전파 / 이벤트 버블링 / 이벤트 캡처링 이벤트 전파 (Event Phase)브라우저에서 html 요소에 이벤트가 발생할 때, 이벤트가 전파되는 흐름에 따라 이벤트 버블링과 이벤트 캡처링이 발생함 body 영역 main 영역 div 영역 p 영역 span 영역  01) 이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트 타깃 요소에서부터 최상위 요소인 html 문서까지 이벤트가 전파되는 것으로,addEventListener 이벤트는 기본적으로 버블링으로 동작함위의 script 코드를 추가해서 console 창을 확인하면, span 태그를 클릭했을 때 span에서부터 body 태그까지 이벤트가 전파되는 과정을 확인할 수 있..
썸네일 [IT 용어] API / 동기와 비동기 API01) 인터페이스 (Interface)상호간에 읽거나 쓰기 위해 만들어진 접점사람과 사람, 사물과 사물 등 서로 다른 두 개 이상의 것들이 소통하기 위한 방법UI(User Interface) : 사용자가 시스템과 상호작용할 수 있는 접점02) API (Application Programming Interface)응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스쉽게 말해, 애플리케이션에서 데이터를 읽거나 쓰기 위해 사용하는 인터페이스03) API 종류 Private API : 회사 자체에서 서비스를 만들기 위해 사내에서 개발하고 사용하며 외부에 공개되지 않는 API Public API(Open API) : 누구나 사용할 수 있도록 개방..
썸네일 [JS] JavaScript에서 다양한 this JavaScript에서 thisJavaScript에서 this는 객체를 가르키는 키워드로, 현재 실행 중인 함수의 문맥(context)을 가르킨다.this가 가르키는 대상은 함수 호출 방식에 따라 달라진다.01) 전역 범위전역 범위에서 this는 기본값으로 전역 객체를 의미브라우저에서 전역 객체는 window 객체로, 브라우저 환경에서 제공되는 다양한 API를 제어할 수 있음console.log(this); // Window {window: Window, self: Window, document: document, name: '', location: Location, …} 02) 함수 호출일반 함수에서 this는 기본적으로 전역 객체를 가리킴호출한 객체가 없으므로 window 객체가 출력됨function..
썸네일 [JS] JavaScript 로드 문제해결 Script 로드 오류html은 위에서 아래로 순차적으로 파싱을 하는데,아래와 같이 스크립트 코드가 상단에 위치할 경우html이 완전히 파싱되기 전 스크립트가 실행되어 dom 요소를 잘 가져오지 못한다.예를 들어, 버튼이 그려지기 전 상태에서 버튼 이벤트를 발생시키면 오류가 나는데 이러한 현상을 해결하기 위해 세 가지 방법이 있다. 버튼 01) script 위치 변경 02) load 이벤트 리스너 사용window.onload : html 파싱 → dom 생성 → 외부 콘텐츠(images, script, css 등) 로드된 후 발생하는 이벤트 버튼 DOMContentLoaded : html 파싱 → dom 생성 후 발생하는 이벤트 버튼 03) 비동기로 scrip..
썸네일 [JS] DOM / BOM DOM01) DOM이란?Document Object Model 문서 객체 모델스크립트 언어로 html 요소를 제어할 수 있도록 웹 문서를 객체화한 것브라우저에서 자바 스크립트로 html 요소를 제어할 수 있도록 제공하는 apiDOM은 트리(Tree) 구조를 가지고 있음02) DOM의 트리 구조노드 : 트리 구조 안 각각의 요소document : 웹 문서 영역을 제어할 수 있게 제공하는 객체로, 웹 페이지 자체이자 돔 트리의 최상위 노드document.getRootNode() : 최상위 노드인 '#document'를 반환함03) 그 외 Object ModelCSS Object Model : css를 Javascript로 조작할 수 있도록 한 것 BOM01) BOM이란?Browser Object Model ..
썸네일 [ETC] 객체를 JSON 형식으로 변환하는 방법 개발 중 테스트를 위해 임시 데이터를 생성해야 하는 경우가 많다.그러나 console.log 로 데이터를 출력하면, 객체 형식으로 표시되어 데이터를 복사하거나 사용할 수 없을 때가 있다. 예시예를 들어, 다음과 같은 데이터가 있다고 가정해 보자.let tempData ={ jobsubid: '1', selText: 'selText5', score: '5', idx: '0', btnText: '매우 그렇다'} 변환이러한 객체 데이터를 임시 데이터로 활용하기 위해 JSON.stringify() 메서드를 사용하여 JSON 형식으로 변환console.log(JSON.stringify(tempData));이렇게 객체 데이터를 JSON 문자열로 변환하여 출력하면, 형태가 바뀐 것을 볼 수 있다.이 데이터를..