프론트엔드

Next.js

App Router, SSR, CSRF, prerender

13개의 글
  1. 백엔드/인증-보안

    OAuth와 이메일 가입을 하나의 온보딩 플로우로 통합하기

    계정 생성과 조직 설정을 분리하면 OAuth·이메일 두 가입 경로가 하나의 온보딩 페이지로 모입니다. 미들웨어 한 줄이 이 통합을 가능하게 합니다.

    16분 읽기
  2. 백엔드/인증-보안

    NextAuth v5 JWT 콜백: OAuth와 Credentials 사용자 한 곳에서 분기하기

    OAuth 경로에서는 user 객체에 회사 관계가 없어 토큰 초기화에 실패합니다. account.type 분기와 추가 DB 조회로 해결한 방법을 정리했습니다.

    14분 읽기
  3. 백엔드/인증-보안

    NextAuth PrismaAdapter + 암호화된 이메일: Blind Index 커스텀 Adapter

    OAuth 추가 후 getUserByEmail이 null을 반환하는 조용한 실패를 추적해, Prisma Extension과 Blind Index를 활용한 커스텀 Adapter로 해결한 사례입니다.

    20분 읽기
  4. 프론트엔드/Next.js

    OG 이미지 구현의 두 전환점: 단순한 답이 이긴 두 번의 리팩토링

    OG 이미지를 구현하면서 같은 영역을 두 번 리팩토링했습니다. 두 번 모두 "영리해 보이는" 첫 설계를 버리고 "덜 특별한" 두 번째 설계를 택했고, 두 번 모두 그게 맞았습니다. 공통 패턴과 의사결정 기준을 정리합니다.

    16분 읽기
  5. 프론트엔드/Next.js

    Next.js i18n 미들웨어에서 OG 이미지가 안 보이는 이유: redirect vs rewrite 완벽 가이드

    다국어 사이트에서 루트 경로의 OG 이미지가 안 보이는 이유는 next-intl 미들웨어의 307 redirect 때문입니다. 크롤러 UA 감지 대신 모든 요청을 rewrite하여 해결하는 방법을 다룹니다.

    14분 읽기
  6. 프론트엔드/Next.js

    Next.js opengraph-image에서 한글이 깨지는 이유: Satori 폰트 로딩 완벽 가이드

    Next.js `ImageResponse`가 한글을 빈 사각형으로 렌더링하는 이유는 Satori가 OS 폰트를 읽지 않기 때문입니다. `fonts` 배열에 Noto Sans KR을 주입하는 정확한 방법과, 정적 PNG로 전환하는 프래그매틱 대안을 다룹니다.

    16분 읽기
  7. 프론트엔드/Next.js

    URL 쿼리로 토글하는 인라인 전체화면: Next.js App Router + useRouter().replace() 패턴

    '별도 /fullscreen 라우트 만들지 말고, 같은 페이지에서 ?panel=full 쿼리로 토글합시다.' PR 리뷰 코멘트 하나로 페이지 전체가 단순해졌다. URL을 상태로 삼는 패턴과 그 한계.

    12분 읽기
  8. 백엔드/API설계

    UI는 좁게, API는 넓게: 타임존 설정의 두 단계 검증 전략

    조직별 타임존 설정에서 드롭다운은 6개만 보여주지만 API는 IANA 전체를 받습니다. 이 '좁은 UI, 넓은 API' 패턴이 왜 단순 화이트리스트보다 나은지, 그리고 Intl.DateTimeFormat으로 어떻게 구현하는지.

    12분 읽기
  9. 백엔드/API설계

    Docker는 UTC, 사용자는 KST: Intl.DateTimeFormat만으로 만든 tz-aware ISO Week 유틸리티

    주간 리포트의 주차 경계가 서버 컨테이너(UTC)와 사용자(KST) 사이에서 어긋났다. date-fns-tz나 luxon을 도입하는 대신, Node 22의 full-ICU Intl.DateTimeFormat만으로 IANA 타임존 ISO week 유틸리티를 구현한 기록.

    15분 읽기
  10. 백엔드/인증-보안

    Next.js에서 2FA/TOTP 인증 구현하기: 라이브러리 없이 RFC 6238 표준 준수

    외부 라이브러리 없이 RFC 6238 TOTP 표준을 직접 구현했습니다. Dynamic Truncation 알고리즘 동작 원리와 Next.js 미들웨어에서 2FA를 강제하는 방법을 공유합니다.

    10분 읽기