Today I Learned
- GOLLA 프로젝트 게이지바 구현
- Typescript 강의 수강
- Programmers 문제 풀기
A, B 선택지 투표 결과에 따른 % 나타내기
const GageBar = ({comments}: any) => {
let countA = 0;
let countB = 0;
comments.forEach((comment: CommentItem) => {
comment.isA === true ? countA += 1 : countB += 1
});
let ratioA = Math.round(100 - (countB / (countA + countB)) * 100);
let ratioB = Math.round(100 - (countA / (countA + countB)) * 100);
// 글 작성 시 초기 세팅값 50:50
if ( countA === 0 && countB === 0 ) {
ratioA = 50;
ratioB = 50;
}
return (
<GageBarContainer>
<Percent color={colors.RED} percent={ratioA}>
<span style={{display: ratioA === 0 ? "none" : "block"}}>{ratioA}%</span>
</Percent>
<Percent color={colors.BLUE} percent={ratioB}>
<span style={{display: ratioB === 0 ? "none" : "block"}}>{ratioB}%</span>
</Percent>
</GageBarContainer>
)
};사실 이전 프로젝트를 리팩토링하고 발전시키는 방향으로 현재 프로젝트를 진행하고 있기 때문에 예전에 다른 팀원 분이 작성한 코드를 가져와서 다듬기만 했다. 내가 처음부터 작성했다면 좋았겠지만.. 코드 흐름은 전부 다 이해했다 ㅎㅎ
Object.entries 이해하기
const selectHandler = (e) => {
const arr = [];
for (const [key, value] of Object.entries(zscode)) {
if (key.slice(0, 2) === e.target.value) {
arr.push(`${key}:${value}`);
}
}
setSelected2(arr);
};<select>
<option value="none">==2차분류==</option>
{selected2.map((item) => (
<option value={item.split(':')[0]}>{item.split(':')[1]}</option>
))}
</select>일단 객체로 이루어져 있는 데이터를 나중에 map을 돌리기 위해 배열 형태로 가공했다. 여기서 key와 value를 같이 사용하기 위해 Object.entries라는 메서드를 이용해서 key와 value를 빼 와서 배열에 넣어주었다. 근데 문자열 형태로 넣어주었기 때문에 나중에 key와 value를 각각 사용하기 위해. split(":")으로 분리해 주었다.
다른 팀원 분 문제 같이 해결하는 거였는데 거의 알고리즘 문제 풀듯이 같이 고민했다. 근데 그 과정이 매우 재미있었음! 알고리즘 문제 꾸준히 풀었던 것의 효과를 느낄 수 있었던 경험이었다.👍
Programmers 문제 풀기
문자열 정렬하기(1)
나의 풀이
function solution(my_string) {
return my_string.split("").filter((str) => "0123456789".includes(str)).sort((a,b) => a - b).map((num) => parseInt(num))
}풀리긴 풀리는데... 이게 맞는 걸까? ㅎ
filter에 sort, map까지 다 섞어 썼더니 역시 테스트 통과하는 데 시간이 좀 소요된다. 보통은 0.04ms 정도 나오는데...
다른 사람의 풀이
function solution(my_string) {
return my_string.split("").filter((v) => !isNaN(v)).map((v) => v*1).sort((a,b) => a-b)
}나랑 문제 푸는 과정은 비슷한데 나는 "0123456789"를 includes 메서드로 처리했다면, isNaN을 이용해서 숫자가 아닌 게 아닌(?) 애들만 filter하는 방법도 있다는 걸 알게 됐다. 근데 내 풀이 너무 지저분하다고 생각했는데 다들 비슷하게 푸신 듯?
가위 바위 보
나의 풀이
function solution(rsp) {
let answer = "";
for (const num of rsp) {
if ( num === "2") {
answer += "0"
} else if ( num === "0" ) {
answer += "5"
} else if ( num === "5" ) {
answer += "2"
}
}
return answer;
}처음에는 replace 메서드를 생각했었는데 replace는 문제점이 기존 문자열이 교체되는 것이 아니라 새로운 문자열을 반환하기 때문에 if문의 경우마다 새로운 문자열을 반환해서 연속해서 사용할 수가 없었다. 그래서 다른 방법이 없을까 고민하다가 꼭 replace 문자열을 사용하지 않더라도 문자열을 새로 만들어서 거기에 값을 계속 추가하면 되겠다는 생각이 들어 풀이의 방향을 수정했다.
다른 사람의 풀이 01
function solution(rsp) {
let arr = {
2: 0,
0: 5,
5: 2
};
var answer = [...rsp].map(v => arr[v]).join("");
return answer;
}...? 갑자기 내 풀이가 부끄러워진다😥 객체를 만든 후에 map을 돌려서 해당 숫자에 접근을 한다.. 객체의 key가 숫자인 경우에는 index로 접근하듯이 key를 사용할 수 있는 걸까?
다른 사람의 풀이 02
function solution(rsp) {
return [...rsp].map((num) => num === "2" ? 0 : num === "0" ? 5 : 2).join("")
}이 풀이가 더 이해 잘 되고 간단한 느낌이라 풀이를 수정했더니 실행 속도가 훨씬 개선되었다.
모스부호(1)
나의 풀이
let morse = {
'.-':'a','-...':'b','-.-.':'c','-..':'d','.':'e','..-.':'f',
'--.':'g','....':'h','..':'i','.---':'j','-.-':'k','.-..':'l',
'--':'m','-.':'n','---':'o','.--.':'p','--.-':'q','.-.':'r',
'...':'s','-':'t','..-':'u','...-':'v','.--':'w','-..-':'x',
'-.--':'y','--..':'z'
}
function solution(letter) {
return letter.split(' ').map((v) => Object.keys(morse).includes(v) ? morse[v] : null).join("")
}처음엔 갑자기 보기만 해도 복잡한 모스 부호로 이루어진 객체가 주어져서 당황했지만 문제를 풀고 나니 그렇게 어려운 문제가 아니었다.
그동안 계속 배열 관련 문제만 풀다가 객체가 주어지니까 처음엔 약간 헤맸는데 객체 접근 방법을 다시 공부할 수 있는 계기가 되었다.
객체의 key에 접근하는 방법은 두 가지 표현이 존재한다.
- obj.key
- obj['key']
const person = {
name: '강승현',
age: 52
};
person.name;
// Print: '강승현'
person['name'];
// Print: '강승현'
다른 사람의 풀이 01
function solution(letter) {
return letter.split(' ').map((v) => morse[v]).join("");
}내 풀이에서 Object.keys와 includes는 불필요한 부분이었다. 왜 이렇게 어려운 길로 돌아간 거지? ㅎㅎ
다른 사람의 풀이 02
function solution(letter) {
return letter.split(' ').reduce((acc, cur) => acc + morse[cur], '');
}reudce 메서드를 사용하면 join 메서드를 사용할 필요가 없어진다. reduce를 이렇게 문자열에 적용할 수 있는 방법이 있다는 걸 처음 알았다! 역시 프로그래머스는 내가 직접 문제를 풀며 성장하기도 하지만 다른 사람들 풀이를 보면서도 많이 배우는 거 같다.
피자 나눠 먹기 (2)
나의 풀이
function solution(n) {
for ( i = 1; i > 0; i++) {
if (i*6 % n === 0) return i
}
}
369 게임
나의 풀이
function solution(order) {
let answer = 0
order.toString().split("").map((num) => "369".includes(num) ? answer += 1 : null)
return answer
}
우와 점수 또 많이 받았다!😊
다른 사람의 풀이
function solution(order) {
return Array.from(order.toString()).filter(t => ['3', '6', '9'].includes(t)).length;
}map 아니고 filter 이용해서 length를 출력할 수도 있다.
회고
오늘 읽은 문서
kakao-Tech My구독의 React Query 전환기
오늘은 프로젝트는 오전에만 잠시 코드 작성하고 오후에는 타입스크립트 강의도 좀 듣고 프로그래머스 문제를 많이 풀었다. 이제 0단계 50% 풀었는데 문제가 점점 어려워져서 재미가 없어지지만 ㅎㅎ 꾸준히 풀어보려 한다.
이제 설 연휴는 끝! 연휴 동안 매일 zep에 출석하며 생산적인 시간을 보낸 거 같다. 이렇게 여유롭게 시간 보내며 원하는 공부할 수 있는 시간이 너무 소중하다 🥹