점점 미션은 바빠지는데 레벨 1 초반 때 썼던 회고글의 분량을 유지하려고하니 회고 글을 안 쓰게되는 것 같아 분량이 적고 완벽하지 않은 글이라도 일기 형식으로 꾸준히 쓰려한다.

1. 페이먼츠 미션

1.1 PR 링크

페이먼츠 1단계 PR 링크
페이먼츠 2단계 PR 링크

1.2. 미션 회고

이번 미션은 페이먼츠 미션이었다.
리액트로 '카드 정보를 입력하면 실시간으로 유효성을 검사하며 카드 프리뷰 UI가 업데이트'되는 기능을 구현하는 미션이다.

이제 자바스크립트에서 벗어나 리액트를 배우는 레벨 2의 첫 미션이었기 때문에 리액트의 감각을 익혀가는 것이 가장 유의미했던 미션이지 않을까 싶다.

이번 미션을 진행하면서 훅과 상태 관리에 대해 고민을 많이 하고 다양하게 활용하는 노력을 해보았다.

페어와도 미션 기간 3일 중 하루를 거의 통으로 설계에 대해 대화하고 함께 고민해보는 시간을 가질만큼 자바스크립트의 상태 관리 관성에서 벗어나 리액트스럽게 작성하기 위해 신경썼다.

특히 이번 미션에서는 컴포넌트의 유효성 상태 관리 방식에 대해 깊이 고민했다. isValid 상태를 컴포넌트 외부에서 props로 주고받는 방식이 전체 폼 유효성 판단과 외부 제어에 더 유리하다는 점을 체감했고, 유효성 피드백 메시지 자체를 기준 삼아 상태를 판별하는 방향으로 개선하기도 했다.

구조가 유사한 CardNumberInput, CardExpirationDateInput, CardCVCInput 등을 하나의 컴포넌트로 추상화할지 여부도 깊게 고민해보았지만, 서로 다른 형태와 유효성을 가지고 실시간으로 상태에 따라 업데이트되는 로직이므로 다른 컴포넌트로 관리를 하는 것이 합리적이라는 판단을 내렸다. (추후 2단계에서 확장될 상태도 고려해 리팩토링을 염두에 두었다.)

Storybook을 활용해 정상/오류/빈 값 등 다양한 컴포넌트 상태를 시각적으로 테스트해보았고, 훅이 필요한 경우에는 render를, 단순 UI 컴포넌트는 args를 활용하는 방식으로 구성했다.

또한, Git 커밋을 나누는 기준에 대해서도 고민해보았는데, 특히 다른 컴포넌트들이 의존하는 핵심 컴포넌트를 수정할 때 커밋 범위가 넓어지는 문제에 대해 생각해보았다. 프로그램이 깨지지 않는 단위로 작업을 쪼개는 것이 좋다는 것을 어디선가 보았었는데 여전히 이를 기준으로 삼는 게 맞다는 결론이 났다.

스타일링은 styled-components 나 emotion 대신 Module CSS를 채택했는데, 코드와 스타일의 분리가 명확하고 간단한 상태 기반 스타일링에 적합하다고 판단했기 때문이다.

마지막으로, 페어와의 설계 논의를 통해 전체 흐름, 상태 관리 구조, 컴포넌트 분리 기준을 정리하며 실제 DOM 트리 구조에 기반해 디렉토리 구조를 나눴고, InputForm이 Input을 children으로 받아 재사용성과 확장성을 높이는 방식으로 리팩토링도 진행했다.

1.3. 학습 키워드

첫 미션의 나만의 학습 목표는 리액트 감각 키우기였기 때문에 개인적으로 리액트의 꽃이라고 생각하는 훅에 대해 다양하게 활용하고자 노력했다.

• useState
• useMemo
• useCallback
• useEffect

2. 스터디

2.1. 모던 리액트 딥다이브 스터디

예정대로 리액트 딥다이브 스터디를 시작했다. 모던 리액트 딥다이브 교재를 보는 스터디였는데, 2주동안 진행한 분량은 JSX와 훅의 내용이었다. 스터디 방식은 한 주동안 정해진 교재 분량을 읽어오면 읽으면서 궁금했던 점이나 논의해볼만한 점을 각자 생각해서 스터디 시간에 말하는 것이었다.

그리고 스터디를 준비하면서 리액트 가상DOM, 파이버, 훅의 내부 구현 등에 대해 추가적으로 궁금한 점이 생겨서 스터디장인 써밋의 도움으로 다양한 테스트와 훅의 내부 구현을 탐구해보며 리액트의 동작 원리에 대해 정말 딥다이브로 공부해볼 수 있었다.

특히 useCallback 의 개념을 학습하면서 클로저의 원리를 이용한다면 일으킬 수 있는 메모리 누수가 있을 것 같았고 이 부분에 대해서도 하루종일 써밋과 다양한 시도를 해보며 useCallback이 연쇄적으로 존재하는 상태에서 두 useCallback을 참조하면서 다른 변수를 참조하는 클로저 함수가 있을 때, 해당 변수가 컴포넌트 리렌더링마다 새로운 메모리에 할당되고 이전 메모리도 지워지지 않고 누적되는 문제가 있다는 것을 알게되었다.

일반적인 경우에는 문제가 되지 않을 정도의 소소한 누수일 수 있지만, 저 쌓이는 변수가 만약 큰 용량의 데이터라면 꽤 부담이 가는 이슈일 것이다.

학습 키워드

• 리액트 가상DOM
• 리액트 파이버
• use-* 훅들

2.2. three.js 스터디

• three.js 스터디를 새로 들었다. 회고글 작성 시점 기준으로 스터디 첫 주차를 진행한 상태인데, 원래부터 배우고싶고 관심있었던 라이브러리라 간단한 상자를 렌더링해보는 과제도 재밌게 했다. 스터디는 한 주 동안 간단한 실습 목표를 정해두고 각자 구현해와서 자신의 코드를 설명하는 방식이었는데, 스터디원들이 엄청 열심히 각자 궁금한 부분들을 탐구하고 정리해와서 간단한 실습이었는데도 다양한 포인트에서 공부해볼 수 있었다. 너무 즐거운 시간이었다!

3. 마무리

방학 중에 결심했던 내용 중에 매일 조각조각이라도 있었던 일, 느겼던 것을 메모해두고 회고글을 써야겠다는 말이 있었는데 정신 없이 지나가는 하루하루에 하나도 지키지 못했다. 늦게 퇴근하고 랑이 산책 다녀오고나면 더이상 아무 것도 못하고 잠에 곯아떨어지기만 반복했다. 슬슬 피로 누적과 체력의 한계가 느껴진다...

그래서 매일 하루의 끝에 짧게라도 적어놓자는 목표에서 그냥 느낀 순간 바로바로 메모장 켜서 적어놓는 습관을 들일까싶다.