Frontend

기술 기록

검색 색인 차단과 OG 미리보기 유지 정리

크롤링·색인·Open Graph를 분리해 검색 결과에서는 감추고 링크 미리보기는 살리는 설정을 정리했다.

Next.js 개발 오버레이의 useId 하이드레이션 경고를 추적하며 createPortal과 독립 React Root의 차이를 정리했다.

인증이 걸린 Next.js 서비스에서 OG 크롤러가 로그인 페이지로 redirect돼 미리보기가 깨지는 문제를 Middleware의 rewrite로 풀었다.

로그인·로그아웃을 다루며 만난 SSO, SLO, IdP, SP 용어의 실제 담당 영역과, 프론트엔드가 제어할 수 있는 것과 없는 것을 구분했다.

같은 계정으로 로그인했는데 한 앱만 계속 401이 떴다. 범인은 내 서버가 요청 길목에 끼어 있느냐였다.

레이아웃 측정값을 UI에 반영할 때 ResizeObserver로 CSS 변수를 직접 갱신할지, React state로 올릴지 그 기준을 정리했다.

엑셀과 이미지 ZIP으로 PPT 슬라이드를 생성하는 서비스에서, 서버 업로드 전에 브라우저 단에서 ZIP 내부 이미지를 리사이징해 payload를 줄였다.

어드민에서 입력 중인 콘텐츠 값을 새 탭 미리보기에 실시간 반영해야 했다. 두 가지 접근을 비교한 끝에 postMessage를 골랐다.

useEffect 안에서 동기적으로 setState를 호출하면 왜 깜빡임이 생기는지, React가 렌더 중 setState를 어떻게 다르게 처리하는지 내부 동작까지 정리한 학습 일지.

pnpm Workspaces와 Turborepo를 중심으로 semver, lockfile 구조, node_modules 3단 링크, 내부 shared package 관리까지 정리한 학습 기록.