JavaScript와 같은 언어에서는 프로그래밍을 하면서 종종 중요한 개념들인 TDZ(Temporal Dead Zone)와 가비지 컬렉터(Garbage Collector)가 등장합니다. 이 두 가지는 각각 다른 목적을 가지고 있지만, 메모리 관리와 관련된 공통적인 특성을 공유하기 때문에 이 둘에 대해 잘 이해하는 것이 중요합니다. 이번 블로그 포스팅에서는 TDZ와 가비지 컬렉터가 무엇인지, 그 각각의 개념을 상세히 설명하고, 이들 간의 관계를 이해하는 데 도움을 줄 수 있도록 자세히 다뤄보겠습니다.1. TDZ(Temporal Dead Zone):1.1. TDZ의 정의TDZ(Temporal Dead Zone)는 JavaScript에서 변수의 선언과 초기화 사이의 구간을 의미합니다. let, const, c..
브라우저에서 페이지를 렌더링하는 방식렌더러 프로세스(Renderer Process)렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다.렌더러 프로세스 안에서는 메인 스레드가 우리가 구현한 대부분의 코드를 처리하게 된다.웹 페이지를 효율적이고 부드럽게 렌더링하기 위해 별도의 컴포지터 스레드와 레스터 스레드가 렌더러 프로세스에서 실행된다.렌더러 프로세스의 핵심 역할은 HTML, CSS, JS를 사용자가 인터렉션 할 수 있는 웹페이지로 만드는 것이다.스레드 종류메인 스레드 (Main Thread) : 웹 페이지를 실행하는 기본적인 스레드. 모든 UI 업데이트와 사용자 입력 처리, DOM 변경, JS 실행 등 기본 작업 실행 한다.워커 스레드 (Web Workers) : 메인 스레드와는 별개로 ..
실행 컨텍스트란?실행 컨텍스트는 자바스크립트 코드가 평가되고 실행되는 환경을 의미한다.자바스크립트 엔진은 코드 실행에 필요한 모든 정보를 실행 컨텍스트에 저장한다. 이는 변수, 함수, 선언, this의 값 등을 포함한다. 왜냐하면 실행 컨텍스트는 코드가 실행될 때 필요한 환경 정보를 제공하며, 이는 코드의 실행 흐름을 관리하는데 필수적이기 때문이다. 실행 컨텍스트는 전역 실행 컨텍스트와 함수 실행 컨텍스트로 구분된다. 전역 실행 컨텍스트는 코드가 실행되기 시작할 때 생성되며, 함수 실행 컨텍스트는 함수가 호출될 때 마다 생성된다. 이는 자바스크립트의 스코프와 호이스팅 개념을 이해하는 데 중요한 기반이 된다. 실행 컨텍스트는 콜 스택에 쌓이게 되며, 자바스크립트 엔진은 콜 스택의 최상단에 있는 실행 컨텍스..
Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다. 즉, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진 것이다. Ajax는 전통적인 방식과 비교했을 때 다음과 같은 장점이 있다. 1...
객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다.동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려졈 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.const circle = { // 프로퍼티 : 객체 고유의 상태 데이터 radius: 5, // 메서드 : 상태 데이터를 참조하고 조작하는 동작 getDiameter(){ // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메..
고차 함수는 함수를 인수로 전달 받거나 함수를 반환하는 함수를 말한다.자바스크립트의 함수는 일급 객체 이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다. 고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 하여 가독성을 해치고, 변수는 언제든지 변경 가능하여 오류 발생의 근본적 원인이 될 수 있기 때문에 결국 순수 함수를 통해 부수 효과를 최대한 억제하는 것이 중요하다. Array.prototype.sortsort 메서드는 배열의 요소를 정렬한다. 원..
해결과제1. 같은 선박의 항해 기록은 하나로 합치고, 총 운항 거리와 사용된 연료량을 누적한다.2. 각 선박의 연료 효율(km/L)을 계산한다. (distance/fuelUsed) => 소수점 2자리 각 객체의 새로운 key 값 efficiency를 추가하여 효율 값을 지정 한다.3. 선박들을 연료 효율(km/L) 기준으로 내림차순 정렬한다.4. 최종 결과를 반환한다. : {ships : [정리된 선박 배열], totalFuelUsed : 최종 연료 사용} 기본코드function analyzeShipFuelUsage(voyageRecords) { }const voyageRecords = [ { shipId: 1, shipName: "POSSM", distance: 1000, fuelUse: 200 }..
쇼핑몰에서 상품을 해당 조건으로 필터링 해서 상품 정렬하는 코드입니다. 상품 필터: 전체 가격순 이름순 const products = [ { id: 1, name: '상품 1', price: 10000 }, { id: 2, name: '상품 2', price: 20000 }, { id: 3, name: '상품 3', price: 30000 } ]; // 상품 목록을 표시하는 함수 function displayProductList() { const productListDiv = document.getElementById('product-list'); productListDiv.innerHTML = ''; // 상품 목록을 초기화합니다. products.forEach(product => { const pro..
쇼핑몰 페이지를 만들 때 자바스크립트로 상품 목록을 가져오는 코드입니다. // 서버에서 상품 목록을 가져와서 웹 페이지에 동적으로 표시하는 함수 function displayProductList() { // AJAX 요청을 보내고 상품 목록을 가져옵니다. // 실제로는 서버의 API 엔드포인트에 요청을 보내야 합니다. // 여기서는 가상의 데이터를 사용합니다. const products = [ { id: 1, name: '상품 1', price: 10000 }, { id: 2, name: '상품 2', price: 20000 }, { id: 3, name: '상품 3', price: 30000 } ]; const productListDiv = document.getElementById('product-l..
회원가입을 할 때 패스워드 유효성 체크 하는 기능을 구현해 보았다. 레이아웃은 'Bulma'(https://bulma.io/documentation/form/general/)에서 가져오고 유효성 체크 기능은 자바스크립트를 활용했다. input 태그의 id 값과 label 태그의 for 속성을 일치시켜 준다. 더보기 이름 닉네임 사용 가능한 닉네임 입니다. 비밀번호 비밀번호 확인 이메일 성별 여 남 회원 가입 약관 동의합니다. Yes No 가입하기 뒤로가기 더보기 /* join */ #wrap{width:800px; margin:0 auto; padding-top: 50px;} 회원가입 시 비밀번호 유효성 검사하기 1. HTML 문서에서 필요한 요소들을 querySelector를 사용하여 선택 제출 버튼(..
