ReactJS + TypeScript 프로젝트 기본 세팅

프로젝트 초기화

1. 프로젝트 초기화 및 필수 모듈 설치

   
   npx create-react-app myApp --template typescript
   npm i --save-dev @types/styled-components
   npm i styled-components
   npm i recoil

2. /src 디렉토리에 App.tsx, index.tsx 파일 제외한 불필요한 파일 삭제

3. index.tsx파일 기본 세팅 적용

   
   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import App from './App';
   import { RecoilRoot } from 'recoil';
   import { ThemeProvider } from 'styled-components';
   import { darkTheme } from './theme';
   
   const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
   );
   root.render(
     <React.StrictMode>
         <RecoilRoot>
           <ThemeProvider theme={darkTheme}>
             <App />
           </ThemeProvider>
         </RecoilRoot>
     </React.StrictMode>
   );
   

스타일 적용

기본 테마 인터페이스 재정의

1. /src 디렉토리에 style.d.ts파일 생성

   
   import "styled-components";
   
   declare module "styled-components" {
       export interface DefaultTheme {
           textColor: string;
           bgColor: string;
           accentColor: string;
       }
   }

2. /src 디렉토리에 theme.ts파일 생성

   
   import { DefaultTheme } from "styled-components";
   
   export const darkTheme : DefaultTheme = {
       bgColor: "#2f3640",
       textColor: "#7f8fa6",
       accentColor: "#9c88ff",
   };
   
   export const lightTheme : DefaultTheme = {
       bgColor: "whitesmoke",
       textColor: "black",
       accentColor: "#9c88ff",
   };

3. App.tsx에 전역 스타일 설정 추가

   
   import React from 'react';
   import { createGlobalStyle } from 'styled-components';
   
   const GlobalStyle = createGlobalStyle`
   @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap');
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, menu, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td,
   article, aside, canvas, details, embed,
   figure, figcaption, footer, header, hgroup,
   main, menu, nav, output, ruby, section, summary,
   time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure,
   footer, header, hgroup, main, menu, nav, section {
     display: block;
   }
   /* HTML5 hidden-attribute fix for newer browsers */
   *[hidden] {
   	display: none;
   }
   body {
     line-height: 1;
   }
   menu, ol, ul {
     list-style: none;
   }
   blockquote, q {
     quotes: none;
   }
   blockquote:before, blockquote:after,
   q:before, q:after {
     content: '';
     content: none;
   }
   table {
     border-collapse: collapse;
     border-spacing: 0;
   }
   * {
     box-sizing : border-box;
   }
   body {
     font-family: 'Source Sans 3', sans-serif;
     background-color: ${props => props.theme.bgColor};
     color:${props => props.theme.textColor}
     
   }
   a {
     text-decoration: none;
     color:inherit;
   }
   `;
   
   function App() {
     return (
   	<>
   	  <GlobalStyle />
   	</>
     );
   }
   
   export default App;