23/12/04 til

과제해설을 듣고 내가 짠 코딩 문제점을 분석해보자.

일단 새로 배운 git 명령어

git remote -v 현재 연결된 원격 깃허브 주소들을 확인한다.

git remote remove origin 현재 연결된 원격 깃허브 오리진을 제거한다.

git remote add origin '주소' 새로운 오리진 연결한다.

 

<Router.js>

import Layout from "components/Layout";   //레이아웃 컴포넌트는 과제 요구사항의 헤더부분으로써

import Detail from "pages/Detail";             // 사용될 예정이었다 .리액트 라우터돔의 아웃렛을 응용요청

import Home from "pages/Home";

import Login from "pages/Login";

import Profile from "pages/Profile";

import { useSelector } from "react-redux";

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

export default function Router() {

  useSelector

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Home />}>  //과제를 할때 홈 라우트안에 레이아웃 라우트를 뒀다.

          <Route element={<Layout />} />           // 튜터님의 해설에서는 레이아웃 라우트로 다른 라우트

        </Route>                                                  //를 감싸서 사용하라고 알려주셨다.

        <Route path="/login" element={<Login />} />

        <Route path="/detail/:id" element={<Detail />} />

        <Route path="/profile/:id" element={<Profile />} />

        <Route path="*" element={<Navigate replace to="/" />} />

      </Routes>

    </BrowserRouter>    // 레이아웃 라우터로 다른 라우터로 감싸고 레이아웃.jsx 파일에서 outlet을

  );                           //임포트 해서 <outlet />으로 넣은곳에 다른 라우트들의 구현된다.

}

//아웃렛을 다시 사용해 봐야 겠다.

 

아래가 변 경해 본 <Router.jsx>

import Layout from "components/Layout";

import Detail from "pages/Detail";

import Home from "pages/Home";

import Login from "pages/Login";

import Profile from "pages/Profile";

import { useState } from "react";      

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

export default function Router() {

const [isLogin , setIsLogin] = useState(false)   //일단 이곳에 임시로 로그인 유무의 islogin 만듦

  return (                        //false면 비로그인 true면 로그인

    <BrowserRouter>

      <Routes>

        {isLogin ? (                          // islogin이 트루이면 홈화면으로 이동할수 있고

          <>

            <Route path="/" element={<Home />} />

            <Route path="/detail/:id" element={<Detail />} />

            <Route path="/profile/:id" element={<Profile />} />             //path에 별은 설정된값이외의 주소일경우

            <Route path="*" element={<Navigate replace to="/" />} />  // 별표주소를 홈으로 설정

          </>

        ) : (                               //false이면 로그인을 반드시 해야할 수 있게끔 화면 구성을 한다.

          <>

            <Route path="/login" element={<Login />} />

            <Route path="*" element={<Navigate replace to="/login" />} />  // 어떤 주소를 치더라도

          </>                                                                                             //로그인페이지로 가게끔 별표주소생성

        )}                  // 내가 과제할때는 홈화면 헤더인 layout.jsx에 로그인 버튼을 두었다.

        <Route element={<Layout />} />

      </Routes>

    </BrowserRouter>

  );

}

 

리덕스 툴킷을 이용한 리덕스를 생성해보자

<configurestore.js>

import letters from "redux/modules/letters";

import member from "redux/modules/member";

import authSlice from "redux/modules/authSlice";

import { configureStore } from "@reduxjs/toolkit";

//const rootReducer = combineReducers({ letters, member });

//const store = createStore(rootReducer, devToolsEnhancer());

const store = configureStore({             //일단 보통 리덕스에서 쓰는 createStore랑 다르게

  reducer: {                                       //combineReducers를 생략하고 썻다.

    letters,                                         //이렇게 써도 될것 같은데 튜터님 해설에서는 reducer키 값에

    member,                             //value를 rootReducer로 하고 

    authSlice,               //const rootReducer = combineReducers( { letters , member , authSlice})

  },                             //를 이용하셨는데 상관 없나 보다.

});

export default store;

 

<member.js>

import { createSlice } from "@reduxjs/toolkit";

// const SET_MEMBER = "member/SET_MEMBER";

// export const setMember = (payload) => {

//   return { type: SET_MEMBER, payload };

// };

const initialState = "카리나";

// const member = (state = initialState, action) => {

//   switch (action.type) {

//     case SET_MEMBER:

//       const activeMember = action.payload;

//       return activeMember;

//     default:

//       return state;

//   }

// };

                                                                 //createSlice는 세가지 key를 갖는다. name 이니셜스테이트 ,reducers

const memberSlice = createSlice({

  name: "member",   //네임은 그렇게 중요하지는 않은듯하다. 데브툴스에서 확인용도 인가?

  initialState,      

  reducers: {

    setMember: (state, action) => {

      const activeMember = action.payload;

      return activeMember;

    },

  },

});

 

export default memberSlice.reducer;       //리듀서 와 액션을 export

export const { setMember } = memberSlice.actions;// 액션스 중에 구조분해 할당으로 setMember 세팅 액션이 많으면

여러개 넣어도 된다.