[PalmtreeClass]야자반#1 TodoList 새로 시작

새 프로젝트 시작시 해야 할 사항들

• 새 폴더 생성

• CRA(Create React App)
  cd 폴더명 ; 리액트 프로젝트 생성하고 싶은 폴더로 들어가기

yarn create react-app 프로젝트명 ; 프로젝트 생성

cd 프로젝트명 ; 생성한 프로젝트 실행

yarn add redux react-redux

yarn add styled-components

리덕스 툴킷 설치; yarn add react-redux @reduxjs/toolkit

yarn start ; 프로젝트 구동

페이지 이동 구현; yarn add react-router-dom
(1. Pages폴더 생성 후 컴포넌트 생성: Home.jsx, Detail.jsx)
(2. src - shared - Router.js 생성 및 router 설정 코드 작성)
(3. 다른 페이지에 import 및 적용)
(4. 페이지 이동 테스트)

//(Router.js) 라우터 뼈대 만들기
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

// 라우터 안에 연결하고 싶은 페이지들 넣기
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../components/Home";
import Detail from "../components/Detail";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='detail' element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

App.js에 Router.js import 해주기

import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

Router.js를 다른 곳도 아닌 App 컴포넌트에 넣어주는 이유는 우리가 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js 이기 때문

+ 이동하고자 하는 페이지 확인하기 위해

// src/pages/Home.jsx
import React from "react;
const Home = () => {
	return (
    	<div>Home</div>
    );
};
export default Home;

기본 틀

import React from "react";

const App = () => {
	return (
		<>
		</>
	);
};

export default App;

json-server ; yarn global add json-server
json서버 스타트 ; json-server --watch db.json --port 3001

axios 설치 ; yarn add axios