코드잇 스프린트 10주 차 후기

코드잇 스프린트 4기

 

기간

2024-02-26 ~ 2024-03-02

 

과제

팀 데일리 미션: 매일 팀마다 1명이 1개의 질문을 하고 나머지 팀원들이 답변

위클리 미션: 주마다 배운 내용을 바탕으로 스프린트 과정 동안 만들어가는 개인 프로젝트

위클리 페이퍼: 주마다 정해진 2개의 주제에 대해 조사

 

스터디

codingTest: 매 주 월, 목 코딩 테스트 문제 1개 풀이

으쌰으쌰: 매일 모던 자바스크립트 Deep Dive 책 정해진 진도 공부 후 정리

 

후기

팀 프로젝트를 시작한 지 벌써 1주가 지났다.

먼저 공용 컴포넌트를 선별해서 역할 분담을 진행했고 대부분의 공용 컴포넌트가 완성되었다.

 

나는 이번 주에 Button과 Modal 컴포넌트를 만들었는데 Button 컴포넌트를 만들 때는 피그마 시안의 모든 버튼들을 충족하게 만드는 부분이 너무 어려웠고 사실 아직도 모든 버튼을 충족하진 못한다.

Modal 컴포넌트를 만들 때 isOpen 상태를 Modal 내부가 아닌 사용처에서 관리하는 부분이 마음에 안 들었다. 또한 Modal 컴포넌트를 사용하는 곳마다 Modal을 return 문에 작성하는 부분이 마음에 안 들었다. 이 두 부분을 충족하기 위해 Context를 사용해서 Modal을 구현했고 멘토링 결과는 처참했다...

 

우선 Context를 사용하는 것은 제거하기로 결정했고 그래도 isOpen 상태는 Modal 안에서 관리하는 것이 옳다고 생각해서 useRef를 사용한 Modal을 구현했다.

내가 isOpen의 상태는 Modal 안에서 관리하려고 하는 이유는 우선 내가 열려있는 지의 상태는 내가 가지고 있어야 하는 것이 맞다고 생각했고 또 사용처에서 상태를 관리하면 Modal을 열고 닫을 때마다 리렌더링 되는 부분이 마음에 안 들었다.

useRef를 사용해서 구현한 현재는 Modal을 열고 닫을 때 사용처의 리렌더링이 발생하지 않는다. 하지만 아쉬운 부분은 forwardRef로 props를 받으니까 사용처에서 prop의 자동완성이 되지 않는다. 해당 부분은 더 찾아봐야겠다.

 

현재 서로 다른 Modal 컴포넌트(ModalCardInfo, ModalConfirm)가 isOpen, setIsOpen 상태와 open, close 핸들러 생성 및 useImperativeHandle에 open, close를 등록해주는 부분이 너무 중복되고 있어서 아쉽다. 그리고 컴파운드 컴포넌트 패턴을 활용하는 것을 목표로 했지만 도저히 감이 오질 않아서 반영하지 못한 부분이 많이 아쉽다.

 

우리 팀원 분들이 서로의 PR에 진지하게 리뷰해 주고 극복한 어려움을 공유하는 등 서로를 위하고 생각해 주고 있어서 정말 고맙고 좋다.

 

앞으로 남은 일주일 동안 잘 마무리해서 다들 값진 경험을 얻었으면 좋겠다.

 

 

감사합니다.