오랫만에 신나는 알고리즘 풀이 시간.
어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는 벽에 페인트를 덧칠하기로 했습니다.
넓은 벽 전체에 페인트를 새로 칠하는 대신, 구역을 나누어 일부만 페인트를 새로 칠 함으로써 예산을 아끼려 합니다. 이를 위해 벽을 1미터 길이의 구역 n개로 나누고, 각 구역에 왼쪽부터 순서대로 1번부터 n번까지 번호를 붙였습니다. 그리고 페인트를 다시 칠해야 할 구역들을 정했습니다.
벽에 페인트를 칠하는 롤러의 길이는 m미터이고, 롤러로 벽에 페인트를 한 번 칠하는 규칙은 다음과 같습니다.
- 롤러가 벽에서 벗어나면 안 됩니다.
- 구역의 일부분만 포함되도록 칠하면 안 됩니다.
즉, 롤러의 좌우측 끝을 구역의 경계선 혹은 벽의 좌우측 끝부분에 맞춘 후 롤러를 위아래로 움직이면서 벽을 칠합니다. 현재 페인트를 칠하는 구역들을 완전히 칠한 후 벽에서 롤러를 떼며, 이를 벽을 한 번 칠했다고 정의합니다.
한 구역에 페인트를 여러 번 칠해도 되고 다시 칠해야 할 구역이 아닌 곳에 페인트를 칠해도 되지만 다시 칠하기로 정한 구역은 적어도 한 번 페인트칠을 해야 합니다. 예산을 아끼기 위해 다시 칠할 구역을 정했듯 마찬가지로 롤러로 페인트칠을 하는 횟수를 최소화하려고 합니다.
정수 n, m과 다시 페인트를 칠하기로 정한 구역들의 번호가 담긴 정수 배열 section이 매개변수로 주어질 때 롤러로 페인트칠해야 하는 최소 횟수를 return 하는 solution 함수를 작성해 주세요.
풀이 (풀이 실패)
function solution(n, m, section) {
let answer = 0;
let paintedArea = 0;
for (let i = 0; i < section.length; i++) {
if (section[i] > paintedArea) {
answer++;
paintedArea = section[i] + m - 1;
}
}
return answer;
}
너무 문제를 어렵게 생각했던 모양이다. 엔드 포인트를 설정하는 것까지는 떠올려낼 수 있었는데... 여러모로 아쉽다.
색칠된 구역을 정한 다음, section을 순회하며 점점 페인트칠된 공간을 늘려가는 게 포인트이다. 나중에 다시 들여다볼 필요가 있을 듯 하다.
개인 프로젝트 REDUX 적용.
import { configureStore } from "@reduxjs/toolkit";
import pokemonSlice from "../slices/pokemonSlice";
const store = configureStore({
reducer: {
pokemon: pokemonSlice,
},
});
export default store;
리덕스를 하려면 일단은 스토어를 만들어줘야한다. 기본적으로 RTK를 통해서 작업할 예정이다.
import { createSlice } from "@reduxjs/toolkit";
const pokemonSlice = createSlice({
name: "pokemon",
initialState: {
pokeLists: [
{ idx: 0, pokeid: "", filled: false },
{ idx: 1, pokeid: "", filled: false },
{ idx: 2, pokeid: "", filled: false },
{ idx: 3, pokeid: "", filled: false },
{ idx: 4, pokeid: "", filled: false },
{ idx: 5, pokeid: "", filled: false },
],
},
reducers: {
addPokemon: (state, action) => {
console.log(JSON.parse(JSON.stringify(state.pokeLists)), action.payload);
},
removePokemon: (state, action) => {
return state, action;
},
},
});
export const { addPokemon, removePokemon } = pokemonSlice.actions;
export default pokemonSlice.reducer;
slices 폴더에는 pokeSlice란 이름으로 이렇게 작업해주었다.
아직 제대로 어떤 함수를 리듀서로 설정할 건지 정해두지 않았기 때문에, 상태를 확인하는 함수만 넣어두었다.
json을 통해 저렇게 복잡하게 해 놓은 이유는 객체의 경우, 내가 값을 확인하려면 일단 json으로 문자열로 바꾼 다음 parse하는 과정이 필요하다고 한다... 복잡하기도 해라.
const addToEntry = (id, pokeLists, dispatch) => {
const valueofPokeIdArray = [];
const valueofFilledArray = [];
for (const pokeList of pokeLists) {
let valueofPokeId = Object.values(pokeList)[1];
let valueofFilled = Object.values(pokeList)[2];
valueofPokeIdArray.push(valueofPokeId);
valueofFilledArray.push(valueofFilled);
}
if (!valueofFilledArray.includes(false)) {
alert("배틀 엔트리가 꽉 찼습니다.");
return;
}
if (valueofPokeIdArray.includes(id)) {
alert("중복된 포켓몬을 선택하였습니다. 다른 포켓몬을 선택해주세요.");
return;
}
dispatch(addPokemon(id));
};
const PokemonCard = () => {
const pokeLists = useSelector((state) => state.pokemon.pokeLists);
const dispatch = useDispatch();
const nav = useNavigate();
return MOCK_DATA.map((data) => {
return (
<BeepPokeCard
key={data.id}
onClick={() => {
nav(`/pokemon-detail/${data.id}`);
}}
>
<img src={data.img_url} alt="포켓몬 이미지입니다." />
<span>{data.korean_name}</span>
<SmallBeepButton
onClick={() => {
addToEntry(data.id, pokeLists, dispatch);
}}
>
추가
</SmallBeepButton>
</BeepPokeCard>
);
});
};
export default PokemonCard;
기존 함수를 좀 뜯어고쳐서, 아래 함수 컴포넌트에 셀렉터를 이용해 pokeLists를 새로 받아오게끔 명령했다.
또한 dispatch를 통해 리듀서를 받아올 수 있게끔 설정해놓은 다음, payload로 id를 받아올 수 있게끔 설정해두었다. 이제 남은 건 pokeLists를 원래 사용했던 함수를 이용해서 바꿔주는 것 정도인 듯 하다.
reducers: {
addPokemon: (state, action) => {
let updated = false;
state.pokeLists = state.pokeLists.map((pokeList) => {
if (!updated && !pokeList.filled) {
updated = true;
return {
idx: pokeList.idx,
pokeid: action.payload,
filled: true,
};
}
return pokeList;
});
return state;
},
removePokemon: (state, action) => {
state.pokeLists = state.pokeLists.map((pokeList) => {
if (pokeList.idx === action.payload) {
return { ...pokeList, pokeid: "", filled: false };
}
return pokeList;
});
return state
},
},
리듀서에 기존에 있던 추가, 삭제 기능을 투입하여 이런 식으로 만들어주었다. 제대로 작동된 걸 확인하였다.