기술 블로그
GG FACTORY 개발팀의 기술 경험과 노하우를 공유합니다.
Next.js 언어 번역 라이브러리 선택 가이드
웹 서비스 글로벌 진출이 보편화되면서, 국제화(i18n) 관련 라이브러리가 많이 출시됐습니다. 많이 사용되고, 커뮤니티에서 평가가 좋은 언어 번역 라이브러리를 정리했습니다. 인기 번역 라이브러리 1. react-i18next 설명 : React 프로젝트에서 가장 널리 ...
Java Spring Boot CORS 설정 살펴보기
어떤 경우에 CORS 문제가 발생하나요? 프론트엔드: https://test.com (React, Next.js 등) 백엔드 API: https://api.test.com (Spring Boot) 서로 다른 서브도메인이라도 브라우저 기준에서는 cross-origin 으...
Spring Boot와 함께 사용하기 좋은 프론트엔드 프레임워크
Spring Boot 서버 개발 시 주관적인 프론트엔드 프레임워크 추천입니다. 추천 프론트엔드 프레임워크 TOP 3 1. React.js (Next.js 포함) 글로벌 표준에 가까운 React는 Spring Boot와의 REST API 연동이 자연스럽고, 문서와 자료가...
Next.js 환경 변수 NEXT_PUBLIC 접두사 역할
NEXT_PUBLIC 접두사를 붙이면 변수의 접근 범위가 완전히 달라집니다. 이 차이점을 이해하는 것이 안전하고 효율적인 Next.js 애플리케이션을 구축하는 데 중요합니다. NEXT_PUBLIC 접두사가 없는 환경 변수 (서버 전용) NEXT_PUBLIC 접두사 없이...
Next.js와 Spring Boot 연동 시 API 호출 방식
프론트엔드에서 데이터를 어떻게 가져올 것인지에 대한 논의이므로, 프론트엔드 카테고리에 가장 잘 어울린다고 판단했습니다. 방식 1. Next.js의 api 폴더를 사용하는 방법 (중간 API 서버를 두는 방식) 설명 Next.js에서 제공하는 pages/api 또는 ap...
Next.js에서 Java 서버 API를 사용하는 방법
이 문서는 Next.js 프론트엔드에서 외부 Java 백엔드 API를 호출 하는 관점에서 작성되었으며, 백엔드 자체 구현보다는 프론트엔드에서 어떤 방식으로 API 요청을 설계해야 하는가 에 중점을 두었습니다. Next.js를 프론트엔드 프레임워크로 사용하는 상황에서, ...
Next.js dynamic import에서 ref가 작동하지 않는 이유와 해결법
Next.js에서 next/dynamic 으로 컴포넌트를 동적으로 import할 때 ref 가 예상대로 전달되지 않는 원인과 해결 방법, 그리고 Next.js에서 공식적으로 권장하는 방식까지 명확하게 정리합니다. 🔍 문제 요약: dynamic import 시 ref가...
Next.js API와 lib/action 사용 시 알아야 할 4가지 한계점과 해결법
Next.js API와 함께 별도의 로직을 관리하기 위한 lib/action 폴더를 구성하는 방식은 꽤 자주 사용되는 구조지만, 명확한 장점만큼이나 실제 개발 및 운영 시 고려해야 할 단점과 한계점도 있습니다. 3번을 가장 치명적인 문제로 보고 있습니다. 그래도 Flu...
Next.js Cache와 Redis Cache 사용 가이드
— 애플리케이션 성능 향상을 위한 캐시 전략 분석 — 1. 개요 오늘날 웹 애플리케이션은 빠른 응답 속도와 안정적인 데이터 제공이 필수입니다. 이를 위해 캐시(cache) 기술이 널리 활용되고 있는데요, Next.js에서는 내장 캐시 기능(예: g...
Next.js Image 컴포넌트 최적화하기
Next.js Image 컴포넌트 속성 최적화 화질 개선
