오늘 한 일

클라이언트사이드에서 데이터 페치할 때 깜빡임 제어

♻️서버사이드렌더링 데이터 페치 리팩토링

• await/async 대신 Promise.all 사용

 const PromiseList = [
    Sender.execute<dtoCoinPrice, dtoResCoinPrice>(
      'CoinPrice',
      tradingHeader,
      tradingReq,
    ),
    Sender.execute<dtoCoinPrice, dtoResCoinPrice>(
      'CoinPrice',
      price1hHeader,
      price1hReq,
    ),
    Sender.execute<dtoBoard, dtoResBoard>('Board', boardHeader, noticeReq),
    Sender.execute<dtoBoard, dtoResBoard>('Board', boardHeader, freeReq),
    Sender.execute<dtoNewsList, dtoResNewList>(
      'NewsList',
      boardHeader,
      newsReq,
    ),
    Sender.execute<dtoTicker, dtoResTicker>('Ticker', boardHeader, tickerReq),
    Sender.execute<dtoCoinPrice, dtoResCoinPrice>(
      'CoinPrice',
      makretHeader,
      marketReq,
    ),
  ];

  const [
    tradingData,
    price1hData,
    noticeData,
    freeData,
    newsData,
    tickerData,
    coinPriceData,
  ] = await Promise.all(PromiseList);

서버사이드에서 JWT 토큰 검증

export function jwtDecode(token: string) {
  const base64Payload = token.split('.')[1];
  const payload = Buffer.from(base64Payload, 'base64');
  const result = JSON.parse(payload.toString());
  let expired = false;
  if (result.exp > new Date().getTime()) {
    expired = true;
  }
  return {
    result,
    expired,
  };
}

전역 세로 스크롤 숨김처리

main-container 로 감싸진 페이지는 스크롤이 보이고, 아닌 페이지는 스크롤이 안 보이는 이슈가 있었다.

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
}
body::-webkit-scrollbar {
  display: none;
  width: 0 !important;
}

.main-container {
  margin: 0;
  padding: 0;

  width: 100vw;
  height: 100%;
}

그런데 왠지는 모르겠는데 레이아웃 컴포넌트에서 한 번 더 div 태그로 감싸주니 문제가 해결되었다.

// layout/user.ts
import { Fragment, createRef } from 'react';
import Header from '../components/Common/Header';
import TabMenu from '@components/Common/TabMenu';
function User(props: any) {
  const { type } = props;
  const mainContentRef = createRef<HTMLDivElement>();
  return (
    <>
      <Fragment>
        <div className="outer-container">
          <div className="main-container" ref={mainContentRef}>
            <Header />
            {/* <TabMenu /> */}
            {props.children}
          </div>
        </div>
      </Fragment>
    </>
  );
}

export default User;

참고자료

• https://wooaoe.tistory.com/49
• https://ryusm.tistory.com/115
• https://shylog.com/hide-scrollbar-in-browser/

모바일에서 window.scrollTo(x,y) 가 안 먹히는 이슈 해결

게시물 페이지에 접속할 때는 항상 스크롤 초기화를 하고 싶었는데, 모바일에서는 먹히지 않았다. NextJS의 router.push는 스크롤 초기화가 디폴트 옵션이므로 nextJS의 문제는 아니었다.

특정 HTMLElement의 scrollHeight를 이용하는 것으로 해결했다.

// article.tsx
const Article = ()=> {
  useEffect(() => {
    console.log(
      window.innerHeight,
      document.body.scrollHeight,
      document.body.scrollTop,
    );
    document.body.scrollTo(0, 0);
  }, []);  
  return <div>게시물 상세 페이지</div>
}

응용

특정 길이만큼 스크롤을 내렸을 때, 페이지 최상단으로 이동하는 버튼이 표시되게 하기 위해서는 window.innerHeight 와 특정 엘리먼트의 scrollHeight 만큼의 차이를 이용할 수 있을 것같다. 내일 해봐야지 ^ㅡ^

참고자료
https://stackoverflow.com/questions/58758545/on-mobile-why-pageyoffset-clientheight-dont-equal-to-scrollheight