본문 바로가기

JavaScript

 (60)
Memory Leak 메모리 누수(Memory Leak) 메모리 누수(Memory Leak)란 더 이상 필요하지 않은 데이터가 메모리에서 해제되지 못하고 메모리를 계속 차지되는 현상입니다. [메모리 누수가 발생하는 상황] *잘못된 코드 작성 습관은 메모리 누수로 연결됩니다. 불필요한 전역 변수 사용 window.ex = "hello world"; window.rati = { name: "rati", age: 5 }; 불필요한 전역 변수 사용의 예로 전역 객체 window에 선언을 한 경우 브라우저에 항상 존재해야 하기 때문에 데이터가 더 이상 필요하지 않음에도 불구하고 해제되지 못하고 메모리 누수를 발생시킵니다. 분리된 노드 참조 // html Remve! 1 2 // js const btn = document.querySe..
Garbage Collection 가비지 컬렉션(Garbage Collection) 가비지 컬렉션(Garbage Collection)이란 자바스크립트의 메모리 관리 방법으로 자바스크립트 엔진이 자동으로 데이터가 할당된 메모리에서 더 이상 사용되지 않는 데이터를 해제하는 것을 말합니다. 쉽게 말해 가비지 컬렉션이 메모리 공간을 순회하면서 불필요한 메모리, 즉 더 이상 사용하지 않는 참조값, 원시값 등을 발견하면 그때그때 제거하는 것입니다. *가비지 컬렉션은 개발자가 직접 강제 실행하거나 관리할 수 없습니다. const a = { x: 1 }; const b = a; b.x = 2; console.log(a); console.log(b); 간단한 예시를 살펴보면 상수 a, b는 같은 참조값을 할당받았으며 중간에 객체의 x 속성의 값을 1에서..
lodash를 활용한 깊은 복사 const a = { x: { y: 1 } }; const b = { ...a }; // 얉은 복사 b.x.y = 2; console.log(a.x.y); // 2출력 전개 연산자의 경우 얕은 복사에 해당하기 때문에 1차원의 참조형 데이터만 복사합니다. 상수 a는 메모리 공간의 주소(1)를 할당받았으며 해당 메모리 공간의 주소 내부에는 객체 {y : 1}이 저장된 메모리 공간의 주소(2)를 할당받아 참조하고 있습니다. 이때 상수 b는 메모리 공간 주소(1)에 저장된 값만 새로운 메모리 공간 주소(3)에 저장한 것이며 새로운 메모리 공간 주소(3)에서는 여전히 {y : 1}이 저장된 메모리 공간의 주소(2)를 참조하고 있습니다. 때문에 상수 b가 값을 변경할 때 상수 a가 영향을 받지 않기 위해서는 모든 ..
원시값과 참조값 [22.12.23 수정] JavaScript에는 자료형 또는 값에 두가지 카테고리가 있습니다. 즉, 불리언, 문자열, 숫자, 객체 등은 원시값과 참조값으로 2개의 카테고리로 나눌 수 있습니다. JavaScript의 타입과 자료구조 - JavaScript | MDN 모든 프로그래밍 언어에는 내장된 자료구조가 존재하지만 보통 그 내용은 언어마다 다릅니다. 이 글에서는 JavaScript에서 사용할 수 있는 내장 자료구조와 그 속성에 대해 알아보겠습니다. 그러 developer.mozilla.org 원시값 데이터의 6가지 타입은 원시값에 속합니다. (문자열, 숫자, boolean, null, undefined, symbol) 우리가 만드는 모든 숫자는 변수로 저장되어 계산에 사용됩니다. 이는 JavaScrip..
Symbol, BigInt Symbol 심볼(Symbol)이란 변경이 불가능한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용할 수 있습니다. Symbol('설명') 심볼은 Symbol 함수에 어떠한 설명을 추가해서 데이터를 만들어낼 수 있으며, 이때 사용되는 설명은 심볼 값과는 관계없는 단순 디버깅을 위한 용도로 사용됩니다. const sKey = Symbol("hello"); const user = { key: "일반 정보!", [sKey]: "민감한 정보!", }; console.log(user.key); // 일반 정보! 출력 console.log(user["key"]); // 일반 정보! 출력 console.log(user[sKey]); // 민감한 정보! 출력 console.log(user[Symbol(..
History 히스토리란 페이지 이동 정보를 브라우저가 기록한 것으로 객체 형식으로 저장됩니다. 히스토리 객체의 속성과 정보를 관리하는 메서드는 아래와 같습니다. 속성 length : 등록된 히스토리의 개수의 정보를 담고 있습니다.(페이지를 몇 번에 거쳐 이동한 지에 대한 정보) scrollRestoration : 앞이나 뒤로 이동할 때 스크롤 위치의 복원 여부 정보를 담고 있으며 지정이 가능합니다. state : 현재 히스토리에 등록된 데이터(state)의 정보를 담고 있습니다. 메서드 back : 히스토리 뒤로 가기 forward : 히스토리 앞으로 가기 go : 현재 페이지 기준 인수로 전달받는 특정 히스토리 위치로 이동 (뒤로 두 번 이동을 예로 들면 -2 인수로 전달) pushState : 첫 번째 인자로 상..
Location Location 객체는 현재 페이지의 주소 정보를 가지고 있어 페이지 관리를 위해 꼭 필요한 객체입니다. Location 객체는 주소 반환뿐만 아니라 페이지를 제어할 수 있는 몇 가지 메서드들이 있습니다., Location 속성 href : html의 a 태그에서 설정하는 href 속성과 동일한 속성으로 현재 페이지에 대한 전체 URL 주소(domain, port, path, 쿼리스트링 등)를 가지고 있습니다. protocol : http, https의 프로토콜 정보를 가지고 있습니다. hostname : 도메인의 정보를 가지고 있습니다. pathname : 도메인 이후의 하위 경로의 정보(쿼리스트링 제외)를 가지고 있습니다. host : 포트번호를 포함한 도메인 정보를 가지고 있습니다. port : 포..
Cookie, Storage Cookie Cookie는 도메인 단위로 저장되며, 사이트마다 다르지만 표준안 기준 사이트당 최대 20개 및 4KB까지 데이터 저장이 제한되고 영구적으로 브라우저에 저장하는 것이 불가능합니다. 개발자 도구 -> 애플리케이션 -> 쿠키 -> 사용 포트에서 쿠키를 확인이 가능합니다. document의 쿠키 속성에 "a=1"이라는 문자를 할당하고 쿠키를 확인하면 a라는 이름을 가지고 있고 1의 값을 가진 쿠키를 확인할 수 있습니다. *추가적으로 "a=3" 할당 시 a라는 이름의 쿠키의 값은 3으로 바뀌게 됩니다. 추가적으로 "b=2"를 할당하게 되면 쿠키가 누적되는 것을 확인할 수 있습니다. 쿠키의 경우 값을 지정할 때 아래와 같은 옵션을 사용할 수 있습니다. domain : 쿠기가 저장되는 도메인을 설정할 ..

티스토리툴바