code를 헤엄치는 인어공쭈

JavaScript - 자바스크립트 메모리 관리와 객체 참조 모델

자바스크립트는 동적 언어이기 때문에 변수의 할당과 해제가 자동으로 이루어진다. 이는 자바스크립트 엔진이 메모리를 관리하는 방식에 의해 가능해진다. 그렇다면, 자바스크립트는 어떻게 메모리를 관리하고, 불필요해진 메모리를 회수하는지에 대해 살펴보자. 1. 자바스크립트 메모리 관리의 기본 개념자바스크립트의 메모리 관리는 크게 두 가지 과정으로 나눌 수 있다:메모리 할당: 프로그램이 데이터를 생성하거나 객체를 생성할 때 메모리를 할당받는 과정이다.메모리 회수: 더 이상 필요하지 않은 메모리를 자동으로 회수하는 과정이다. 이를 **가비지 컬렉션(Garbage Collection)**이라고 한다.프로그래머가 직접 메모리 해제를 명시적으로 처리하는 언어(C, C++ 등)와 달리, 자바스크립트는 자동으로 메모리 관리를..

JavaScript - 자바스크립트의 싱글 쓰레드와 이벤트 루프

이벤트 루프1) 비동기 작업과 호출 스케줄링 자바스크립트는 싱글 쓰레드 환경에서 동작하는 언어이다. 즉, 한 번에 하나의 작업만 처리할 수 있다. 하지만 브라우저 환경이나 Node.js에서 비동기 작업(예: 파일 읽기, 네트워크 요청)을 처리해야 할 때, 자바스크립트는 이벤트 루프(Event Loop)를 이용해 동시성(Concurrency)을 지원한다.이벤트 루프는 자바스크립트의 비동기 처리에서 핵심 역할을 하는 메커니즘으로, 자바스크립트가 멈추지 않고 여러 작업을 처리할 수 있도록 도와준다. 콜스택(Call Stack), 태스크 큐(Task Queue), 그리고 이벤트 루프가 함께 협력하여 이러한 비동기 작업들을 효율적으로 처리한다.흐름을 간단하게 살펴보자면:싱글 쓰레드로 동작하는 자바스크립트는 하나의..

과제를 하던중 .bind(this)를 사용하게 되었는데 곰곰히 생각해보니깐 정확한 뜻을 알고 쓴게 아니라 습관적으로 해당 함수를 참조한다 라고만 생각하고 썻던거 같다. 그래서 이번에 디테일하게 개념부터 알아보려고 한다. JavaScript에서 this 키워드는 함수를 호출 할때 결정된다. 함수를 어떤 방식으로 호출하는지에 따라 값이 달라진다는 것이다.  1. 전역 문맥 (Global Context)전역 문맥에서 this는 전역 객체를 참조합니다:브라우저 환경에서는 전역 객체가 window입니다.Node.js 환경에서는 전역 객체가 global입니다.console.log(this); // 브라우저에서는 window 객체를 출력  2. 함수 문맥 (Function Context)기본 함수에서 this는 호출..

전체적인 흐름으로 우선적으로 살펴보겠다. 먼저 웹브라우저를 들어가기 => url 호스트 ip주소를 DNS 한테 물어본다=> 주소를 다시 웹브라우저 한테 전달 => 3 way handshake => 웹브라우저는 받아서 다시 서버한테 전달 => 서버에게 데이터 요청 (http request) => 데이터 전송 (http respones) => 사용자에게 데이터 출력 => 데이터 파싱 (html먼저 파싱 돔트리 생성, 생성중 스타일 태그를 만나면 잠시 중단하고 스타일 태그 파싱 cssom 트리 생성, 이후 마치면 html 를 마저 실행하다가 스크립트를 만나면 자바스크립트 엔진을 실행한다 (AST) => 돔트리와 cssom 트리를 합쳐서 랜더트리를 생성. => 여기까지 과정을 construction 이후 화면에..

자바스크립트는 싱글스레드 언어이다 즉 몸통이 하나이기 때문에 한번에 한개 밖에 하지 못하고 그게 끝나고 다음 동작을할수 있다는것이다.따라서 여러개의 작업을 하는데 문제가 있어서 우린 비동기를 쓰는것이다.비동기가 병렬적이라고 해서 자바스크립트가 병렬적으로 작업을 하는게 아니라 큐에 쌓아두고 끝나면 기다렸다가 실행을 하는 것이다. 자바스크립트는 언어이기 때문에 동작을 하려면 실행 시켜줄 엔진이 필요하다. 대표적인 엔진으로는 V8엔진(Chrome, Node.js에서 사용)이 있으며, 이외에도 각 브라우저 별로 여러가지 엔진들이 존재한다. 자바스크립트 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있습니다.함수를 실행하면 아래와 같은 Call Stack이 차례대로 생기게 된다. 비동기같은 ..

메타 태그에서 og:description과 description은 각각 Open Graph 프로토콜과 일반적인 웹 페이지 메타 데이터에 사용되는 태그들이다. 예시를 통해서 한번 알아보자 이거 제대로 작성안해서 네이버 검색엔진에서 빠꾸당한 기억이... og:description 만 적고 아 설명 적었지 하면서 name: description은 안적은 것이다. 그래도 바로 체크해서 반영했다. (바보같았던 그날...) 1) og:description (Open Graph Protocol) 목적: 주로 소셜 미디어 플랫폼에서 공유될 때 사용되는 메타 데이터를 정의한다. 활용: 페이스북, 트위터 등 소셜 미디어에서 링크를 공유할 때 미리보기에 표시되는 설명을 제공. 예시 2) description (일반적인 메타..

* 원시값이란? 불변한값 원시값의 종류 1. 문자열(string) 2. 숫자(number) 3. 불리언(Boolean) 4. null과 undefined *객체(Object) 객체는 프로퍼티(속성)를 포함하며, 프로퍼티는 값을 가지거나 다른 객체를 참조 let person = { name: "John", age: 30, city: "New York" }; *깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy) 1. 깊은 복사(Deep Copy) 원본 객체와 복사본이 완전히 독립적으로 되도록 하는 방법 // 깊은 복사 예제 let originalObject = { name: "John", address: { city: "New York" } }; let deepCopyObject = JSON..

이번글에서 저번에 다뤘던거와 비슷하지만 조금더 응용해서 테스트 코드를 작성해보자. 좀 더 복잡한 코드에선 아래에 코드로 적용해보는것이 좋을거 같다. 1. 모의 (Mocks) 모의는 외부 의존성에 대한 가짜 객체로, 함수 호출 및 동작을 추적하고 기대 대로 모의 객체를 조작할 수 있다. // 사용자 서비스 예시 class UserService { async getUser(id) { // 실제 사용자 데이터베이스에서 사용자를 가져오는 코드 } } // UserService 모의 객체 생성 const mockUserService = { getUser: jest.fn(), }; 2. 스텁 (Stubs) 스텁은 함수의 동작을 가짜로 대체하여 특정 동작을 흉내내도록 하는데 사용된다. // 네트워크 요청 모듈 예시 ..

Jest는 Facebook에서 개발한 JavaScript 테스트 프레임워크로, JavaScript 애플리케이션의 품질을 유지하고 개선하는 데 도움이 된다. 자 이제 한번 사용방법을 알아보자. 1. Jest 설치npm install --save-dev jest 2. 테스트 파일 생성Jest 테스트 파일은 일반적으로 .test.js 또는 .spec.js 확장자를 사용// example.test.jstest('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3);}); 3. 테스트 실행npx jest 4. 테스트 작성test('2와 2는 같아야 합니다', () => { expect(2).toBe(2);});test('3과 5는 같지 않아야 합니다', () => {..

그리드 작업하면서 넓이를 각각 조절해야되는게 너무 귀찮았다 이런식으로 컬럼에 각각 넓이를 지정해줘야 텍스트가 잘리지않았다. 그래서 자동으로 넓이를 맞춰주는 방법이 없을까 찾아봤다. 생각보다 여러가지 방법이 존재하네? 1. autoFitColumn 를 사용하기 $("#grid").kendoGrid({ // 그리드 설정 columns: [ { field: "name", title: "Name" }, { field: "age", title: "Age" }, { field: "address", title: "Address" } ], dataSource: { // 데이터 소스 설정 }, dataBound: function() { this.autoFitColumn(0); // 첫번째 열에 대해 자동 넓이 맞춤 } ..