[회고] 자바스크립트 + 리액트 디자인 패턴

스터디 레포 : https://github.com/The-survivor-is-strong/coding-study-of-death

 

2월 4일부터 3월 25일까지 7주간 자바스크립트 + 리액트 디자인 패턴 책으로 스터디를 진행했습니다. 작년 항해 플러스를 같이 했던 인연으로 개발에 열정이 있는 분들과 매주 적정 분량을 읽고 공부한 후 내용을 함께 온라인에서 만나 서로가 얻은 인사이트와 지식들을 공유했습니다.

 

자바스크립트와 리액트를 실무에서 숨 쉬듯이 사용하지만, 사용할 때 우리가 어떤 디자인 패턴을 사용하는지 전혀 알지 못했기 때문에 이런 의문점들을 해결하기 위해 공부하게 되었습니다. 주로 점심시간에 시간을 잠시 내어 책을 읽고 정리를 하고 그 안에서 원래 알고 있던 지식들과 연결해 생각하려고 노력했습니다. 모임이 아닌 날 서로의 의견을 알고 싶을 때는 깃허브에 디스커션을 활용하였습니다.

 

책에 있는 내용들은 한 번쯤은 어디서 들어보았고 읽어보면 실제로 사용하고 있는 디자인 패턴들이 대부분이었기 때문에 스터디 초기에는 왜 디자인 패턴을 배워야 하는지에 대해 많은 생각을 했었습니다. 이 안에서 나름대로 결론을 내린 것은 결국 다른 개발자들과의 의사소통 과정에서 패턴의 이름을 사용하여 원활하게 소통할 수 있고, 패턴을 사용함으로써 앞으로 일어날 수 있는 문제에 대한 대비를 할 수 있다는 결론을 내렸습니다.

 

디자인 패턴을 알아가면서 프로미스 메모이제이션 패턴은 메모이제이션을 프로미스에 적용한 것으로 현재 프론트엔드에서 많이 사용하는 tanstack-query의 핵심 아이디어라는 것을 알게 되었습니다. 자주 사용하는 라이브러리들의 근간에 디자인패턴들이 존재한다는 것을 생각해보지 않았기에 새롭다고 느꼈고 다양한 상황에서 사용되는 만큼 견고해야 되기때문에 디자인패턴들을 사용한다는 것을 깨닫게 되었습니다.

 

또한, Vue는 MVVM 패턴을 기반으로 만들었다고 알고 있었는데, MVVM 패턴을 '사용했다'라고 명확하게 말할 수는 없다고 합니다. 결국 React, Vue는 디자인 패턴을 차용하여 만들어지긴 했지만 사용한 디자인 패턴과 완전히 동일하지는 않습니다. 수많은 기술면접에서 Vue는 MVVM패턴이다라고 말했던 제가 스쳐지나갔습니다. 앞으로는 MVVM패턴을 사용했지만 완전히 일치하지는 않는다고 답해야겠습니다.

이렇게 공부를 하면서 전에 내가 사용한 적은 없는지 생각해보았습니다. 이 질문에 대한 답은 공통 컴포넌트들을 재사용한다고 하더라도 DOM 트리들에 한 번만 생성되는 것이 아닌 사용된 모든 곳에 렌더링되기 때문에 플라이웨이트 패턴이 지향하는 바와 다릅니다. 

 

그 외에도 전반적인 디자인 패턴들과 RxJS, react-virtualized 등과 같이 자주 접할 수 있는 라이브러리들 또한 디자인 패턴들과 관련 있다는 것들을 알게 되어 흥미로웠습니다. 매주 시간을 내어 공부를 하고 온라인에서 만나 함께 서로의 이야기를 나눠줬던 스터디원들에게 감사함을 전하며 앞으로의 책 스터디도 재밌게 이어나가자고 전하고 싶습니다.

 

"나를 죽이지 못한 고통은 나를 더 강하게 만든다"라는 우리의 다짐(?)처럼 앞으로의 우리가 기대됩니다.