▶️ 목차
ch.01 디자인 패턴 소개
ch.02 패턴성 검증, 프로토 패턴 그리고 세 가지 법칙
ch.03 패턴 구조화 및 작성
ch.04 안티 패턴
🖋️ 세 줄 요약
1. 리액트의 Context API도 공급자 패턴이라는 디자인 패턴임
2. 결국 좋은 디자인 패턴이란, 사용자가 이해하고 활용하기 쉬우며 규칙에 의거해 작성된 패턴이다.
3. document.write는 함수 자체가 안티 패턴. mdn에서도 사용을 강력하게 만류한다.
❗️ 새롭게 알게 된 내용
패턴이 뭔데?
패턴: 소프트웨어 설계에서 반복되는 주제에 적용 가능한 재사용 템플릿
디자인 패턴의 이점
1. 검증됨
2. 재사용이 쉽다
3. 공통 표현을 사용해 알아보기 쉽다.
4. 이미 작성된 코드 구조를 사용해 개발 시 사소한 실수를 방지할 수 있다.
5. 언어나 애플리케이션의 형태에 국한되지 않은 해결책을 제시할 수 있다.
6. 중복을 줄일 수 있다. (DRY: Don't Repeat Yourself)
7. 공통된 어휘를 사용해 개발자 간 소통이 쉬워진다.
8. 인기 있는 디자인 패턴의 경우 커뮤니티의 선순환 발생
디자인 패턴 예시
공급자 패턴(Provider Pattern)
Props Drilling이 발생하는 경우 유지보수가 힘들다.
-> 리액트의 Context API를 사용하면 컨텍스트 공급자가 상태나 데이터를 한 번에 전달해 준다.
-> 하위 컴포넌트에서는 컨텍스트 소비자, useContext Hook을 사용해 공급자의 데이터에 접근 가능하다.
프로토 패턴?
말 그대로 프로토(Proto). 패턴성 검증을 통과하지 못한 미숙한 패턴이다.
디자인 패턴이 되려면 프로토 패턴이 패턴성 검증과 세 가지 법칙을 모두 충족해야한다.
패틀릿(Patlet): 프로토 패턴의 예시나 설명 코드 조각
좋은 패턴이란?
1. 단순 원리가 아닌 문제를 해결할 수 있어야 한다.
2. 명쾌한 해결책이 없다. 간접적으로 해결 방법을 제공한다.
3. 설명에 쓰인 대로 확실하게 동작해야 한다.
4. 패턴의 공식 설명은 코드와의 관계를 나타내는 심층 구조와 설계를 설명해야 한다.
좋은 패턴의 세 가지 법칙
1. 목적 적합성
좋은 패턴은 어떻게 판단하나요?
2. 유용성
좋은 패턴이라고 할 수 있는 이유가 있나요?
3. 적용 가능성
넓은 적용 범위를 가지고 있어 패턴이 될 가치가 있나요? 그렇다면 왜 그런가요?
디자인 패턴의 구조
패턴을 작성한 사람은 패턴의 설계, 구현 방법, 목적을 설명할 수 있어야 한다.
아래 규칙의 형태로 패턴을 제시한다.
1. 컨텍스트(Context): 패턴이 적용되는 상황
2. 집중 목표(System of Forces): 패턴 적용 시 고려해야 할 목표
3. 구성(Configuration): 제시된 상황과 고려해야 할 점들을 해결하는 구성
디자인 패턴의 구성 요소
- 이름: 패턴의 목적이 드러나야 함
- 설명: 패턴이 무엇을 해결할 수 있는지 설명
- 컨텍스트 개요: 패턴이 사용자의 요구에 부합하는지
- 문제 제시: 패턴을 만든 의도를 보여주는 문제를 제시해야한다
- 해결 방법: 문제가 어떻게 해결되었는지 설명
- 설계 내용: 패턴의 설계 방식과 사용자가 어떻게 사용해야 하는지
- 구현 방법: 패턴을 구현하는 방법
- 시각적 설명: 패턴을 나타내는 시각적 설명
- 예제: 패턴 구현 예제
- 필수 연계: 해당 패턴과 함께 사용하면 좋을 패턴
- 관계성: 다른 패턴과 관계 및 유사성 설명
- 알려진 용도: 업계에서 이미 쓰이던 패턴인지
- 토론: 해당 패턴의 이점에 대한 사용자의 의견
패턴 적용 시 검토 사항
1. 얼마나 실용적인가?
추측성 해결책이 아닌 반복적 문제에 대한 해결책을 제시하는지 확인
2. 디자인 패턴 설계는 모범 사례를 이해하여 도출한 원칙에 기반
3. 사용자 경험에 솔직해야 한다. 예상되는 사용자 경험을 변경해서는 안된다.
4. 독창성은 패턴 설계의 핵심이 아님. 넓게 적용할 수 있는 패턴이 유용한 패턴
5. 효과적인 예시 제시 및 올바른 설계 원칙 적용
자바스크립트의 안티 패턴 예시
1. 전역 컨텍스트에서 많은 변수를 정의하여 전역 네임스페이스 오염시키기
2. setTimeout이나 setInterval에 함수가 아닌 문자열 전달해서 내부적으로 eval() 실행시키기
3. Object 클래스의 프로토타입 수정
4. 자바스크립트를 인라인으로 사용해 유연성 떨어뜨리기
5. document.createElement 대신 document.write 사용하기
(해당 TIL에 관련해서 공부한 내용 첨부)
👀 나의 소감
디자인 패턴이 뭔지, 왜 사용하는지에 대해서는 어느 정도 알고 있었는데 내가 이미 사용해 본 리액트 props drilling을 방지하기 위한 방법 역시 디자인 패턴이었는지는 몰랐었다.
역자분의 말 처럼 평소에 무의식적으로 작성하던 코드 패턴에 대한 이름을 알고 어떤 특징을 가지고 있는지 알아갈 수 있는 도서 같아 앞으로 읽을 내용이 더 기대된다.
