Today 요약

1. 코테 1문제 풀기
2. 리덕스 공부하기

1. What I did?

1.1 코테 문제 풀기

369 게임

문제는 아래와 같다.

머쓱이는 친구들과 369게임을 하고 있습니다. 369게임은 1부터 숫자를 하나씩 대며 3, 6, 9가 들어가는 숫자는
숫자 대신 3, 6, 9의 개수만큼 박수를 치는 게임입니다. 머쓱이가 말해야하는 숫자 order가 매개변수로 주어질
때, 머쓱이가 쳐야할 박수 횟수를 return 하도록 solution 함수를 완성해보세요.

말 그대로 369게임이다. 숫자가 주어졌을 때 그 숫자에 몇 번 박수를 쳐야하는지를 구하면 된다.

내 풀이는 아래처럼 구현해보았다.

function solution(order) {
  return [...String(order)].filter(
    (item) => item === '3' || item === '6' || item === '9'
  ).length
}
// 시간복잡도 O(n)

일단 string으로 변경한 다음에 배열로 변경하고 그걸 하나씩 돌면서 3,6,9일때를 filter한 배열로 만들고 그 배열의 길이를 리턴하도록 구현했다. 그리고 시간 복잡도는 배열을 요소를 하나씩 돌면서 filter하기 때문에 O(n)이라고 생각한다.

그리고 항상 다른 사람들의 풀이를 보면서 이해하는 부분도 까먹지 않아야 하기 때문에 오늘도 마음에 드는 코드 하나를 TIL적어보면서 이해해보자.

function solution(order) {
  var answer = [...order.toString().matchAll(/[3|6|9]/g)].length
  return answer
}

이 코드는 일단 matchAll 이라는 메서드를 이해해야한다. matchAll은 자신을 호출한 문자열과 정규식과의 매칭 결과를 배열로 반환하는 메서드다. 그러니까 한마디로 order로 받은 숫자를 문자열로 변경하고 그리고 /[3|6|9]/g의 정규식과 일치하는 부분만 배열로 반환하고 마지막에 역시 length 값으로 3,6,9가 몇번이나 있었는지 확인해서 반환한다. 이때 [3|6|9] 이 부분은 3,6,9 중에 하나라도 일치하는지를 체크하는 표현식이고 g는 전역 검색 플래그다.

2. What I Learned?

2.1 리덕스 공부하기

combineReducers

combineReducers를 사용해봤다. redux만 설치해서도 사용이 가능하지만 redux + react-redux + redux toolkit 까지 사용하고 있는 상태에서 시도해보았다. slice는 사용하지 않고, combineReducers 이용해서 모든 reducer를 결합해서 하나의 rootReducer로 선언해서 store에 전달하는 방법을 사용했다.

provider로 App을 감싸고 store 전달하는 건 기존과 동일하게 했고 combineReducers로 여러개의 reducer를 결합해서 하나의 rootReducer로 만들어서 store를 만들때 전달했다.

import { combineReducers } from 'redux'
import counter from './counter'
import todos from './todos'

// reducer들을 합쳐서 하나의 rootReducer로 관리하기
const rootReducer = combineReducers({
  counter,
  todos
})

export default rootReducer

import { createStore } from 'redux'
import rootReducer from '../reducers/index'

const store = createStore(rootReducer)

export default store

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

redux-thunk

thunk는 비동기 로직을 처리하고 싶을 때 사용한다. 정도로 이해하고 있다. 자세하게 사용하는 방법은 현재 thunk를 사용하면서 발생한 오류를 해결하고 나서 남겨보려고 한다. 일단은 fetch를 이용해서 비동기로 받아오는 데이터를 제대로 못가져오고 있는데, 이게 reducer나 action을 잘못 작성해서 그런건지 thunk 자체를 잘못사용해서 그런건지 아직 제대로 이해하지 못하고 있기 때문에 내일 다시 도전하려고 한다.