기술 블로그
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 연동이 자연스럽고, 문서와 자료가...
쉽게 만드는 React Tab 라이브러리 react-tabs
개발자가 커스텀 스타일을 쉽게 적용할 수 있도록 최소한의 스타일만 제공하여 유연한 스타일링 이 가능한 라이브러리입니다. 상태 관리가 내장되어 있어 탭 선택 및 패널 표시 로직을 직접 구현할 필요 없이 간편하게 사용할 수 있습니다. 기본 사용법 먼저, 라이브러리를 설치합...
가볍고 유연한 React 아이콘 라이브러리 lucide-react
lucide-react 는 React 애플리케이션에서 SVG 아이콘을 손쉽게 사용할 수 있도록 지원하는 라이브러리 입니다. 인기 있는 Feather 아이콘을 기반으로 제작되었으며, 1000개 이상의 일관성 있는 디자인의 아이콘을 제공합니다. 또한 실제 프로젝트에서 사용...
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 dynamic import에서 ref가 작동하지 않는 이유와 해결법
Next.js에서 next/dynamic 으로 컴포넌트를 동적으로 import할 때 ref 가 예상대로 전달되지 않는 원인과 해결 방법, 그리고 Next.js에서 공식적으로 권장하는 방식까지 명확하게 정리합니다. 🔍 문제 요약: dynamic import 시 ref가...
Next.js suppressHydrationWarning 속성 이해하기
suppressHydrationWarning 이란 무엇인가? suppressHydrationWarning 은 React/Next.js에서 하이드레이션 경고(Hydration Warning)를 억제하기 위한 특별한 속성입니다. 서버 사이드 렌더링(SSR)된 내용과 클라이...
react-intersection-observer로 React 무한 스크롤 쉽게 구현하기
react-intersection-observer 소개 패키지 개요 Intersection Observer API를 React에서 쉽게 활용할 수 있도록 Hook과 컴포넌트 형태로 제공하는 라이브러리입니다. useInView Hook이나
