주요 코드에 대한 설명

온보딩 페이지라 라우팅과 데이터 바인딩에 한정된 부분만 개발했습니다.

라우팅

• 코드 스플리팅

  //index.tsx
  
  const App = lazy(() => import('./App'))
  const OnboardingPage = lazy(() => import('./routes/onboarding'))
  const SkipOrStartPage = lazy(() => import('./routes/skipOrStart'))
  const ErrorPage = lazy(() => import('./routes/error'))
  const MainPage = lazy(() => import('./routes/main'))
  

  지금은 작은 규모의 페이지지만, 나중에 앱이 커지면 번들까지 커지기 때문에 미리 대비해서 페이지별로 코드 분할(Code Splitting) 했습니다.

• route 설정, errorBoundary, Path 상수화

  //index.tsx
  
  const router = createBrowserRouter([
    {
      path: '/',
      element: <App />,
      errorElement: <ErrorPage />,
      children: [
        {
          path: `${BROWSER_PATH.ONBOARDING}/:id`,
          element: <OnboardingPage />,
        },
        {
          path: BROWSER_PATH.SKIPORSTART,
          element: <SkipOrStartPage />,
        },
        {
          path: BROWSER_PATH.MAIN,
          element: <MainPage />,
        },
      ],
    },
  ])
  

  react-router-dom 라이브러리를 적용했습니다. 그중 6.4v 추가된 DOM history API를 사용하는 createBrowerRouter 기능을 사용했습니다. 기본 인덱스는 <App>으로 설정했고 errorElement에 설정된 <ErrorPage>는 에러 바운더리 역할을 해줍니다.

  온보딩 페이지는 총 6페이지로 :id 파라미터값에 따라 dummy data의 id 값과 일치하는 onboarding 페이지가 나오도록 구현했습니다.

최대한 공통으로 나타나는 패턴은 하나로 묶기

다음 버튼, 페이지네이션, 타이틀 부분은 레이아웃은 똑같아서 하나의 컴포넌트를 만든 후에 내부의 컨텐츠 내용만 변경했습니다. 온보딩 애니메이션이 나오는 부분은 레이아웃이 매번 바뀌어서 페이지마다 다른 컴포넌트를 제작했습니다. 온보딩 페이지가 6페이지이므로 총 6개의 애니메이션을 구현했습니다.

//onboardingDummyData.tsx

export interface OnboadringPageProps {
  id?: number
  title: string[]
  content: string
  animate: JSX.Element
}

const onboadringDataList: onboadringPageProps[] = [
  {
    id: 1,
    title: ['편리한', '송금'],
    content: '계좌번호 입력 시 자동 은행인식',
    animate: <Onboarding1 />,
  },
  {
    id: 2,
    title: ['안전한', '익명거래'],
    content: '나만의 특별한 아이디로 실명 노출 없이 거래',
    animate: <Onboarding2 />,
  },
  {
    id: 3,
    title: ['사기신고', '이력'],
    content: '송금하는 계좌의 범죄이력 제공',
    animate: <Onboarding3 />,
  },
	//...some dummy data
]

• id - 파라미터에 해당하는 값,
• title, content - 페이지마다 다른 string값
• animate - 온보딩 애니메이션에 해당하는 컴포넌트

const [regularText, boldText] = title

return(<h2 className='text-3xl pb-2'>
				{regularText}{' '}
				<span className='text-yellow-500 font-bold'>{boldText}</span>
			</h2>)

itle을 배열로 나열한 이유는 디자인상 강조되는 텍스트에 bold 값이 들어갑니다. 위와 같은 형식으로 강조된 텍스트는 따로 처리하기 위해서 배열로 쪼개놨습니다.

활용한 라이브러리와 그 이유

• react-router-dom

  SPA에서 페이지 전환 기능을 쉽게 구현하기 위해 사용했습니다. 6.4v으로 업데이트 되면서 새로 추가된 createBrowserRouter라는 data API 추가되었는데, 해당 API로 사용하면 errorBoundary 처리가 깔끔해져서 활용했습니다.

• tailwind

  클래스 명을 고민하는 과정을 생략할 수 있고, css 파일과 tsx 파일을 번갈아 작업하지 않아도 되며, 디자이너가 정해둔 색상을 테마로 지정하면 지정값 외의 다른 색을 입력하는 실수를 줄일 수 있어서 사용했습니다.

• typewriter-effect

  온보딩 페이지 중 타이핑 애니메니션을 구현해야 해서 채택했습니다.

  다른 애니메이션 라이브러리로는 react-typed과 react-typical 있었습니다. react-type는 기능에 비해 용량이 603 kB로 비교적 컸습니다. react-typical은 용량은 가장 작았지만, 최근 업데이트 날짜가 3년 전이라 이슈가 발생할 수 있다는 점을 고려해서 typewriter-effect를 선택했습니다.

  	Weekly Downloads	Unpacked Size	Last publish
  https://www.npmjs.com/package/typewriter-effect	22,851	56 kB	4 months ago
  https://www.npmjs.com/package/react-typed	8,203	603 kB	3 years ago
  https://www.npmjs.com/package/react-typical	2,539	24.6 kB	3 years ago