qux팀 요리퀴즈 #7
qux팀 요리퀴즈 #7
Conversation
| //난이도 하 | ||
| const QUIZ_SELECT_COUNT = 4; | ||
| export const IMAGE_WIDTH = 600; | ||
|
|
||
| // 난이도 중 | ||
| // const QUIZ_SELECT_COUNT = 5; | ||
| // export const IMAGE_WIDTH = 400; | ||
|
|
||
| // 난이도 상 | ||
| // const QUIZ_SELECT_COUNT = 6; | ||
| // export const IMAGE_WIDTH = 200; | ||
|
|
||
| // 난이도 특상 | ||
| // const QUIZ_SELECT_COUNT = 10; | ||
| // export const IMAGE_WIDTH = 80; |
There was a problem hiding this comment.
주석 바꿔서 난이도 조절가능!
| let temp = startIndex; | ||
| startIndex = endIndex; | ||
| endIndex = temp; |
There was a problem hiding this comment.
요거는
[startIndex, endIndex] = [endIndex, startIndex]; 로 줄일 수 있을 것 같아요!
|
|
||
| while (tempArr.length < amount) { | ||
| const randomIndex = | ||
| Math.floor(Math.random() * endIndex - startIndex + 1) + startIndex; |
There was a problem hiding this comment.
최근에 알았던 건데 Math.floor(..) 를 더블 틸드 ~~(..) 로 대체해서 사용할 수 있더라구요! 물론 스타일의 문제지만, 꽤나 흥미로웠던 연산이라 적습니다 ㅎㅎ
| quizIngredients.push(allIngredients[quizIngredientIndexes[i]]); | ||
| } | ||
|
|
||
| const answerIndex = Math.floor(Math.random() * QUIZ_SELECT_COUNT); |
There was a problem hiding this comment.
랜덤함수가 많이 나오는데 따로 훅으로 빼도 좋을 것 같아요!
There was a problem hiding this comment.
좋네요! 의식의 흐름대로 짜다보니 랜덤함수가 너무 많아졌네요
| } | ||
|
|
||
| function Result({ answerCount }: ResultProps) { | ||
| const resultTitle = useMemo(() => { |
There was a problem hiding this comment.
헉.. useMemo 맨날 ListItemComponent 에 감싸는 정도로만 사용해봤는데 이런식으로 사용하는 건 처음봐요! 저렇게 작성하면 어떤 이점이 있나요?
There was a problem hiding this comment.
useMemo는 메모이제이션을 해주어서 deps가 바뀌지 않으면 같은 값을 사용할수 있어 잘만 쓴다면 가상dom의 리렌더링을 최적화시켜 성능에 크게 도움이 되요!
물론 여기서는 Result가 어차피 맨마지막에 한번만 렌더링되는 컴포넌트라 오히려 useMemo를 써봐야 성능상 이점은 없고 메모리만 더 차지할테니 안쓰는게 낫겠네요
| QUIZ_SELECT_COUNT - 1, | ||
| ); | ||
|
|
||
| for (let i = 0; i < quizIngredientIndexes.length; i++) { |
There was a problem hiding this comment.
forEach 를 쓰면 코드가 더 간결해질 것 같아요! 제가 forEach 신봉자라 ㅎㅎ
There was a problem hiding this comment.
간단한 연산에서는 가독성을 선택하면 forEach쓰는것도 좋은거같아요! 저는 성능 때문에 일반적으로 for를 더 자주쓰게 되더라구요
경우에 따라 다르지만 for가 forEach에 비해 2배정도 성능이 좋다고 해요
| setLoading(false); | ||
| setCurrentQuizIndex(prev => prev + 1); | ||
| handleQuiz(); | ||
| }, 2000); |
There was a problem hiding this comment.
이 친구도 macgic number 처리해주면 좋을 것 같아요 ㅎㅎ
| } | ||
| }); | ||
|
|
||
| http.createServer(app).listen(4000, () => { |
| ...quizIngredients.slice(0, answerIndex), | ||
| answerIngredient, | ||
| ...quizIngredients.slice(answerIndex), | ||
| ]; |
There was a problem hiding this comment.
splice를 쓰면 slice를 2번 사용하지 않고 추가할 수 있을거 같네요!
요리퀴즈
주제가 힐링이라 게임 + 요리 라는 아이디어로 요리퀴즈 만들었습니다!
총 10문제이고 사진의 요리에 들어가지 않는 재료가 정답입니다. 난이도도 조절가능한데 원래는 버튼으로 선택할 수 있도록 하려고 했는데^^ 시간이 부족했던 관계로 소스코드에서 직접 수동으로 조절가능
실행
프로젝트 설치
$ git clone https://github.com/mash-up-kr-web/openapi-study.git $ cd openapi-study $ git checkout -b week4-qux-temp $ git pull origin week4-qux-temp실행
http://localhost:3000에서 실행됩니다.