JudithHopps JudithHopps

디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 "규약" 형태로 만들어 놓은 것을 의미 종류는 아래와 같다. 싱글톤 패턴 팩토리 패턴 전략 패턴 옵저버 패턴 프록시 패턴과 프록시 서버 이터레이터 패턴 노출모듈 패턴 MVC 패턴 MVP 패턴 MVVM 패턴 전략 패턴 전략 패턴은 정책 패턴이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 '직접' 수정하지 않고 전략이라고 부르는 '캡슐화한 알고리즘'을 컨텍스트안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴이다. 더보기 컨택스트란? 프로그래밍에서의 컨텍스트는 상황, 문맥, 맥락을 의미하며, 개발자가 어떠한 작업을 완료하는데 필요한 모든 관련 정보를 말한다. 옵저버 패턴 주체가 어떤 객체의..

I. 프로토타입 prototype 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어 오늘날에는 클래스가 더 널리 사용되지만, 사용하기에 따라 보다 강력하고 효율적 ⭐ 자바스크립트의 모든 객체는 Prototype을 가짐 const obj = {}; ​ console.log(obj); [[Prototype]] 펼쳐서 살펴볼 것 console.log( obj.toString() ); console.log( obj.valueOf() ); 빈 객체임에도 위의 메서드들이 사용 가능한 것은 프로토타입 때문 II. Object - 모든 것의 조상 아래 각 객체의 [[Prototype]]의 [[Prototype]]이 Object임 확인 각 [[Prototype]]의 메서드들 확인 console.log(..

💡 상속 inheritance 서로 다른 클래스나 생성자 함수가 같은 속성들을 공유할 때 이들의 관계를 정의함으로써 코드의 중복을 줄이고 효율을 높임 "B클래스는 A클래스에서 파생된다." - "B는 A의 하위분류" I. 클래스의 상속 문법 class Bird { wings = 2; } class Eagle extends Bird { claws = 2; } class Penguin extends Bird { swim () { console.log('수영중...'); } } class EmperorPenguin extends Penguin { size = 'XXXL'; } const birdy = new Bird(); const eaglee = new Eagle(); const pengu = new Peng..

상속되는 CSS 속성들 예 color cursor font 관련 letter-spacing line-height list-style 관련 text-align text-decoration text-shadow visibility word-spacing 👉 전체 CSS 속성 리스트에서 살펴보기 inherit 스스로의 값을 포기하고 부모로부터 받은 상속값을 적용합니다. initial 브라우저가 부여한 값을 포기하고 각 속성의 초기값을 적용합니다. p 브라우저가 기본적으로 제공하는 p의 display 속성은 block이죠. p 그런데 속성값을 initial로 주게 되면 p 이와 같이 display 속성의 초기값인 p inline으로 바뀌게 됩니다. 👉 display 속성의 명세 보기 (초기값 확인)👉 initi..