웹 브라우저의 자원 로딩 순서 (HTML, CSS, JavaScript) 웹 브라우저가 사용자에게 웹 페이지를 보여주기까지 HTML, CSS, JavaScript와 같은 자원(Resource)들을 정해진 순서와 규칙에 따라 불러오고 처리합니다. 이 과정을 이해하는 것은 웹 페이지의 성능 최적화에 매우 중요합니다. 기본 로딩 및 렌더링 순서 📜 브라우저는 HTML 문서를 위에서 아래로 한 줄씩 순차적으로 읽고(파싱, Parsing) 처리합니다. 이 과정에서 각 태그가 무엇을 의미하는지 해석하며 DOM(Document Object Model) 트리를 만들어나갑니다. HTML 파싱: 브라우저가 서버로부터 HTML 파일을 받아 한 ..

자바스크립트 호이스팅 (JavaScript Hoisting) hoisting 개요 📜 호이스팅(Hoisting)은 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올리는 것처럼 동작하는 방식을 의미합니다. 이로 인해 선언하기 전에 변수나 함수를 참조해도 에러가 발생하지 않을 수 있습니다. ⚠️ **주의:** 실제로 코드가 물리적으로 이동하는 것은 아닙니다. 자바스크립트 엔진이 코드를 파싱할 때 선언부를 먼저 메모리에 저장하기 때문에 이런 현상이 발생합니다. var 변수 호이스팅 var로 선언된 변수는 호이스팅될 때 undefined로 초기화됩니다. 따라서 선언 전에 변수..

deep copy 1. JSON var cp = JSON.parse( JSON.stringify( arr )); shallow copy 1. Object.assign var cp = Object.assign({}, arr ); var cp = Object.assign([], arr ); 2. Spread var cp = {...arr }

/** * PRINT * target : [{ id : '', type : ''}] * title */ function print(target, title){ let pageContent = '' ; // CONTENT 생성 target.forEach( function ( obj , index) { let targetId = obj.id; pageContent += $('#' + targetId).html(); }); // 팝업 let newWindow = window.open('', '', 'width=1024, height=600'), document = newWindow.document.open(), pageContent = '\n' + '\n' + '\n' + ' '+ ' ' + title + '..

/** * 두배열 합치기 * [{A : 1}] + [{B : 1}] = [{A : 1, B : 1}] */ function assignArrObj (a, b){ if(a.length > b.length){ a.forEach(function(v, i){ b.forEach(function(v2, i2){ if(i == i2) Object.assign(v, v2) }); }); }else{ b.forEach(function(v, i){ a.forEach(function(v2, i2){ if(i == i2) Object.assign(v, v2) }); }); } return a.length > b.length ? a : b; } /* * 배열 merge n차원 평탄화 * [ [{a : 1 }], [{a : 2 ..

/** * 소수점 버리기 * 문자열 소수점 * data : 데이터 * digit : 소수점 자릿수 */ function toFixed(data, digit){ if(fc_isNull(data)) return data; if(digit > 0){ // 소수점 if(typeof data === 'string'){ data = Number(data); } data = data.toFixed(digit); }else{ // 소수점 제거 if(!Number.isInteger(data)){ // 정수가 아니면 if(typeof data != 'string'){ data = data.toString(); } data = data.split('.')[0]; } } return data; }