Docs: 박승훈 4장

챕터_4/박승훈.md

@@ -0,0 +1,37 @@
+## 안티 패턴이란?
+
+- 겉으로만 해결책처럼 생긴 패턴
+- **반면교사로 활용하기 위해 문서화**하여 기록해야 하는 나쁜 디자인 패턴
+
+> [유지보수하기 어렵게 코딩하는 방법](https://velog.velcdn.com/images/jinvicky/post/965b8843-2ed1-40df-b75b-c9df5fcf3b7e/image.pdf)이라는 책이 생각나네요.
+
+
+## 자바스크립트 안티 패턴
+
+### 안티 패턴은 왜 생겨나는걸까?
+
+- 개발자는 가끔 신속한 구현을 위해 임시방편을 선택한다.
+- 그러나 이러한 임시방편은 영구적으로 이어지는 경향이 있다.
+- 결국 기술 부채가 되어 안티 패턴이 되곤 한다.
+- 안티 패턴을 알아볼 수 있게 된다면 리팩토링으로 안티 패턴을 제거할 수 있다.(반면교사)
+
+
+### 나의 경험
+
+지금 회사에서 zustand를 이용해 전역 상태를 관리하고 있는데요, 크고 nested한 객체 데이터를 하나의 state로 관리하고 있어요. 그리고 이 큰 객체 데이터를 자식 컴포넌트마다 props로 내려주는 구조에요. 문제는 여기에서 발생해요. 아주 깊은 곳의 작은 데이터를 수정하면 state 전체가 바뀌면서 최상위 root의 state가 변경되며 하위 컴포넌트들이 모두 rerendering이 되는 거에요. zustand의 selector 기능을 제대로 활용하지 못한 성능 저하 케이스죠. '**신속한 구현**'을 위해 selector 사용에 대한 고민을 미뤄두었기 때문이었어요.
+
+그래서 '**임시방편**'으로 변경에 대한 debounce를 걸어서 state 변경(리렌더링) 빈도를 조금이나마 줄여보자는 게 지금 상황에서 공수를 고려한 최선이었어요. '임시방편'이 굳어지게 될까봐 주의하고 있지만 정말 굳어지지 않도록 노력해야겠어요.
+
+
+### 자바스크립트 안티 패턴 예시
+
+> 자바스크립트는 느슨한 타입 언어여서 더더욱 기술 부채에 조심하자.
+
+- 전역 컨텍스트에서 수많은 변수를 선언하여 전역 네임스페이스 오염시키기
+- Object 클래스의 프로토타입을 수정하여 모든 객체에 영향을 미치기(**특히 악질**)
+- 자바스크립트를 인라인으로 사용하여 유연성 떨어뜨리기
+- document.createElement 대신 document.write 사용하기
+  - document.write는 브라우저가 페이지를 로드하는 동안에만 사용 가능하다.
+  - 페이지 로드가 완료된 후에 사용하면 페이지 내용을 덮어씌우게 된다.
+  - XHTML에서는 작동하지 않는다.
+  - document.createElement가 DOM 친화적인 메서드이다.