SEO를 위한 이미지 크롤링 최적화 가이드
1. 문제 상황 웹사이트의 /public/assets 폴더 내의 모든 이미지가 검색 엔진에 의해 크롤링되고 있습니다. 색인화가 불필요한 이미지까지 크롤링하기 때문에 경고로 표시 2. 목표 불필요한 이미지 크롤링 방지 중요한 이미지의 SEO 가치 유지 웹사이트 성능 최적...
Tailwind CSS, Visibility 알아보기
Tailwind CSS Visibility visible : 요소를 표시합니다. invisible : 요소를 숨깁니다. collapse : 요소를 테이블과 같은 레이아웃에서 숨깁니다. ※ React와 같은 라이브러리에서는 class 대신 className 을 사용해야 ...
도메인 변경에 따른 리다이렉트 설정 가이드
Next.js 프로젝트에서 특정 URL 경로가 다른 도메인으로 변경되었을 때 사용자를 자동으로 새 도메인으로 리다이렉트시키는 방법에 대한 설명글입니다. 제거된 경로를 리다이렉트 시키는 것은 사용자 경험 향상에 도움이 됩니다. 1. 서버 리다이렉트 설정 서버 측에서 리다...
Next.js Routing이란? 페이지 네비게이션 가이드!
※ Next.js는 React 기반의 프레임워크로, 프론트엔드와 백엔드 기능을 모두 갖추고 있습니다. Next.js의 라우팅과 관련된 주제는 주로 프론트엔드와 관련이 있지만, 백엔드와의 상호작용도 고려할 수 있습니다. Next.js 14에서의 Routing 개요 Nex...
Next.js Client Component와 Server Component
※ 카테고리 이슈가 있지만, FrontEnd에 작성하겠습니다. Next.js를 사용하면 Client Component와 Server Component를 조합해서 프로젝트를 진행해야 합니다. 그럼 이 둘의 차이점은 무엇일지에 대해서 알아보겠습니다. Server Compo...
Tailwind CSS에서 z-index 활용하기
1. z-Index란 무엇인가? CSS에서 z-index 속성은 겹치는 요소들의 수직 스택 순서를 제어합니다. 높은 z-index 값을 가진 요소는 낮은 값을 가진 요소 위에 위치합니다. 스택 컨텍스트가 어떻게 형성되는지를 이해하는 것은 z-index 를 효과적으로 사...
Next.js에서 params 객체를 전달할 때 주의할 사항
Next.js에서 동적 라우팅을 사용하여 페이지를 생성할 때, params 객체를 적절하게 처리하는 것이 중요합니다. 특히 params 객체 내에 필요한 속성이 없는 경우, 함수 내부에서 해당 속성을 추출할 수 없게 됩니다. 문제 상황 동적 경로를 설정한 페이지에서 p...
The default export is not a React Component 오류 해결
Next.js 프로젝트를 개발하다 보면 종종 마주치는 오류 중 하나가 "The default export is not a React Component in page: [페이지 경로]" 입니다. 대부분 경로가 잘못됐기에 발생하는 오류가 경로 문제가 아니라면 간단하게 해결...
Next.js 초보 개발자가 꼭 알아야 할 5가지 필수 지식
Next.js는 빠르고 효율적인 웹 애플리케이션을 만들 수 있는 React 기반의 프레임워크입니다. 그러나 Next.js를 사용하기 전에 몇 가지 기본적인 지식을 알고 있으면 훨씬 수월하게 시작할 수 있습니다. 1. JavaScript 기본기 다지기 Next.js는 J...
Next.js App Directory로 SSR과 CSR을 한 번에!
Next.js는 React 애플리케이션을 위한 인기 있는 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있도록 도와줍니다. Next.js를 사용하면 빠르고 SEO 친화적인 웹 애플리케이션 을 개발할 수 있습니다. 1. Next...
Next.js 개발자가 Tailwind CSS를 사용하는 이유
Next.js 프로젝트를 init 하면 Tailwind css를 설치할거냐고 물어본다. 그럼 왜 Tailwind css를 추천할까? 이유는 아래와 같다. 개인적으로 다른 CSS Frameworks에 적용될만한 내용이라 공감은 잘 안된다.. 그럼에도 Next.js팀은 T...
ES6 모듈 vs CommonJS: 차이점과 선택 가이드
ES6 모듈과 CommonJS는 가장 널리 사용되는 두 가지 모듈 시스템입니다. 결론부터 얘기하자면.. 브라우저와 서버를 모두 지원하는 ES6 모듈을 사용하는 것이 좋습니다. Node.js, Express.js 환경에서는 CommonJS가 기본이지만 프로젝트 요구 사항...