반응형 WebDev/JS-TS17 JS(자바스크립트)의 콜스택, 태스크큐, 이벤트루프에 대해 알아보자 싱글스레드인 자바스크립트에서는 어떤 식으로 비동기 처리를 하게 될까?정답은 콜스택, 태스크큐, 이벤트루프 이 공간안에서 해결한다. 오늘은 각 개념과 흐름을 보면서 이해해보도록 하자!콜 스택 (Call Stack)콜 스택은 자바스크립트가 현재 실행 중인 함수를 추적하는 자료구조자바스크립트는 단일 스레드에서 동작하기 때문에 한 번에 하나의 코드만 실행할 수 있음콜 스택은 LIFO(Last In, First Out)(후입선출) 구조를 따른다함수 호출: 함수가 호출되면 콜 스택에 푸쉬(push)함수 종료: 함수 실행이 끝나면 콜 스택에서 팝(pop)태스크 큐 (Task Queue)태스크 큐는 비동기 코드(예: setTimeout, webAPI 등)가 완료되었을 때 실행할 콜백 함수들이 대기하는 장소태스크 큐는 .. 2024. 7. 15. JS(자바스크립트의) 메모리 누수에 관해 알아보자 많은 경우에 코드를 작성하다 보면 메모리 누수가 발생하게 된다.우리는 성능 좋은 쩌는 웹앱을 만들것이기 때문에 이런거는 생각하고 코드를 적어야 한다.!그러므로 메모리 누수에 대해 알아보자!메모리 누수더 이상 필요하지 않은 데이터가 해제되지 못하고 메모리를 계속 차지하게 되는 현상 큰 예시들로 4가지가 있는데 코드와 함께 살펴보자 불필요한 전역 변수 사용var globalVar = "global"; // 불필요한 전역 변수function doSomething() { console.log(globalVar);}doSomething();function doSomething() { let localVar = "local"; // 필요한 범위 내에서만 변수를 선언 console.log(local.. 2024. 7. 14. JS(자바스크립트)의 클로저에 대해 알아보자 클로저는 자바스크립트에서 알아야하는 중요한 개념이므로 정리해두고자 한다.함수와 그 함수가 선언된 렉시컬 환경을 함께 기억하는 함수로써,함수가 선언된 위치에서의 스코프(유효 범위)를 기억, 함수가 호출될 때 그 스코프에 접근할 수 있게 해준다.이제 조금 더 자세하게 들어가보자!클로저의 정의클로저는 함수가 선언될 때의 렉시컬 스코프를 기억하고,그 함수가 호출될 때 해당 스코프의 변수를 참조할 수 있는 개념클로저는 보통 내부 함수가 외부 함수의 변수를 참조하는 경우에 형성된다.예시코드function outerFunction() { let outerVariable = "outside!"; function innerFunction() { console.log(outerVariable.. 2024. 7. 13. JS(자바스크립트)의 불변성과 가변성, 얕은 복사와 깊은 복사 알아보기 자바스크립트는 다양한 데이터 타입을 제공하며,이 데이터 타입들은 불변성과 가변성의 특성을 가진다이러한 특성은 데이터의 복사 및 조작 시 중요한 개념으로 작용하는데,자바스크립트의 불변성과 가변성, 그리고 얕은 복사와 깊은 복사에 대해 알아보자!불변성불변성은 생성된 데이터가 메모리에서 변경되지 않는 특성자바스크립트에서 원시형 데이터는 불변성을 가짐숫자(Number)문자열(String)불리언(Boolean):null:undefined: 심볼(Symbol): 이러한 데이터 타입은 한 번 생성되면 변경할 수 없음예를 들어, 문자열을 조작하는 메서드는 새로운 문자열을 반환하며, 원래 문자열은 변경되지 않는다!가변성가변성은 생성된 데이터가 메모리에서 변경될 수 있는 특성자바스크립트에서 참조형 데이터는 가변성을 가짐객.. 2024. 7. 12. JS(자바스크립트)의 히스토리에 대해 알아보자! 브라우저 히스토리브라우저 히스토리 API는 웹 애플리케이션이 사용자의 세션 기록을 제어하고 조작할 수 있도록 해주는 도구 SPA에서의 네비게이션을 구현하거나, 사용자 경험을 향상시킬 수 있다!이번 포스팅에서는 히스토리 API의 주요 메서드와 속성들을 알아 보자히스토리 API의 주요 속성 및 메서드속성length: 현재 세션 기록에 있는 히스토리의 개수를 반환scrollRestoration: 히스토리 탐색 시 스크롤 위치를 복원할지 여부를 설정 'auto'와 'manual' state: 현재 히스토리에 등록된 데이터(상태)를 반환메서드back(): 히스토리에서 뒤로 이동(이전 페이지로 이동).forward(): 히스토리에서 앞으로 이동(다음 페이지로 이동).go(위치): 현재 페이지를 기준으로 특정 히스.. 2024. 7. 11. JS(자바스크립트)의 로케이션에 대해 알아보자 헷갈리던 로케이션 알아보려고 자세하게까지는 아니지만 간단하게라도 알아보려고 블로깅중! Location개념은 현재 페이지 정보를 변환하거나 제어하는 용도 예시 주소 http://localhost:1234/abc .href전체 URL주소 (http://localhost:1234/) origin 프로토콜, 호스트네임, 포트번호를 포함한 원본 URL을 반환 http://localhost:1234.protocol프로토콜 (http).hostname도메인 이름 (localhost).port포트번호 (1234).pathname도메인 이후 경로 (/abc).host포트 번호를 포함한 도메인 이름 (localhost:1234).hash해시 정보(페이지의 ID) ex) #idName.search쿼리 스트링(질의 문자열).. 2024. 7. 10. 이전 1 2 3 다음 반응형