메모장

개발자 모드에서 디버깅이 필요한데, 소스코드가 보이지 않는 문제가 있었다. 🚀 요약 HTML 내부 이 스크립트는:별도의 JS 파일이 아님URL(경로)이 없음브라우저가 파일로 식별할 수 없음👉 즉, DevTools 기준에서는 “파일이 아닌 익명 스크립트”이다. 📌 3-2. Chrome의 처리 방식 (VM 파일)브라우저는 이름 없는 스크립트를 다음과 같이 처리한다.VM123VM456👉 임시 가상 파일(VM)로 생성한다.이 때문에:Sources 탭 트리에 안 보이거나어디 코드인지 찾기 어려움브레이크포인트 유지 불가 📌 3-3. window.open + redirect 환경 영향서버 렌더링 과정에서 redirect 발생 가능캐시가 없는 상태이 경우 DevTools는:원본 리소스를 정확히 추적하지 못함파..

📌 자바스크립트 모듈 패턴을 활용한 안전한 데이터 관리 전략✅ 1. 개요: 전역 변수 선언의 구조적 취약점자바스크립트에서 var 키워드를 사용해 파일 최상단에 변수를 선언하는 방식(Global Scope)은 데이터 노출과 오염에 매우 취약하다. 조회용 데이터라 할지라도 브라우저 콘솔을 통해 누구나 접근하고 수정할 수 있다면, 런타임 환경에서 데이터 무결성을 보장할 수 없다. 본 글에서는 즉시 실행 함수(IIFE)와 클로저(Closure)를 활용하여 데이터를 캡슐화하는 모듈 패턴에 대해 기술한다.✅ 2. 개념 및 패턴 기본 구조✅ 2-1. 개념즉시 실행 함수(IIFE): 함수 정의와 동시에 실행되는 패턴으로, 내부 변수가 전역 스코프에 침범하는 것을 방지한다.클로저(Closure): 함수가 선언될 당시의..

📌 1.type="file" HTML에서 요소는 사용자가 로컬 컴퓨터에서 파일을 선택해 서버로 업로드할 수 있게 하는 입력 필드다.file 입력 필드에 들어가는 데이터는 FileList 객체로 input[type="file"].files를 호출하면 FileList 객체가 반환된다. ✅ 동작 원리1️⃣ html의 기본 요소 중 하나인 file 요소는 클릭 시 로컬 파일 탐색기 창을 열고, 2️⃣ 파일을 선택하면, 요소의 값이 파일 객체로 채워진다.3️⃣ 폼 제출 시, 파일이 multipart/form-data 형식으로 서버에 전송된다. ⚠️ 주의: 태그의 enctype이 반드시 multipart/form-data로 지정되어야 파일이 전송된다. 📌 2. DataTransfer을 이용한 커스텀커스텀하..

0. 라이브러리 선택 기준기존 다른 editor 라이브러리를 사용하고 있었는데 불필요한 기능들이 많고 모바일뷰에서 적합하지 않아서 새로운 무료 라이브러리를 찾아보았다. 내 선택 조건은 아래와 같았다.무료 라이센스모바일 최적화JSP 환경많은 기능 필요x에디터에 사진 넣을 수 있어야함. 대부분 에디터 라이브러리가 react, vue 기준이거나 pc 기준인 것이 많았는데내 조건에 맞는 라이브러리로 summernote를 찾았다. 1. 사용방법1-1. 라이브러리 다운로드 및 적용다운로드 링크https://summernote.org/ 적용 위치/resources/js/plugins/summernote 1-2. Script, link 태그로 불러오기 1-3. Html 작성form 없이 썸머노트를 사용하려면 div에 ..

📌 자바스크립트에서 모듈이란?모듈은 하나의 파일 안에 기능을 캡슐화하고, 필요한 부분만 외부로 내보내 다른 코드에서 재사용할 수 있게 해주는 코드 단위이다.-> 즉, 하나의 js 파일에서 다른 js파일 함수/객체를 이용하는 방법!! 📌 1. 를 사용하면 된다. 스크립트 파일 전체를 로드해서 전역에 추가하는 방식. -> 전역 변수 충돌 위험, 로드 순서가 중요한 단점이 있다!! ✔️ common.js 파일이 로드되며, 전역 스코프(window)에서 사용 가능. 📌 2. window 객체 활용브라우저의 전역 객체인 window에 등록하는 방법.특정 함수/객체만 전역에 노출 -> 하지만 여전히 충돌위험/로드 순서 중요. 📖 math.js (모듈 파일을 전역 변수로 등록)function add(a, ..

📌 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(..