TypeScript any 린트 에러(no-explicit-any) 근본적으로 해결하기
TypeScript 프로젝트에서 @typescript-eslint/no-explicit-any 린트 에러는 단순 규칙 비활성화로 해결할 문제가 아닙니다. 눈 앞 문제는 해결할 수 있지만, TypeScript를 사용하는 가장 중요한 이유를 위배하게 됩니다. any 타입은...
JSP 주석, 아직도 `` 쓰시나요? 올바른 사용법
코드를 작성하다 보면 주석을 남기는 경우가 많습니다. 하지만 JSP 환경에서 어떤 주석을 사용하냐에 따라 보안 수준과 성능 이 크게 달라집니다. 표준 주석: 서버 사이드 주석 <%-- --%> JSP 페이지 내 개발 관련 주석은 <%-- --%> 를 사용하는게 좋습니다...
쉽게 만드는 React Tab 라이브러리 react-tabs
개발자가 커스텀 스타일을 쉽게 적용할 수 있도록 최소한의 스타일만 제공하여 유연한 스타일링 이 가능한 라이브러리입니다. 상태 관리가 내장되어 있어 탭 선택 및 패널 표시 로직을 직접 구현할 필요 없이 간편하게 사용할 수 있습니다. 기본 사용법 먼저, 라이브러리를 설치합...
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가...
TypeScript에서 Interface와 Type의 주요 차이점
TypeScript에서는 데이터를 정의할 때 주로 interface 와 type 을 사용합니다. 두 방식은 비슷해 보이지만, 차이점이 있습니다. 1. 확장성 (Declaration Merging) Interface는 선언 병합(Declaration Merging)이 가...
Next.js Image 컴포넌트 최적화하기
Next.js Image 컴포넌트 속성 최적화 화질 개선 크기 및 반응형 최적화
Hydration Error와 mounted 상태 관리에 대한 설명
문제 상황 // 문제가 있는 코드 export const FeatureToggles = () => { const { user } = useAuth(); const isAdmin = user?.email === 'test@gmail.com'; return ( ...
Next.js suppressHydrationWarning 속성 이해하기
suppressHydrationWarning 이란 무엇인가? suppressHydrationWarning 은 React/Next.js에서 하이드레이션 경고(Hydration Warning)를 억제하기 위한 특별한 속성입니다. 서버 사이드 렌더링(SSR)된 내용과 클라이...
[문서] Next.js App Directory에서 Canonical 태그 작성
Canonical이란? Canonical(정식 URL)은 검색 엔진에 여러 유사한 페이지 중 "원본" 또는 "선호되는" 버전을 알려주는 HTML 요소입니다. 이는 중복 콘텐츠 문제를 해결하고 검색 엔진 최적화(SEO)를 개선하는 데 중요한 역할을 합니다. 검색 엔진에 ...