[TIL] 0303

MonthSub Refactoring

seriesForm의 가격 입력 input의 값을 1000단위로 ','가 찍히도록 포맷팅되는 기능을 구현했다
1000단위로 ,를 찍으려면 뒤에서부터 숫자를 3개씩 세면서 ,를 찍어야한다
onChange가 될 때마다 input값을 가져와서 조건에 맞게 조작한 후 리턴해준다

• input값을 받아 포맷해주는 함수 구현
  • 배열로 변환
  • 뒤집음
  • 요소들을 하나씩 순회하면서 3배수에 해당하는 index를 가졌다면 ','를 추가, 아니라면 그대로 리턴해 새로운 배열 생성 (4배수 번째 요소에 ,를 찍어야하는데 index는 0으로 시작하므로)
  • 뒤집어서 원래대로 만든 후
  • 문자열로 변환

// SeriesForm.jsx

export const formatPrice = input => {
  const formatedValue = input
    .split('')
    .reverse()
    .map((str, index) => (index > 0 && index % 3 === 0 ? `${str},` : str))
    .reverse()
    .join('');
  return formatedValue;
};

• input value값에 함수를 적용해서 넣어줌

// SeriesForm.jsx

  <PayInput
    width="50%"
    type="text"
    value={formatPrice(values.price)}
    name="price"
    onChange={handleChange}
    min={0}
    disabled={edit}
  />

• input값을 가져와 상태에 넣어줄 때 문자열과 맨 앞의 0을 제거해줌 (value값에 넣어줄 때 포맷팅 해야하므로)

  const handleChange = e => {
    const { name, value } = e.target;

    if (name === 'price') {
      const filteredValue = value.replace(/[^0-9]/g, '').replace(/(^0+)/g, '');
      setValues({ ...values, [name]: filteredValue });
      return;
    }

    setValues({ ...values, [name]: value });
  };

algorithm

백준에서 문제를 풀기 시작했다
string관련 문제를 3개 풀었다
쉬운 문제였지만 오랜만에 푸는 거라 어떤 함수를 써야하는지, 어떤 패턴의 로직을 써야하는지 알고있던 것도 기억이 잘 안났다

• s.repeat(count) 문자열을 파라미터 값의 수만큼 반복해주는 함수
• 객체는 iterable이 아니기 때문에 for of를 사용하려면 밑의 함수들을 사용해 배열로 변환해줘야한다
  Object.entries(obj) [ [key, value] ...]
  Object.keys(obj) [key...]
  Object.values(obj) [value...]

WaffleCard Refactoring

CardList Animation

문제점
가만히 둘 때에는 스크롤 중간 지점이 인식이 잘 되는데,
직접 스크롤을 할 때에는 인식이 안되어 순환되지 않았다

해결책
순환 말고, 카드리스트 한덩이만 애니메이션 되면서 스크롤 끝에 도달하면 애니메이션 실행이 중단되도록 수정했다
스크롤로 앞으로 당기면 다시 애니메이션이 시작되긴 하지만 카드가 많아졌을 경우 스크롤 끝에 도달했을 때 가장 앞으로 가야할 경우 스크롤을 많이 해야해서 사용성이 안 좋을 것 같았다.

맨 뒤로가기, 맨 앞으로가기 버튼을 추가하기로 결정했다