코드스테이츠 소프트웨어 엔지니어링 부트캠프 88

max heap, min heap에 대해 알게 되었다.

https://wnsdufdl.tistory.com/167

알고리즘 20 : Binary Heap(Max)

---

리덕스를 까먹어서 다시 복습했다.

 

프론트엔드 복습을 해야겠다는 생각이 든다.

 

exercise.js

// exercise.js

//createStore는 스토어를 만들어주는 함수인데 스토어는 하나만 쓴다.
import { createStore } from 'redux';

//리덕스에서 관리할 상태 정의
const initialState = {
    counter : 0,
    text : '',
    list : []
}

//액션타입 정의
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const CHANGE_TEXT = 'CHANGE_TEXT';
const ADD_TO_LIST = 'ADD_TO_LIST';

//액션 생성함수 정의
function increase(){
    return {
        type : INCREASE
    };
}
function decrease(){
    return {
        type : DECREASE
    }
};
const changeText = text => ({
    type : CHANGE_TEXT,
    text
});
const addToList = item => ({
    type : ADD_TO_LIST,
    item
});


//리듀서 정의
//위 액션 생성함수들을 통해 만들어진 객체들을 참조하여
//새로운 상태를 리턴한다.
//리듀서에서는 불변성을 꼭 지켜야한다.
function reducer(state=initialState,action) {
    switch (action.type) {
        case INCREASE :
            return {
                ...state,
                counter : state.counter+1
            }
        case DECREASE :
            return {
                ...state,
                counter : state.counter-1
            }
        case CHANGE_TEXT :
            return {
                ...state,text : action.text 
            }
        case ADD_TO_LIST :
            return {
                ...state, list : [...state.list,action.item]
            }
    }
}

//스토어 만들기
const store = createStore(reducer);
//getState() 는 현재 store안에 들어있는 상태를 조회하는 메소드이다.
console.log(store.getState());

//리덕스 스토어 안의 상태는 액션이 디스패치됨에 따라 업데이트된다. 
//listener라는 함수를 만들어서 리덕스 상태에 변화가 생겼을 때 마다 콘솔에 상태를 출력하도록 한다.
const listener = () => {
	const state = store.getState();
    console.log(state)
    }
//구독 해제하고 싶을 때는 unsubscribe()를 호출한다.
const unsubscribe = store.subscribe(listener);

//dispatch, 스토어의 내장함수인데 액션을 파라미터로 사용한다.
//액션 객체는 dispatch메소드에 전달되고 dispatch는 리듀서를 호출하여 새로운 state를 만든다.
//액션이 디스패치될때마다 스토어 안의 상태가 업데이트 된다.
store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(changeText('안녕하세요'));
store.dispatch(addToList({ id: 1, text: '와우' }));

//액션이 디스패치 될 때마다 상태가 바뀌고, 
//이에 따라 listener 함수가 호출 된다. 개발자도구에서 확인할 수 있다.

 

index.js

import './exercise' ; 를 추가했다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './exercise';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

위와 같이 exercise.js 를 작성하고 index.js에 import 한 후, npm start를 실행하여 콘솔창을 확인하면 다음과 같다.