C++를 대부분 다루기 때문에 GOF 디자인 패턴 책을 보곤 했다. 뒤에 자바 관련 디자인 패턴 책을 살펴봤는데 언어만 다르고 코드는 비슷했다. 그 뒤로 파이썬 디자인 패턴도 대부분 비슷했다. 물론 언어에 따라 유리한 것이 있고 조금은 더 쉽게 구현할 수 있는 것들도 있었다. 이 책은 자바스크립트와 리액트에 대한 디자인 패턴을 다룬다.

  무엇이든 반복적인 작업을 하려면 이미 검증된 구조와 가장 쉬운 방법론을 찾게 된다. 많은 사람들은 그런 작업을 통해서 발전을 거듭해 왔다. 비단 컴퓨터 언어뿐만 아니라 대부분의 것들이 그렇다. 경영도 자기 계발도 그런 방법론은 존재하는 것이다. 어떻게 보면 디자인 패턴이라는 것도 건축에서 유래했다고 말할 수 있다.

  책 제목은 자바스크립트와 리액트의 디자인 패턴을 얘기하고 있지만 앞에서 얘기한 것과 같이 다자인 패턴이라는 것은 코드를 넘어 적용할 수 있는 하나의 방법론 같기 때문에 처음부터 자바스크립트나 리액트에 대해 얘기하지 않는다. 

  책 초입에는 디자인 패턴에 대한 역사에 대해 얘기한다. 패턴이라는 건 반복되는 문제와 주제에 적용할 수 있는 재사용 가능한 템플릿을 의미한다. 디자인 패턴이 개발자에게 유리한 이유는 여러 가지가 있겠지만 가장 중요한 몇 가지를 얘기하자면 검증된 방법론이며 재사용이 쉽다는 것이다. 더불어 개발자의 알아보기 쉽다는 것이다. 어떻게 보면 디자인 패턴을 공부한 사람끼리는 쉽게 소통도 가능하다는 추가적인 장점도 존재한다.

  좋은 패턴이 되려면 정확한 목적이 있고 유용해야 하며 넓은 범위에 걸쳐 사용할 수 있어야 한다. 패턴이라고 불리기까지 많은 검증이 필요하다. 아직은 패턴성을 검증하지 못한 솔루션이나 알고리즘들을 프로토 패턴이라고 하기도 한다. 반대로 나쁜 패턴의 경우는 안티패턴이라고 말할 수 있다.

  패턴에 대한 설명이 끝나면 자바스크립트에 대한 설명과 사용할 수 있는 패턴에 대해 말한다. 같은 형식으로 리액트에 대해서도 설명한다. 자바스크립트의 경우는 가끔 써보기도 하지만 리액트의 경우 완전 처음이라 생소했다. 워낙 많은 언어들이 나와서 들어는 봤지만 써 볼 기회는 좀처럼 없는 그런 경우다. 

  자바스크립트의 디자인 패턴은 기존 C++이나 자바와 사뭇 다른 느낌이지만 깔끔하게 정리하려고 노력하는 점이 돋보였다. 사실 자바스크립트를 어떻게 나눠 코딩해야 하나 난감해서 의식의 흐름대로 코딩하곤 했었기 때문이다. 리액트의 경우에는 Hooks 패턴이라고 해서 또 새로운 형태의 패턴을 볼 수 있었다.

  디자인 패턴이라는 것은 많이 복잡한 코딩을 하는 백엔드 쪽에서 하는 경우가 많았지만 이렇게 웹 개발 쪽에서 사용하는 것을 본 것이 많은 도움이 될 것 같았다. 어떻게 보면 어디서 무엇을 하든 최적화는 필요할 것이기 때문이다. 또 한 수 배워 간다.

"한빛미디어 <나는리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

몇 달 전, 리액트 기반의 개발 환경을 구축해야 하는 상황에 놓였었는데, 사내에 다른 프론트엔드 개발자가 있거나 리액트로 구성된 프로젝트가 없어서 모든 걸 스스로 정해야 했었다. CSR과 SSR을 두고 고민했고, 초기에 세팅해 놓았던 CSS 프레임워크 환경을 재구성하기도 하고, 전역 상태 관리를 어떻게 할 것인지에 대한 고민을 동시에 했었다. 그것과 동시에 내가 가장 길게 고민했던 것이 폴더 구조와 컴포넌트 패턴이었다. 그 당시 유행하던 FSD(기능 분할 설계)를 살펴보면서 동시에 여러 아티클과 Github 저장소를 뒤져가며 고민했던 기억이 난다. 고민이 길었던 이유는 일전에 Vue를 사용했을 때 다소 좋지 않은 컴포넌트 패턴으로 고생했던 경험도 있었고, 한번 구조를 잡아두면 바꾸기 힘들뿐더러 유지보수 측면에 큰 영향을 미칠 수밖에 없다는 걸 알기 때문이었다. 특히나 리액트 같은 환경에서는 컴포넌트 단위로 작업을 주로 하게 되고, 그 컴포넌트들은 전체 구조의 영향을 받을 수밖에 없다. 그런 면에서 언젠가 한 번은 각 패턴을 공부해 보고 싶다는 생각이 있었다. 때마침 이 책을 접한 건 좋은 기회였다.

결론부터 말하자면 내게는 한번 읽어서 온전히 흡수할 수 있는 책은 아니었다. 400페이지도 안 되는 분량이지만 꽤 알짠 구성으로 짜여져 있고, 그 말인즉슨 압도적으로 친절할 수 없다는 의미이기도 하다. 디자인 패턴에 대한 역사나 패턴성이 어떻게 검증되며, 패턴 구조화와 작성, 안티 패턴을 다루고 있고, 그 이후 자바스크립트의 문법과 디자인 패턴을 이어서 다룬다. 이 자바스크립트 패턴 파트에서 우리가 어디선가 접해봤을 싱글톤이나 퍼사드 등이 나온다. 그리고 별도의 챕터로 MVC, MVP, MVVM 패턴을 따로 다루고 있는데, 사실 이 챕터는 Node에 대한 이해가 있으면 더 이해가 빨랐을 것 같다는 생각이 들었다. 그 이후 비동기 프로그래밍 패턴을 거쳐 네임스페이스 패턴을 지나면 드디어 리액트 디자인 패턴이 나온다. 275페이지에 당도해서야 나오게 되는데, 긴 터널을 통과한 거에 비해 분량이 조금 아쉬웠다. 우리가 알다시피 자바스크립트의 역사는 길지만 프론트엔드라는 영역이 고도화된지 오래되지 않았기 때문에 그런 면에서 이해가 가는 대목이기도 하다. 고차 컴포넌트와 Props와 Hooks 패턴, 코드 스플리팅 등 처음 리액트로 프로젝트를 구축하는 입장이라면 도움이 될 법한 알찬 내용이다. 그 다음 챕터에서는 리액트에서 추가로 중요하다고 느낄 수밖에 없는 렌더링 패턴 또한 다루고 있어서 실무적인 면에서 도움이 되는 챕터라는 생각이 들었다. 리액트의 애플리케이션 구조까지 다루는 챕터가 있어서 개괄적인 그림을 그려볼 수 있는 느낌이었다.

많은 걸 다루고 있는 만큼 설명이 간소한 책이다. 다만 핵심을 놓치진 않고 있고 개발 역사적으로 언급되어 왔던 패턴들을 함께 다루고 있어서 백과사전처럼 틈날 때 찾아보고 추가적인 설명은 구글링을 통해서 학습하면 좋겠다는 생각이 들었다. 아마 절반도 이해하지 못했을 거 같은데, 그럼에도 불구하고 재차 읽을 마음이 드는 걸 보면 학술적으로나 실무적으로도 꽤 매력적인 책임이 틀림없다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

일반적인 디자인 패턴은 업무에 적용 및 활용하고 있는데 이번에 "자바스크립트+리액트 디자인 패턴"이라는 책을 선택하여 읽어 보게 되었습니다. 자바스크립트와 리액트 그리고 디자인 패턴을 어떻게 결합하여 활용하는지 궁금했는데 "자바스크립트+리액트 디자인 패턴" 책을 통해 해당 기술의 결합 및 기술적 내용을 확인 할 수 있었습니다.

먼저 "자바스크립트 + 리액트 디자인 패턴" 책을 읽기 위해서는 자바스크립트의 기본적인 기술은 알고 있어야 한다고 생각합니다. 디자인 패턴은 책에 자세히 설명하고 있기 때문에 기본적인 자바스크립트만 알고 있다면 책의 전반적인 내용은 충분히 학습할 수 있다고 생각합니다. 하지만 Chpater 12부터  리액트 디자인 패턴을 학습할 때는 리액트의 기본적인 사용 방법을 익힌 후에 학습하면 좋을 것 같습니다.

책은 총 15개의 Chapter로 구성되어 있는데 크게 3부분으로 나누어 볼 수 있을 것 같습니다.

Chapter 1 ~ 6까지는 해당 책의 기초적인 디자인 패턴과 자바스크립트 소개 부분이라고 생각합니다. 
Chapter 1 ~ 3에서는 디자인 패턴 소개로 시작하여 패턴의 기본적인 이론을 학습할 수 있습니다. 
Chapter 4 '안티패턴'에서는 안티패턴의 정의와 자바스크립트 안티 패턴을 확인할 수 있습니다. 
Chapter 5 '최신 자바스크립트 문법과 기능' 에서는 ES6 등 최신 자바스크립트의 기능을 확인할 수 있습니다. 
Chapter 6 '디자인 패턴의 유형'에서는 생성 패턴, 구조 패턴, 행위 패턴을 확인할 수 있으며 디자인 패턴의 유형을 전체적으로 살펴볼 수 있습니다.

Chapter 7 ~ 11까지는 자바스크립트 디자인 패턴과 자바스크립트의 고급 기술을 학습할 수 있는 부분이었습니다.
Chapter 7 '자바스크립트 디자인 패턴' 에서는 생성자 패턴, 모듈 패턴, 노출 모듈 패턴, 싱글톤 패턴, 프로토타입 패턴, 팩토리 패턴, 구조 패턴, 퍼사드 패턴, 믹스인 패턴, 서브클래싱, 믹스인 등 책에 언급한 20개 이상의 패턴을 확인할 수 있고 각 패턴의 장단점을 확인할 수 있습니다. 해당 패턴을 활용할때 해당 패턴의 장점, 단점을 확인한다면 프로그래밍 구현에 많은 도움이 될 거라고 생각합니다.
Chapter 8 '자바스크립트 MV* 패턴' 에서는 MVC 패턴에서 시작하여 MVP 패턴, MVVM 패턴을 확인해 볼 수 있습니다. 기본적으로 MVC 패턴을 활용하기는 하지만 이번에 공부하면서 MVP, MVVM 패턴도 확실히 무엇인지 알게 되었습니다.
Chapter 9 '비동기 프로그래밍 패턴'에서는 async/await, Promise 기술을 확인할 수 있으며 패턴을 활용하여 async/await, Promise를 좀더 고급스럽게 사용하는 방법을 학습할 수 있었습니다. 해당 내용은 업무에서 활용할 수 있을 정도로 자바스크립트 소스 내용도 훌륭하였고 가장 재미있게 학습한 부분이었습니다.
Chapter 10 '모듈형 자바스크립트 디자인 패턴'에서는 AMD, CommonJS 기술을 확인할 수 있는데 언어적 특성 때문에 제 자신에게는 조금 이해가 가지 않았던 부분이었던 것 같습니다.

Chapter 12 ~ 14까지는 리액트가 무엇인지 그리고 리액트에서 사용하는 패턴인 렌더링 패턴을 설명하고 있습니다. 그리고 리덕스, Hooks 등의 기술을 확인할 수 있습니다. 리액트를 알고 있다면 해당 장을 통해 리액트에 디자인 패턴을 이용하여 더 나은 기술적 지식을 학습할 수 있을 거라 생각합니다.

"자바스크립트 + 리액트 디자인 패턴" 책의 장점은 아래와 같습니다.
1. 여러 디자인 패턴을 학습할 수 있습니다.
2. 디자인 패턴의 장단점을 명확히 확인할 수 있습니다.
3. 자바스크립트의 고급 기법을 학습할 수 있습니다.
4. 리액트의 디자인 패턴 기법 및 구현 방법을 확인할 수 있습니다.
자바스크립트로 핵심을 상세히 설명하고 있으며 자바스크립트 소스 예제를 통해 해당 디자인 패턴 및 기술을 어떻게 활용할 수 있는지 쉽게 확인할 수 있었습니다.
책의 예제 자체가 어렵지 않고 핵심을 잘 설명하고 있어서 조금만 수정한다면 업무에 쉽게 적용할 수 있는 실용적인 예제가 많았던 것 같습니다.

마지막으로 예전에 공부했을 때는 디자인 패턴이 상당히 어렵게 느껴지고 활용하기가 어려웠는데 "자바스크립트 + 리액트 디자인 패턴" 책을 통해서 디자인 패턴을 어렵지 않게 쉽게 학습할 수 있었던 것 같습니다. 업무에 활용하는 것뿐만 아니라 자바스크립트 예제 및 내용 정리가 잘되어 있어서 학습하기가 편했습니다.

"자바스크립트 + 리액트 디자인 패턴" 책은 다음과 같이 추천합니다:
1. 디자인 패턴을 공부하시는 분
2. 자바스크립트의 좀 더 고급 기술을 공부하고 싶은 분
3. 리액트의 디자인 패턴을 적용하려는 분
이러한 목적을 가진 분들이라면 "자바스크립트 + 리액트 디자인 패턴" 책을 추천합니다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다. 

이 책은 보통의 디자인 패턴 책들과 다르게 앞장에서 스스로 생각해 볼 거리들을 많이 던져줍니다.

1장에서는 디자인 패턴을 개념적으로 어떻게 정의하는지 설명합니다. 디자인 패턴을 그냥 받아들이던 저에게 패턴에 대해 생각해 볼 수 있는 질문을 던질 수 있었습니다. 그리고 2장과 3장에서는 좋은 패턴은 어떤 특성을 가지는지 설명합니다. 수없이 탄생하는 패턴들로부터 어떤 패턴이 살아남아 우리가 공부하고 있는지, 그리고 왜 그 패턴이 살아남았는지에 대해 생각해 볼 수 있었습니다. 4장에서는 우리가 피해야 할 안티 패턴을 제공해 좋은 패턴과 비교해볼 수 있었습니다. 5장에서는 최신 자바스크립트 모듈과 클래스 문법을 배웁니다. 그리고 이를 바탕으로 11장까지 디자인 패턴을 배우고 적용해보는 실습을 진행합니다. 12장부터는 리액트 디자인 패턴을 배웁니다. 고차 컴포넌트 패턴으로 시작해서 Hooks 패턴으로 진행하면서 기존 패턴의 문제점은 이후에 나오는 패턴이 어떻게 해결하는지를 배울 수 있었습니다. 또한, 로더블 컴포넌트, PRPL 패턴 등 리액트 애플리케이션의 성능도 챙길 수 있는 방법들을 배웠습니다. 실용적인 팁들이 많이 나와서 좋았습니다. 예를 들어, preload를 사용하는 것까진 알고 있었는데 FCP 또는 LCP에 필요한 리소스의 로딩이 지연되는 것과 트레이드 오프라는 것을 생각해야 한다는 것을 배웠습니다.

"한빛미디어 < 나는리뷰어다 > 활동을 위해서 책을 제공받아 작성된 서평입니다."

자바스크립트와 리액트 디자인 패턴에 대해 학습할 수 있는 책이다.

자바스크립트를 다루지 않은 기간이 꽤 오래 되어서 걱정했는 데, 디자인 패턴을 개략적으로 분류해서 설명하고, 쉬운 예제를 통해 자바스크립트를 잘 모른다고 해도 이해하기 쉽도록 쓰여져 있다.

자바 백엔드를 주로 다루었기 때문에 Gof 의 디자인 패턴에는 익숙한 데, 이를 자바스크립트로 어떻게 풀어내는 지를 학습할 수 있어 재미있게 책을 읽을 수 있었다.

각 패턴의 장/단점에 대해서도 설명해주기 때문에 단순히 패턴에 대한 학습보다는 실무에서 어떻게 적용해볼 지 고민해볼 수 있는 점이 좋다.

특히나 의존성 관리에 관한 장에 관한 내용(10~11장)은 어떤 언어를 다루던 간에 필요한 부분이라 생각된다.

전체적으로 잘 쓰여져있고 부담스럽게 두껍지 않은 들고다니면서 보기 좋은 책이다.



프론트엔드 개발자로서 '자바스크립트 + 리액트 디자인 패턴'이라는 책을 읽으면서,

처음에는 디자인 패턴이라는 주제가 워낙 흔하게 다뤄져 왔기 때문에 크게 기대하지 않았습니다.

'디자인 패턴'이라는 용어만 들어도 어느 정도 예상 가능한 내용일 것이라고 생각했기 때문입니다.

그러나 책을 읽어나가면서 제 예상은 완전히 뒤집혔습니다.

이 책은 기존의 패턴 관련 서적과는 다르게, 자바스크립트와 리액트라는 현대적인 개발 환경에 맞춰

디자인 패턴을 새롭게 해석하고 적용하는 방법을 제시하고 있었기 때문입니다.

책의 초반부는 예상대로 GoF의 디자인 패턴을 소개하며 시작되었지만,

저자가 자바스크립트의 비동기 처리와 리액트의 컴포넌트 기반 아키텍처에서 이러한 패턴들을 어떻게 효과적으로 활용할 수 있는지

구체적인 예제를 통해 설명하면서, 이 책의 강점이 드러났습니다.

자바스크립트의 비동기적 특성은 다른 언어들과는 다른 도전과 기회를 제공하는데, 이 책은 그런 특성을 잘 활용하는 방법을 가르쳐주고 있습니다.

리액트의 렌더링 과정과 패턴 적용 방법에 대한 설명도 실무에서 바로 활용할 수 있는 실용적인 조언들로 가득했습니다.

특히, MVC에서 MVVM으로 이어지는 소프트웨어 아키텍처 패턴의 발전을 설명하는 부분에서는,

어떻게 이 패턴들이 시간에 따라 변해왔고, 각각의 패턴이 특정 문제를 해결하는 데 어떻게 기여했는지를 잘 보여줍니다.

이 책은 단순히 개념적 설명에 그치지 않고, 실무에서 유지보수성과 확장성을 고려한 실제적인 코드 구현 방법을 제시합니다.

또한, 최근 프론트엔드 개발자에게 많은 인기가 있는 개념이자 반드시 알아야하는 개념인 CSR(Client-Side Rendering)과

SSR(Server-Side Rendering)에 대한 설명도 매우 유익했습니다.

'자바스크립트 + 리액트 디자인 패턴' 책은 리액트의 기본 개념인 Props와 Hooks에서부터 시작해서, CSR과 SSR의 장단점과 실무에서의 활용 방법까지, 매우 실용적으로 설명하고 있습니다. 이러한 내용은 최신 트렌드를 반영하고 있어,

저 같은 프론트엔드 개발자들에게는 매우 도움이 되는 부분이었습니다.

결론적으로, '자바스크립트 + 리액트 디자인 패턴'은 기존의 패턴 책들과는 확연히 차별화된 방법을 취하고 있는 것 같습니다.

자바스크립트와 리액트를 사용하는 개발자들이 실무에서 즉시 활용할 수 있는 실용적인 지식과 새로운

인사이트를 제공해주는 훌륭한 참고서입니다. 이 책은 이미 많은 디자인 패턴 서적을 읽어본 개발자들에게도

신선한 관점과 적용 방안을 제시해줄 수 있을 거라고 생각합니다.

"한빛미디어 <나는리뷰어다> 활동을 위해 제공받은 도서로 작성된 서평입니다."



읽게 된 계기

최근 웹 개발의 복잡성이 점점 증가하면서, 유지보수가 쉽고 효율적인 코드를 작성하는 것이 중요해졌습니다. 특히, 다양한 기능이 결합된 대규모 리액트 애플리케이션을 다루다 보면 구조적인 문제와 성능 이슈가 발생하기 쉽습니다. 이러한 상황에서 코드의 품질을 높이고, 모범 사례를 바탕으로 한 효율적인 패턴을 익히고자 『자바스크립트 + 리액트 디자인 패턴』이라는 책을 읽게 되었습니다. 이 책은 웹 개발에서 자주 접하는 문제들을 해결하기 위해 다양한 디자인 패턴을 소개하고, 자바스크립트와 리액트의 최신 트렌드를 반영하고 있다는 점에서 큰 매력을 느꼈습니다.

책, 저자 소개

『자바스크립트 + 리액트 디자인 패턴』은 자바스크립트와 리액트에 기반한 웹 애플리케이션 개발에서 사용할 수 있는 다양한 디자인 패턴을 다루고 있는 책입니다. 책은 기초적인 디자인 패턴의 개념부터 고급 주제에 이르기까지 체계적으로 설명하며, 실무에서 자주 사용되는 사례들을 중심으로 구성되어 있습니다. 이 책은 최신 자바스크립트 문법과 기능, 그리고 리액트의 발전된 구조와 패턴을 다루고 있어, 초보 개발자부터 숙련된 개발자까지 모두에게 유용한 가이드가 될 것입니다.

저자는 이 책을 통해 복잡한 웹 개발 환경에서 자바스크립트와 리액트를 효율적으로 사용하는 방법을 제시하고자 합니다. 그가 제시하는 디자인 패턴들은 단순한 코드의 반복을 피하고, 구조적이고 유지보수하기 쉬운 코드를 작성하는 데 도움을 줍니다. 책의 저자는 자바스크립트와 리액트의 강력한 기능을 충분히 활용할 수 있도록 하는 것을 목표로 하고 있으며, 특히 최신 웹 개발 모범 사례와 패턴을 체계적으로 이해하고 적용할 수 있도록 독자에게 안내합니다.

저자의 집필 의도 및 책의 핵심 키워드 요약

저자는 이 책을 통해 독자들에게 다음과 같은 핵심 메시지를 전달하고자 합니다:

1. 디자인 패턴의 중요성: 유지보수와 확장성이 뛰어난 코드를 작성하기 위해서는 디자인 패턴을 이해하고 활용하는 것이 필수적입니다.
2. 최신 자바스크립트 및 리액트 기능 활용: 모듈 시스템, 동적 가져오기, 서버 사이드 렌더링 등 최신 웹 기술들을 활용하여 최적화된 웹 애플리케이션을 개발하는 방법을 제시합니다.
3. 실무 중심의 적용 가능성: 이론에 그치지 않고, 실무에서 바로 적용할 수 있는 패턴과 모범 사례들을 소개하여 개발자의 실력을 한층 높일 수 있도록 돕습니다.
4. 안티 패턴의 중요성: 흔히 발생하는 실수들을 피하고, 더욱 견고한 코드를 작성하기 위해 알아두어야 할 안티 패턴들도 함께 다룹니다.

핵심 키워드로는 디자인 패턴, 자바스크립트, 리액트, 코드 스플리팅, 서버 사이드 렌더링, 안티 패턴, 고차 컴포넌트, 리액트 Hooks, 비동기 프로그래밍 등을 꼽을 수 있습니다.

책에 대한 평가

『자바스크립트 + 리액트 디자인 패턴』은 자바스크립트와 리액트로 개발하는 데 있어 필요한 핵심적인 패턴들을 잘 설명해주는 실용적인 책입니다. 특히, 최신 트렌드를 반영한 다양한 패턴들을 자바스크립트와 리액트에 효과적으로 적용하는 방법을 체계적으로 다루고 있다는 점에서 큰 강점을 가지고 있습니다. 책에서 소개하는 내용들은 실무에서 자주 발생하는 문제를 해결하는 데 도움을 주며, 독자가 더 나은 코드를 작성할 수 있도록 돕습니다.

또한, 디자인 패턴을 사용하는 것의 장점뿐만 아니라 안티 패턴을 피하는 방법까지 다루고 있어, 단순히 패턴을 배우는 것 이상의 깊이 있는 학습을 제공합니다. 특히, 비동기 프로그래밍 패턴과 최신 리액트 패턴을 다루는 부분은, 실제 웹 개발에서 접하는 복잡한 문제를 해결하는 데 큰 도움이 됩니다.

다만, 디자인 패턴에 대한 기본적인 이해가 없는 독자에게는 다소 난이도가 높을 수 있습니다. 이 책을 최대한 활용하기 위해서는 어느 정도 자바스크립트와 리액트에 대한 사전 지식이 필요할 것입니다.

개인적인 적용점

이 책을 통해 배운 디자인 패턴을 실제 프로젝트에 적용하면서 느낀 것은, 구조적인 코드를 작성하는 것이 얼마나 중요한지 다시 한번 깨닫게 되었다는 점입니다. 특히, 리액트 애플리케이션에서 상태 관리와 성능 최적화에 큰 도움이 되는 패턴들을 실무에 적용해 보니 코드의 가독성과 유지보수성이 크게 향상되었습니다.

또한, 서버 사이드 렌더링과 코드 스플리팅 같은 패턴들은 성능 개선에 있어 실질적인 차이를 만들어냈습니다. 앞으로도 이 책에서 소개된 다양한 패턴들을 적극 활용하여, 보다 효율적이고 견고한 웹 애플리케이션을 개발하는 데 힘쓸 계획입니다.

결론

『자바스크립트 + 리액트 디자인 패턴』은 자바스크립트와 리액트를 사용하는 모든 개발자에게 필수적인 지침서입니다. 복잡한 웹 애플리케이션을 구조화하고 최적화하는 데 필요한 패턴들을 명확하게 설명해주며, 실무에 바로 적용할 수 있는 유용한 내용을 제공합니다. 최신 웹 개발 모범 사례를 배우고 싶다면, 이 책을 통해 더욱 효율적이고 견고한 코드를 작성하는 방법을 익혀보시길 권장합니다.

    "한빛미디어 <나는리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

출처: https://patiencelee.tistory.com/1192 [PatienceLee:티스토리]



디자인 패턴과 관련된 책은 개발 연차가 올라가거나, 개발 실력을 더욱 개선하고자 고민할 때 읽게 되는 책이다. 본인도 디자인 패턴의 교과서라고 불리는 'GoF의 디자인 패턴'을 가지고 있지만, 수학책을 읽는 것처럼 책도 어렵고, 내용도 어려워서 아직 20%도 못 읽었다. 몇년째 책장에 꽂혀서 내가 프로그래밍 하는 것을 지켜보면서 굉장히 한심스럽게 생각하고 있으리라 짐작된다. ㅎㅎ

최근의 Frontend는 자바스크립트와 리액트가 선점할 것으로 예상된다. 챗GPT가 가장 잘하는 것도 자바스크립트, 파이썬이고, 클로드도 리액트를 굉장히 잘 한다고 알려져 있다.

저 처럼 자바스크립트와 리액트에 관심이 많으면서, 디자인 패턴을 배우고 싶은 분에게 이 책을 추천한다.

책에서 다루는 내용은 최신(모던, ES6+) 자바스크립트와 디자인 패턴, 리액트이므로, 현재 Frontend를 담당하거나 목표로 하시는 분, 자바스크립트를 알고, 디자인 패턴을 내재화 시키고 싶은 분, 리액트 입문자, 자바스크립트 입문자에게도 추천한다.

이 책은 전체 15개 장으로 구성되어 있으며. 내용은 전통적인 디자인 패턴, 자바스크립트 디자인 패턴, 리액트 디자인 패턴순으로 다룬다.

세부 내용을 살펴보면,

CHAPTER 1 '디자인 패턴 소개'에서는 디자인 패턴의 역사와 프로그래밍에서 사용되는 패턴의 특징과 장점, 활용 사례를 설명하고,

CHAPTER 2 '패턴성 검증, 프로토 패턴 그리고 세 가지 법칙'은 패턴이 포함해야할 구성요소에 관해 설명한다,

CHAPTER 3 '패턴 구조화 및 작성'에서는 디자인 패턴의 구조와 모범 패턴, 패턴을 작성하는 방법을 설명하고,

CHAPTER 4 '안티 패턴'은 안티 패턴의 정의와 자바스크립트에서 안티 패턴의 예시를 알아본다.

CHAPTER 5 '최신 자바스크립트 문법과 기능'에서는 표준화된 ECMAScript2015(ES215), ES6의 최신 문법과 기능을 소개하고,

CHAPTER 6 '디자인 패턴의 유형'은 전통적인 디자인 패턴(GoF의 디자인 패턴)의 분류에 관해 알아본다.

CHAPTER 7 '자바스크립트 디자인 패턴'에서는 자바스크립트의 전통적인 디자인 패턴과 특화된 패턴을 사례로 알아보고,

CHAPTER 8 '자바스크립트 MV*패턴'은 MVC, MVP, MVVM 아키텍터 패턴에 관해 역사와 개념, 차이점을 설명한다.

CHAPTER 9 '비동기 프로그래밍 패턴'에서는 비동기 프로그램의 개념과 비동기 프로그래밍의 다양한 패턴에 관해 알아보고,

CHAPTER 10 '모듈형 자바스크립트 디자인 패턴'은 자바스크립트 코드의 로딩과 관련된 라이브러리와 패턴을 알아본다.

CHAPTER 11 '네임스페이스 패턴'에서는 대규모 자바스크립트 애플리케이션에서 사용하는 다양한 네임스페이스 패턴을 살펴보고,

CHAPTER 12 '리액트 디자인 패턴'은 리액트의 소개과 개념, 리액트에서 사용되는 패턴을 알아본다.

CHAPTER 13 '렌더링 패턴'에서는 CSR, SSR등의 렌더링 관점에서 사용되는 패턴을 살펴보고,

CHAPTER 14 '리액트 애플리케이션 구조'는 리액트의 파일 구조 패턴과 장단점을 알아본다.

CHAPTER 15 '결론'에서는 추천하는 도서와 저자의 사이트, 블로그를 소개하면서 마무리한다.

각 장은 먼저 주제와 관련한 전체적인 개념과 필요성을 설명하고, 이어서 코드와 그림을 덧붙여 상세하게 설명한다. 후미에는 설명한 패턴의 장점과 단점, 활용법을 알려주고, 마치며에서는 이번 주제가 개발에서 도움이 된 부분, 다음 장에서 배울 내용으로 마무리한다.

책에서 나온 예제는 실무에서 사용할 수 있을 정도로 실용적인 예제가 많고, 패턴이 어떤 방식으로 사용되는지 알기 쉽게 코드로 설명한다.

책을 읽고 난 이후 공감이 된 저자의 말을 인용하면서 마무리한다.

개발자는 대개 어느 프로젝트에나 어울리는 최고의 패턴이 있는지 궁금해합니다. 하지만 최고의 패턴이 무엇인지에 대한 정답은 없습니다. 각 코드와 애플리케이션마다 요구하는 부분이 다를 수 있기 때문입니다. 패턴이 실질적인 구현에 도움이 되는지를 고려해야 합니다. <중략>

디자인 패턴에 대해 정확히 알고 사용할 때를 잘 파악하게 된다면 애플리케이션 아키텍처에 올바른 디자인 패턴을 적용하기 수월해진다는 뜻입니다.

Chapter 07 자바스크립트 디자인 패턴, p72

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

디자인 패턴하면 개인적으로 헤드퍼스트 시리즈가 가장 먼저 떠오르는데요. 헤드퍼스트의 디자인 패턴은 자바 코드로 쓰여 있어서 요즘(?) 코딩을 배우는 사람이 보기엔 살짝 불편하죠~

이 책은 디자인 패턴을 자바스크립트 언어로 설명하고 있어서 웹 개발자가 보기에 편하구요. 코드만 JS로 바꿔 쓴 게 아니라 최신 웹 개발 사례를 함께 넣어서 실무에 적용하기에 용이합니다.

별도 챕터를 할애해 리액트 디자인 패턴도 깊이있게 다뤘습니다.

디자인 패턴은 여러 번의 시행착오를 통해 증명된 문제 해결 방법론입니다. 책 '자바스크립트 + 리액트 디자인 패턴'은 이론적인 설명에 그치지 않고, 실무에서 자주 사용하는 20가지 이상의 패턴을 구체적인 예제와 함께 소개합니다.

예를 들어, 모듈화 패턴을 통해 코드의 가독성을 높이고 유지보수를 쉽게 만드는 방법이나, 관찰자 패턴을 통해 상태 관리의 복잡성을 줄이는 방법 등을 배울 수 있죠.

'자바스크립트 + 리액트 디자인 패턴'에는 리액트 Hook을 중심으로 한 최신 기술을 다루고 있습니다. Hook은 리액트 개발에 있어서 필수적인 요소로, 컴포넌트 상태 관리와 재사용성을 높이는 데 중요한 역할을 합니다.

이 책에서는 Hook의 기본 개념부터 실무에서 어떻게 활용할 수 있는지까지 깊이 있게 설명하고 있어, 리액트를 처음 배우는 초보자에게도 큰 도움이 됩니다.

또한, 애플리케이션의 성능 최적화와 관련된 내용도 상세하게 다룹니다. 성능은 사용자 경험에 직결되는 중요한 요소인데, 이 책에서는 다양한 성능 패턴을 소개하며 초보자도 쉽게 이해할 수 있도록 설명합니다.

초보 웹 개발자인가요? ---> 구매 ㄱㄱ
코딩할 때 실수를 반복적으로 하나요? ---> 구매 ㄱㄱ
팀원들과 의사 소통을 원활히 하고 싶나요? ---> 구매 ㄱㄱ

개발자로서 한 단계 성장을 원하는 사람이라면 디자인 패턴은 필수 지식이라고 생각합니다.

즉흥적으로 코드를 작성하거나 인터넷에서 컨트롤 c+v로 코드를 작성하는 습관에서 벗어나고자 한다면 '자바스크립트 + 리액트 디자인 패턴'을 구매해서 읽어보시기 바랍니다.

이 책을 통해 코드를 보다 구조적으로 작성하는 방법을 익히고, 실무에서 바로 활용할 수 있는 지식을 얻을 수 있을 거라고 생각합니다. 정말 괜찮은 책! 강추!

이 책은 다양한 디자인 패턴을 자바스크립트와 리액트 환경에서 어떻게 적용할 수 있는지를 설명하고 있다. 모듈, 믹스인, 관찰자, 중재자 패턴을 비롯해, 각각의 패턴이 어떻게 동작하는지와 실제로 적용할 수 있는 코드 예제를 통해 체계적으로 학습할 수 있도록 구성되어 있다. 또한 코드 스플리팅과 서버 사이드 렌더링(SSR) 같은 최신 렌더링 기법과 성능 최적화 방법도 다루고 있어, 실무에 바로 활용할 수 있는 지식을 제공한다.

이 책의 또 다른 장점은 안티 패턴을 함께 다루고 있다는 점이다. 흔히 발생하는 실수를 피하기 위해 알아야 할 안티 패턴들을 소개하고, 이를 해결할 수 있는 방법을 설명한다. 이를 통해 독자들은 더 나은 코드를 작성하고 유지보수성을 높일 수 있는 실질적인 조언을 얻을 수 있다. 뿐만 아니라, 책에서는 비동기 프로그래밍 패턴, 모듈화 기법, 리액트의 최신 기능들을 포함해, 개발자들이 더 효과적으로 코드를 작성하고 성능을 최적화할 수 있도록 돕는 다양한 주제들을 포괄적으로 설명하고 있다.

총 20가지 이상의 디자인 패턴을 다루는 이 책은 자바스크립트와 리액트에 대한 깊이 있는 이해를 원하는 개발자들에게 꼭 필요한 자료다. 각 패턴의 장단점을 분석하고 실무에서의 활용 사례를 제시함으로써, 독자들이 실질적인 문제를 해결하는 데 필요한 도구와 지식을 제공하고 있다. 이 책을 통해 더 나은 웹 개발자가 되기 위한 중요한 지침을 얻을 수 있을 것이다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

한번 작성한 코드는 계속된 수정으로 인해 언젠가 꼭 구성을 바꾸게 되면서 많은 시간을 잡아먹는다. 뿐만 아니라 브라우저 성능 최적화때문에도 자주 수정하고는 하는데 이럴 때마다 디자인 패턴의 소중함이 자주 떠오른다. 디자인 패턴이 중요하지만 체화하는 시간이 너무 길다고 생각해 코드 작성할 때마다 각 패턴의 장단점을 비교하고 예시를 보고 수정하고는 하는데 때론 이게 더 시간이 많이 든다고 생각한다. 좋은 기회로 이 책을 통해 디자인 패턴의 장단점을 깊게 공부해볼 수 있었다.

책에는 패턴 구조화 및 작성 방법, 안티 패턴 파악 방법, 디자인 패턴의 유형, 자바스크립트 MV패턴, 비동기 프로그래밍/모듈형 자바스크립트 디자인/네임스페이스/리액트 디자인/랜더링 패턴과 리액트 애플리케이션 구조 구축 방법이 담겨있다.

책에 들어있는 설명은 간단하게 핵심만 들어있지만 세세하게 경우의 수를 함수로 구현하여 알려준다.

그중에서 자바스크립트 MV* 패턴들의 차이점을 상세하게 알려주고 코드를 통해 각각의 구조와 장단점을 알 수 있어서 헷갈리는 부분을 해소해서 마음에 들었다.

특히 마지막 결론 부분엔 더 깊게 공부해볼 수 있도록 참고 문헌과 웹사이트 등을 알려줘서 독자에게 편의를 제공해주고 있다.

​

책에는 자바스크립트와 리액트의 기초(클래스/인스턴스 등)는 들어있지 않기 때문에 먼저 공부해보고 책을 보는 것을 추천하고 싶다.

​

"한빛미디어 <나는리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

​

#한빛미디어 #나는리뷰어다 #자바스크립트 #리액트 #디자인패턴 #에디오스마니

드디어! 디자인 패턴 갈증을 풀어줄 책이 나왔다! <자바스크립트 + 리액트 디자인 패턴은> 바닐라 자바스크립트부터 리액트에서 사용되는 패턴까지 알차게 담았다. 이전부터 디자인 패턴에 대해 알아두고 싶어 검색창을 기웃거렸지만, 자바 기반의 설명들이 대부분이었기 때문에 자바스크립트 예시에 대한 아쉬운 부분들이 많았다. 그래서인지 자바스크립트와 리액트가 같이 묶여 나온 이 책이 정말 반가웠다.

​

책은 차근차근 단계를 밟아가며 디자인 패턴에 대해 알려준다. 디자인 패턴이 어디에서 시작되었는지, 디자인 패턴이 되려면 어떤 법칙이 있어야 하는지, 디자인 패턴의 유형과 자바스크립트의 20가지 디자인 패턴 설명과 사례, 빠져서는 안되는 MV* 패턴 등 흐름을 끊지 않고 독자들이 읽을 수 있게 노력한 흔적이 보인다. 여기에 자바스크립트 디자인 패턴으로 들어가기 직전에는 '최신 자바스크립트의 문법과 기능 챕터'을 할애해 독자들이 어느정도 최신 자바스크립트 문법을 알고 들어갈 수 있도록 한다.

​

개인적으로 책의 장점 중 하나를 리액트의 디자인 패턴과 렌더링 패턴을 잘 정리해서 소개해줬다는 점을 꼽고 싶다. 조금 부끄럽지만 리액트 파트를 읽으며 실무에서 사용했던 것들이 대부분 리액트 패턴으로 분류 된다는 걸 알게 되었기 때문이다. (하지만 이를 깨닫고 좀 더 명확하게 분류할 수 있게 되었다는 점에서 이 책이 독자에게 정보를 전달하는 매개체로써 제대로 기능했다고 생각한다.) 렌더링 Props 패턴, Hook 패턴 등 리액트를 사용한다면 알아야 할 패턴들을 꽉꽉 담아줘서 여기저기 흩어져 있던 정보들을 정리하는데 많은 도움이 되었다. 특히 SSG (not 렌더스 yes 렌더링)때문에 관심을 갖고 있었던 Astro 프레임워크가 아일랜드 아키텍처 기반이라는 걸 알게 되기도 했다.

자바스크립트 디자인 패턴과 리액트 디자인 패턴을 한꺼번에 알고 싶은 독자들에게 해당 책을 추천한다. 하지만 자바스크립트와 리액트를 어느 정도 알고 입문하는 게 좋을 듯 하다. 자바스크립트 파트는 클래스와 인스턴스, 클로저 등의 개념을 어느 정도 잡고 보는 것이 훨씬 이해가 빠르게 되고 리액트 또한 리액트 라이프 사이클 등을 알고 온다면 좀 더 흥미롭게 책을 읽어나갈 수 있을 것이다. 책의 마지막 부분에서 작가가 했던 문장을 끝으로 서평을 마무리 해본다.

​

여러분의 자바스크립트 여정에 행운이 있기를!

<자바스크립트 + 리액트 디자인 패턴> p.372

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

패턴으로 들여다보는 자바스크립트와 리액트라고 할 수 있습니다.
디자인 패턴을 수박 겉핥기 정도로 알고 있습니다. 관련 글을 보거나 설명을 들으면 어렴풋이 기억을 떠올리는 정도입니다.
'GoF의 디자인 패턴' 책이 있지만 '봐야 하는데'라는 생각만 하고 고이 모셔두고 있습니다.
자바스크립트와 디자인 패턴이 접점이 있을까라는 생각으로 보기 시작했습니다.

자바스크립트에서 유용한 디자인 패턴을 주로 다룹니다.

디자인 패턴 자체보다 자바스크립트에서 디자인 패턴에 집중하고 있습니다.
디자인 패턴을 하나씩 파고들지 않습니다. 디자인 패턴 각각을 자바스크립트로 풀어내려고 하지 않습니다.
주로 자바스크립트에서 활용도가 높은 디자인 패턴만을 골라서 알려줍니다.
이런 패턴을 다루다 보니 비슷한 용도로 사용하는 패턴이 나오게 됩니다. 이런 경우 각 패턴을 비교하고 차이점이 무엇인지 명확히 설명해 줍니다.

자바스크립트에서 사용하는 패턴을 알 수 있습니다.

'GoF의 디자인 패턴'만을 다루지 않습니다.
자바스크립트에서 사용하는 다양한 프로그래밍 방식을 패턴이라는 큰 주제 아래, 몇 가지로 나누어 놓았습니다.
MV*, 비동기, 모듈, 네임스페이스
아마 역할을 분담하면 생산성이 높아지고 유지보수가 쉬워진다는 정도로만 알고 넘어가는 경우가 많으리라 봅니다.
각 패턴이 나온 이유와 특성을 조목조목 설명합니다. 어떻게 구성하고 활용할 수 있는지 까지 알려줍니다.
잘 정리되어 있고 쉽게 접할 수 없는 부분이라 생각합니다.

리액트에 있는 패턴을 알 수 있습니다.

리액트 또한 다양한 패턴을 사용하고 있음을 알 수 있습니다.
리액트가 가진 장점이 있게 하는 패턴과
리액트가 가진 단점을 극복하기 위한 패턴을 알려줍니다.
리액트를 주로 사용하지 않기에 낯선 내용이 있었지만, 어떤 식으로 구성하며 주로 고민하는 문제들은 어떤 것이며 어떻게 풀어나가는지 어렴풋이 알 수 있었습니다.

반복되는 문제와 주제에 적용할 수 있는, 재사용 가능한 구조와 표현을 패턴이라고 했을 때,
자바스크립트와 리액트 애플리케이션을 이루고 있는 패턴들을 알 수 있습니다.
패턴이라는 눈으로 자바스크립트와 리액트를 다시 볼 수 있는 좋은 기회라고 생각합니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

지금 시점에 JavaScript의 중요성은 매우 크게 작용합니다.

대표 SPA 프레임워크로 리액트도 가장 많이 사용하는 기술입니다.

이 책에서는 디자인 패턴이라는 부분이 js에 대한 부분인지, react에 대한 부분인지도 궁금합니다.

일반적인 디자인패턴 말고 js에서 사용하는 조금은 다른 형태의 디자인 패턴인지도 확인해보려고 합니다.

■ 책 살펴보기

· 책의 저자분은 크롬 리더이자 구글러 입니다. 가장 많이 사용하는 js에 대해서 최고의 전문가 입니다.

· 이책의 제목으로는 1판이지만, 기존에 Learing Javascript Design Patterns이 1판이고 SPA프레임워크의 등장으로 이러한 부분도

    업데이트가 되면서 이책이 출간되었습니다.

· 기본적인 디자인 패턴 및 리액트에서도 사용하면 좋은 좋은 사례들로 구성되어 있습니다.
 

■ 패턴에 대해서 다시 한번 생각하게 remind합니다.

· 무조건 패턴을 적용하지 않으면, 좋은 코드가 아닐까요? 과연 좋은 패턴은 무엇일까요?

우리는 프레임워크를 사용하며서, 우리가 의도 하지 않았지만 자연스럽게 디지인 패턴을 사용하고 있습니다.

Spring, React등 의 프레임워크를 통해서 공급자 패턴, 팩토리, 프록시 패턴등을 자연스럽게 사용하고 있습니다.

우리가 유지보수성등을 고려해서 코드를 작성하였는데, 그러한 부분이 흔히 알려진 Gof의 디자인패턴중에 한가지를 구현한 것일수 있습니다.

· 책의 도입부에서 저자분이 생각하는 패턴에 대해서 설명하고 javascript에서의 디자인 패턴을 동일하게 적용 가능하지만,

최근의 js의 다양한 문법 및 SPA의 특성을 고려하여서 적용하기 좋은 디자인 패턴에 대해서 정의가 필요하다고 생각합니다.

· 프로토 패턴이라는 용어를 처음 접하였는데, 완전한 패턴이 아닐수 있지고, 몇가지 핵심 요소가 빠져있을수 있는 코드 이지만 향후 프로젝트에 도움이 될 유용한 패턴이라고 정의합니다.

· 안티패턴에 대한 정의도 다시 한번 remind합니다.

· 디자인 패턴의 유형

· 자주 사용하는 패턴에 대해서 다시 한번 정의하고 가는 내용 구성이 좋았습니다.
 

■ 자바스크립트를 활용한 패턴 적용하기

· ES2015 버전 이후부터는 JS을 이용해서도 생성자를 가진 클래스를 만들 수 있게 되었습니다.

예전에는 java처럼 생성자를 가진 방식으로 생성할수 없었습니다.

확실히 이러한 부분을 캐치업하는 것이 다른 언어와의 차이점이고, 이 책을 통해서 새로운 지원 문법을 확인하고

디자인 패턴을 잘 적용할수 있는 방법을 확인 해볼 수 있습니다.

· 지금은 잘 사용하지 않지만, 초기 자바스크립트에서 사용하는 다양한 방법도 함께 소개되어지고 

디자인 패턴으로 활용하는 방법도 기존코드와 현재 문법이 혼용되어 있는 환경에서 도움이 됩니다.

 - 객체 리터럴 표기법, 모듈 패턴, AMD 모둘, CommonJS모듈

· 싱글톤 패턴

Java에서는 쉽게 구현 개발이 가능한데, JS를 통해서는 어떠한 방식으로 구현을 해야 하는지 어려움이 있으실수 있습니다.

ES2015+에서는 전역 인스턴스를 생성하는 것을 구성할수 있고, 샘플 코드 및 구현 방법도 설명되어집니다.

이러한 부분이 이 책에서 다른 디자인 패턴책들과 다른 좋은 점이라고 생각합니다.

다른 책에서는 java, c 언어를 통해서 샘플이 있지만, 이책은 JS에 관점을 가지고 접근한 책이라서 활용도가 높은것 같습니다.

· P.162) AJAX기반의 Jquery 애플리케이션 결합도 낮추기

지금도 예전에 구축되어 있는 서비스에는 Jquery를 많이 사용하고 있습니다. IE를 지원하면서 모바일화면의 처리를 위해서

Jquery를 많이 사용하고 있는데 이러한 결합도를 줄이는 부분에 대해서도 관련 내용을 다르고 있습니다.

무조건 디자인패턴을 사용하자는 것이 아니고 적용시에 장/단점을 소개하고, 

선택지가 여러개 있는 경우 예를 들어 중재자 패턴 vs 퍼사드 패턴에 대해서 유사점을 궁금해 하고 추상화 하였지만, 미묘한 차이점등

우리가 고민해볼 만한 사항을 소개합니다.

· 자바스크립트의 MC* 패턴

웹개발시 많이 사용하는 MVC패턴을 많이 사용합니다.

MVC (모델 - 뷰 - 컨트롤러)

MVP (모델 - 뷰 - 프리젠터)

MVVM (모델 - 뷰 - 뷰모델)

등이 패턴이 있는데, 어떠한 차이점이 있으며, 전통적인 MVC패턴과 어떻게 다른지 비교해봅니다.

이러한 내용은 꼭 디자인 패턴에 한정 짓지 말고, 전체적인 개발의 흐름을 파악하기에도 좋은 내용입니다.

·비동기 프로그래밍 패턴

js에서는 블로킹, 논블로킹에 대해서 잘 알고 있어야 합니다.

비동기(async, await), 프로미스(promise)와 같은 자바스크립트 언어의 기능은 비동기 코드를 더 쉽게 작성하게 해줍니다.

다양한 방식으로 개발을 유연하게 할수 있는 방법을 안내합니다.
 

■ 리액트 디자인 패턴

· 12장에서는 리액트에 대해서 다룹니다.

리액트의 기본 개념을 다시 한번 설명을 간단히합니다.

 - 고차 컴포넌트

 - 랜더링 Props 패턴

 - 리액트 Hooks 패턴

 - 상태 Hook

 - 정적 가져오기

 - 동적 가져오기

 - 코드 스플리팅

 - PRPL(push render pre-cache Lazy-load) 패턴

 - 로딩 우선 순위

 - 리스트 가상화

이러한 다양한 관점으로 리액트에서 모듈화 및 패턴을 고민해야 하는 사항들이 설명되어 집니다.

· 랜더링 패턴

개발 방식이 많이 변경되다 보니, 이제 랜더링을 어디서 하는지 방향성에 대해서 다양한 개념이 도입되었습니다.

보통 요약된 단어로 CSR, SSR등의 이름으로 이야기를 하는데 아래와 같이 정의를 하고, js코드를 통해서 

예시를 통해서 이해하고 도입을 할수있는 내용으로 구성되어 있습니다.

다양한 관점으로 디자인 패턴을 설명하는데 자바스크립트 및 자바스트립트를 이용한 프레임워크등을 활용하기 위한

여러가지 기술 및 코드제공을 통해서 적적하게 조금 더 나은 방향으로 코드 및 아키텍처 방향을 설계할 수 있게

도움을 주는 책이며 추천합니다.

 리액트, Vue.js, 앵귤러와 같은 라이브러리와 프레임워크의 활용도가 높아짐에 따라 애플리케이션을 복잡하게 구현할 수 있게 되었다. 그에 맞추어 기존 자바스크립트의 디자인 패턴뿐만 아니라 각 프레임워크에서의 디자인 패턴을 활용할 수 있어야 했다. ‘자바스크립트+리액트 디자인 패턴’은 이러한 취지에 걸맞게 자바스크립트와 리액트에서의 디자인 패턴을 두루 볼 수 있게 제작되었다. 디자인 패턴이 개발된 배경부터 시작하여 20가지 이상의 디자인 패턴, 최신 웹 애플리케이션에서 빼놓을 수 없는 렌더링과 성능 패턴까지 전방위적인 내용을 다룬다.

 모듈, 관찰자, 중재자 패턴과 같은 전통적인 디자인 패턴보다는 프로미스, 비동기와 같은 새로운 패턴과 MVC, MVP, MVVM과 같은 아키텍처와 최신 프레임워크와의 호환성에 대해 중점을 둔다. 또, 리액트로 웹 애플리케이션을 구축하는데 필수적인 Hooks, 고차 컴포넌트, 렌더링 Props 패턴에 대해서도 엿볼 수 있다. 패턴에 대한 개념뿐 아니라 모범 사례도 제공되어 웹 애플리케이션을 개발하는 이상적인 방식에 대해서도 습득할 수 있다. 유지보수와 확장, 성능 개선에 대해서도 공부할 수 있는 기회를 얻게 될 것이다.

 공통 패턴을 구축하고 나면 코드를 체계화하는 데 도움이 된다. 또, 코드를 쉽게 이해할 수 있어 개발자 간의 소통이 원활해지는 효과도 있다. 과거의 문제 해결 방법을 차용하여 최적화된 방법을 도출할 수도 있다. 이토록 다양한 장점을 지닌 공통 패턴은 프레임워크나 상황에 무조건적으로 적용되진 않는다. 체계화에 도움이 될 뿐 설계 상의 모든 문제를 해결해 줄 수 없고 뛰어난 개발자의 역량을 대체할 수도 없기 때문이다. 유연한 사고를 가지며 공통 패턴을 활용하는 것이 설계와 개발에 큰 도움이 될 것이다.

 패턴은 소프트웨어 설계에서 반복되는 문제와 주제에 적용할 수 있도록 재사용이 가능한 템플릿을 의미한다. 디자인 패턴이 개발자들에게 유용한 이유는 검증된 방법, 재사용 가능성, 쉬운 이해, 개발 이슈 방지, 코드 양 축소 등이 있다. 종합적으로 개발에 투입되는 시간과 사고를 방지하고 개발 관련 소통을 원활하게 하는데 그 의의가 있다.

프로토 패턴이란 아직 패턴성 검증을 모두 통과하지 못한 미숙한 패턴을 의미한다. 운영 단계에서도 사용할 수 있는 좋은 패턴으로 간주하기 위해서는 몇 가지 특징에 부합해야 한다. 특징은 아래와 같다.

 - 특정 문제를 해결할 수 있다
 - 명쾌한 해결책이 없다
 - 확실한 기능만을 말한다
 - 관계를 설명한다

물론 위의 특징에 부합하지 못하는 경우더라도 상황에 따라 좋은 패턴으로 자리할 수 있다.

패턴을 작성한 이와 사용하는 이는 패턴의 사용 목적을 분명히 인지하고 있어야 한다. 그렇지 않다면 적절하지 못한 때에 패턴을 적용하는 경우가 발생할 수 있기 때문이다. 패턴 작성자는 패턴의 설계, 구현 방법 및 목적을 설명해야 한다.

 - 컨텍스트: 패턴이 적용되는 상황
 - 집중 목표: 패턴을 적용할 때 고려해야 하는 목표
 - 구성: 제시된 상황과 고려해야 하는 점들을 해결하는 구성

 첫 단계는 위의 세 가지 사항들을 정의하는 것이다. 이후 이름, 설명과 같이 구체적으로 정의를 시작한다. 패턴 작성자의 설명에 따라 사용하게 될 사람의 이해도도 높아질 것이다.

 디자인 패턴은 대표적으로 세 가지 유형으로 분류된다. 어떤 문제를 해결하는지가 분류의 기준이다. 생성 패턴은 주어진 상황에 적합한 객체를 생성하는 방법에 중점을 둔다. 구조 패턴은 객체의 구성과 각 객체 간의 관계를 인식하는 방법에 중점을 둔다. 행위 패턴은 시스템 내의 객체 간 커뮤니케이션을 개선하거나 간소화하는 방법에 중점을 둔다. 생성, 구조, 행위라는 세 가지의 대분류 아래에는 생성자, 팩토리, 추상, 싱글톤 등 상세 분류가 등장한다. 이 역시 특정한 목적에 따라 각기 존재하는 것이다. 이러한 하위 패턴들은 뒤에서도 특징과 예제 패턴으로 습득할 수 있다. 디자인 패턴의 개념들을 명확히 이해한 뒤에 차근차근 상세하게 파고들어간다.

✔️ 종합 평가
 - ‘자바스크립트+리액트 디자인 패턴’을 읽으며 가장 처음 받았던 인상은 구조화가 굉장히 잘 되어 있다는 점이었다. 디자인 패턴이라는 광범위한 개념을 설명한 뒤 그의 당위성을 설명한다. 그 이후 패턴의 유형과 하위 유형, 또 그 하위 유형에 대해 상세히 기술한다. 이러한 설명 구조 덕에 머릿속에 개념을 쉽게 정리해나갈 수 있었다.
 - 디자인 패턴은 1과 0으로 판단할 수 없다. 아키텍처를 그리는 것과 같이 완전한 진리가 존재하는 것이 아니므로 다양한 요소를 고려하여 유연하게 대처할 수 있어야 한다. 저자의 설명 뒤에 덧붙인 ‘NOTE’를 통해 유념해야 할 사항을 인지할 수 있었다.

 

"한빛미디어 <나는리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

책의 내용들이 아주 많기에 제가 책을 읽으면서 인상 깊었던 부분들만 소개하도록 하겠습니다.

가장 먼저 눈에 띈 부분은 .mjs 확장자에 대한 설명이었습니다.

.mjs는 모듈 파일과 기존 스크립트를 구분하기 위해 사용되는 모듈 전용 확장자라고 책에서 설명하고 있습니다.

최근 프로젝트에서 .mjs를 활용하여 모듈화 된 코드 구조를 유지하는 데 큰 도움이 되었던 경험이 있어,

이 설명에 깊은 공감을 했습니다.  .mjs의 사용이 코드 관리에 얼마나 긍정적인 영향을 미쳤는지 다시 한번 되새기게 되었습니다.

또한 책에서는 다양한 디자인 패턴을 MVC, MVP, MVVM 등으로 나누어 자세히 설명하고 있습니다.

특히, MVC와 MVVM 패턴은 세미나 발표 준비에 큰 도움이 되었습니다.

MVC 패턴은 애플리케이션의 구조를 명확히 하고,

MVVM 패턴은 데이터 바인딩과 상태 관리를 보다 효율적으로 할 수 있게 해주는 것입니다.

이 패턴들을 이해하는 것이 코드의 구조를 더욱 명확히 하고, 작동 원리를 이해하는데 큰 도움이 되었던 것 같습니다.

마지막으로, 이 책을 통해 Hooks에 대해 깊이 있는 이해를 하게 되었습니다.

리액트의 Hooks는 컴포넌트 상태 관리와 라이프사이클 메서드를 관리할 때 사용할 수 있는 함수입니다.

책에서는 Hooks의 기본 개념과 다양한 활용 방법을 소개하고 있으며, 이를 통해 함수형 컴포넌트에서 상태를 관리하고 부가적인 로직을 처리하는 데 있어 많은 도움을 받을 수 있었습니다.

특히, useState와 같은 상태 Hooks을 활용하여 코드의 복잡성을 줄이고, 컴포넌트로 변환하는 방법과 재사용성을 높이는 방법을 배울 수 있었습니다.

이번 "자바스크립트 + 리액트 디자인 패턴" 책을 통해 자바스크립트와 리액트의 디자인 패턴에 대해 깊이 알아갈 수 있었습니다.

이 책은 다양한 디자인 패턴과 모듈 시스템 등을 자세하게 설명하며, 다양한 예제들도 포함하고 있습니다.

특히, 코드의 가독성을 높이는 데 많은 도움이 되었으며, 리액트의 Hooks에 대한 이해도 크게 향상된것 같습니다.

자바스크립트와 리액트의 디자인 패턴에 대해 더 깊이 이해하고 싶으신 분들, 그리고 리액트 Hooks의 활용 방법을 체계적으로 배우고 싶은 분들께 이 책을 추천드리고 싶습니다.

감사합니다.

웹 프론트엔드 개발자로서, 코드의 효율성과 유지보수성을 높이기 위해 다양한 디자인 패턴에 대한 지식이 필요하다는 것을 절실히 느끼고 있었다. 자바스크립트는 매일 사용하고 있음에도 일정에 쫒기다보면 큰 버그 없이 돌아가는데에 의의를 두고 브라우저 성능 최적화는 후순위로 밀리기도해서 이런면에서 공부를 더 열심히 했으면 좋겠다는 생각에 책을 읽게 되었다. 리액트도 실무에서 안쓴지 오래되어서 최신스타일(?)을 좀 공부하고 싶은마음에 최근에 인강을 끊어서 수업을 듣고 있는지라 리액트 패턴들에 대한 내용도 담겨져 있는 이 책이 참 좋았다.

특히 자바스크립트의 여러 패턴들을 담고 있어서 좋았는데, MVC, MVVM 패턴은 사실 이미 쓰고 있음에도 정확한 정의를 머리속에 내리고 사용하고 있진 않은 패턴이라 예제와 설명을 통해 어느정도 머리속에 개념을 잡을 수 있는 것이 좋았다
최근에 업데이트를 맡은 프로젝트에서 기능들이 더 추가되고 비슷한 기능이 공통적으로 사용하는 페이지들이 많아지면서 작업하는 스크립트 코드들을 모듈형으로 바꿔볼지 고민하고 있었는데, 모듈형 패턴의 특징인 재사용성과 독립성을 높이는 모듈시스템을 어느 부분에서 사용하면 좋을지, 어떻게 쓰면 더 효과적일지 생각해 볼 수 있어서 좋았다. 예전 회사에서 node.js 사용할 때 모듈형으로 참 잘 만들었었는데 최근 프로젝트에서는 그렇게 작업하지 않아서 책을 보면서 전에 이렇게 작업했었을 때 이런점이 참 좋았었지 회상하기도 했다.

네임스페이스 패턴도 솔직히 이름만 들었을땐 뭐지? 했는데, 예제코드랑 설명보니깐 현재프로젝트에 너무 잘 사용하고있는 패턴이었다. 이름을 제대로 알지 못하고 사용하고 있었다니.. 조금 부끄럽기도 했고, 뭔가 새롭게 나오는 ECMAScript 스펙 공부할 생각만했지, 이런부분은 생각을 잘 안하고 산것 같아서 공부를 더 열심히 해야겠다는 생각도 들었다.  

자바스크립트와 리액트의 기초, 문법 공부하기 원하는 독자라면 이 책은 적합하지 않지만, 실무에서 여러사람들과 협업하며 사용하는 패턴들을 공부하고, 다양한 기능들이 복합적으로 구현해야하고, 최적화된 코드를 만들과 일관성을 유지하는 방법이 궁금한 프론트엔드개발자라면 이 책이 도움이 될 것 같다.

** 한빛미디어 서평단 <나는리뷰어다>활동을 위해서 책을 제공받아 작성된 서평입니다
 

"디자인 패턴"이라는 말은 건축분야에서 왔습니다. 유명한 건축가 인 "크리스토퍼 알렉산더"가 만든 "패턴언어"라는 개념이 그 시작이라고 할 수 있는데요. "재사용 가능한 구현방식"을 하나의 단어로 정리해서 사용하는 개념입니다. 이렇게 되면 구현 내용을 일일이 설명하지 않는다고 해도 서로 의사소통하기 편리하고 빠르게 일을 진행할 수 있게 될 테니까요.

1990년대 초반부터 이런 개념이 소프트웨어 개발 분야에 들어왔고, 1994년 출판된 <GoF의 디자인 패턴>을 시작으로 정말 어마어마한 "패턴"에 대한 책이 나오기 시작했습니다. 그리고, 약 30년이 지난 지금 시점에서 "디자인 패턴"은 보편적인 용어가 되었습니다.

이 책의 제목에도 "디자인 패턴"이라는 단어가 들어가 있어서, 살짝 시시콜콜한 무언가를 이야기하는 책이 아닐까 싶긴 했습니다. 지금까지 제가 읽은 "패턴"관련 책만 족히 열 권은 넘을 테니, 아마 대충 대충 훑어보게 되지 않을까 싶기도 했고요. 게다가 최근에 저는 "소프트웨어 성장"이라는 화두에 관심을 가지고 있기 때문에 다분히 건축메타포를 내포하는 것 같은 뉘앙스를 지닌 "디자인 패턴"에 대해 시큰둥하게 되더군요.

​

책에 앞부분은 기대했던 바와 비슷하게 시작했습니다. GoF의 디자인 패턴에 대한 이야기도 나오고 그들의 패턴에 대한 설명이 나왔으니까요. 그러나 저자는 이런 디자인 패턴을 의미있게 자바스크립트에서 구현할 수 있는 예제를 보여주고 있습니다. 그리고 빠르게 MVC에 대한 이야기로 넘어가는데요.

이 부분부터 상당히 흥미로웠습니다. MVC는 벌써 40년이 넘게 사용되고 있는 소프트웨어 아키텍처 패턴입니다. 데이터와 데이터를 표현하는 방법과 이들을 관리하는 방법의 코드를 분리해야 한다는 것이 핵심인데요. 이들이 분리되면 우리는 유지보수하기 쉬운 코드 구조를 얻을 수 있고, 개발하기도 쉬워지기 때문이죠.

MVC는 시대를 지나오면서 계속해서 진화해왔는데요. 최종 결과는 MVVM이 아닐까 싶습니다. (물론 그 이후에도 다양한 용어가 소개되긴 했지만요. )

MVC에서 MVVM로 이르는 여정을 이해한다는 것은, 소프트웨어가 어떻게 발전해 왔고, 하드웨어 인프라에 따라 어떤 형태로 바뀌어 왔는지를 이해하는 것입니다. 하지만, 의외로 이에 대해 잘 정리하고 진지하게 설명하는 책은 없습니다. 그래서 MV*에 해당하는 용어들은 버즈워드(용어는 있지만 개념은 모호해진) 취급을 받게 되거든요.

그런데 이 책에서 MV*를 상당히 여러 지면을 할애해서 정리하고 있습니다. 이 부분에서만큼은 POSA(Pattenr-Oriented Software Architecture) 책에서 느꼈던 감동을 느낄 수 있었습니다.

​

또한, 자바스크립트 언어를 사용하면서 다른 분야와는 다른 패턴 "비동기", "모듈" 같은 개념들을 언급하고 "리액트 디자인 패턴"에 대해서 이야기 합니다. 상당히 기본적인 Props나 Hooks에 대한 설명을 하는 듯 싶었는데, "랜더링"에 대해서 언급하기 시작하면서, 상당히 최근에 개인적으로 관심을 갖게된 CSR, SSR에 대한 다양한 개념들을 정리하고 있습니다. 아마도 전체를 아우르기엔 너무 내용이 많으니 기초적인 것과 최근 많은 사람이 관심을 갖고 있는 분야를 같이 설명한게 아닌가 싶네요.

​

인간은 어떤 목표에 대해 고민할때 그 목표의 거리에 따라 다른 방식으로 대처한다고 합니다. 목표가 멀다면 좀더 추상적이고 개념적인 계획을 세워서 대처하게 되고, 가깝다면 상세하고 근시안적인 방식으로 대처한다고 하네요. 한쪽으로 치우치는 건 위험하지만, 일반적으로 목표를 완료하는데는 추상적인 틀안에서 상세한 부분을 붙잡아야 합니다. 상세한 부분에 집착하다보면, 실패를 경험하게 될 경우 목표 자체를 포기할 가망성이 높기 때문이거든요.

​

소프트웨어 디자인 패턴은 그 중간 어딘가를 채우는 개념입니다. 어떻게 보면 상세한 실행 방법을 이야기하는 것 같으면서도 추상적인 방식으로 이야기를 끌어갈 수 있거든요. 자바스크립트에서 이런 부분을 고민하고 있다면 이 책이 도움이 될것 같네요.

​

"한빛미디어 <나는리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."
해서, 최대한 책을 펼쳐놓는 형태로 리뷰를 작성해 보려고 합니다.
그 중에 자신에게 맞는 부분이 있다면 책을 선택해 보시면 될 것 같습니다. ^^

✅ 자바스크립트 + 리액트 디자인 패턴

1️⃣ 이 책이 다루는 내용 
- 자바스크립트와 리액트에서 다룰 수 있는 최신 디자인 패턴(20가지 이상)
- 렌더링과 성능 패턴
- 유지보수와 확장이 용이한 코드를 작성하는 방법
- 성능을 개선하는 방법

2️⃣ 책 구성 
CHAPTER1 디자인 패턴 소개
CHAPTER2 패턴성 검증, 프로토 패턴 그리고 세 가지 법칙 
CHAPTER3 패턴 구조화 및 작성 
CHAPTER4 안티 패턴
CHAPTER5 최신 자바스크립트 문법과 기능
CHAPTER6 디자인 패턴의 유형
CHAPTER7 자바스크립트 디자인 패턴
CHAPTER8 자바스크립트 MV* 패턴
CHAPTER9 비동기 프로그래밍 패턴
CHAPTER10 모듈형 자바스크립트 디자인 패턴
CHAPTER11 네임스페이스 패턴 
CHAPTER12 리액트 디자인 패턴
CHAPTER13 렌더링 패턴
CHAPTER14 리액트 애플리케이션 패턴
CHAPTER15 결론

3️⃣ 이 책의 보충자료 
. https://github.com/addyosmani/learning-jsdp
. 코드 예제, 연습 문제 등

4️⃣ 서평 
. 자바스크립트의 경우에는 변화도 많고, 생각해야 할 것들도 많은데 이렇게 디자인 패턴을 지정해주면 개발하기가 더 수월해질 수 있다고 생각한다. 
. 더글라스 크락포드가 쓴 책중에 '자바스크립트는 왜 그모양일까?'라는 책도 있고, 프로그래밍 언어중에 자바스크립트는 어떻게 보면 지랄같은 언어라고 개인적으로는 생각된다. 개발하는 사람마다, 또는 이렇게 하면 될것 같은데 안되고, 안될것 같은데 되고, 뭔가 개발하는 사람에 따라 차이가 천차만별인 것 같다. 
. 그래서 더글라스 크락포드가 쓴 책 중에 어떤 것인지 기억은 안나는데, 이렇게 이렇게 쓰라고 가이드를 하지만 꼭 그렇게 하지 않아도 프로그래밍은 돌아가지만 성능과 가독성 등등을 고려할 때 이렇게 쓰라고 이야기했던 것도 기억이 난다.  
. 프로그래밍 언어에 있어서 패턴이라함은 내가 생각할 때는 '그렇게 사용하다가 굳어진 것' 정도가 된다고 생각한다. 
. 그렇기에 프로그래머들끼리의 소통이 가능한 것이 패턴이라고 생각한다. 패턴을 알고 있는 사람은 이 코드의 의미와 의도를 좀 더 정확하게 알 고 개발할 수 있기 때문이다. 
. 그런 의미에서 이 책은 단순히 이 패턴을 이것, 이렇게 정리하는 것이 아니라, 패턴을 사용하는 이유와 목적을 상세히 섦명을 하는 것 좋은 것 같다. 
. 특히나 자바스크립트에서는 이런 패턴을 알아두면 개발 생산성을 높이는데 도움이 된다고 생각한다. 
. 또한 많이 사용하는 리액트 애플리케이션의 구조와 유지보수, 성능까지 고려한 패턴까지 소개하기 때문에 자바스크립를 공부하면서 최신기법을 공부하는데 도움이 되는 책인 것 같다.
. 원래 패턴을 공부하다보면, 아키텍처를 생각하게 되고, 그러다 보면 동작원리를 이해하게 되고, 그러면서 프로그래밍에 대한 이해가 더 깊어진다. 이런 식으로 공부하기에 좋은 책이라고 생각한다. 
. 이 책을 반복해서 완독을 하면 자바스크립에 대해 깊이있는 이해가 가능한 책이라고 생각된다. 
. 단순한 패턴 소개가 아닌, 원리와 이해를 돕고, 성능까지 다루는 측면에서 자바스크립트 기초를 떼고나서 꼭 봐야할 책이라고 생각된다.

5️⃣  한줄소감 
.  자바스크립에 대한 깊은 이해와 동작원리, 아키텍처에 대해 이해하기 좋은 책!!

자바스크립트, 리액트 개발자를 위한 디자인 패턴과 렌더링, 성능에 대한 이야기를 담고 있는 책으로 단순히 개념에 대한 설명만 하는 것이 아니라, 모범 적용 사례를 다루면서 유지보수하기 좋고, 반응성이 뛰어난 웹 애플리케이션을 만드는 것에 도움을 주는 책이다. 

자바스크립트 개발자, 특히 리액트 개발자라면 강력 추천

자바스크립트, 리액트에서의 디자인 패턴 개념, 모범 사례들을 다루고 있기 때문에 이를 사용하는 사람들에게는 꼭 읽어보라고 하고 싶은 책이었다.

쉽게 디자인 패턴에 대해 맛볼 수 있는 책

디자인 패턴이라고 하면, 내용만 깊게 파고들면 하나를 학습하기에 너무 무겁고, 사례만 설명하게 되면 지나치게 추상적인 느낌이 들 수밖에 없다. 이 책은 그런 문제에서 균형을 맞추고 있어서 쉽게 친해지지 못했던 디자인 패턴과 친해질 수 있게 해준다.

한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다

자바스크립트를 깊이 다룰 수 있을 것 같은 책입니다. 

내용도 유익합니다.