2.6 릴리스를 향한 작업

이번 주에는 2.6 릴리스 계획과 관련하여 많은 일들이 일어나고 있습니다. React Native가 리포지토리에 추가되고 Supabase SSO가 구현되고 있으며 수많은 문서와 연구가 진행 중입니다.

이번 주에 1개의 메이저PR를 열었고 다른 기여자들의 몇 가지 PR을 거쳤습니다.

미완성 작업 이해

망원경에 모바일 뷰를 추가하려고 하는 아이린의 작업을 가져왔습니다. 기본적으로 그녀는 블로그 포스트의 제목을 아코디언으로 만들려고 노력했는데, 클릭할 때마다 확장되어 더 많은 정보가 표시됩니다.



이 기능은 기본적으로 작동하지만 몇 가지 문제가 있습니다. 어느 것이 헤더이고 어느 것이 블로그 포스트인지 구별하기 어렵습니다. 아코디언은 블로그 포스트와 거의 혼합되어 있습니다. GitHub 정보는 flex column 로 표시되기 때문에 너무 많은 공간을 차지합니다. 마지막으로, 아코디언이 열려 있거나 닫혀 있다는 암시가 없습니다.

모바일 보기 기능 완성

telescope staging으로 이동하여 기능을 테스트할 수 있습니다.


기본적으로 헤더와 블로그 게시물 사이에 테두리를 추가하고 사용자에게 힌트를 주기 위해 아이콘 버튼을 추가했으며, 클릭 시 확장 또는 축소, 플렉스 방향을 row로 변경하고 사용자가 게시물을 스크롤할 때 자동으로 닫히도록 했습니다.

대부분의 작업은 css와 머티리얼 UI를 편집하는 것이었고, PR을 보면 쉽게 이해할 수 있지만 자동 닫기를 만드는 것은 약간 어렵습니다.

 useEffect(() => {
    const onScroll = () => {
      // get the distance between the bottom of the blog post and
      // the top of the web page
      const bottom = sectionEl?.current?.getBoundingClientRect().bottom;
      if (bottom && bottom < 1) {
        // if bottom reaches top => close header and remove event listener
        setExpandHeader(false);
        window.removeEventListener('scroll', onScroll);
      }
    };
    // only if header is open, we attach the onScroll function to scroll event
    if (expandHeader) {
      window.addEventListener('scroll', onScroll);
}, [expandHeader])

헤더가 확장될 때마다 이벤트 리스너onScroll()를 scroll 이벤트에 연결합니다. const bottom = sectionEl?.current?.getBoundingClientRect().bottom;는 블로그 게시물 하단과 페이지 상단 사이의 거리를 구하는 것입니다. < 1(1이 0보다 잘 작동함) => 헤더를 닫고 리스너를 제거합니다. 내가 생각해낸 몇 가지 방법 중에서 이 방법을 사용하면 성능이 많이 절약됩니다.


2.6 이전에 해결해야 할 몇 가지 문제가 있습니다. 모든 문제를 해결할 수 있는 것은 아니지만 적어도 팀원들과 이야기하고 작업을 공유할 수 있습니다. PR도 더 잘 검토하려고 노력할 것입니다. 나는 실수를 발견할 만큼 프로젝트에 익숙하지 않습니다.