2024/06 16

State Pattern

상태 패턴은 객체가 내부적으로 상태를 변경할 때마다 객체의 행동을 바꾸는 패턴이다.이 패턴은 객체의 상태에 따라 객체가 수행하는 동작을 동적으로 변경할 수 있게 한다. 상태 패턴을 사용해야 하는 상황객체의 행동이 상태에 따라 변할 때객체의 행동이 특정 상태에 의존적이고,상태가 변경될 때마다 객체의 행동이 동적으로 변해야 할 때 유용하다.복잡한 조건문 대체상태에 따른 각각의 동작을 개별적인 상태 클래스로 캡슐화하면복잡한 조건문을 피할 수 있다.유집보수 용이성새로운 상태가 추가되거나 기존 상태의 동작이 변경될 때,해당 상태에 대한 클래스만 수정하면 되므로 유지보수가 용이하다. 상태 패턴을 사용하는 경우의 문제점클래스 수 증가각 상태를 별도의 클래스로 구현하기 때문에 클래스의 수가 증가한다상태 전환 오버헤드상..

디자인 패턴 2024.06.15

Singletone Pattern

싱글턴 패턴은 어떤 클래스에 대해 오직 하나의 인스턴스만 생성하도록 하는 디자인 패턴이다.이 패턴을 사용하는 주된 이유 중 하나는 전역 상태를 관리하거나 리소스를 효율적으로 사용하기 위함이다. 왜 정적 변수가 아닌 싱글턴을 써야 하는가?게으른 로딩(Lazy Loading)정적 변수는 클래스가 로딩되는 시점에서 즉시 초기화된다.하지만 게으른 로딩을 통해 인스턴스가 필요한 시점까지 생성을 미룰 수 있는 싱글턴 패턴은 자원을 효율적으로 활용할 수 있다.특히, 애플리케이션이 시작될 때 필요하지 않은 경우에는 초기화를 지연시키는 것이 좋다.동적 로딩(Dynamic Loading)정적 변수는 클래스가 로딩되는 시점에서 생성되기 때문에 동적인 상황에서의 활용이 어렵다.싱글턴 패턴을 사용하면 객체 생성 로직을 변경하지..

디자인 패턴 2024.06.15

Proxy Pattern

프록시 패턴은 다른 객체에 대한 대리자 또는 대변자 역할을 하는 객체를 제공하는 패턴이다.실제 객체에 대한 접근을 제어하거나, 객체에 부가적인 동작을 수행하거나, 객체에 대한 접근을 지연시키는 등의 목적으로 사용된다. 프록시 패턴을 사용하는 상황접근 제어(Access Control):실제 객체에 직접 접근하는 것을 허용하지 않고, 프록시를 통해 접근을 제어하는 경우 사용된다.지연 로딩(Lazy Loading):실제 객체가 필요할 때까지 생성 또는 초기화를 지연시키는 경우 사용된다.추가 동작(Additional Behavior):실제 객체에 접근하기 전에 추가적인 동작을 수행하고자 할 때 사용된다. 프록시 패턴의 구성 요소Subject(주체):프록시와 실제 객체가 공통적으로 구현한 인터페이스 또는 추상 클..

디자인 패턴 2024.06.15

불변의 법칙 - 모건 하우절

1,000개의 평행우주가 존재한다면 그 모두에서 변함없이 참인 것은 무엇일까? 1. 이토록 아슬아슬한 세상지나온 과거를 돌아보면, 앞으로의 미래는 알 수 없단 사실을 깨닫게 된다. 『 흔히들 "미래를 알려면 먼저 과거를 보라"고 말한다. 하지만 현실적인 관점에서 보면 다음을 인정해야 한다. 과거를 보아도 미래는 알 수 없다는 사실 말이다. 세상 모든 일은 예측 불가능한 방식으로 서로 영향을 주고받고, 혼합되고, 그 결과가 증폭되기 때문이다.』 2. 보이지 않는 것, 리스크사실 우리는 미래를 예측하는 능력이 꽤 뛰어나다. 다만 뜻밖의 놀라운 일을 예측하지 못할 뿐이다. 그리고 그것이 모든 것을 좌우하곤 한다. 『 "당신이 모든 시나리오를 남김없이 고려했다고 생각한 후에 남는 것이 리스크다." 리스크의 정확..

도서 2024.06.06

styled-components에서 $ 접두사 사용하기

경고isOpen이라는 값을 styled-component에 보내주는데 아래와 같은 경고 문구가 로그에 찍혔다.Warning: React does not recognize the isOpen prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isopen instead. If you accidentally passed it from a parent component, remove it from the DOM element. 발생 이유DOM 요소에 대한 사용자 정의 속성이 React에 의해 대문자로 시작할 수 없기 때문이다. 여기서 isOpen 값은 ..

Javascript/React 2024.06.01

모듈 시스템

모듈 시스템JS의 모듈 시스템은 코드를 여러 개의 파일로 나누어 관리하고, 각 파일 간의 의존성을 정의하여 필요한 기능을 불러오는 방식이다. 이를 통해 코드의 재사용성, 유지보수성, 가독성을 높일 수 있다. 자바에서도 패키지를 사용해 관련 클래스와 인터페이스를 그룹화하여 관리하는 것과 유사하게, JavaScript에서는 모듈 시스템을 통해 코드를 나눌 수 있습니다. CommonJSCommonJS는 JavaScript를 사용하는 서버 사이드 플랫폼에서 모듈을 정의하고 사용하기 위한 표준화된 방법 중 하나이다. Node.js에서 가장 널리 사용되는 모듈 시스템이며, 이전에는 브라우저 환경에서도 사용되었으며 ES6 모듈 시스템이 대안으로 사용되기도 한다. 브라우저 환경에서 사용하기에는 동기적인 특성과 캐싱 메..

Javascript 2024.06.01
728x90