[데브로드] 6주차 주간회고

이번 주 배운 것들

- 관심사의 분리
- Layered Architecture
- Flux Architecture
- TSyringe
- 의존성 주입(Dependency Injection)
- singleton
- Redux
- Reflect
- usestore-ts
- useReducer
- useCallback
- useSyncExternalStore

개인 공부
- 알고리즘 풀이(스택/큐 5문제)
- Redux(스터디) - todo 앱을 만들어보며, 전체적인 흐름에 대해서 파악하였다. Flux Architecture 에서 Redux에서는 어떤 식으로 Flux Architecture를 개선했는지에 대해서 깨닫게 되었고, 왜 Redux Toolkit을 사용하는지에 대해 알게되었다.

이번 주는 External Store에 대해 공부를 진행하였다. 이번 주 중에 제일 재미있었던 부분은 관심사의 분리이며, 기존에 알고 있던 지식이었지만 조금 더 어떻게 UI적이든 비즈니스 로직 적이든 나눠야할지 감을 제대로 잡았던 것 같다. 그리고 전체적으로 Redux가 어떻게 이루어졌으며, 기본적인 Flux Architecture의 Action -> Dispatcher -> Store -> View에서 Action -> Store(Dispatch를 통해 Action을 받고 reducer를 통해 state 변경) -> View(State 반영)으로 조금 더 단순한 그림이 되었는지에 대해 알 수 있게 되었다. 특히 Action을 어떻게 표현하느냐에 따라 사용성에 큰 차이를 만든다.

실제 External Store를 TypeScript용 DI 도구(IoC Container)인 TSyringe를 사용하여 실제 Redux가 어떤식으로 동작하는지에 대해 매우 흥미로웠던 것 같다. Redux도 결국 React Core 개발자가 만든 라이브러리니 전역 상태가 업데이트 되었을 시 뭔가 리엑트랑 이어져서 상태가 업데이트 되겠지? 라고 단순하게 생각했었 것에 대한 의문이 풀렸다. 결국 React에서 사용하는 모든 전역 상태는 실제 강제 업데이트를 통해 업데이트(React에서 제공해 주는 강제 업데이트인 forceUpdate 통해) 된다는 점을 알게되었다. 추가적으로 미리 공부해 놓았던 React Hook들이 매우 도움이 되었던 것 같다. 이번 과제를 통해 React 18부터 외부 저장소를 구독할 수 있게 제공해 주는  useSyncExternalStore를 사용해 봄으로써 subscribe와 getsnapshot이 어떻게 사용해야할지와 매우 잘 쓰면 유용하게 쓰일 수 있다는 것을 실습을 통해 알게되었다. 실습 전에는 간단한 예시로 내 현재 네트워크가 정상인지 비정상인지에 대해 연습해 보았던게 도움이 되었던 것 같다. 

더 흥미로웠던 것은 모든 코드를 TDD 방식으로 작성했다는 것인데, 저번 주보다 조금 더 성장했던 부분을 찾게 되었다.  Test 코드 작성 -> 컴포넌트 생성 및 테스트 통과를 반복하여 만들며 마지막에 리펙토링 과정을 거쳤었다. 근데 여기서 고민이었던 것은 부모 컴포넌트부터 시작하여 TDD과정을 작성 시 하위 컴포넌트를 자르면서 작성을 할지와 테스트 흐름상 중복되는 부분들이 있다고 생각했어서 이 부분을 어떻게 해결하면 좋을지에 대해서 저번 주 부터 고민을 하였었다. 모각코를 같이 하는 분들에게 의견도 구해보고 고민을 해본 결과 이 두 가지 부분이 드디어 해결되었다. 실제로 이번 과제를 진행하면서 하나의 컴포넌트는 부모에서부터 자식까지 쪼개면서 진행을 해보았고, 또 다른 하나는 큰 컴포넌트에서 모든 것을 작성한 후 이후에 자식 컴포넌트로 쪼개보았는데 후자 방법이 속도면이나 관심사의 분리를 조금 더 명확하게 할 수 있었던 것 같다. 전자 방법을 진행 시에는 이리저리 왔다갔다하며 작성을 진행하니 복잡했던 기억과 비효율적이라는 것을 깨닫게 되었던 것 같다. 추가적으로 테스크 코드의 중복 문제였다. 이 부분은 이번 주에 배운 관심사의 분리로 모든 것이 해결되었다. 부모 컴포넌트에서 테스트한 내용과 자식 컴포넌트에서 테스트한 내용이 중복이 되었던 문제였지만 이는 엄밀히 이야기하면 관심사의 분리에 따라 각자의 테스트의 중복이 아니라는 것에 도달할 수 있게 되었다. 조금 더 상장한 기분이라 매우 기분이 좋았던 것 같다.

추가적으로 이번 주 내용을 토대로 Redux를 실습을 해보는데 내용 흐름상으로 매우 이해에 도움이 많이 되었던 것 같다. 실제 Todo 앱을 만들며, 조금 더 익숙해지고 있는 단계인데 매우 흥미롭다. 특히 Redux를 배우면서 느낀 점은 Redux에서 이야기하는 내 프로젝트에 과연 Redux가 맞는지에 대해 판단을 잘 하여 프로젝트 진행 시 Redux에서 제시하는 조건을 고민해 봐야할 것 같다. 실제 React에서 지원하는 Recoil도 요새는 많이 사용하고 있는 추세인 것 같아 따로 공부가 필요할 것 같지만 일단 Redux에 대해 자세히 파본 후 다음 프로젝트로 한번 만들어보고 싶다.

마무리

이번 주에 원래 React 내부를 한번 공부를 해보고 싶었지만, 이번 주제가 매우 중요했기에 이번 주제에 조금 더 포커싱을 맞추다 보니 진행을 하지 못하였다. 이번 주는 꼭 내용들을 빠르게 흡수하여 과제를 마무리 후 내부에 어떤 구조로 돌아가는지에 대해 알아보고 싶다. 이번 주 도 파이팅!