메타 키워드의 SEO 영향력 상실과 그 이후의 전략
구글은 2009년부터 메타 키워드를 사용하지 않습니다. 구글이 웹 검색 결과의 순위에 메타 키워드를 사용하지 않겠다고 발표한 것은 2009년 9월 21일이었습니다. SEO 가치가 없기 때문에, 웹사이트에 메타 키워드를 추가하는 데 시간을 투자할 필요가 없습니다. 구글과...
React Hooks 기초, 상태 관리부터 생명주기 이벤트
React Hooks는 함수형 컴포넌트에서 상태 관리, 생명주기 이벤트 처리 등 클래스 컴포넌트에서 가능했던 기능을 사용할 수 있게 해줍니다. 각 Hook은 특정한 용도로 사용되며, 이해하기 쉽게 각각의 용도와 사용 예를 설명하겠습니다. 1. useState useSt...
useMemo와 useState 이해하기, 성능 최적화와 상태 관리
useState 는 Component 내부에서 변수의 상태를 관리하기 위해 사용, 사용자 입력, 버튼 클릭 상태 또는 다른 데이터 변화를 추적하고 반응하기 위해 활용됩니다. 사용자가 입력한 텍스트를 저장하고 표시하는 입력 필드에서 사용 useMemo 는 연산 결과값을 ...
Next.js Loading.js (Loading UI)와 스트리밍에 대해서 알아보자
Loading UI 생성 loading.js 는 React Suspense를 사용하여 의미 있는 Loading UI를 생성할 수 있도록 합니다. 이 규칙을 사용하면 서버에서 즉각적인 로딩 상태를 보여줄 수 있고, 경로 세그먼트의 콘텐츠가 로드되는 동안 사용자에게 피드백...
Microsoft Clarity 통합 시 Uncaught TypeError: a[c] is not a function 오류 해결 방법
Next.js 애플리케이션에 Microsoft Clarity와 같은 타사 스크립트를 통합할 때, Next.js가 스크립트를 로딩하고 실행하는 방식으로 인해 특정 충돌이 발생할 수 있습니다. 흔히 발생하는 문제 중 하나는 JavaScript 오류입니다. 문제 설명 app...
Next.js에서 동적 임포트(dynamic import)를 사용하는 주된 이유
Next.js에서 동적 임포트(dynamic import)를 사용하는 주된 이유는 code splitting과 SSR 최적화입니다. 0이 방법은 특히 클라이언트 사이드 전용 코드에 유용하며, 여러 가지 장점을 제공합니다. 여러 이유가 있지만, 크게 3가지로 분류하였습니...
React useRef 쉽게 이해하기
우선 useRef를 쉽게 이해하려면 렌더링과 DOM에 대한 이해가 필요합니다. 렌더링: 사용자 인터페이스를 화면에 그리는 과정, React에서는 상태(state), 속성(Props) 변경이 발생하면 Component가 렌더링되어 변경된 내용을 화면에 반영합니다. 즉 화...
TS18048, 데이터베이스에서 반환되는 빈 배열에 대한 처리 방법
데이터베이스에서 데이터를 받아오는 중, ` TS18048: avatars is possibly undefined` 문제가 발생했다. 아래 코드에서, getLostArkAvatars 함수를 통해 데이터베이스에서 avatars 를 가져온 뒤, 이를 map 을 사용하여 렌더...
WebP의 우수성: JPG 및 JPEG 포맷을 뛰어넘는 이유
WebP 이미지 포맷은 디지털 이미지 저장 및 전송의 효율성을 극대화하는 현대적인 기술로, JPG와 JPEG 포맷과 비교했을 때 여러 면에서 우월한 성능을 제공합니다. 주요 이점을 자세히 살펴보겠습니다. 압축 효율의 혁신 WebP 포맷은 동일한 화질의 이미지를 더 작은...
Next.js Fill을 활용한 이미지 높이, 너비 제어
이전 버전의 layout prop 대신, fill prop을 사용하여 반응형 이미지를 쉽게 구현할 수 있습니다. 또한, 컴포넌트의 기본 이미지 요소를 style 또는 className을 사용하여 스타일링할 수 있습니다. 문제가 발생하는 기존 사용 방법 import Im...
Next.js Pages, 내부에 Component 파일 생성에 관한 가이드
Next.js 프로젝트에서 컴포넌트를 임포트하고 사용하는 방식은 표준적인 접근법으로, 다른 파일 또는 컴포넌트를 import 문을 통해 가져와 현재 컴포넌트에서 사용하는 것을 포함합니다. 일반적으로 Components 폴더에 생성 된 Component와 달리, Page...
Next.js에서 Metadata 관리
기본적인 Metadata 사용 방법 검색 엔진 최적화(SEO)와 사용자 경험을 향상 시키는 데 중요합니다. 태그 내의 Metadata를 설정하는 것으로, 동적 데이터에 따라 Metadata를 변경할 수도 있다. 기본 설정 외 Metadata Setting ...