SW 캡스톤 프로젝트 <단통> 프론트엔드 회고

안녕하세요.

이번에 소프트웨어학과 4-1학기 캡스톤 프로젝트를 마치며 회고록을 남기고자 합니다.

이 글을 통하여 뿌듯하기도 하지만 아쉬웠던 <단통> 프로젝트를 회고해보겠습니다.

 

서비스 소개

단통은 학우들의 학생회 행사 참여를 증진하고, 학생회의 폼 가공 업무를 간편화해주는 서비스입니다.

학생회는 단통을 통하여 학생회 행사를 효과적으로 홍보하고, 학우는 행사 참여 정보, 진행 상황, 행사 일정 등을 편리하게 확인할 수 있습니다.

단통은 학우들이 행사 폼을 제출할 때 번거로웠던 재학 인증 정보 (단국대학교 웹정보 화면 캡쳐, 전공과 학번 입력 등) 기입 절차를 회원가입시 단 한 번의 학교 이메일 인증으로 대체하고, 폼 응답 리스트를 엑셀로 추출하는 기능을 통하여 학생회의 업무 절차를 간소화합니다!

이 프로젝트는 학생회의 도움을 구하여 실제 학우분들께 서비스를 제공하는 것을 목표로 진행하게 되었습니다.

 

 

 

 

화면 구상

피그마로 화면을 직접 만들고 많은 레퍼런스들을 보며, 디자인의 일관성, 사용자 접근성 등 UI/UX에 대한 깊이 있는 고민을 할 수 있었는데요!

특히 간편한 회원가입 절차를 제공하고자 퍼널을 야심차게 도입하였습니다. ㅎㅎ

 

 

 

 

 

기술 스택 선정

단통은 주로 스마트폰으로 행사 내용을 확인하는 학우들을 위하여 모바일 기준의 UI를 제공하였습니다.

그리고 알림 기능을 구현하기 위하여 네이티브 앱과 PWA 중 애플리케이션 설치를 요구하지 않고 플랫폼의 제약이 없는 PWA를 선택하게 되었습니다.

그대신 웹으로 네이티브 앱만큼의 사용자 경험을 선사하기 위해서, SPA를 지원하는 React.js를 프론트엔드 라이브러리로 채택하였고, 타입 정의와 인터페이스를 통하여 유지보수, 확장성, 일관성를 제공하는 Typescript로 작성하였습니다.

단통은 초기 웹 렌더링 속도 감축을 위하여 렌더링 성능 이슈가 있는 CSS-in-JS 라이브러리(Styled Components, Emotion)가 아닌, Utility First 방식을 채택한 Tailwind CSS를 사용하기로 결정하였습니다. Tailwind CSS는 뛰어난 개발 생산성을 제공한다는 점에서도 큰 이점을 지닙니다.

마지막으로 데이터 패칭, 캐싱, 동기화 등 서버 상태 관리 작업을 간단하고 효율적으로 처리 가능하게 하는 React Query를 도입하여, 클라이언트 애플리케이션의 성능과 개발 생산성을 향상하고자 하였습니다.

 

 

 

 

구현

(1) 퍼널

퍼널은 레이아웃의 children props가 ReactNode들을 배열 요소로 가진다는 아이디어를 바탕으로, SignUpLayout 안에 하나의 children 요소를 인덱스로 지정하여(children[index]) 하나의 컴포넌트만 나타나는 로직을 구상하였습니다.

SignUpLayout children의 인덱스인 퍼널의 단계(step)는 숫자로 표현하였고, pathname이 바뀔 때마다 pathname에서 steps에 속한 pageName을 가져와 steps.findIndex를 통하여 pageName의 index를 찾아 step으로 업데이트한 다음, SignUpLayout에 step props로 전달하였습니다.

퍼널의 흐름을 쉽게 파악할 수 있게 하기 위해 현재 step, 스텝별 컴포넌트들을 하나의 파일에서(SignupPage) 관리할 수 있도록 설계하였습니다. 그리고 스텝 컴포넌트의 onNext props을 통하여 스텝별 다음 이벤트도 한 번에 관리할 수 있습니다.

 

SignUpPage.tsx

export const SignUpPage = () => {
  const navigate = useNavigate();
  const { mutate: postSignUpInfo } = usePostSignUpInfo();
  const { pathname } = useLocation();
  const [step, setStep] = useState(0);
  const steps = ['email', 'info', 'password', 'success'];
  useEffect(() => {
    const pageName = pathname.split('?')[0].split('/sign-up/')[1];
    setStep(steps.findIndex((item) => item === pageName));
  }, [pathname]);

  const submitSignUpInfo = () => {
    postSignUpInfo();
  };

  return (
    <SignUpLayout step={step}>
      <MailEntryPage />
      <InfoEntryPage onNext={() => navigate('/sign-up/password')} />
      <PasswordEntryPage onNext={() => submitSignUpInfo()} />
      <SignUpSuccessPage onNext={() => navigate('/login')} />
    </SignUpLayout>
  );
};

 

SignUpLayout.tsx

export const SignUpLayout = ({
  children,
  step,
}: {
  children: ReactNode[];
  step: number;
}) => {
  const { pathname } = useLocation();
  const isInSuccessPage = pathname === '/sign-up/success';

  return (
    <div
      className={`pwa-layout grid h-full w-full gap-8 p-8 ${isInSuccessPage && 'gradientBackground'}`}
    >
      {children[step]}
    </div>
  );
};

 

 

(2) input 자동 포커스

회원가입의 핵심, 얼마나 간편한 Input 입력을 제공할지에 대해서도 고민해봤는데요.

여러 페이지에 거쳐 입력되는 회원 정보를 관리하기 위하여 회원 정보는 zustand를 통해 전역 상태로 관리하였습니다.

그리고 input 입력 후 엔터를 누를 때마다 새로운 input이 위에서 표시되는 구조이므로 다음과 같은 로직으로 구현하였습니다.

1. input 컴포넌트들의 정보를 담은 배열인 inputAttrList를 정의
2. 엔터 입력시 새롭게 보여지는 input의 index인 activatedIndex을 0으로 초기화한다.
3. inputAttrList를 slice(0, activatedIndex + 1).reverse().map() 하여 inputAttrList를 activatedIndex까지만 자르고, 이를 거꾸로 나열한 후 화면에 맵핑한다.
4. 엔터 입력시 activatedIndex를 1을 더한다.

 

 

이는 info 페이지와 password 페이지에서 동일하게 동작하므로 공통 컴포넌트 InputContainer를 만들었습니다.

그리고 페이지별 state로 activatedIndex를 관리하면 페이지가 전환될 때마다 activatedIndex가 0으로 초기화되므로, 이전 페이지로 이동시 입력 내용을 볼 수 없게 됩니다.

따라서 activatedIndex를 info와 password 프로퍼티를 가진 전역 상태의 객체로 정의하여, 각 페이지의 활성화된 input 인덱스를 따로 저장하도록 하였습니다.

InputContainer에는 다음의 props를 부여하여 info, password 페이지에서 모두 사용 가능하도록 하였습니다.

  inputAttrList: userInfoInputAttr[];
  containerID: 'info' | 'password';
  onNext: () => void;

 

 

input이 표시되는 것을 구현하였으므로, 이제 input에 자동 focus 되도록 해야 하는데요.

InputContainer에 inputContainerRef를 전달한 후, useEffect를 통하여 activatedInputIndex 값이 바뀔 때마다 DOM에서 inputContainerRef.current의 ChildNodes 배열(Input 컴포넌트 요소로 가짐) 중 0번째 인덱스(최상위에 위치한 Input 컴포넌트)를 focus하도록 하였습니다.

  useEffect(() => {
    const currentInput =
      inputContainerRef.current?.children[0]?.querySelector('input');
    currentInput?.focus();
  }, [activatedInputIndex]);

Enter 누를시 자동으로 input이 표시되며 focus가 업데이트 됩니다.

 

 

 

(3) 폼 생성

복잡한 객체 state에 타입 가드를 적용하고, input 이벤트로 상태를 업데이트해야 해서 걱정된 파트였는데요.

이 부분에 대해서는 trouble shooting을 기록하기도 하였습니다.

[React/TypeScript] Input의 event.target.value을 string이 아닌 특정 타입으로 명시할 수 있을까?

 

폼 생성 페이지는 질문의 내용, 상세 설명, 유형, 옵션 리스트 등의 프로퍼티를 지닌 질문의 리스트를 하나의 state로 관리하였는데요.

리액트의 useState는 객체 state를 업데이트시 기존 state 객체의 불변성을 유지해야 합니다.

그러므로 state의 특정 요소만 업데이트시 스프레드 연산자를 사용하여 기존 객체를 새로운 객체로 만든 후 업데이트할 내용을 작성해야 합니다.

이와 같은 작업을 거치니 setState 함수 안의 코드가 매우 복잡해졌습니다.

다행히 폼 생성 페이지는 계획한대로 구현에 성공하였고 리액트의 state 업데이트 원리를 깨우쳐 좋았지만, 하나의 state에 여러 번 중첩된 복잡한 객체를 관리하고 이 변화에 따라 화면을 리렌더링하는 것은 성능과 유지보수 측면에서 좋지 않아 분리 작업이 필요할 것 같습니다.🥲

 

(4) React Query 도입

단통은 코드 중복을 낳는 기존 비동기 통신 로직을 React Query로 대체하여 간편하게 구현할 수 있었는데요.

특히 useInfiniteQuery을 통하여 무한 스크롤을 쉽게 구현했던 점이 기억에 남습니다.

무한 스크롤은 IntersectionObserver API를 사용하여 요소와 뷰포트의 교차점을 감지하는 intersection, useInfiniteQuery를 통하여 가져온 data와 isFetching을 반환하는 커스텀 훅인 useInfiniteScroll을 만들어 더 쉽게 재사용할 수 있게 하였답니다.

 

 useInfiniteQuery({
    queryKey: ['infinitePostList'],
    queryFn: ({ pageParam: pageNum }) =>
    Post.getInfinitePostList({ page: pageNum, size, category }),
    initialPageParam: 0,
    getNextPageParam: (lastPage, allPages) =>
     lastPage.length ? allPages.length : undefined,
    gcTime: 0,
  });

 

힘들었던 점은 useQuery 사용시 컴포넌트가 마운트되자마자 데이터가 fetch되어, zustand로 관리하는 전역 상태에 따라 데이터 fetch되어야 하는 경우, 전역 상태의 업데이트보다 먼저 fetch가 이루어졌던 점입니다. useQuery의 enabled 옵션을 통하여 급한 불은 껐지만, 전역 상태 관리 로직이 불완전한 것 같다는 생각이 들어 zustand와 useQuery의 동작 배경을 더 공부한 후 코드를 개선해볼 예정입니다.

 

 

(5) 그외 기능들

Swiper.js, React Spring Bottom Sheet, ReactBigCalendar, ToastUIEditor 등 다양한 라이브러리를 활용하여 빠르게 기능을 구현할 수 있었습니다.

특히 ReactBigCalendar을 커스터마이즈하며 클래스형 컴포넌트로 작성된 라이브러리의 코드를 뜯어봤던 것이 힘들었던 만큼 많이 기억에 남습니다.

 

 

 

프로젝트 디벨롭

목표했던 기능들을 완성하며 캡스톤을 성공적으로 마무리하였습니다!

 

그러나 올해 캡스톤까지 4개의 프로젝트를 마친 후, 며칠 동안 제가 왜 여러 프로젝트를 마쳤음에도 불구하고 기대한 만큼의 성장을 이루지 못 했나에 대한 고민을 하게 되었습니다. 개발자는 구현만 하는 사람이 아니라는 것을 잘 알면서, 그저 결과물 내놓기에 급급했던 것 때문이지 않을까 싶네요.

그래서 지난 날을 반성하며 단통 프로젝트 디벨롭은 깊이 있는 학습에 초점을 두려 합니다. 그리고 코드 품질과 리액트 렌더링 최적화를 중심으로 프로젝트를 진행할 예정입니다!

 

 

 

그럼 이번 회고글에서 적었던 개선사항을 고쳐 다음 회고글로 금방 돌아오겠습니다.

 긴 글 읽어주셔서 감사합니다!