2023.03.07) 항해 30일차 (깃, 투두리스트)

오늘은 어제 파일을 날렸기 때문에 다시는 그런 불상사가 일어나지 않기 위해.....

깃 명령어를 공부하고 커밋하는 습관을 가져야겠다.

 

1) 깃

처음 깃 연결 및 커밋 푸시 할 때,

git init
git add .
git commit -m "커밋명"
git remote add origin 깃허브주소
git push origin 브랜치명

 

변경 사항 있을때마다,
git add .
git commit -m "새로운 커밋명"
git push origin 브랜치명

-이 외

$ git remote -v 현재 연결되어 있는 원격 레파지토리를 확인한다.

git remote remove origin을 사용해 주시면 연결되어 있는 저장소를 간단하게 끊을 수 있다. 

 

 

 

2) 투두 리스트 대략적인 과정

리덕스와 라우터 돔 기본 폴더 구조를 만든다.

yarn add react-router-dom  //라우터 돔 패키지 설치
yarn add redux react-redux //리덕스 패키지 설치
yarn add styled-components //스타일드 컴포넌트 패키지 설치

사용하기 위한 패키지를 설치한다.

//Router.js

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Sub from "../pages/Sub";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는,
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sub" element={<Sub />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

두 페이지를 연결하기 위해 작성해준다. (이 부분은 추후 상세페이지 연결 위해 바뀌긴 한다..)

 

//App.js

import React from "react";
import Router from "./shared/Router"; // 불러오는 주소 조심!!

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

라우터 import하는 과정에서 경로가 잘못 되어 있어서 오류가 났었따...

주의하자! 

//index.js
// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

	//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}> 
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

스토어 사용을 위해 추가로 작성해주어야 한당.

//configStore

import { legacy_createStore as createStore } from "redux"; //스토어를 만들어 주는 api
import { combineReducers } from "redux"; // 리듀서들을 하나로 묶는 역할
import todos from "../modules/todos"; // 모듈을 스토어에 연결하려면 임포트해야 한다!

const rootReducer = combineReducers({ todos });
const store = createStore(rootReducer);

export default store;

스토어에 기본적으로 적어주는 것들!!!! todos는 당연히 바뀌는 값이다!!!!

 

 

여기까진 기본적으로 만들어지는 부분이었다.

 

투두리스트를 만들고 추가, 삭제, 완료, 취소, 상세페이지 까지 구현하고 컴포넌트도 분리했지만!!!

몸이 좋지 않은 관계로 수정하기와 스타일드 컴포넌트는 하지 못했다....

또르륵....

내일 완벽하게 마무리 해야겠다!!!