👩🏻‍💻 Today Learn

• 알고리즘 1문제
• 스탠다드반 수업
• 리액트심화 강의

---

🔐 알고리즘 문제풀이

문제) 없는 숫자 더하기

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.

풀이

function solution(numbers) {
    let answer = 0;
    for (let i=0; i<=9; i++) {
        if (!numbers.includes(i)) {
            answer += i
        }
    }
    return answer;
}

include()는 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 적절히 true 또는 false를 반환해준다.

숫자 0부터 9까지 돌면서 number에 포함되지 않는 숫자를 answer에 더해준다는 식으로 접근했다.

사실 reduce()를 사용해보려고 했는데 배열에 포함되지 않는 값을 찾는 것에 어려움을 느끼다가 결국 익숙한 for, if....

다른사람의 풀이

function solution(numbers) {
    return 45 - numbers.reduce((cur, acc) => cur + acc, 0);
}

0부터 9까지 더한숫자인 45에서 배열의 숫자를 더한 값을 빼는 방식으로 reduce()를 사용한 풀이를 발견...
없는 값을 찾아서 더하는것만 생각했지 전체를 더한 수에서 빼는건 생각 못했어서 신기했다!

만약에 배열의 숫자가 커진다면 이 방법이 가능할까?라고 생각해봤는데 반복문 돌려서 배열 숫자 더한 후에 빼면 되겠구나 싶었다..

사고의 전환!

---

💡 알게된 내용

Redux Toolkit

"Redux 스토어 구성이 너무 복잡해!", "Redux에는 너무 많은 상용구 코드가 필요해!" 라는 문제를 해결하기 위해 만들어졌다고 한다.

Redux Toolkit API

▪︎ configureStore()

: createStore를 감싸서 간소화된 구성 옵션과 좋은 기본값을 제공한다. 자동으로 슬라이스 리듀서를 결합할 수 있고, 기본적으로 리덕스-썽크를 포함하고, Redux 개발자 도구 확장 기능을 사용할 수 있다.

▪︎ createReducer()

: 스위치 문을 작성하는 대신 Case Reducer 함수에 작업 유형의 조회 테이블을 제공할 수 있다.

▪︎ createAction()

: 주어진 액션 유형 문자열에 대한 액션 생성기 함수를 생성한다. 함수 자체가 toString()정의되어 있으므로 유형 상수 대신 사용할 수 있다.

▪︎ createSlice()

: 리듀서 함수의 객체, 슬라이스 이름, 초기 상태 값을 받아들이고 해당 액션 생성자와 액션 유형을 사용하여 슬라이스 리듀서를 자동으로 생성한다.

▪︎ createAsyncThunk

: pending fulfilled rejected 작업 유형 문자열과 약속을 반환하는 함수를 받아들이고 해당 약속을 기반으로 작업 유형을 전달하는 썽크를 생성한다.

참고 https://redux-toolkit.js.org/introduction/getting-started

기존 Redux

import uuid from "react-uuid";

const ADD_TODO = "ADD_TODO";
const DELETE_TODO = "DELETE_TODO";
const SWITCH_TODO = "SWITCH_TODO";

export const addTodo = (payload) => {
  return {
    type: ADD_TODO,
    payload,
  };
};

export const deleteTodo = (payload) => {
  return {
    type: DELETE_TODO,
    payload,
  };
};

export const switchTodo = (payload) => {
  return {
    type: SWITCH_TODO,
    payload,
  };
};

const initialState = [
  {
    id: uuid(),
    title: "제목1",
    content: "내용1",
    isDone: false,
  },
  {
    id: uuid(),
    title: "제목2",
    content: "내용2",
    isDone: true,
  },
  {
    id: uuid(),
    title: "제목3",
    content: "내용3",
    isDone: false,
  },
];

// 리듀서
const todos = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...state, action.payload];

    case "DELETE_TODO":
      return state.filter((item) => {
        return item.id !== action.payload;
      });

    case "SWITCH_TODO":
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    default:
      return state;
  }
};

export default todos;

Redux Toolkit

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

// initial states
const initialState = [
  {
    id: uuidv4(),
    title: "리액트 공부하기",
    contents: "빨리빨리 암기하기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "스프링 공부하기",
    contents: "인강 열심히 들어보기!!",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "데이트",
    contents: "홍대입구역에서 3시까지",
    isDone: false,
  },
];

const todoSlice = createSlice({
  name: "todos",
  initialState,
  reducer: {
    addTodo: (state, action) => {
      return [...state, action.payload];
    },
    removeTodo: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    },
    switchTodo: (state, action) => {
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    },
  },
});

// export
export default todoSlice.reducer;
export const { addTodo, removeTodo, switchTodo } = todoSlice.actions;

initialState를 제외하고 보면 훨씬 간결해진것을 알 수 있다!

---

✍🏻 회고

아직 Redux에 입학도 제대로 못했는데 졸업을 당하고 Redux Toolkit에 입학하게 되었다... 그렇지만 더 쓰기 편하다고 하니까 Toolkit에 익숙해지도록 눈에 익히고 손으로 익히고 머리로 익혀야겠다.