기록

JSP에서 JavaScript 모듈 사용하기

📌 JSP에서 JavaScript 모듈 사용하기JSP에서 JavaScript 모듈을 사용하려면 몇 가지 주의해야 할 점이 있다. 특히, 를 사용하면 된다.common.js 파일이 로드되며, 전역 스코프에서 사용 가능. 하지만 ES6 모듈을 사용하면 이렇게 로드할 수 없다. 📌 2. ES6 모듈(export / import) 사용 방법ES6 모듈을 사용하려면 ✔️ 모듈을 사용하면 import 키워드를 통해 특정 함수만 가져올 수 있다. ❌ 이클립스에서는 ✔️ JSP에서 없이도 ES6 모듈처럼 활용할 수 있다. ✔️ 이클립스에서도 코드 색상이 정상적으로 표시됐다.

JavaScript 코드 실행 순서 & 실행 타이밍 제어

📌 JavaScript 코드 실행 순서 & 실행 타이밍 제어 방법JavaScript는 브라우저에서 HTML을 해석하면서 실행된다! 그런데 코드의 실행 순서를 잘못 이해하면 예상과 다르게 동작하거나 오류가 발생할 수도 있다. 😵그래서 JavaScript의 실행 순서와 실행 타이밍을 제어하는 방법을 정리해보았다.✅ 1. JavaScript 코드 실행 순서JavaScript는 HTML을 위에서 아래로 해석하면서 실행된다.   🔹 기본적인 실행 흐름1️⃣ HTML(DOM) 위에서 아래로 해석2️⃣  🔹 실행 결과1️⃣ head 내부 스크립트 실행2️⃣ body 내부 script 실행3️⃣ document ready 실행 (DOM 완성 후)4️⃣ window.onload 실행 (이미지..

호이스팅(hoisting) 이란?자바스크립트에서 변수와 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 특성입니다.선언은 스코프의 최상단으로 옮기지만, 초기화(할당)는 그 위치에서 그대로 이루어집니다.호이스팅은 함수와 변수를 다르게 처리합니다. 호이스팅(hoisting) 원인실행 컨텍스트의 생성 단계에서 변수와 함수의 선언이 미리 처리되기 때문에 발생합니다.실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 정의하며, 함수 호출 또는 전역 코드가 실행될 때마다 생성됩니다.실행 컨텍스트는 생성 단계와 실행 단계로 나뉩니다.생성 단계 (Creation Phase)변수와 함수 선언 처리: 실행 컨텍스트가 생성될 때, 자바스크립트 엔진은 먼저 현재 스코프 내의 변수와 함수 선언을 찾아서 메모..

iframe을 이용하는 화면에서 sesstion timeout이 발생했을 때 로그인 페이지로 이동해야하는데 iframe 영역안에서 login페이지로 가는 경우가 있습니다. login페이지의 js에 아래와 같이 작성하면 됩니다. $(document).ready(function(){ if ( self !== top ) { top.location.href = "/"; } }); $(document).ready(function(){...});: 문서(페이지)가 로드될 때 실행되는 jQuery의 함수입니다. 이는 페이지의 모든 요소가 로드된 후에 스크립트가 실행되도록 보장합니다. if (self !== top) { ... }: 현재 페이지(self)가 최상위 레벨 페이지(top)가 아닌 경우를 검사합니다. 이는 ..

file-saver 자바스크립트에서 파일을 생성하고 사용자에게 다운로드할 수 있게 해주는 라이브러리입니다. 1. 설치 npm install file-saver 2. 사용법 saveAs 함수 이 함수를 사용하여 클라이언트 측에서 파일을 저장하고 다운로드할 수 있습니다. saveAs(다운로드할 파일의 데이터 (Blob 또는 File), 다운로드될 파일의 이름) 3. 예시 (vue3) import { saveAs } from 'file-saver'; // fetch 함수를 사용하여 지정된 URL에서 PDF 파일을 가져옵니다. // 가져온 PDF 파일을 ArrayBuffer로 변환합니다. const fetchPdf = async () => { const response = await fetch('/assets/..

check list 형태를 자주 쓰게 되어서 All 체크박스 컨트롤 방법을 코드로 남김 {{ group.name }} All {{ file.name }} openList(idx1): function { let target = document.getElementById('group_' + idx1); if (target.style.display == 'none') { target.style.display = block; } else { target.style.display = none; } }, checkAll: function (e, idx1) { const isChecked = e.target.checked; let that = this; this.groups[idx1].children.forEach(..

position이 absoulte인 요소의 위치를 width에 따라 설정하던 중 스크롤바의 생성 여부에 따라 위치가 달라졌습니다. 스크롤바 넓이를 제외한 넓이를 구하기 위해 다양한 width를 가져오는 속성에 대해 알아봤습니다. offsetWidth: offsetWidth는 요소의 전체 너비를 반환하는 속성입니다. 이 너비에는 요소의 가시적인 너비, 안쪽 여백(padding), 테두리(border) 및 수직 스크롤바의 너비가 포함됩니다. offsetWidth는 읽기 전용 속성으로, 픽셀 단위의 정수값을 반환합니다. clientWidth: clientWidth는 요소의 내용 영역의 너비를 반환하는 속성입니다. 내용 영역은 요소의 가시적인 너비와 스크롤바를 제외한 영역입니다. 내용 영역은 안쪽 여백(padd..

제이쿼리를 사용하지 못 하는 상황에서 한 element의 왼상단에 아이콘을 띄우는 작업을 하려고 했다. 처음에 style.top 속성(offsetTop과 동일)을 사용했는데 div안에 element가 있을 경우에 위치에 오류가 있었다. icon.style.position = 'absolute'; icon.style.top = element.style.top.replace('px', '') - 27 + 'px'; icon.style.left = element.style.left; 제이쿼리를 사용할 때 let top = $(element).offset().top let lfet = $(element).offset().left 제이쿼리를 사용하지 않고 직접 계산 function getElementAbsolut..

- Object.assign() Object.assign([], data) Object.assign()은 JavaScript에서 객체를 복사하는 메서드입니다. 첫 번째 매개변수는 대상 객체이고, 나머지 매개변수는 복사하고자 하는 소스 객체입니다. Object.assign([], data)는 빈 배열([])에 data 객체의 속성을 복사하여 새로운 배열을 생성하는 코드입니다. []는 빈 배열을 생성하는 것이며, data 객체의 속성들을 복사하여 새로운 배열로 만듭니다. - 예시 전체리스트를 객체의 특정 속성 값에 따라 분류할 때 this.AList.push(data) 데이터를 push하는데 이때 AllList의 객체를 참조하게 됩니다. 그래서 아래에서 children메뉴를 필터링 할 때 BList의 값이 ..

querySelector(): 선택자를 사용하여 첫 번째 일치하는 요소를 가져옵니다. querySelectorAll(): 선택자를 사용하여 모든 일치하는 요소를 가져옵니다. querySelector() querySelector() 메서드는 문서 내에서 특정 CSS 선택자에 해당하는 첫 번째 요소를 반환하는 메서드입니다. 이 메서드는 Document 객체뿐만 아니라 Element 객체에서도 사용할 수 있습니다. 다음은 querySelector() 메서드의 구문입니다: element.querySelector(selector); element: 요소의 하위 요소 중에서 선택할 요소입니다. Document 객체 또는 다른 Element 객체가 될 수 있습니다. selector: 선택할 요소의 CSS 선택자입니다..