반응형 Javascript13 Web-Client DIP(Dependency inversion principle) 😗 DIP(Dependency inversion principle)란?상위모듈은 하위모듈에 의존해서는 안된다.즉 구현체에 의존하지 말고 인터페이스에 의존해야한다 이다 🧐 Web - Client 의 DIP웹 클라이언트에서 서로 구현체에 의존하지 않아야 한다index.html main.js auth-service.js api-client.js fetch 파일역할index.htmlviewmain.jsUI/사용자 흐름auth-service.js비즈니스 로직api-client.jsHTTP 추상화 fetch실제 구현 기술 api-client.jsimport { mapHttpError, mapUnknownError } from "./errors/error-mapper.js";export async fun.. 2026. 5. 15. 😌 DIP 🧐 DIP란고수준 모듈은 저수준 모듈에 의존하면 안 되고,둘 다 추상화에 의존해야 한다.❌ “구현체를 직접 사용하지 말고”✅ “규칙(인터페이스/추상화)에 의존하자” 🥲 DIP를 사용하지 않는 예시class MySqlDataBase { save(data) { console.log("MY SQL 저장됨", data); }}class UserService { constructor() { // MySqlDataBase의 의존 문제 생김 // OracleDataBase이면 new OracleDataBase() 으로 변경 this.db = new MySqlDataBase(); } save() { this.db.save(); }}const userService = new U.. 2026. 5. 11. Queue으로 작업실행 🏒 Task 를 Queue를 이용하여 작업 처리 하기회사에서 작업을 하던 도중 해당시간이 되면 Queue에 담긴 순서대로 작업을 처리해야 하는 경우가 발생하였다.로직은 아래와 같다A음원 실행특정시간이 되면 B 음원 시작B음원이 끝나면 C음원 시작C음원 끝나면 D음원 시작D음원 끝나면 다시 A음원 시작단 2~4는 A음원이 음소거가 되어야 한다 🤿 TaskQueue 클래스 작성class TaskQueue { constructor() { this.queue = []; this.isRunning = false; } add(task) { this.queue.push(task); this.runNext(); } isLast() { return this.queue.leng.. 2025. 5. 19. 💿 상태 패턴 🕹️ 상태 패턴이란객체의 상태를 조건문으로 검사해서 행위를 달리하는것이 아닌상태를 객체화 하여 상태가 행동할 수 있도록 위임하는 패턴.객체의 상태에 따라 행동을 변경videoPlayer를 상태패턴 만들기VideoPlay클래스를 통해 상태를 인자로 받고, setState를 통해 상태를 바꾸도록 한다class VideoPlay { constructor(state) { // Object.create를 통해 새로운 객체로 받고, Object.assign을 통해 객체복사를 진행한다 this.state = Object.create(Object.assign({ videoplayer: this }, state)); } setState(state) { this.state = Object.creat.. 2024. 11. 25. 이전 1 2 3 4 다음 반응형
