[TIL] 2023-1129

Facts

- QA 넘기고 코드 개선 작업 진행중... 흠...

- 디깅한 내용을 문서로 정리하는 중... 빠른 시일내에 블로그 글로 재탄생 시켜야지..!

 

Feelings

- 새 프로젝트가 시작되는데 기간이 아주 타이트함.. 하지만 재밌을 것 같다.. 하지만 일정이 제대로 갖춰질까..~?

 

Findings

1. CSS 선택자 꿀팁...  only-child 선택자를 사용하면 요소가 1개만 있을 때 속성을 제어할 수 있다.

아래는 2개 컬럼의 그리드에서 요소가 하나만 존재할 때 1개 컬럼으로 변경하는 코드..

display: grid;
grid-template-columns: repeat(2, 1fr);

/* 자식요소 하나만 있을 때 그리드 컬럼 1줄로 변경... */
& li:only-child {
  grid-column: 1 / -1;
}

 

grid item 에 grid-column 속성을 적용할 땐 이 아이템이 컬럼의 어디부터 어디까지 차지하게 할 것인지를 설정할 수 있는데, 위 코드에서 1 / -1 은 첫 라인 그리고 마지막 라인을 의미.. 즉 한 줄을 통째로 먹겐단 의미가 됨..

 

후 CSS의 세계란..

 

2. Next.js 에서 Suspense 적용하기...

Suspense 컴포넌트로 감싸서 로딩되는 동안 fallback UI를 띄워주고자 했으나... fallback UI가 의도대로 뜨지 않는 현상이 있음.. 왜지..? 그래서 디깅중...

 

[What is Suspense?]

• React 18 부터 정식 릴리즈
• 컴포넌트 렌더링을 어떤 작업이 끝날 때까지 잠시 중단, 다른 컴포넌트 먼저 렌더 가능. 
• 그래서 비동기 데이터 fetching 이 끝난 후 렌더되도록 하는 일에 많이 쓰임
• Suspense 를 사용하기 전, 함수형 컴포넌트에서는 useEffect 와 isLoading과 같은 상태값을 가지고 useEffect 내에서 isLoading의 상태를 변화시켜 JSX 코드를 렌더하는 방식으로 지연시킬 수 있음. 
• 이런 방식의 문제점은..?
• 이렇게 동작이 가능한 이유는 Suspense 가 promise를 캐치하기 때문이라고 함… 그러니까 Promise 의 작업이 완료되면 원래 UI를 렌더하고, 작업이 진행중인 경우 fallback UI를 렌더하면서 대기 상태에 놓이도록 할 수 있는 것.
• 이 글 https://www.daleseo.com/react-suspense/#suspense-%EC%82%AC%EC%9A%A9-%ED%9B%84 과 https://codesandbox.io/p/sandbox/react-suspense-nupv27?file=%2Fsrc%2Fbefore%2FUser.jsx%3A25%2C32 여기 코드 예제를 보면 Suspense 유무에 따른 차이가 아주 잘 보인다..!

api 요청 waterfall 현상이 아래처럼 일어나면서 무한으로 반복되고 있다...

• 적절한 Promise 응답을 받지 못해서.. 계속 이렇게 waterfall 현상이 발생하는게 아닌가 하는 의심이 드는군… 좀 더 디깅해보자..
• Suspense가 감싸고 있는 하나의 컴포넌트에서 2개 이상의 요청을 할 때 네트워크 병목이 발생하는 것입니다. https://happysisyphe.tistory.com/54 이 글에 따르면… 한 컴포넌트에서 여러개 요청이 가고 있을 땐… Suspense 가 하나씩 settled 되면서 children을 반환하기 때문에 같은 요청이 여러번 가면서 이런 무한 요청 현상이 발생하는게 아닌가 싶은 합리적 의심이 든다. 
• 그니까 한 컴포넌트에 대해 병렬처리가 되지 않고 children을 반환하면서 계속 렌더링이 되기 때문에… 이렇게 된다..? 그렇다면 useQuery를 사용하는 모든 컴포넌트에서 무한 렌더 현상이 발생해야 할 것 같은데 또 그렇지는 않단 말이지.. 하지만 이 suspense 의 waterfall 현상과 무한 요청이 깊은 연관이 있을 것 같다는 생각이 든다…
• 여기에 suspense 의 동작에 대해 그림으로 잘 정리한 글이 있다. https://velog.io/@jay/suspense-useQueries
• 이 문제를 해결하려면 여러 요청을 병렬로 처리할 수 있는 useQueries 훅을 suspense 와 함께 사용하면..
• 흠 근데 그러기엔.. 이미 내 컴포넌트 동작 방식이 이렇다.
  • 상위 컴포넌트에서 useQuery 호출이 이루어짐
  • 하위 컴포넌트에서도 useQuery 호출이 이루어짐
• 이렇게 중첩된 컴포넌트를 하나의 Suspense로 감싸고 있기 때문에 이런 문제가 발생하는건 아닐까..? => 실험 그럼 범위에 맞게 따로 감싸봅시다.. 여전히 waterfall이 발생하는군요…

Feedback

• 일단 api 요청이 원하는 시점에 가도록 조절하고... 이건 어떻게 해결해야할지 suspense 동작을 공부하면서 찾아봐야겠다..람쥐..~