-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
무한스크롤 강의 관련 질문입니다.
24.04.05 09:18 작성 24.04.05 17:22 수정 조회수 108
0
export const randomize = ({
min = 0,
max = 0,
step = 1,
}: {
min: number;
max: number;
step: number;
}) => {
if (max < min || max - min < step) throw Error('wrong arguments');
const num = Math.random() * (max - min) + min;
return Math.max(Math.floor(num / step) * step, min);
};1. src/service/util.ts 파일에서 randomize 함수를 보면 위와 같습니다.
num 값을 구하는 표현식이 min 이상 max 이하가 되려면 다음과 같이 바뀌어야 할 것 같습니다.const num = Math.floor(Math.random() * (max - min + 1)) + min;
-> const num = Math.floor(Math.random() * (max - min + 1) + min)
export type Datum = {
index: number;
id: string;
title: string;
description: string;
};
export type FetchState = 'loading' | 'fetched' | 'idle' | 'error';
export type State<T> = {
data: T[][];
state: 'loading' | 'fetched' | 'idle' | 'error';
};src/components/07_infiniteScroll/vanilla/infiniteFetcher.ts 에서 FetchState 타입을 활용하여 리팩토링 할 수 있을 것 같습니다.
export type State<T> = { data: T[][]; state: FetchState; };
답변을 작성해보세요.
1
정재남
지식공유자2024.04.05
당시 step을 적용하다보니 로직이 꼬였었는데요,
[복습스터디 #3. 무한스크롤 - 코드리뷰 + QnA + 버그수정] 24:30쯤부터
내용 설명 및 버그 수정하는 내용이 나옵니다.
어떤것을 리팩토링하신다는 것인지 이해하지 못했습니다만,
ding-co님께서 더 나은 방법이라고 생각하시는 코드가 있다면
수정된 내용 전반을 여기에 공유해주세요.
다른 분들께도 참고가 되어 좋을 것 같네요!
참고로 긴 코드는</>우측의[<>]버튼을 눌러 작성하실 수 있어요.
ding-co
질문자2024.04.05
코드블럭을 다 이용해서 질문을 올렸었는데 최종적으로 올라간 것이 다 깨졌네요.
가독성 좋게 질문 글을 수정해서 올렸습니다.
1번에 대한 질문은 랜덤으로 생성한 숫자가 min 이상 max 이하가 되도록 만드는 로직 수정이며
2번은 그저 타입 alias 재활용입니다.
정재남
지식공유자2024.04.05
복습스터디 영상에서 수정한 코드에도 여전히 문제가 있는걸까 싶어 확인해보니
max값에 대한 처리가 안되고 있었네요. 이하가 아닌 미만으로만 동작하고 있었군요 ㅠ
ding-co님께서 작성해주신 코드도 살펴봤는데,
엣지케이스에서 정상적으로 동작하는 것 같긴 합니다.
다만 어떤 이유에서 1을 더해줬다가 floor를 적용하신 건지
수학적 원리를 유추하기가 어렵네요.
하여 제 원 코드를 바탕으로 max값이 등장할 수 있도록 바꿔보자면,
마지막의 floor만 round로 바꾸면 되는 것 같아요.
const num = Math.random() * (max - min) + min
return Math.max(Math.round(num / step) * step, min)여기에 안전장치 차원에서 Math.min을 추가해줘도 좋겠네요.
return Math.min(Math.max(Math.round(num / step) * step, min), max)
ding-co
질문자2024.04.05
아 제가 말씀드린건 num이 min이상 max 이하의 값이 되기 위해서 표현식만 바꾼 것입니다.
강의 중간에 주석으로 // min <= num <= max 가 있어서const num = Math.random() * (max - min) + min;
현재 표현식에서는 min이 1, max가 10이라고 하면 1.0이상 10.0 미만이 되기 때문입니다.
그래서 다음과 같은 표현식으로 min <= num <= max 에 해당하는 랜덤 num을 얻을 수 있습니다. max - min 에서 1을 더한 상태에서 floor 내림을 하면 0이상 9이하로 떨어지므로 거기에서 min을 더하면 1이상 10이하가 되기 때문입니다.const num = Math.floor(Math.random() * (max - min + 1)) + min;
물론 return 할 때 여러 처리를 해주고 적정 random 한 값을 주기 때문에 큰 문제는 없을 것 같습니다~
감사합니다.
정재남
지식공유자2024.04.05
// max: 10, min: 2 라고 하면
Math.random() // = 0 ~ 0.9999...
max - min + 1 // = 10 - 2 + 1 = 9
Math.random() * (max - min + 1) // = 0 ~ 8.9999
Math.floor([prevValue]) // = 0 ~ 8
[prevValue] + min // = 2 ~ 10ding-co
질문자2024.04.05
아.. 죄송합니다! 소괄호를 헷갈렸네요
-> const num = Math.floor(Math.random() * (max - min + 1) + min)
이렇게 입니다..!
답변 1