가비지 컬렉션 정리

가비지 컬렉션(Garbage Collection, GC)이란, 자바스크립트 엔진이 메모리를 자동으로 관리하는 시스템으로, 프로그램이 더 이상 사용하지 않는 객체를 메모리에서 해제하는 것을 의미합니다.GC가 메모리를 해제하는 시점은 명확히 프로그래머가 제어할 수는 없지만, 참조(references)를 기준으로 동작합니다GC가 메모리를 해제하는 조건GC는 특정 객체가 도달 불가능(garbage)하다고 판단될 때 해당 객체를 메모리에서 제거루트에서 도달할 수 없는 객체는 가비지로 간주되어 메모리 해제 대상이 됩니다.let obj = { key: "value" };obj = null; // obj가 더 이상 참조되지 않음 → 가비지로 간주됨위를 정리하면 다음과 같다.obj는 변수로, 객체({ key: "valu..

• format_list_bulleted Front End/Javascript
• · 2024. 11. 21.
• textsms

[JS] Element 함수 matches()를 이용한 이벤트 추가

❗matches 함수의 기본적인 사용방법 matches 함수는 Element의 내장 메서드입니다. CSS 선택 문자열로 요소의 일치 여부를 판단할 수 있습니다. const element = document.getElementById('myElement'); if (element.matches('.myClass')) { console.log('The element matches the selector'); } else { console.log('The element does not match the selector'); } ❗matches를 이용한 버튼 이벤트 추가 다음과 같이 버튼이 있다고 했을 때, 이벤트를 어떻게 부여할 수 있을까요? btn1 btn2 btn3 기본적으로 순회를 통해서 addEvent..

• format_list_bulleted Front End/Javascript
• · 2024. 3. 7.
• textsms

[JS] 상속받은 서브 클래스에서의 this에러

❗문제발생! export default class AppError extends Error { static PREFIX = "[ERROR]"; constructor(message) { super(`\\n${AppError.PREFIX} ${message}\\n`); this.name = this.constructor.name; } } Error를 커스텀하여 사용하기 위해, 다음과 같은 코드를 사용하였습니다. 저는 여기서 static 키워드를 사용 것에 대한 의문을 가졌습니다. 하지만 static을 뺀 아래 코드는 에러가 발생하였습니다. export default class AppError extends Error { PREFIX = "[ERROR]"; constructor(message) { super(..

• format_list_bulleted Front End/Javascript
• · 2024. 2. 14.
• textsms

[Javascript] Object.freeze()된 객체는 변경할 수 없을까?

벌써 우테코의 프리코스 4주차가 시작되었습니다. 저는 이전 미션에서 Objcet.freeze()에 대한 개념을 알게 되었는데요, 간단하게 Object.freeze()에 대해서 짚고 넘어가보겠습니다. ❓Object.freeze() 메서드의 기능 단어에서 알 수 있듯이, feeze 즉 객체를 동결하는 기능을 가졌습니다. 예시를 먼저 들어볼게요. const obj = { name: "lurgi", age: 20, } obj.name = "jeong" //변경 가능 console.log(obj.name) //jeong 객체는 const 로 선언한다 하더라도, 키 값을 알면 수정이 가능한데요, 이 기능을 방지해주는 역할을 합니다 const obj = { name: "lurgi", age: 20, } Object...

• format_list_bulleted Front End/Javascript
• · 2023. 11. 10.
• textsms

[Javascript] If 조건문과 Switch 조건문의 차이

우테코 프리코스의 3주 차가 벌써 막바지에 다다랐습니다. 저는 현재 3주 차 미션의 리팩토링을 진행하고 있는데요, 저번 2주 차 피드백에서 “if문 대신 switch문을 쓰는 게 더 깔끔하게 보일 수 도 있다” 라는 피드백을 받았습니다. 이 피드백을 계기로 switch 구문과 If 구문의 차이점을 정확하게 알고 적시에 사용할 수 있는 역량을 길러보려고 합니다! 일단 저는 지금까지 개발 공부를 하며 switch 구문을 단 한 번도 사용해 본 적이 없습니다. 그리고 굳이 switch 구문을 사용해야 될 필요성도 못 느꼈죠. 그래서 if문의 설명은 생략하고, switch 구문의 특성부터 알아보도록 하겠습니다. ❓Switch 구문의 특성 1️⃣ 값에 따른 Case 분기 switch 구문에서의 case는 특정 변..

• format_list_bulleted Front End/Javascript
• · 2023. 11. 7.
• textsms

[Javascript] Jest 실패한 테스트만 실행시켜보자. watch 모드 기능

벌써 우테코 프리코스 3주 차가 시작되었습니다! 이번 새로운 과제에서의 테스트 코드가 조금 바뀌었는데요, 단순히 jest로 실행하던 테스트 CLI가 다음과 같이 변경되었습니다. "scripts": { "test": "jest --detectOpenHandles --watch" } watch라는 명령어가 추가되었는데요, 그렇다면 이게 무엇을 하는 것일까요? ❓Watch 모드는 어떤걸 하는 걸까? Watch 모드는 실패한 테스트, 정규 표현식을 사용하여 테스트 하고 싶은 파일만 실행시켜주는 기능입니다. 원하는 테스트를 골라서 실행할 수 있게 되는 것이죠! jest --watch 를 실행하게 되면 다음과 같은 화면이 나옵니다. Watch를 실행하게 되면 다양한 옵션을 선택할 수 있습니다. a 를 입력해 모든 ..

• format_list_bulleted Front End/Javascript
• · 2023. 11. 3.
• textsms