2024/06/15 5

Tailwind CSS

Tailwind CSS테일윈드 CSS는 클래스 기반의 유틸리티 CSS 프레임워크이다. 개발자가 CSS를 작성하는 대신, 미리 정의된 클래스를 HTML에 적용하여 스타일을 지정할 수 있다. 이를 통해 스타일을 보다 모듈화 하고 유지보수하기 쉽게 만들 수 있다.테일윈드 CSS는 PostCSS 버전 8의 플러그인 형태로 동작한다.주요 특징유틸리티 클래스: 각 클래스는 하나의 CSS 속성을 담당한다.구성 가능성: 다양한 클래스를 조합하여 복잡한 스타일을 간단하게 구현할 수 있다.커스터마이징: 설정 파일을 통해 Tailwind를 프로젝트에 맞게 조정할 수 있다.Bootstrap과의 차이점 TailwindBootstrap접근 방식유틸리티 클래스 기반모든 스타일링을 작은 클래스 단위로 처리하여,필요한 스타일을 조합하..

CSS 2024.06.15

Npm audit

npm audit 명령어는 2018년에 발표된 npm v6에서 처음 도입되었다. 이 명령어는 프로젝트의 의존성 트리를 검사하여 보안 취약점을 찾고, 이를 보고하는 기능을 제공한다. 이는 npm 사용자들이 프로젝트에서 사용하고 있는 패키지들의 보안 상태를 쉽게 확인하고, 필요한 경우 취약점을 수정할 수 있도록 하기 위한 중요한 기능이다. npm audit이 명령어는 프로젝트의 의존성을 검사하여 알려진 보안 취약점을 찾고, 이를 보고한다.npm audit이 명령어를 실행하면 보안 취약점이 있는 패키지 목록과 이를 수정하기 위한 권장 조치가 표시된다. npm audit fixnpm audit 명령어가 발견한 보안 취약점을 자동으로 수정하려고 시도한다. 이 명령어는 가능한 경우 취약점을 수정할 수 있는 패키지 ..

Javascript 2024.06.15

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
728x90