Frontend

기술 기록

Next.js Middleware rewrite로 인증 서비스 OG 크롤링 정상화

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

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

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

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

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

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

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

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

퍼블리싱 파이프라인 v5 실행 중 발생한 Python 환경 에러들과 해결 방법

CDN의 개념부터 이미지 최적화, JS 라이브러리 로딩까지. "대충 아는" 상태가 답답해서 한번 제대로 파봤다.