Conversation
| error: Error | null; | ||
| } | ||
|
|
||
| const useFetch = <T>({ |
There was a problem hiding this comment.
generic type에 대한 이해도를 가지고 바로 사용하시는 부분이 좋네요! ㅎㅎ
|
|
||
| interface UseFetchParams { | ||
| url?: string; | ||
| method?: string; |
There was a problem hiding this comment.
method의 경우에는 경우의 수가 한정적이라 GET | POST ,,, 이렇게 정의해두고 쓰면 더 좋을 것 같아요!
| return ( | ||
| <> | ||
| <StyledHeader ref={DivRef}> | ||
| <PositionedDiv $isView={isView}> |
There was a problem hiding this comment.
이 부분 말씀이시군요!! 제 생각에는, 헤더 안에서 이를 다 처리하는 것은 어려울 것 같고, 위계상으로도 조금 모호할 것 같아요. 페이지단에서 처리하는 것이 더 좋을 것 같아요.
헤더 컴포넌트 안에서 처리하지만 페이지내에서 같이 스크롤되면서 footer 위에 보여지는 부분이기 때문에 구현은 가능하나, 가독성이 좋은 방식은 아닐 것 같습니다!
제안을 드린다면 우선 footer에서 보이는 컴포넌트와 header에서 보이는 컴포넌트를 분리하는게 좋을 것 같아요.
컴포넌트는 두개를 만들고, 화면에서 보이는지 안보이는지에 대한 처리를(inView로 처리한 부분) 페이지단에서 하면 어떨까요~?
기본적으로 footer에는 input이 페이지에서 붙어있고, 헤더에도 붙어있지만
둘다 화면에 보이지 않을 때 화면 바닥에 붙어있는 input이 호출되도록 하는거죠 ㅎㅎ
|
|
||
| function Content({ folderData }: ContentProps) { | ||
| const [selectedId, setSelectedId] = useState(0); | ||
| const [searchValue, setSearchValue] = useState<string>(''); |
There was a problem hiding this comment.
이런 경우에는 이 없어도 됩니다 ㅎㅎ 기본적으로 초기 값을 세팅하는 과정에서 string이라고 자동으로 인식될거에요!
| const handleLoad = () => setLoading(false); | ||
| const handleError = (e: ErrorEvent) => { | ||
| setError(e.error); | ||
| }; | ||
|
|
||
| script.addEventListener('load', handleLoad); | ||
| script.addEventListener('error', handleError); | ||
|
|
||
| document.body.appendChild(script); |
There was a problem hiding this comment.
이렇게 작성해도 되지만, 만약 이렇게되면 useEffect의 dependency인 src와 option이 바뀌어서 다시 호출될 때 함수가 계속 재정의될거에요. 이를 방지하려면 바깥이 useCallback으로 작성할 수도 있으니 참고해주세요~!
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
input을 하단에 fixed 했을 때 fixed는 공간을 차지하지 않아 footer가 가려져서 임시방편으로 빈 div에 height를 주고 body 최하단에 넣는 방식으로 처리했습니다.
스크롤을 끝까지 내렸을 때 footer가 가려지진 않지만 footer아래에 input이 오게되는데 input이 최하단에 있다가 푸터를 만날때 푸터 위에 고정되도록 하려면 어떻게 처리해야할까요?