React | TIL | 지난 프로젝트의 index.tsx 되짚어보기

SSAFY 2학기의 첫 번째 프로젝트로 7월 3일부터 약 7주간, 공동 육아일기 어플리케이션 <SONAGI> 프로젝트를 멋진 팀원들과 성공적으로 끝마쳤다! SSAFY의 보안 정책으로 인해 우리의 멋진 프로젝트를 아직 외부에 소개하진 못하고 있지만, 코드 반출 신청 후에 공개가 허용된다면 언젠가 이 공간에도 꼭 소개하고싶다 🤟

 

현재는 이틀간의 짤막한 휴식 후 바로 두 번째 특화 프로젝트를 진행하고 있다. 그리고... 어찌저찌 시간을 짜내 다시 지난 프로젝트를 들여다보고 있다. 왜냐하면, 지난 프로젝트때 리액트와 타입스크립트를 1도 모르던 내가!!! 이번 프로젝트부터는 팀-팀장 && 프론트엔드-팀장이 되었기 때문이다 😂 오늘은 수많은 기능들과 페이지들...을 제치고 index부터 정리해보려고 한다.

 

왜 다른 주요 기능들이 아닌 index.tsx를 돌아보고 있는지?

1. 세 명의 프론트엔드 디벨로퍼가 함께 작업하다보니 index.tsx에 어떤 모듈을 import 하고 있는지 전부 알지 못했다.

2. 너무 많이 봐서 익숙한 import문들 투성이지만, 

import ReactDOM from 'react-dom';

 

"이 한 줄이 어떤 기능을 수행하고 있는지 설명해보라"고 하면 명확하게 설명할 자신이 아직 없다 => 이제는... 알고 쓰고 싶다 ^ㅇ^

3. React 앱의 entry point이므로, 다음 프로젝트의 원활한 개발을 위한 세팅을 미리 해두기 위해 정리해보기로 한다. 

 

index.tsx

import React from 'react'; 
import ReactDOM from 'react-dom';
// ↳ ReactDOM.render()와 같이 React 요소를 DOM에 렌더링하는 데 필요한 기능을 제공

import './index.css';
// ↳ React와 웹팩(또는 Create React App이나 다른 번들러를 사용하는 경우)의 동작 방식 덕분에 
// index.css 파일 내에 정의된 CSS 스타일들이 프로젝트에 자동으로 적용. 
import '@/styles/font.css'; // 이 줄도 마찬가지

import reportWebVitals from './reportWebVitals';
// ↳ 사용자 경험 관련 품질 지표에 대한 통합적 지침을 제시하는 Google 이니셔티브 성능 측정 도구
// Create React App (CRA)의 최신 버전에서 기본으로 포함되는 코드 (Optional)

import AppRouter from './router/routes';
import { RecoilRoot } from 'recoil';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from './styles/GlobalStyle';
import theme from '@/styles/theme';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0,
      suspense: true,
    },
  },
});

root.render(
  <React.StrictMode>
    <RecoilRoot>
      <ThemeProvider theme={theme}>
        <QueryClientProvider client={queryClient}>
          <GlobalStyle />
          <AppRouter />
        </QueryClientProvider>
      </ThemeProvider>
    </RecoilRoot>
  </React.StrictMode>
);

reportWebVitals(); // 측정된 Web Vitals 결과를 콘솔에 출력(필요 없다면 지우기)

 

주석이 달리지 않은 나머지 코드는 라우터, 리코일, 쿼리, 스타일드컴포넌트, 스타일 지정 등을 위한 import문이기 때문에 추가적인 설명이 필요하지 않아 별도의 설명을 적어두진 않았다. index를 정리하고 나니, 다음으로 자연스럽게 시선이 가는 곳은.. 렌더링부 안의 여러 컴포넌트 안에 감싸져있는 <AppRouter />이다! 다음엔, routes.tsx와 그 중 로그인 과정에서 리다이렉팅을 해주는 역할인 RedirectPage.tsx를 정리해봐야겠다.