React 초기 세팅 팁

초기 세팅

1. 폴더 생성
2. npx create-react-app ./
3. npm i styled-components styled-components 사용을 위함
4. npm i react-router-dom React Router Dom 설치
   • root 폴더의 index.js 수정

     const root = ReactDOM.createRoot(document.getElementById("root"));
     root.render(
       <React.StrictMode>
         <BrowserRouter> // BrowserRouter로 감싸주기
           <App />
         </BrowserRouter>
       </React.StrictMode>
     );

   • root 폴더의 App.js 수정

     // 예시
     
     import styled from "styled-components";
     import "./App.css";
     import Nav from "./components/Nav";
     import Banner from "./components/Banner";
     import Category from "./components/Category";
     import Row from "./components/Row";
     import requests from "./api/request";
     import { Outlet, Route, Routes } from "react-router-dom";
     import LoginPage from "./pages/LoginPage";
     import MainPage from "./pages/MainPage";
     import DetailPage from "./pages/DetailPage";
     import SearchPage from "./pages/SearchPage";
     
     const Layout = () => {
       return (
         <div>
           <Nav />
     
           <Outlet />
         </div>
       );
     };
     
     function App() {
       return (
         <div className="app">
           <Routes>
             <Route path="/" element={<Layout />}>
               <Route index element={<LoginPage />} />
               <Route path="main" element={<MainPage />} />
               <Route path=":movieId" element={<DetailPage />} />
               <Route path="search" element={<SearchPage />} />
             </Route>
           </Routes>
         </div>
       );
     }
     
     export default App;

Tip

• 전체적인 스타일링은 index.css
• 해당 js 앱 파일에서만 쓰일 스타일링은 해당 파일.css (App.css는 App.js의 스타일링)
• 함수형 초기 템플릿 자동생성 키워드 rafce

배포 (이건 git 배포 과정. 개인적으로 netlify나 다른 배포 툴이 더 편한듯)

1. git 레포 생성 후 연결 git remote add origin ..
2. 프로젝트 내에서 npm install gh-pages --save-dev
3. package.json 에서 private 밑에 “homepage” 속성 만들어서 값으로 https://{깃허브 유저 이름}.github.io/{저장소 이름}/ 입력
   1. ex) "homepage": "https://flamozzi.github.io/react-deploy-test/",
4. package.json 의 scripts에 "predeploy": "npm run build", 추가
5. package.json 의 scripts에 "deploy": "gh-pages -d build", 추가
6. npm run deploy로 배포