리액트 프로젝트 시작하기

 

프로젝트 생성

$ npx create-react-app [appname]		# npm 아님 주의!

 

 

라우터 설치

$ npm install react-router-dom

 

 

프리티어 설치 

$ npm install --global prettier

 

 

CSS 라이브러리 설치 (styled-components)

$ npm i styled-components

 

 

 

+) 프리티어 기본 설정 코드 (파일 위치: 프로젝트 제일 상단 (src와 동등 위치))

이거 추가해도 안 되는 경우 vscode 등 auto 설정 확인해보기 

// prettierrc.json

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 150,
  "arrowParens": "always"
}

 

 

+) 폰트 설정하기 

index.html의 head에 웹폰트 링크 넣기 아래 예시는 pretendard

<link
      rel="stylesheet"
      as="style"
      crossorigin
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
    />

 

 

라우터, styled-components 등을 설정한 App.js 예시 코드

import { createGlobalStyle } from "styled-components";
import { Route, Routes } from "react-router-dom";
import Login from "./pages/Login";
import SignUp from "./pages/SignUp";
import Main from "./pages/Main";
import MyPage from "./pages/MyPage";
import "./App.css";

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    // 아래는 여러 환경 폰트 동일 적용을 위함
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;  }
`;

function App() {
  return (
    <div className="App">
      <Routes>
        <Route index element={<Main />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<SignUp />} />
        <Route path="/mypage" element={<MyPage />} />
      </Routes>
      <GlobalStyle /> {/* styled component 적용  */}
    </div>
  );
}

export default App;