71일차 TIL( 중간 발표 / useMemo)

0904 19:30~ 중간 발표 후 피드백 시간이 있었다

왜 버셀 배포했는데 로컬호스트로 시연하였는가?
최신 버전이 아직 제대로 반영되지 않아 불가피하게 localhost로 진행하였다.

전역적으로 UI를 잘 작성함 / 좋은 코드라고 생각함

useMemo를 쓴 팀을 이번에 처음 봄 ->
잘 작성했는데 내가 왜 이걸 썼는지 설명적으로 잘풀면 면접 때 좋을 것 같음

supabase 로직을 많이 끄집어 냄
api 폴더 속에 api 문서들을 잘 정리해놓음
이렇게 되면 유지보수에 좋음, 수정할 내용이 있으면 안쪽에서 수정하면 되니까
근데 몇몇 페이지에서는 아직 supabase api 남아있으니 한쪽으로 추리면 좋을 것 같음

타입스크립트 타입스 폴더 만들어서 나름 타입 지정해주려고 노력함
시도를 계속 하다보면 익숙해지니까 앞으로도 지금처럼 타입을 지정했으면 좋겠음
타입스를 따로 두고 타입지정한 거 칭천


(단점)
console이 많이 남아있음
불필요한 콘솔들은 무조건 정리하는게 좋음

직접 dom 객체 사용하는 건 지양

그래도 여전히 any가 보임
처음에는 속도가 느릴순 있지만 처음에 확실히 타입을 지정하는게 좋음

무한스크롤 굉장히 많이 씀
useInview랑 () 2개의 조합이
이런 걸 추려서 훅으로 빼서 동시에 여러 곳에서 사용할 수 있지 않을까

옵저버인터섹션과 useInview 둘 중에 하나로 통일하는게
공통 컴포넌트로 빼놓을테니까 이걸로 사용하자 ~ 말하면 좋겠다

컴포넌트 하나하나의 라인 수가 길어
분리를 하면 좋을 것 같음
밖에서 볼 땐 필터링이 잘 되는 거 같은데 흠 ...
지금 상태는 이런 이런 이슈가 있어서 이렇게 해결했다 ~ -> 스토리가 될 것 같음

개인적인 바램
마지막 프로젝트니 그동안 CRUD를 기반으로 많이 했는데
와 이 앱 CRUD가 되네 ? 그러지 않음 -> 기본적인 것
이걸 채팅형식으로 바꾸면 좋지 않을까 꽤나 스페셜한 엣지를 조금 더 개발하기를 권유해주셨다.

 

 

 

ANSER//

 

useMemo를 사용하면 계산 비용이 높은 작업을 최적화할 수 있으며, 컴포넌트의 렌더링이 불필요하게 발생하지 않도록 할 수 있는데 useMemo는 두 개의 인수를 받는다:
계산할 함수 또는 표현식으로
의존성 배열 (dependency array)로서, 해당 배열 안에 들어 있는 값이 변경될 때만 useMemo 내부의 함수가 재계산된다

useMemo 장점
성능 최적화: useMemo를 사용하면 계산 비용이 높은 작업을 불필요하게 반복하지 않고, 필요할 때만 다시 계산하여 성능을 향상시킬 수 있다.

 useMemo는 의존성 배열을 통해 관련 데이터가 변경될 때만 재계산되므로, 불필요한 렌더링을 방지하고 컴포넌트의 렌더링 사이클을 최적화할 수 있다.

 useMemo는 계산 결과를 메모리에 저장하고 재사용하기 때문에, 불필요한 객체 생성을 줄여 메모리 사용량을 최적화할 수 있다.

useMemo 단점
useMemo를 과도하게 사용하면 코드를 복잡하게 만들 수 있으며, 성능 향상 대신 코드를 이해하기 어렵게 만들 수 있다.... 따라서 필요한 경우에만 사용해야 한다.

잘못된 의존성 배열: 올바른 의존성 배열을 설정하지 않으면 원하지 않는 동작을 일으킬 수 있다. 의존성 배열을 신중하게 관리해야 한다.

컴포넌트 분리 어려움: useMemo를 사용하면 컴포넌트를 분리하기 어려울 수 있으며, 코드 재사용을 어렵게 만들 수 있다.

 

 

///////

Intersection Observer:

API: Intersection Observer는 브라우저에 내장된 API이다. JavaScript로 직접 조작할 필요 없이 요소의 가시성을 관찰할 수 있다

장-
브라우저 내장 API로, 별도의 라이브러리나 패키지가 필요하지 않는다.
더 정교한 옵션 및 설정을 제공하며, 여러 요소의 가시성을 한 번에 관찰할 수 있다.
성능 면에서 최적화되어 있어 스크롤 및 리사이징 이벤트에 대한 부하가 낮다.
단점:

초기 설정 및 콜백 함수 작성이 다소 복잡할 수 있다.

useInView (react-intersection-observer와 함께):

API: useInView는 react-intersection-observer 라이브러리의 일부React 컴포넌트에서 사용할 수 있도록 추상화된 훅

장점:

React와 함께 사용하기 쉽고, 함수형 컴포넌트와 훅을 활용할 수 있다.
단순하고 간결한 사용법으로 빠르게 설정할 수 있다.
단-
브라우저에서 제공하는 모든 Intersection Observer의 옵션을 사용할 수 없으며, 일부 간소화된 옵션만 사용 가능함
일부 사용 사례에서 세부적인 커스터마이징이 필요할 수 있으며, 그럴 경우 직접 Intersection Observer를 사용해야 할 수 있음
차이점 요약:

Intersection Observer는 브라우저에 내장된 API로, 더 많은 커스터마이징 옵션과 최적화를 제공
useInView는 React 컴포넌트와 함께 사용하기 쉽고 간결한 방법으로 가시성을 관찰할 수 있으며, react-intersection-observer 라이브러리를 필요로 한다 !