240626 TIL_개인 프로젝트5 (나라를 선택할 수 있는 웹사이트 제작) > 리팩토링(가시성을 위한 리팩토링) ,TypeScript 강의 (type), 알고리즘

미밍·2024년 6월 26일
2

우당탕탕 개발 일기

목록 보기
64/108

개인 과제

코드가 너무도 비효율적이라 내일부터는 리팩토링에 힘써보려고 한다~~!

기능 구현은 대충 완료 했다.
요즘 코딩할 때 내 문제를 알아냈는데, 코딩의 경우 정답은 없는데 뭔가 하나 매서드에 꽂히면 거기서 끝을 보려고 하는 것 같다! 막상 다 완성하고 나면 너무도 비효율적으로 만들어놨는데도 말이다. 이 점을 깨닫고 나니 좀 시야가 트인 기분이다~!!! 로직 시작하기 전에 항상 더 나은 방법이 없는지 고민하며 만들기.

이번 개인 과제에서 꽂힌 건 바로바로~~

  const handleOnclickEvent = (event: React.FormEvent<HTMLLIElement>) => {
    const theCountryId = event.currentTarget.id;
    const index = data.findIndex((item) => item.cca2 === theCountryId);
    const theCountry = data[index];

    if (index === -1) {
      return;
    }

    const theCountryIndex = selectedCountry.findIndex(
      (item) => item.cca2 === theCountry.cca2
    );

    if (theCountryIndex === -1) {
      setSelectedCountry((prev) => [theCountry, ...prev]);
      setAllCountry((prev) =>
        prev.filter((item) => item.cca2 !== theCountry.cca2)
      );
    } else {
      setSelectedCountry((prev) =>
        prev.filter((item) => item.cca2 !== theCountry.cca2)
      );
      setAllCountry((prev) => [theCountry, ...prev]);
    }
  };

findIndex! 조금만 더 빨리 이 늪을 헤어나왔다면 조금이라도 코드가 짧아졌을 텐데!!!ㅋㅋㅋㅋㅋㅋㅋㅋ
어찌저찌 기능 구현은 하는데 가시성이 좋지 않아서 열심히 뜯어 고치기로 한다..!! 🤣

알고리즘

오랜만에 알고리즘을 푼다... 아침에 머리 깨우는 용도로 나쁘지 않다고 하셔서, 한 번 도전...
부족한 금액 계산하기

새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다.
놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요.
단, 금액이 부족하지 않으면 0을 return 하세요.

실수했던 것

function solution(price, money, count) {
    var answer = 0;
    let amount = 0;
    
    for (let i = 1; i <= count.length++; i++) {
    amount += price *i}
          
    answer = money - amount
    return answer;
}

쉬운 로직의 경우 거꾸로 접근하면 편했다. 틀린 게 별로 없지 않나 하고 돌려보니 결과...

price가 3, money가 20, count가 4
예제랑 똑같은 숫자였다. 실행한 결괏값이 20이라는 소리는, 어마운트가 0이란 소리... 🧐? i도 1부터 주고 곱하기로 넣어놨는데 어디서 0이 나왔을까 생각 중...
length가 정수에는 쓸 수 없군... 하고 length를 지우기로 한다.. 그랬더니 오잉

-10이 나왔다. 문제를 제대로 안 읽었지만 그래도 얼추 비슷하게 가고 있다...-10을 10으로 만들 방법은 많다....

그 중에서 내가 바로 생각한 거는 Math.abs() ...
그런데 어라... 하나 더 놓친 게 있었다.

바로 바로 여기
단, 금액이 부족하지 않으면 0을 return 하세요.

function solution(price, money, count) {
    var answer = 0;
    let amount = 0;

    for (let i = 1; i <= count; i++) {
    amount += price *i}

    if (money >= amount) {
        return answer = 0;
    } else {
    return answer = Math.abs(money - amount)}

    return answer;
}

제출하고 나서 생각했던 것
0. 알고리즘 문제도 누가 프리티어 알아서 해줬으면....
1. if else 문이라 삼항 연산자를 썼으면 더 멋있었을지도 모르겠군
2. amount를 for문 돌리는 것도 나쁘지 않았지만 배열로 만들어서 리듀스를 썼어도 가능했을 것 같다.
3. Math.abs() 도 있지만 사실 *-1 해도 똑같았겠다.
4. amount를 만들었지만 만들 필요는 없었고, money 에 직접 -= 요소를 줘서 바로 답을 도출할 수 있었겠다...

알고리즘 회고 끝

함수를 변수에 담고 있으면 함수 표현식의 또 다른 방식 화살표 함수

[오늘의 회고]

새로운 거 배우는 게 좋다. 타입 스크립트는 어렵지만, 새로운 걸 배우니까 또 즐겁다. 😚😋 위로 쌓아가는 재미도 있지만 옆으로 쌓아가는 매력도 있는 게 코딩의 매력인 듯... 🥳

profile
프론트앤드; Frontend

1개의 댓글

comment-user-thumbnail
2024년 6월 27일

혜미님 넘넘 재밌게 읽었어여 ㅋㅋㅋ ( ・ᴗ・ )♡

답글 달기