개인 프로젝트 회고(5일차)

<회고록>

오늘은 Todo-List를 만들면서 겪었던 트러블 슈팅에 대해서 정리하려고 한다. 트러블 슈팅은 신입 개발자로써 성장할 수 있는 아주 좋은 양분이다. 즉 신입 개발자에게 트러블 슈팅이란 우리가 일상적으로 먹는 밥 같은 존재다. 맨날 마주치면서 우리를 성장시켜주는 촉진재인 셈이다. 그래서 오늘은 겪어던 트러블 슈팅들에 대해서 적어볼려고 한다.

 

<트러블 슈팅>

1. 문제상황

 

• 헤더 영역는 크게 2가지로 나뉜다. 제목 영역 , 설명 영역 이렇게 2가지로 나뉜다. 여기서 문제는 설명영역에서 에니매이션 처리를 했는데 이 에니매이션 처리가 제목 영역까지 영향을 미친다는 것이다.
• 원인을 분석해보니 헤더의 제목 , 설명 영역을 감싸는 부모 영역이 있다면 이 부모영역에서 상태를 관리하고 있었고 이로 인해서 제목 , 설명 영역 모두가 영향을 받는 것이었다.

2. 해결방법

 

• 부모 영역에서 관리하는 상태를 각각의 자식들에게 넘겨줌으로써 바뀔려고 하는 요소에게만 해당 변화를 일으켰다. 처음에는 React memo를 이용한 컴포넌트 캐싱을 진행했지만 나중에 Header 영역을 업데이트를 하는데 문제가 발생해서 확장성을 위해서 Header 영역안에 복합 컴포넌트로써 title , desc을 추가했다.

3. 결과

1. 해결 전

2. 해결 후