[TIL]231128_React로 계산기 만들기

👩🏻‍💻 Today Learn

• 알고리즘 1문제
• 스탠다드반 리덕스 Todo만들기 타임어택
• 리액트 심화주차 강의

🔐 알고리즘 문제풀이

문제

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

풀이

function solution(phone_number) {
    let answer = '';
    
    for(let i=0; i<phone_number.length; i++){
        if (i<phone_number.length-4) {
            answer += "*"
        } else {
            answer+=phone_number[i]
        }
    }
    return answer;
}

for문으로 핸드폰번호의 길이를 반복하면서 만약 배열에서 -4의 위치까지는 *를 더해서 answer에 담고 아니면 배열안에 요소를 담아라
라는 식으로 접근했는데 사실 처음에는 고민을 정말 많이했다.
매서드를 사용해야만 풀 수 있을것 같아서 찾아봤는데 오히려 이해하기 어려워서 익숙한 방법으로 접근했다...

다른사람의 풀이

function solution(phone_number) {
    
    const newArr = new Array(phone_number.length-4).fill('*')
    let newNum = phone_number.slice(-4);
    newArr.push(newNum)
    
    return newArr.join('');
}

fill() 배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경하여 수정된 배열을 반환한다.

fill(value)
fill(value, start)
fill(value, start, end)

slice() 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환하며 원본 배열은 바뀌지 않는다.

  arr.slice([begin[, end]])

join 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

💡 알게된 내용

React로 계산기 만들기

function App() {
  const [currentValue, setCurrentValue] = useState(0);
  const [previousValue, setPreviousValue] = useState(0);
  const [isOperatorClicked, setIsOperatorClicked] = useState(false);

  // 숫자버튼
  const handleClickNumber = (number) => {
    // alert(number);
    if (previousValue) {
      setPreviousValue(number);
      setIsOperatorClicked(false);
      return;
    }
    setCurrentValue(currentValue * 10 + number);
  };

  // AC 버튼
  const handleClickAC = () => {
    setCurrentValue(0);
    setPreviousValue(0);
    setIsOperatorClicked(false);
  };

  // + 버튼
  const handleClickPlus = () => {
    setPreviousValue(currentValue);
    setIsOperatorClicked(true);
  };

  // = 버튼
  const handleClickCalculate = () => {
    setCurrentValue(previousValue + currentValue);
    setPreviousValue(0);
  };
  return (
    <>
      {currentValue}
      <Wrapper>
        <Display value={currentValue} />
        <Operator operator={"AC"} onClick={handleClickAC} />
        <Number number={1} onClick={() => handleClickNumber(1)} />
        <Number number={2} onClick={() => handleClickNumber(2)} />
        <Number number={3} onClick={() => handleClickNumber(3)} />
        <Operator operator={"+"} onClick={handleClickPlus} />
        <Number number={4} onClick={() => handleClickNumber(4)} />
        <Number number={5} onClick={() => handleClickNumber(5)} />
        <Number number={6} onClick={() => handleClickNumber(6)} />
        <Operator operator={"="} onClick={handleClickCalculate} />
        <Number number={7} onClick={() => handleClickNumber(7)} />
        <Number number={8} onClick={() => handleClickNumber(8)} />
        <Number number={9} onClick={() => handleClickNumber(9)} />
        <Number number={0} onClick={() => handleClickNumber(0)} />
      </Wrapper>
    </>
  );
}

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  border: 3px solid #555;
  width: 500px;
  height: 600px;
  margin: 50px;
`;

평소 하던 과제나 프로젝트랑 다르게 나름(?) 재밌게 배운 기능이었다.
우선 더하기 기능까지 해보았는데 빼기, 나누기, 곱하기도 추후에 이어서 구현배보면 좋을것 같다.

✍🏻 회고

오늘의 회고는 동료분이 공유해주신 감동적(일뻔했던)

하지만 그래도 내용이 너무 좋아서 공감도 되고 힐링되었기 때문에 생각날때마다 보기 위해 공유해본다!
https://month.symentor.co.kr/bbs/board.php?bo_table=meditation&wr_id=5&page=5

짧은시간동안 빠른속도로 처음 배우는 내용을 공부하다보니 당연히 힘들고 어려울 수밖에 없다. 하지만 그렇게 생각하면서도 한번씩 좌절하는 순간이 오는건 어쩔 수 없었던 것 같다. 그래도 정말 다행이라고 생각하는것은 함께 하는 동료들이 다 좋은분밖에 없다는 것이다!! 이건 정말 큰 행운이라고 생각한다 :D