ALL

[Programmers Lv.3] 인사고과 - Python

문제 완호네 회사는 연말마다 1년 간의 인사고과에 따라 인센티브를 지급합니다. 각 사원마다 근무 태도 점수와 동료 평가 점수가 기록되어 있는데 만약 어떤 사원이 다른 임의의 사원보다 두 점수가 모두 낮은 경우가 한 번이라도 있다면 그 사원은 인센티브를 받지 못합니다. 그렇지 않은 사원들에 대해서는 두 점수의 합이 높은 순으로 석차를 내어 석차에 따라 인센티브가 차등 지급됩니다. 이때, 두 점수의 합이 동일한 사원들은 동석차이며, 동석차의 수만큼 다음 석차는 건너 뜁니다. 예를 들어 점수의 합이 가장 큰 사원이 2명이라면 1등이 2명이고 2등 없이 다음 석차는 3등부터입니다. 각 사원의 근무 태도 점수와 동료 평가 점수 목록 scores이 주어졌을 때, 완호의 석차를 return 하도록 solution 함..

[Programmers Lv.4] 자동완성 - Python

문제 포털 다음에서 검색어 자동완성 기능을 넣고 싶은 라이언은 한 번 입력된 문자열을 학습해서 다음 입력 때 활용하고 싶어 졌다. 예를 들어, go 가 한 번 입력되었다면, 다음 사용자는 g 만 입력해도 go를 추천해주므로 o를 입력할 필요가 없어진다! 단, 학습에 사용된 단어들 중 앞부분이 같은 경우에는 어쩔 수 없이 다른 문자가 나올 때까지 입력을 해야 한다.효과가 얼마나 좋을지 알고 싶은 라이언은 학습된 단어들을 찾을 때 몇 글자를 입력해야 하는지 궁금해졌다. 예를 들어, 학습된 단어들이 아래와 같을 때 go gone guild - go를 찾을 때 go를 모두 입력해야 한다. - gone을 찾을 때 gon 까지 입력해야 한다. (gon이 입력되기 전까지는 go 인지 gone인지 확신할 수 없다.) ..

[Programmers Lv.3] 섬 연결하기 - Python

n개의 섬 사이에 다리를 건설하는 비용(costs)이 주어질 때, 최소의 비용으로 모든 섬이 서로 통행 가능하도록 만들 때 필요한 최소 비용을 return 하도록 solution을 완성하세요. 다리를 여러 번 건너더라도, 도달할 수만 있으면 통행 가능하다고 봅니다. 예를 들어 A 섬과 B 섬 사이에 다리가 있고, B 섬과 C 섬 사이에 다리가 있으면 A 섬과 C 섬은 서로 통행 가능합니다. 각 섬 사이를 이동할 때 드는 비용이 최소가 될 필요 없이 전체 비용을 최소화하면 되는 문제다. 그렇다면 사이클이 없는 트리 형태로 건설할 때가 최소 비용일 것이다. MST를 구하는 알고리즘은 여러 가지가 있지만 나는 프림 알고리즘을 사용했다. 프림 알고리즘은 그리디 알고리즘의 일종으로 과정은 다음과 같다. 임의의 노..

useReducer로 useState 리팩터링 하기 (3)

simpleSymbols = [ {"PAUSE"}, {"ENTER"}, {}, {"MOUSE", "SLASH"}, ... , {} ] 각 단어마다 어떤 기호가 포함되어 있는지 저장하기 위해 위와 같은 방법을 사용한 이유는 다음과 같다. 기호들을 reducer로 묶으면서, 같은 로직을 기호의 이름만 달리 해서 실행할 수 있어야 했다. 사용자가 같은 기호를 여러 번 적용하더라도 중복 없이 하나만 저장해야 한다. 각 기호별로 단어 수만큼의 길이를 가진 배열을 저장하는 것보다 저장공간이 절약된다. 새로운 기호를 추가하더라도 기존 코드를 변경 할 필요 없이 해당 기호의 이름만 추가하면 된다. 기호들을 렌더링 할 때 각 단어마다 전체 기호 수 만큼의 비교 연산을 수행할 필요가 없다(set에 있는 단어들을 그냥 모두..

useReducer로 useState 리팩터링 하기 (2)

useReducer에 대해 이론적인 부분만 공부하고 바로 리팩터링을 도전했더니 예상치 못한 이슈가 많이 발생했다. 1. 상태 업데이트 안됨 const simpleSymbolsReducer = (state, action) => { switch (action.type) { case "INIT": return action.payload; case "ADD": return state.map((symbol, i) => { if (i === action.idx) { return new Set([...symbol, action.symbol]); } else { return symbol; } }); case "REMOVE": return state.map((symbol, i) => { if (i === action.i..

useReducer로 useState 리팩터링 하기 (1)

원래 useState로 관리하던 사용자 기호들 중 작동 방식이 비슷한 도구들을 묶어 reducer로 관리하기로 했다. const [enterSymbol, setEnterSymbol] = useState([]); const [pauseSymbol, setPauseSymbol] = useState([]); const [mouseSymbol, setMouseSymbol] = useState([]); const [slashSymbol, setSlashSymbol] = useState([]); ... case 4: enterSymbol[selectedWordIdx] = true; setEnterSymbol([...enterSymbol]); break; case 5: pauseSymbol[selectedWordId..

useReducer

useReducer는 reducer를 사용할 수 있도록 하는 리액트 내장 훅이다. 현재 스피치의 스크립트를 편집하고 재생하는 컴포넌트에 너무 많은 상태들이 useState로 관리되고 있어서, 업데이트 로직이 비슷한 상태들을 reducer로 묶어보려고 한다. 그래서 우선 useState로 관리하던 상태들을 useReducer로 리팩터링하는 과정에 집중해서 알아볼 것이다. 상태를 업데이트 하는 로직을 하나의 함수로 컴포넌트와 분리할 수 있는데, 이것을 reducer라고 한다. reducer를 다른 파일로 분리해 사용할 수도 있으며 코드가 복잡해 질 수록 유용하다. useReducer는 reducer function과 initial state 두 개의 인자를 갖고, stateful value와 dispatch..

useEffect로 state 변경 바로 감지하기

이전 글에서 함수가 끝날 때까지 state의 값은 변하지 않는다는 것을 배웠다. 그렇다면 한 함수 안에서 state를 변경하고, 그 값을 바로 사용해야 한다면 어떻게 해야 할까? 내가 고민한 코드는 아래 코드였다. const handleBlur = useCallback( (e, i) => { let updated = [...edited]; if (e.target.innerText === text[i]) { updated[i] = null; } else if (e.target.innerText.trim() === "") { updated[i] = "-"; } else { updated[i] = e.target.innerText; } setEdited(updated); // patchUserSymbol();..