연말결산 제작기

Preview

소개

• 웹, 앱을 포괄하는 화면 및 기능 구현 (프론트엔드)

• 애니메이션 발생 시점
• 첫 화면마다 부드러운 애니메이션이 들어가야 함.
• 각 화면마다 만든 컴포넌트에 들어갈 hook을 제작하기로 함. hook에서 판단할 요소 2가지와 조건에 맞을 때 (처음으로 화면이 보여질 때) 발생시킬 custom events 제작.
• IntersectionObserver로 지금 화면이 보이고 있는지를 판단.
• 처음 보는지를 boolean 값으로 판단.
• 처음 보인 화면의 경우 dispatchEvent하고, 해당 이벤트는 callback 함수를 실행함.

// addViewedCallback useEffect 예시
useEffect(() => {
  let haveBeenViewed = false;

  const io = new IntersectionObserver(entries => {
    if (!ref.current) {
      throw new Error("Ref should not be null");
    }

    if (haveBeenViewed) {
      return;
    }

    const isVisible = !!entries.find(
      entry => entry.isIntersecting && entry.target.id === ref.current?.id,
    );

    if (!isVisible) {
      return;
    }

    haveBeenViewed = true;
    ref.current.dispatchEvent(onViewEvent);
  });

  if (ref.current) {
    io.observe(ref.current);
  }

  return () => {
    io.disconnect();
  };
}, []);

• 하나의 서비스를 완성시키기 위해 라이브러리 채택부터 배포까지 프로세스를 겪은 점.

• 백엔드 개발자 1명, 디자이너 1명, 프론트엔드 개발자 1명으로 구성된 팀에서 온전히 프론트엔드 개발자로서 책임을 다할 수 있던 것.
• 각 포지션에서 자기가 할 수 있는 부분은 최대한 가져가려고 노력하는 협업 경험을 가짐.

• 스크롤 방식
• preview에서 나온 방식처럼 위에서 아래로 스크롤 할 때 sticky하게 움직여야 함.
• 많은 라이브러리를 찾아서 그나마 괜찮은 걸로 적용시키긴 했지만 그마저도 완벽한 컨트롤이 어려웠음.
• 특히 모바일에서 빠르게 위아래로 스크롤하면 원인 모를 버벅임이 있었음.
• 추후 다른 서비스에서 같은 스크롤 방식의 이벤트를 페이지를 보고 빠르게 스크롤 해본 결과 같은 버벅임이 있었음. 이를 통해 모바일까지 포괄해야 한다면 이번에 구현한 스크롤 방식이 적합하지 않을 수 있겠단 생각을 함.

• 일정이 촉박해 디테일을 많이 챙기지 못했던 점.

• 인터페이스를 추상화하지 못한 점. 서버와 종속성이 있는 상태로 개발함.

• 각자 맡은 바에 책임을 다하고 관심사 분리가 잘 된 상태로 프로젝트가 진행되어 좋았다.

• 최대한 되는 방향으로 얘기하는 게 좋았다. 해보고 안되면 바꾸더라도 일단 해보려고 했던 게 느껴졌다.

• 시간이 부족함에도 불구하고 책임감있게 일해서 좋았다.

• 챙겨야 할 게 너무 많다. 폰트 aws 등록부터 meta tag, 애니메이션, ui, 회의 등등 프론트엔드는 혼자여서 하나의 프로덕트를 완성시키는 데 주먹구구식으로 필요한 것이 생겼을 때마다 처리하는 것을 느낌.

• 리스트업 하기엔 소소한 것도 진짜 많아 todo list를 간략하게 만들어보았지만 여전히 스위칭이 생김.
• 기능 개발하다 이거 오류나요하면 가서 해결하고, 다른 스프린트 회의 참여하면 내가 뭐 만들고 있었지..?하게 됨.

• 어떻게 해야 놓치지 않고 잘할까?

• 모바일 대응 너무 어렵다
• 괜히 네이티브 개발자가 있는 게 아니란 생각.
• 모든 기기 대응이 필요한 디자인은 제한적이라는 것도 깨달음.
• 웹뷰, 카카오톡뷰, 사파리뷰, 크롬뷰 모두 대응하면서 원인 모를 버그도 있었고 매번 테스트할 때마다 배포해서 봐야하는 것도 너무 불편했음. 특히 앱 테스트는 dx가 너무 안좋은데 어떻게 개선할 수 있을지 고민임.