[취업준비일지] - 57

1.redux-toolkit을 사용하기 위해서는 npm install @reduxjs/toolkit로 설치할 수 있으며

cra와 함께 사용하고 싶은 경우리액트 단일로 사용하려면 
"npx create-react-app my-app --template redux"

타입스크립트와 사용하려면 
"npx create-react-app my-app --template redux-typescript"로 가능하다.

2.redux와 유사하게 index.js에서 Provider로 store를 저장해야 하며
일반적 사용에 아래와 같은 추가적 작업이 필요하다

import { store } from './app/store'   //(1)
import { Provider } from 'react-redux'  //(2)
ReactDOM.render(
  <Provider store={store}> //(3) Provider로 감싸는 모습
    <App />
  </Provider>,
  document.getElementById('root')
)

store는 src/app 내부에 store.js파일로 생성하며
configureStore를 통해 내부 slice들을 관리(통합)한다.
import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

//하단은 TypeScript의 경우 type 설정하는 부분
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

상태를 관리하기 위해서 아래와 같은 slice를 만들어야 하는데
아래의 예시는 TypeScript를 위한 것으로
이 중 type, interface, generic들을 제외하면 js와 동일하다.

import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'

export interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

 

이전에 만든 store에 지금 만든 slice를 추가하려면 
아래와 같이 import 해준 후 이름을 지정해주면 된다.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice' //(1) import 한 부분

export const store = configureStore({
  reducer: {
    counter: counterReducer, //(2) 추가된 부분
  },
})

추가한 상태를 사용하려면 아래와 같이 selector, dispatch를 import 하고
생성한 slice에 직접 접근해 메서드를 import 해서 사용한다.

import type { RootState } from '../../app/store' //(1) type지정
import { useSelector, useDispatch } from 'react-redux'//(2) redux 기능 import
import { decrement, increment } from './counterSlice' //(3) 상태관리 메서드 import

export function Counter() {
  const count = useSelector((state: RootState) => state.counter.value) //(4) 
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

 

3.Redis는 데이터베이스, 캐시, 메시지 브로커 및 스트리밍 엔진으로 사용되는 
메모리 키 값 데이터 구조 스토어 오픈소스다.

보조기억장치(하드디스크/SSD 등)이 아닌 주기억장치(RAM)에 저장되기 때문에
디스크 스캐닝을 하지 않아 빠르다는 장점이 있다.

하지만 RAM은 휘발성이기 떄문에 지속성을 유지하기 위해서 여러가지 옵션을 사용하는데
RDB, AOF, 지속성 없음, RDB+AOF 등이 사용된다.

RDB(Redis Database) - 설정한 간격마다 스냅샷을 찍어 기록
AOF(Append Only File) - 서버에서 받은 모든 작업을 기록(Redis protocol 이용)
No persistence - 지속성 비활성으로 캐싱할 때 사용될 수 있다.
RDB + AOF - RDB, AOF의 결합으로 RDB가 사용될 경우 AOF 재작성을 방지하며
           AOF의 BGSAVE(백그라운드 DB 저장)가 진행되는 경우만 허용하는 등
           상호작용을 통해 적은 디스크 사용량으로 AOF 파일의 완전성을 보장한다.

 

트위터, 깃허브, 스택오버플로우 등 대부분이 아는 사이트들에도 적용되어 있으며
외부종속성이 없어 대부분의 언어에서 사용 가능하다는 특징이 있다.

Redis의 Data Type에는 Strings, Lists, Sets, Hashes, Sorted sets,
Streams, Geospatial indexes, Bitmaps, Bitfields, HyperLogLog 등이 있다.

 

(1).백준 3460 이진수는 숫자를 이진수로 변경한 다음 1의 index를 출력하는 문제였지만 순서가 역순으로 index가 들어가는 문제였다.
테스트케이스는 하나지만 여러개가 올 수 있어 특이했고
문제를 풀고 보니 이진변환을 직접 만드는게 아닌 toString(2)로 해도 됐는데
빠르게 생각해내지 못한 부분은 아쉬웠다.

let input = `1
13
20
1`.split('\n').map(Number)

let result = []
for(let i = 1 ; i < input.length ; i++){
    let str = ''
    let now = input[i]
    let idx = []
    while(now){
        if(now %2){
            str += '1'
        }
        else{
            str += '0'
        }
        now = Math.floor(now/2)
    }
    for(let i = 0 ; i < str.length ; i++){
        if(str[i] === '1'){
            idx.push(i)
        }
    }
    result.push(idx.join(' '))
}

console.log(result.join('\n'))