60일차 TIL(RTK / 최종프로젝트 발제 )

redux Toolkit
기존의 Redux를 개량한 것으로 -
코드를 더 적게 더 편하게 쓰기 위한 기능들을 흡수하여 만든 것을 리덕스툴킷

줄여서 RTK

createStore 보다는 configureStore 를 추천함. 이유는 이렇게 , 

// 일반 리듀서 사용  (API 두개를 사용)
// const rootReducer = combineReducers({
//     counter,
//     users,
// });

// Redux Toolkit 사용 (API 하나만으로 충분)
const store = configureStore({
    reducer : {
        counter : counter,
        users : users,
    }
});

+ 타입핑이 너무 많다 / 불필요하다라는 의견을 적극 수용하여
한번에 만들 수 있는 API 제공 [slice]
createSlice ();     actionCreator 와 reducer를 한 번에 생성 가능하게됨


// action value 도 필요 없어짐/
export const plusOne = "counter/plusOne";
export const minusOne = "counter/minusOne";
const plus_N = "counter/plus_N";
const minus_N = "counter/minus_N";

////
const counter = (state = initialState, action) => {
    switch (action.type) {
        case plusOne:
            return {
                number: state.number + 1,
            };
        case minusOne:
            return {
                number: state.number - 1,
            };
        case plus_N:
            return {
                number: state.number + action.payload,
            };
        case minus_N:
            return {
                number: state.number - action.payload,
            };
        default:
            return state;
    }
};
export default counter;




// 여기만 있으면 됨
const counterSlice = createSlice({
    name: "counter",
    initialState: "initialState",
    reducers: {
        addNumber: (state, action) => {
            state.number = state.number + action.payload;
        },
        minusNumber: (state, action) => {
            state.number = state.number - action.payload;
        },
    },
});



export default createSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;




불변성을 유지시켜줘야한다.
.reduce : 불변성을 유지
.push : 불변성 mutate - 불변성 유지 불가;
react가 인식할 수 없음,
노올랍게도 Redux toolkit 안에서는 state.push(action.payload); 로 입력하더라도
인식을 함;
이유는 redux toolkit 안에 immer라는 기능이 내장되어 있어서 그래 -
return으로 새로운 객체를 리턴하는 등 여러 공정의 로직을 대신 간편하게 처리해주는
귀여운 녀석이 탑재되어있어서
 Redux toolkit은 DevTools는 state가 다양하고 많이 변경되는데
이 모든 사항을 DevTools는 편리하게 이용하게 해준다, DevTools 때문에 react를 사용한다고 할 정도로 유용한 친구이다.

 

/// + 인증 인가

인증 인가 (쿠키 세션 토큰 JWT)
인증 Authentication 해당 유저인지 확인 인증하는거
인가 Authorization  해당 유저에게 특정 리소스에 대한 접근을 "인가"
쿠키

세션 - 세련이란 사용자와 서버 간의 연결이 활성화된 상태
(인증이 유지되고 있는 상태)
로그인 성공 -> 서버에서 세션 생성 및 저장 (key -value 형식) ->
key(session Id)를 브라우저에 응답 (by 쿠키)

토큰 인증 - 인과
토큰은 : 클라이언트에서 보관하는 암호화된 인증 정보이다
웹에서 인증 수단으로 사용되는 토큰은 주로 JWT(Json Web Token)
을 이용한다.
JWT의 특징으로는
header.payload.signature 형식으로 3가지 데이터로 구성되어 있다

 

/// 최종프로젝트 도입

최종 프로젝트가 시작되었다.

이전 프로젝트들에서 써보지않았던 Zustand나 Supabase 등 다양한 스택으로 이뤄진 프로젝트가 될 거 같다.

요즘 사람들이라고 일컬어 지는 젊은이들이 즐겨 찾는 팝업스토어의 정보를 정리해놓은 웹사이트를 만든다.

 

팝업스토어 정보를 정리해놓고 위치정보도 함께 제공하며 일정을 계획할 수 있는 사이트를 계획하고 있다.

기본적으로 소셜로그인을 이용하여

메인 페이지 - 상세페이지로 이어지며

헤더 컴포넌트에서 어디에서든 마이페이지로 이동하여 내가 찜해놓은 게시글을 확인하고 공유도 가능하다

검색 기능도 구현하여 원하는 팝업스토어 정보에 보다 쉽게 다가갈 수 있게 고안 할 것이다

 

무엇보다 깔끔하고 실제로 배포되는 서비스들의 수준의 기능구현이 되어보길 기대한다.

더 열심히 공부해야겠다.