ayeongjin 님의 블로그

🌐 CSR, SSR, SSG, ISR의 렌더링 방식과 SEO, Hydration의 관계SEO 최적화를 고민하다가 CSR/SSR뿐만 아니라 SSG, ISR 그리고 SEO, Hydration에 대한 개념을 정리하고 실제 사용 시 어떤 조합이 적절한지 고민해보게 되었다. Hydration이란?Hydration은 서버에서 생성된 정적 HTML을 클라이언트에서 React가 연결하여 실제로 동작하게 만드는 과정이다. SSR, SSG, ISR 모두 hydration이 필요하다HTML만으로는 상호작용이 불가능하며, React의 이벤트 바인딩이 완료되어야 비로소 인터랙션이 가능해진다Hydration 동안에는 버튼 클릭, 입력 등이 잠시 비활성화될 수 있어 사용자 경험에 영향을 줄 수 있다 예를들어,서버가 만들어준 HT..

📖 HTTP와 HTTPS의 차이 및 HTTPS 사용의 장점웹사이트를 방문할 때, 주소창에 http:// 또는 https:// 는 웹에서 데이터를 주고받는 방식(프로토콜)으로, 보안 측면에서 큰 차이가 있습니다. 1. HTTP와 HTTPS의 차이 HTTP (HyperText Transfer Protocol)란?HTTP는 웹사이트와 사용자의 브라우저(클라이언트) 간에 데이터를 주고받는 기본적인 프로토콜입니다.하지만 HTTP에는 암호화 기능이 없어 데이터를 주고받는 과정에서 해킹, 도청, 변조 위험이 존재합니다.예를 들어, HTTP 사이트에서 로그인할 경우 해커가 중간에서 데이터를 가로채면, 아이디와 비밀번호가 노출될 수 있습니다. HTTPS (HyperText Transfer Protocol Secure)..

이미지 최적화웹페이지에서 가장 많은 용량을 차지하는 파일은 이미지 파일입니다. Next.js의 Image 내장 컴포넌트를 사용하면 쉽게 최적화할 수 있습니다. 1. 이미지 최적화 전의 문제점비효율적인 파일 포맷 사용: jpeg 파일을 렌더링하면 용량이 크므로, webp 또는 avif 같은 더 경량화된 포맷을 사용하면 성능이 향상됩니다.불필요한 이미지 로딩: 현재 화면에 렌더링할 필요가 없는 모든 이미지가 동시에 로드됩니다.과도한 이미지 크기: 화면에서 필요로 하는 크기보다 훨씬 큰 이미지가 불러와져 성능 저하가 발생합니다. 2) 이미지 컴포넌트로 변경외부 서버에서 이미지를 불러올 경우 Next.js의 보안 정책에 의해 차단될 수 있으므로 next.config.mjs에서 도메인을 허용해야 합니다.// ne..

SEO 설정하기 1. 썸네일과 Favicon 설정하기Next.js 프로젝트에서 썸네일과 파비콘을 설정하려면 public 폴더에 favicon.ico와 썸네일 이미지를 추가하면 됩니다.📌 설정 방법public 폴더에 favicon.ico 파일 추가프로젝트의 썸네일 이미지를 public 폴더에 추가 2. 메타태그 설정하기Next.js에서는 Head 컴포넌트를 활용하여 페이지별로 메타태그를 설정할 수 있습니다. 📌 설정 방법import Head from "next/head"; // 메타태그 설정을 위한 Head 컴포넌트 import ⚠️ 주의사항SSG 방식으로 렌더링하면 초기 로딩 중에 메타태그가 적용되지 않을 수 있음따라서 다음과 같이 로딩 화면에서도 기본 메타태그를 설정하여 문제를 방지해야 함   Ne..