<오늘 작업 한 것들>
1. 무한 스크롤 setTimeOut을 사용하여 MVP 기능 완성
2. 면접 질문
3. STYLE 관련 해결
4. 클러스터 자료 조사
5. CRA 관련 ENV 설정하기
6. BLUR 처리하기..
[가장 인상 깊었던 것들]
[면접 질문]
데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?
대답: 무한 스크롤 구현에서 중요한 점은 성능 최적화, 스크롤 감지, 에러 처리입니다. 이 세 가지 요소를 고려하여 InfiniteQuery와 같은 라이브러리를 사용해 데이터를 일정량씩 로드하고 렌더링하며, 스크롤 이벤트를 감지하여 자연스럽게 새 데이터를 로드하는 방식으로 구현할 수 있습니다. 이를 통해 부드러운 사용자 경험과 안정적인 동작을 보장할 수 있습니다.
(느낀점): 무한 스크롤 기능을 만들고 있었는데 이와 같이 질문이 나오니 생각보다 인상깊게 받은 것들을 적어보니 되게 많이 나왔지만 요약을 해서 정리를 하면 이와 같이 나오는 것을 느꼈다.
[CRA]
env 파일을 작업을 할때 자료를 한번 찾아보는 것도 중요하다고 생각했다.
ENV 파일을 사용할 때 CRA로 만들었을 경우 꼭 REACT_APP 이라는 단어가 들어가야 한다 안그럴 경우 ENV 파일이 작동을 안한다.
[Trouble Shotting]
[문제]
1. 무한 스크롤에서 useInfinityQuery를 사용하지 않고 일단 mvp를 통해 작업을 해서 loading 창이 없이 바로 나타나기 때문에 무한 스크롤인지 판단하기 힘들다.
2. 클러스터 관련 자료를 조사해보니 yarn 관련하여서 mapbox 관련 자료가 없다..
3. 무한 스크롤 에서 화면에서 스크롤만 내려가고 옆에 있는 것들은 그대로야 하는데.. 화면 밖으로 나가버리는 오류가 발생한다.
4. blur를 내가 원하는 파일 한가지에만 적용하고 싶은데 그럴 경우 map으로 돌리고 있어서 찾기가 힘들다..
[고민 과정]
1. setTimeOut을 설정하여서 값을 넣어 놨는데. 스크롤이 위에 갔다가 아래에 가는것을 1번이 아니라 2번 반복해야 하는 오류가 발생한다.
2. style 관련하여서 자료를 알아보니 안에 div를 설정하였지만 그러면 scroll이 남이 보인다.
3. 클러스터 관련하여서 react-leaflet-markercluster, supercluster, use-supercluster, @types/leaflet 등 다양하게 조사를 했지만 사용이 안됐다..
react-leaflet-markercluster -> 나는 mapboxgl를 사용하는데 이것은 leaflet를 사용해야 가지고 적용이 안된다.
leaflet도 동일하다.
supercluster, use-supercluster: cluster를 통해 marker를 custom 하는 법 및 cluster 인데 npm에서 어떤식으로 이미지가 변화하는지 자세히 안 나와 있어서.. 작업하기 힘들다..
4. blur를 관련하여 styled컴포넌트에 넣어줘서 작업을 하였지만 결과가 나오지 않았다..
[해결 과정]
1. blur 처리에 경우 밑에 height가 중복되어서 적혀져 있어서 작업이 안되었다.
2. scroll에 경우는 &::-webkit-scrollbar {display: none}를 styled 컴포넌트에 같이 적어주면 scroll이 화면에 안보이게 할 수 있다.
3. 무한스크롤의 경우 loading을 같이 넣어줘서 setTimeOut이작업중일때는 true로 작업이 끝나면 false로 바꿔주어서
{loading && <Styled.loadingDiv>Loading..</Styled.loadingDiv>}
map의 코드가 완료가 된후 이와 같이 올린다.
<Styled.scrollDiv className="scrollSearch">
{searchResult?.map(item => (
<PostItem key={item.id} data={item} />
))}
</Styled.scrollDiv>
{loading && <Styled.loadingDiv>Loading..</Styled.loadingDiv>}
4. 클러스터 관련 되어서는 아직 작업중이다..