2021-07-27 TIL

한것

1. 페어프로그래밍
   • 댓글 리스트 구현
   • 댓글 무한스크롤 기능 구현
   • css 속성 순서 고민
2. 폴더 구조에 대해 알아보고 정리하기
3. Intersection Observer에 대해 알아보고 구현 과정 정리하기

배운것

1. 아토믹 디자인을 이용한 폴더 구조 분리
2. Intersection Observer API 사용법
3. Intersection Observer API를 custom hooks를 이용해 재사용 가
   능하게 만드는 방법
4. 값이 변경되어도 렌더링에 관여하지 않는 값들은 state로 관리할 필요가 없으므로 useRef로 관리한다

느낀것

1. 페어 프로그래밍을 오랜만에 다시 해보았는데 내눈에 안보이는 에러가 남의 눈에 보이는 것은 항상 신기합니다. 네비게이터 혹은 드라이버가 되어 더 나은 방향을 제시하고 그것을 실행하면서 배우는 것이 많다고 느꼈습니다.
2. 아토믹 디자인을 사용해 폴더 구조를 분리하면 업무 효율이 높아질 것 같다는 생각을 했습니다. 재사용 가능한 독립적인 컴포넌트를 빼놓고 각각의 페이지에서 필요한 컴포넌트를 가져다 사용하면 중복되는 컴포넌트가 생길 일도 없고 수정이 필요할 경우 공통 컴포넌트만 수정하면 되고 도메인에 의존하지 않는 독립적인 컴포넌트를 사용하면 필요에 따라 다양한 UI로 점진적인 확장이 가능하므로 생산성을 높이는데 큰 도움이 될 것 같습니다. 다음 프로젝트는 꼭 아토믹 디자인을 사용한 폴더 구조를 나눠보겠습니다 !
3. Intersection Observer API에 대해 알아보고 사용하면서 Scroll Event를 사용했을때보다 개발자가 관여해야할 부분이 적어진다는 것을 느꼈습니다. 그리고 custom hooks로 변경하면서 내부 구현은 숨기고 교차지점에 실행될 함수와 타겟요소만 노출시킴으로써 타겟요소가 무엇이고 교차지점에서 무슨 함수가 실행되는지 한눈에 알 수 있어서 좋았습니다. 선언적 프로그래밍이 바로 이런 것이구나 라는 것을 다시한번 느끼게 되었습니다. 🤩

   useInfiniteScroll({
       target: targetRef.current,
       onIntersect: ([{ isIntersecting }]) => {
         if (isIntersecting && !loading) {
           loadMoreComments();
         }
       },
     });

자기선언

• 나는 무엇이든 할 수 있다
• 나는 내일도 TIL을 쓴다