대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC
모듈 페더레이션 PoC로 Next.js 기반 마이크로프론트엔드의 런타임 통합 방식을 살펴보았습니다. 다만 원격 모듈 설정 자동화와 타입 안전성, SSR 구현 난이도는 추가 해결이 필요했습니다.
#Module Federation#micro frontend
13000
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
SEO 주도 개발 실천기: 구글이 인정한 ‘좋은 URL’ 99% 달성 여정
SEO 지표를 개발 목표로 삼아 서버와 클라이언트의 병목을 단계적으로 개선했습니다. 그 결과 원티드 플랫폼의 99% URL을 ‘좋은 URL’로 전환했습니다.
#SEO#Next.js
10500
GraphQL 커스텀 디렉티브로 만드는 선언적 지연 로딩
SSR에서 개인화 필드 동기화와 중복 요청 문제를 GraphQL 커스텀 디렉티브로 해결한 사례를 소개했습니다.\n`@lazy`로 필요한 필드만 재조회해 네트워크 비용을 줄이고 개발자 경험을 개선했습니다.
#GraphQL#Apollo Client
7600
Next.js 개발 중 마주한 Hydration Error와 원인
Next.js SSR 환경에서 Hydration Error가 발생한 원인과 점검 방법을 정리했습니다. dayjs locale 불일치로 서버와 클라이언트 렌더 결과가 달라진 사례를 설명했습니다.
#Next.js#React
14200
웹앱 서버 로깅 개선기
서버 로깅 포맷을 통일해 유저·요청 단위 추적과 호출 위치 확인이 쉬워지도록 개선했습니다. 메타데이터와 트레이스를 더해 디버깅과 모니터링 효율을 높였습니다.
#logging#모니터링
31500
Docusaurus를 이용한 API 문서 플랫폼의 진화
Docusaurus를 이용한 API 문서 플랫폼의 진화
Docusaurus와 Typesense로 기존 Redoc 기반 API 문서 플랫폼을 재구성한 사례를 소개했습니다. 문서 UX, 검색, 배포 흐름 개선과 그 결과를 함께 공유했습니다.
#Docusaurus#Typesense
14000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
React Server Component와 Streaming으로 웹 성능 극대화하기: Next.js 실전 가이드
Next.js App Router에서 React Server Components와 Streaming을 활용해 데이터 패칭 패턴을 비교했습니다. loading.tsx와 Suspense, use 훅으로 체감 속도와 로딩 시간을 함께 개선하는 방법을 설명했습니다.
#React#Next.js
22100
Next.js 트러블슈팅: CORS와 Version Skew 에러 원인부터 해결까지
Next.js SSR 서비스에서 발생한 CORS와 Version Skew 장애의 원인과 해결 과정을 정리했습니다. SessionStorage 저장, dynamic import, 배포 전략 개선으로 문제를 완화했습니다.
#Next.js#CORS
14600
신세계백화점 PC 메인 React 전환기
신세계백화점 PC 메인 페이지를 Spring에서 React와 Next.js 기반으로 전환했습니다.\n초기 로딩, 인피니트 스크롤, SEO까지 함께 고려해 사용자 경험과 유지보수성을 개선했습니다.
#React#Next.js
24800
마이리얼트립 SSR 최적화
SSR 도입 후 발생한 중복 API 호출과 성능 저하의 원인을 분석하고 구조를 개선한 사례를 다뤘습니다. queryKey 통일, 캐시 설정, 메서드 선택으로 FCP와 LCP를 크게 개선했습니다.
#Next.js#React
7600
왜 왓챠 웹은 Remix로 마이그레이션했을까?
왓챠 웹이 기존 react + express 구조에서 Remix로 마이그레이션한 이유와 과정을 정리했습니다. 점진적 전환, 라우팅 분기, 컴포넌트 분리와 같은 운영 전략도 함께 공유했습니다.
#Remix#React
33800
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 내부 동작과 보안 주의점을 설명했습니다. 편의성 뒤에 있는 인증·인가, 입력 검증, 인젝션 방지 책임을 강조했습니다.
#Next.js#React
1400
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 동작 방식과 기본 보안 메커니즘을 설명했습니다. 편의성 뒤에 숨은 인증·인가, 입력 검증, SSRF 등 보안 책임을 강조했습니다.
#Next.js#React
2100
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 동작 방식과 보안 주의를 정리했습니다. 편의성만 믿지 말고 입력 검증, 인증/인가, 주입 공격 대응을 함께 챙겨야 합니다.
#Next.js#Server Action
8900