💥문제 상황keyframes animation으로 SideBar 구현을 시도했더니 아래와 같이 뚝뚝 끊기며 동작했다 위 GIF의 코드는 아래와 같다const narrowToWide = keyframes` from { width: 10% } to { width: 20% }`;const wideToNarrow = keyframes` from { width: 20% } to { width: 10% }`;const animation = Object.freeze({ narrowToWide: css` ${narrowToWide} 1s ease-in forwards /** 👉🏻forwards 속성을 부여하면 keyframes의..

FOUC, Flash of Unstyled ContentSSR 시 스타일이 처음에 적용되지 않다가 나중에 적용되어 깜빡이는 현상 💥문제 상황좌측 상단에 보면 스타일이 뒤늦게 적용되어 UI가 깨지는 모습을 볼 수 있다Styled-Components로 스타일을 진행하였다 ❓원인 - Next.js 렌더링 방식 : SSR (Server Side Rendering) 1. HTML 렌더링 => Client 전달2. JS 렌더링 => Client 전달 👉🏻 Styled-Components : CSS-in-JS→ HTML 렌더링 후, Styled-Components의 JS 파일 적용 간 타이밍 이슈 발생  ❗해결 방법 - 서버에서 스타일을 미리 렌더링 : Next.js 공식 문서1️⃣Styled-Component..