[React] 프로젝트 생성(CRA) 및 설치 (+ typescript 버전)

 

1. CRA 로 react  프로젝트 생성

npx create-react-app 프로젝트명

1-1. typescript를 사용할 경우

npx create-react-app 프로젝트명 --template typescript

 

2. styled-components, react-router-dom, swr 설치

 

styled-components 설치 (javascript)

npm i styled-components

 

styled-components 설치 (typescript)

-> typescript에서 오류없이 사용하기 위해서는 styled-component의 type들을 가지고 와야한다.

npm i styled-components @types/styled-components

---

react-router-dom 설치(javascript)

npm install react-router-dom@6

 

react-router-dom 설치(typescript)

npm install react-router-dom@6

npm install react-router-dom @types/react-router-dom

npm install --save @types/react @types/react-dom

 

---

 

swr 설치(typescript, javascript 동일)

npm install swr

 

3. react-icons 

폰트속성을 가진 다양한 아이콘을 사용할 수 있다.

라이브러리를 설치한 후 아래 사이트에서 아이콘이름을 import해주면 된다.

 

1) 설치

npm install react-icons --save

2) import 후 사용

import {아이콘이름} from 'react-icons/fa';

// 사용할땐 컴포넌트형태로 사용
<아이콘이름/>

 

 

4. Material UI 설치

이번 프로젝트에 디자이너가 따로 없기도 하고 기간이 정해져있는 프로젝트에 프론트엔드는 나혼자 진행하기 때문에 디자인은 라이브러리의 도움을 받을까 한다. 백엔드와 통신을 하는 기능 공부에 더 집중하고 싶은 이유도 있다.

 

Material UI 설치(전자)

npm install @mui/material @emotion/react @emotion/styled

styled-components 혼용 사용시 Material UI 설치(후자)

npm install @mui/material @mui/styled-engine-sc styled-components

 

styled-components 와 Material UI를 함께 사용하기 위해서는 최상위 index.tsx에 아래와 같이

<StyledEngineProvider injectFirst></StyledEngineProvider>로 감싸줘야 한다. 이렇게 감싸주면 설치할 때 전자의 설치 방법을 사용해도 된다고 한다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { StyledEngineProvider } from "@mui/styled-engine";
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <StyledEngineProvider injectFirst>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </StyledEngineProvider>
);

 

 

 

참고 자료

 

[TypeScript] React+TypeScript+react-router-dom-v6로 개발 시작하기

 

Styled-Components with MUI

 

 

프론트엔드는 설치부터 세팅해야할게 참 많은 것 같다. 이것도 반복하면 익숙해지겠지??

나를 포함한 프로젝트 시작 전부터 헤매는 이들을 위해!!