docs(hooks): useDebounce 훅의 문서 내 예시 추가 완료 #104
Conversation
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #104 +/- ##
=======================================
Coverage 82.85% 82.85%
=======================================
Files 67 67
Lines 560 560
Branches 118 118
=======================================
Hits 464 464
Misses 84 84
Partials 12 12
|
| ## Example | ||
|
|
||
| const Example = () => { |
There was a problem hiding this comment.
export를 추가안해도 정상 동작하나보네요..!? 혹시 vsc 상에서도 색깔이라던가.. 코드 정리가 되서 잘 노출되나요?
There was a problem hiding this comment.
@ssi02014 제가 별도 확장프로그램을 사용하지않았어서 그런지 코드 하이라이팅이 전반적으로 안되어있었네요!
설치한 이후에도 설정을 제대로 하지 않아서 그런지 별도 차이는 보이지 않으나 다른 코드와의 통일성을 위해 추가해두겠습니다!
|
@ssi02014 Usage와 Example의 코드가 동일하도록 수정해두었습니다 :) |
| export const Example = () => { | ||
| const [count, setCount] = useState(1); | ||
| const [debouncedCount, setDebouncedCount] = useState(1); | ||
|
|
||
| const countUp = () => { | ||
| setCount(count + 1); | ||
| }; | ||
|
|
||
| const countUpWithDebounce = useDebounce(() => { | ||
| setDebouncedCount(debouncedCount + 1); | ||
| }, 1000); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div style={{ display: "flex" }}> | ||
| <button onClick={countUp}>버튼 클릭</button> | ||
| <div style={{ width: "50px" }} /> | ||
| <button onClick={countUpWithDebounce}>debounce 버튼 클릭</button> | ||
| </div> | ||
| <div> | ||
| <p>count: {count}</p> | ||
| <p>debouncedCount: {debouncedCount}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
export const Example = () => {
const [count, setCount] = useState(1);
const [debouncedCount, setDebouncedCount] = useState(1);
const countUp = () => {
setCount(count + 1);
};
const countUpWithDebounce = useDebounce(() => {
setDebouncedCount(debouncedCount + 1);
}, 1000);
return (
<div>
<div style={{ display: "flex" }}>
<button onClick={countUp}>버튼 클릭</button>
<div style={{ width: "50px" }} />
<button onClick={countUpWithDebounce}>debounce 버튼 클릭</button>
</div>
<div>
<p>count: {count}</p>
<p>debouncedCount: {debouncedCount}</p>
</div>
</div>
);
};-
아이고 죄송합니다! 마지막으로 놓치고 가이드를 못드린 부분인데요 ㅠㅠ
build:docs를 진행할 때 공백 줄바꿈이 있으면 매번 build에 실패하더라구여😭 mdx특징인지.. docusaurus 문제인지 정확히는 모르겠습니다 모든 줄바꿈 공백을 제거해주시면 감사드립니다!!! -
아 참고로 저는 해당 확장프로그램을 설치하긴 했네요!
There was a problem hiding this comment.
- mdx확장프로그램을 설치하면 아래와 같이 export를 사용하지 않으면 vsc상에서 뭔가 정상적이지 않은 느낌으로 노출됩니다 ㅋㅋㅋ😂
- 그리고 Example 예제들에서 export를 누락하면 그때도
build:docs로 빌드를 진행 했을 때 실패해서 모두 추가해줬던 걸로 기억하네여
mdx 확장프로그램 설치 export 제외
mdx 확장프로그램 설치 export 추가
There was a problem hiding this comment.
위에 언급 내용 누락 시 발생 에러😂
- 결과적으로 실제 테스트 해 볼 수 있는 용도로 추가하는
Example예제에는모든 공백 줄바꿈을 제거하고exports를 추가해주시면 감사드립니다!
|
@ssi02014 전혀 모르던 부분인데 너무 감사합니다! 👍👍👍 mdx 확장프로그램 설치 이후 말씀주신 현상도 잘 확인하여 Example 내 공백 제거 및 export 추가해두었습니다! 다음 기여에서는 더 신경써서 올리겠습니다! :) 
|
| import { useState } from 'react'; | ||
| import { useDebounce } from '@modern-kit/hooks' |
There was a problem hiding this comment.
| import { useState } from 'react'; | |
| import { useDebounce } from '@modern-kit/hooks' | |
| import { useState } from 'react'; | |
| import { useDebounce } from '@modern-kit/react' |
- 해당 부분도
@modern-kit/react로 수정해주시면 감사드립니다! - 아 음.. 죄송합니다 제가 다시 확인해보니
공백 줄바꿈은 개선이되었나봅니다...!? 과거에는 안됐던 것으로 기억하는데.. 허허exports만 추가해도 빌드가 정상 동작하네요 쓰읍 😭
|
|
@ssi02014 헉 마침 제가 개인적으로 하는 프로젝트의 구조와 착각하여 react를 utils로 적었던 것을 알아버렸습니다 ..! |
Overview
이전에 논의한 바와 같이 useBlockPromiseMultipleClick 훅에서 useDebounce와의 비교를 언급하였기에 두 훅에 대해 더 쉽게 이해할 수 있도록 누락되어있던 useDebounce 함수의 사용 예시를 추가했습니다.
더 좋은 의견이 있으시다면 편하게 말씀주시면 감사드리겠습니다. :)
useDebounce.mov
PR Checklist
Contributing Guide