javaScript (14) 썸네일형 리스트형 옵저버 패턴이란? 옵저버 패턴(Observer Pattern)이란?옵저버 패턴은 어떤 객체의 상태가 바뀌면, 그와 의존 관계에 있는 객체들이 자동으로 알림을 받아 갱신되는 패턴입니다.쉽게 말해 한 객체가 변하면 다른 객체들이 알아서 반응하게 만드는 구조입니다. 자바스크립트에서의 옵저버 패턴 class Subject { constructor() { this.observers = []; } subscribe(observer) { this.observers.push(observer); } notify(data) { this.observers.forEach(observer => observer(data)); }}// 사용 예시const subject = new Subject();// 옵저버 등록su.. 의존성 주입(Dependency Injection)이란? 프로그래밍을 하다 보면 어떤 객체가 다른 객체를 사용해야 할 때가 많습니다. 예를 들어 UserService 클래스가 Logger라는 클래스를 사용해서 로그를 찍는다면, UserService는 Logger에 의존하고 있다고 할 수 있죠. 그런데 이런 코드, 괜찮은 걸까요? class UserService { constructor() { this.logger = new Logger(); // ❌ 직접 생성 } createUser(name) { this.logger.log(`${name} created`); }} 이 코드의 문제는 UserService가 Logger에 너무 강하게 결합되어 있다는 것입니다. Logger를 다른 걸로 바꾸거나 테스트할 때 문제가 생길 수 있습니다. 그래서 .. 프록시 패턴 (Proxy Pattern) 쉽게 이해하기 프록시 패턴이란?어떤 객체에 접근할 때직접 접근하지 않고 대신 접근해주는 ‘대리인’ 역할을 하는 디자인 패턴입니다.왜 쓸까?실제 객체에 바로 접근하지 않고,접근을 통제하거나, 실행 전/후에 작업을 추가할 수 있습니다.예를 들어, 온라인 쇼핑몰에서 결제하기 전에로그인 상태를 확인하거나 결제 제한을 걸고 싶을 때 사용할 수 있습니다. const realPayment = { pay(amount) { console.log(`${amount}원 결제 완료!`); }};const paymentProxy = { isLoggedIn: false, pay(amount) { if (!this.isLoggedIn) { console.log('로그인이 필요합니다!'); return; .. 자바스크립트 제너레이터 함수 알아보기 제너레이터란?일반 함수와는 달리, 중간에 멈췄다가 다시 실행할 수 있는 함수입니다.일반적인 함수는 호출되면 끝까지 실행되고 종료되지만,제너레이터는 yield라는 키워드를 만나면 중간에 실행을 멈췄다가,next() 메서드를 통해 다시 실행을 이어나갈 수 있는 함수입니다. function* myGenerator() { yield 1; yield 2; yield 3;}const gen = myGenerator();console.log(gen.next()); // { value: 1, done: false }console.log(gen.next()); // { value: 2, done: false }console.log(gen.next()); // { value: 3, done: false }consol.. 자바스크립트로 객체 지향 프로그래밍 이해하기 객체 지향 프로그래밍(OOP(Object-Oriented Programming))이란?객체(Object)를 중심으로 구성된 프로그래밍 방식입니다."현실 세계의 개념을 코드로 모델링" 한다고 보면 이해가 쉬워요.예를 들어:강아지 → 이름, 종, 짖는다 → 객체자동차 → 브랜드, 속도, 달린다 → 객체OOP의 4대 핵심 개념캡슐화데이터와 동작을 하나로 묶고 외부 접근 제한private 필드, 메서드상속부모 객체의 속성과 기능을 자식이 물려받음extends 키워드다형성같은 메서드가 상황에 따라 다르게 동작메서드 오버라이딩추상화복잡한 내부 구조는 숨기고 필요한 기능만 제공클래스, 인터페이스 1. 캡슐화 (Encapsulation): 객체 내부의 데이터와 기능을 하나로 묶고, 외부에 꼭 필요한 것만 보여줍니다cl.. 클로저(Closure)와 메모리 관리 클로저란?클로저(Closure)는 내부 함수가 외부 함수의 변수에 접근할 수 있는 특성을 의미합니다. 이를 통해 외부 함수가 종료된 후에도 내부 함수가 외부 함수의 변수에 접근할 수 있습니다.function outer() { let count = 0; return function inner() { count++; console.log(count); };}const counter = outer();counter(); // 1counter(); // 2 위 코드에서 inner 함수는 outer 함수의 count 변수를 참조하고 있습니다. outer 함수가 실행되고 종료되었음에도 count 변수에 접근할 수 있는 이유가 바로 클로저 덕분입니다.메모리 관리와 클로저클로저를 사용할 때 중요.. WeakMap과 WeakSet WeakMap과 WeakSet은 일반 Map과 Set과 비슷하지만 메모리 관리 측면에서 중요한 차이가 있습니다. WeakMap은 키가 객체일 경우만 저장할 수 있으며, 가비지 컬렉션이 가능한 자료구조입니다. 객체가 더 이상 참조되지 않으면, 해당 키-값 쌍은 자동으로 삭제됩니다. 이 때문에 메모리 관리가 용이합니다.let obj = {};let weakMap = new WeakMap();weakMap.set(obj, 'some value');obj = null; // obj가 더 이상 참조되지 않음// 가비지 컬렉션에 의해 WeakMap에서 자동으로 삭제됨 WeakSet은 값이 객체일 경우만 저장할 수 있으며, WeakMap과 마찬가지로 가비지 컬렉션이 지원됩니다. 객체가 더 이상 참조되지 않으면, 해.. 자바스크립트의 런타임 구조와 비동기 처리의 기초 자바스크립트 런타임 구조와 싱글 스레드자바스크립트는 기본적으로 싱글 스레드(Single Thread) 환경에서 동작합니다. 이는 자바스크립트가 한 번에 하나의 작업만 처리하는 방식이라는 뜻입니다. 한 번에 여러 작업을 동시에 처리하지 않고, 순차적으로 처리하는 구조입니다.하지만 자바스크립트는 비동기 프로그래밍을 통해 여러 작업을 동시에 처리하는 것처럼 보이게 할 수 있습니다. 이를 위해 이벤트 루프(Event Loop)와 콜백 큐(Callback Queue), 호이스팅(Hoisting) 등의 개념을 사용합니다. 1. 싱글 스레드(Single Thread)란?싱글 스레드는 프로그램이 한 번에 하나의 작업만 처리하는 방식입니다. 자바스크립트는 싱글 스레드 언어로 설계되어, 한 번에 하나의 작업을 순차적으로 .. 이전 1 2 다음
