요즘 일정이 너무 바빴다. 일과 이사 준비, 대출 등으로 서울을 왔다갔다(왕복 10시간....) 당일치기로 해야 했고 사이버대학 시험도 있고 참...
그럼에도 프로젝트를 꾸준히 진행중이며 정말 힘들때도 최소 알고리즘 한문제씩 풀고 잠자리에 갔다
프로그래머스 1까진 전부 풀었었는데 잠깐 매니저 일을 하고 오니 또 추가돼있더라
그런데 저번보다 깔끔하게 풀어지는 것 같아 마음에 든다.
일단 저번 이후에 있었던 프로젝트 트러블 슈팅은
무한 스크롤을 만들었는데 계속해서 만들어지고 useState값이 변하지 않는 문제였다.
import { useState, useEffect, useCallback } from 'react';
// 옵션 값을 지정한다.
const defaultOption = {
root: null,
threshold: 0.5,
rootMargin: '0px'
};
// 커스텀 훅 부분
// 관찰 대상을 지정할 수 있도록 ref값을 useState 훅을 이용해 state로 관리해준다.
// 관찰자를 만들어준다.
const useObserver = (onIntersect:any, option:any) => {
const [ref, setRef] = useState<any>(null);
const checkIntersect = useCallback(([entry]:any, observer:any) => {
if (entry.isIntersecting) {
onIntersect(entry, observer);
}
}, [ref,option]);
// 관찰자가 언제 관찰하는지, 관찰을 종료하는지에 대해 로직을 구현해준다.
useEffect(() => {
let observer:any;
if (ref) {
observer = new IntersectionObserver(checkIntersect, {
...defaultOption,
...option
});
observer.observe(ref);
}
return () => observer && observer.disconnect();
}, [ref, option, checkIntersect]);
return [ref, setRef];
}
export default useObserver;typescript 로 만든 커스텀 훅이다. any부분은 아직 내가 ts에서 선언 가능한 종류를 많이 모르다 보니 생기는 문제인데.. 열심히 공부해야겠다.
chatGPT를 통해보니 useObserver가 설치될 때 있는 타입이 있는 것 같다.
일단 만들어놓은 커스텀 훅으로 무한스크롤 관리를 하는데 이상하게 동작되었다.
무한스크롤이 계속 되던 이유는 무한스크롤로 발생하는 게시물들의 크기를 정해 놓지 않아 스크롤 위치가 계속해서 끝부분이 되어 생기던 거라 게시물들의 css값을 조정해주니 해결 되었고
useState값이 변하지 않아 1페이지 스크롤만 불러오는 문제는 여전했다.
순간 생각난게 커스텀 훅을 사용할 때 최적화를 위해 useEffect나 useCallback을 사용하지 않았나란 생각에 다시 코드를 확인했고 문제점을 찾을 수 있었다.
의존성 배열 문제였는데 간혹 디벨로퍼 툴에서 확인 할 때 정상적으로 state값이 올라가는데 함수 내에서 console.log로 찍어보니 state값 변경이 안됐다면 한번 체크해보자.
의존성 배열이 없다면 컴포넌트가 처음 생성될 때의 함수가 유지되다 보니 그런 경우가 있더라..
알고리즘 문제
https://school.programmers.co.kr/learn/courses/30/lessons/147355?language=javascript
function solution(t, p) {
let answer = 0
for(let i=0; i<=t.length-1; i++){
if(p.length+i>t.length) break;
let num = t.slice(i,p.length+i)
if(num<=parseInt(p)) answer++
}
return answer;
}필요한 문자열 만큼 잘라서 보는 것이기에 slice를 이용했고 그 자른 문자열을 숫자로 num과 비교할 때 조건에 충족한 카운트를 증가
