개발/Javascript6 [Javascript] 자바스크립트의 메모리관리 [Javascript] 자바스크립트의 메모리 관리 자바스크립트의 메모리 관리 c언어와 같은 저급 언어에서는 메모리를 관리하기 위해 개발자가 직접 메모리에 접근한다. (malloc(), free()와 같은 함수) 반면에 자바스크립트는 객체가 생성되면 자동으로 메모리를 할당해주고, 필요가 없다면 가비지 컬렉션(garbage collection)이 자동으로 메모리를 해제한다. 대부분의 고급 언어에서는 가비지 컬렉터가 존재하고 메모리를 관리해준다. 자동 메모리 관리가 존재하면, 개발자가 메모리 관리에 신경을 쓰지 않게 되고, 이 영역에 대한 이해가 부족할 수 있는 문제가 생긴다. 나도 메모리 관리 영역에 대해선 잘 알지 못하기 때문에 이번 포스팅을 쓴다. 메모리의 생존 주기 어떤 언어를 사용하던 메모리 생명주기.. 2022. 10. 17. 22:46 [JavaScript] Event Loop(이벤트 루프) Event Loop(이벤트 루프) 자바스크립트는 단일 스레드 기반의 인터프리터 언어이다. 스레드가 하나라는 말은 하나의 작업을 처리하면 다른 작업은 하지 못한다. 하지만 자바스크립트는 동시에 여러 작업이나 이벤트를 보여줄 수 있다. 어떻게 단일 스레드 기반에서 동시에 요청과 이벤트들을 처리하는 것일까? 자바스크립트에서는 이벤트 루프(Event Loop)라는 개념을 사용해 여러 이벤트들을 처리할 수 있다. 이 이벤트 루프(Event Loop)는 비 동기 방식을 지원해 동시에 처리할 수 있다. 비동기(Asynchronous , 동시에 일어나지 않는) 비 동기는 요청과 결과가 동시에 일어나지 않을 거라는 약속이다. 보통은 요청이 온 뒤 결과가 나타나는 방식인데 비 동기방식은 요청을 보낸 후 결과가 오는지 안오.. 2022. 10. 7. 22:34 [JavaScript] 호이스팅(Hoisting) 호이스팅(Hoisting) 호이스팅(Hoisting)은 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당하는 것이다. var로 선언한 변수는 undefined let과 const는 호이스팅시 변수를 초기화 하지않는다. 간단히 요약하자면 호이스팅은 변수의 선언 / 초기화를 분리하고 선언을 코드의 최상단으로 옮기는 것이다. 변수의 선언단계 호이스팅의 예제를 보기전 변수의 선언 단계를 먼저보자 1. 선언 단계(Declearation phase) 선언단계에서는 변수를 실행 컨텍스트 변수 객체에 등록한다.이 변수 객체는 스코프가 참조하는 대상이된다. 2. 초기화 단계(Initalization phase) 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보하고 변수를 undefined로 초기화한다. 3.. 2022. 10. 6. 14:21 [JavaScript] 클로저(Closure) 클로저(Closure) 클로저는 함수내에서 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하기 위해선 우선 자바스크립트의 변수의 유효 범위의 지정을 먼저 이해해야 한다. 어휘적 범위 지정(Lexical scoping) 어휘적 범위 지정은 변수가 어디에서 사용 가능한지 알기 위해서 그 변수가 소스 코드 내에 어디에 선언되었는지 고려하는 것을 의미한다. function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); } init(); ini.. 2022. 10. 6. 00:20 WebStorage API WebStorage API Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공함. WebStorage 개념 Web Storage의 두가지 방식은 다음과 같다. sessionStorage 페이지 세션이 유지되는 동안, 브라우저가 열려있는 동안 제공됨. - 세션에 한정해, 브라우저 또는 탭이 닫힐 때까지만 데이터 저장 - 데이터를 서버로 전송하지 않음 - 저장 공간이 쿠키 보다 크다 (최대 5MB) LocalStorage 로컬스토리지는 브라우저를 닫았다 열어도 데이터가 남아있다. - 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬저장 데이터를 지워야만 사라짐 - 저장 공간이 셋 중 제일 크다. - 동일한 컴퓨.. 2022. 9. 30. 10:28 Babel과 polyfill Babel 바벨은 자바스크립트 컴파일러이다 . ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는데 주로 사용되는 도구 체인이다. 아래는 바벨이 할 수 있는 주요 기능이다. - 변환 구문 - 대상 환경에서 누락된 폴리필 기능(core-js와 같은 폴리필을 통해) - 소스 코드 변환(codemods) // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); JSX 에서의 Babel 다음과 같은 커맨드 명령어로 설치 할 수 있다. npm install --save-dev @babel/.. 2022. 9. 29. 16:05 이전 1 다음 728x90
