서론
디자인 패턴에 대한 개념을 공부하기 위해서 책을 찾아보던 와중에 동료와 함께 이 책을 발견하여 같이 북스터디를 하게 되었다. 처음에는 GoF의 다양한 패턴들을 자바스크립트와 리액트로 구현한 많은 예시를 기대하고 책을 펼쳤지만 읽어보니 예시도 있었지만 디자인 패턴의 역사와 패턴이 이루어지는 철학, 전반적인 개념을 다루고 있었다. 책의 난이도는 그렇게 높지 않으며 자바스크립트의 모듈을 사용해보았고, 리액트를 조금이라도 다뤄본적있으면 이해할 수 있는 정도였다.
느낀점
책을 읽고 느낀점은 디자인 패턴이란 어떻게 구현했느냐 보다는 어떤 상황에 사용했냐가 중요하다는 점이었다. 당연한 이야기지만 모든 소프트웨어에 만능인 디자인 패턴은 없다. 책에서는 어떤 문제를 해결하기 위해 해당 패턴을 사용하는지 예시와 함께 설명이 되어있었고 많은 도움이 되었다.
또 재밌는것은 개발하던 중 책에서 언급된 비슷한 문제를 해결하기 위해 만든 코드들이 디자인 패턴의 예시 코드들과 크게 다르지 않은 코드들도 있었다는 점이었다. 결국은 내가 마주친 상황을 어떤 문제인지 정의하는것이 첫번째이고, 그에 맞는 패턴을 적용하는게 효율적이고 유지보수에 유리하다는 점을 배웠다.
디자인 패턴의 시초는 크리스토퍼 알렉산더, 사라 이시카와, 머레이 실버스타인이라는 세 건축가가 협력하여 현실의 디자인 문제를 해결하기 위해 만든 패턴 랭귀지가 소프트웨어 공학자들에의해 현실의 벽을 넘어 추상적인 소프트웨어의 세계에서 디자인 패턴이 되었다는 점도 재밌었다.
현재에는 공식적으로 지원하는 자바스크립트의 모듈이 없을 때 전통적인 자바스크립트에서 어떻게 모듈을 구현했는지, 스크립트 로더를 통해 모듈들을 구현하는 내용도 색다른 내용이었다.
리액트에 관련한 패턴들은 워낙 커뮤니티상에 다양하게 알려져 있던 탓인지 크게 새로운 내용은 없었다. 다만 PRPL(push Render Pre-cache Lazy-load) 패턴이라고 새로운 키워드를 배웠는데 저사양 기기나 인터넷이 불안정한 지역에서도 어플리케이션을 최대한 효율적으로 로드하기 위한 패턴 또는 전략이었다. 4가지 핵심 고려사항(푸시, 렌더링, 사전 캐싱, 지연 로딩)을 통하여 불필요한 번들 사이즈는 줄이고 중요한 리소스는 우선적으로 요청하는 전략이었다.
마지막으로 아일랜드 아키텍처라는 패러다임을 배웠다. SSR시 정적인 HTML은 하이드레이션이 필요없으니 렌더링 후 HTML을 전달하고 사용자 인터랙션이 필요한 컴포넌트들은 동적으로 렌더링되며 개별적으로 지니고 있는 하이드레이션 스크립트를 통해서 독립적으로 동작하는 패턴이었다. 어디서 많이 본것 같다고 생각되었는데 NextJs에서 RSC(React Server Component)와 RCC(React Client Component), 스트리밍 HTML을 통해서 구현된 애플리케이션에서 비슷한 개념으로 사용되었다는걸 알게되었다.
마무리
전통적인 자바스크립트부터 프레임워크에 이르기까지 많은 기술 변화가 있었고, 패턴과 다양한 렌더링 전략이 등장했다. 이 책을 보면 해당 내용들을 한번에 학습할 수 있어서 추천한다.
