Index 컴포넌트

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
  <BrowserRouter><App /></BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

window.resizeTo(
  window.screen.availWidth,
  window.screen.availHeight
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

html 캔버스 위의 렌더링을 시작하는 Index 컴포넌트이다. 여기서 root element를 찾아 라우팅을 설정한 App컴포넌트를 탑재시켜준다. 일단 기본적으로 <React.StrictMode>가 적용되어 있다.

React Strict 모드란?

StrictMode currently helps with:
1.Identifying components with unsafe lifecycles
2.Warning about legacy string ref API usage
3.Warning about deprecated findDOMNode usage
4.Detecting unexpected side effects
5.Detecting legacy context API
6.Detecting unsafe effects
7.Additional functionality will be added with future releases of React.

<React.StrictMode> 태그로 감싸진 그 컴포넌트 하위에만 위 모든 사항이 적용된다고 생각하면 된다.
<BrowserRouter> 태그는 감싸진 app 컴포넌트에서는 <Routes> 태그의 활용을 가능하게 만든다.

Single Page가 호출되면 DFS 알고리즘과 비슷한 방식으로 Component들이 탑재되고 렌더링 된다. 첫번째로 호출된 Index 컴포넌트는 마지막으로 구현되고 window.resizeTo 메소드가 호출되는데 Device의 Viewport 가용 width, height에 맞춰 창을 등장하게 만들었다.

CSS

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
  overflow-y: scroll;
  overflow-x: auto;
  touch-action: inherit;
  -webkit-user-drag: none;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Width와 Height를 각각 살펴보자. 일단 %, vw의 차이점을 알아야한다. %와 같은 경우는 부모의 Width를 퍼센트만큼 추종한다는 뜻이니, body element가 100%일 시 viewport의 넓이를 가지게 된다. 만약 vw,vh를 사용하게 된다면 스크롤바의 넓이나 높이까지 포함되므로 잘못된 포지션이 계산될 수 도 있는점을 주의해야한다.

background-color를 검은색, color는 하얀색으로 설정하여 사용자가 보는 기본화면은 검정색 바탕에 흰 글씨가 나타난다.

-webkit-user-drag: none, user-select: none을 설정하여 텍스트 선택 및 드래그를 막는다. 이는 root element에 user-select propery가 auto로 설정되어 있어 body태그(부모)의 속성을 팔로우하는 구조를 이용한다.