Next.js의 이미지 최적화이미지 최적화 1.기본 사용법 Next.js에서는 이미지 최적화를 위해 next/image컴포넌트를 사용한다. import Image from 'next/image' <Image src="/images/profile.jpg" width={500} height={500} alt="프로필 이미지" quality={75} /> src: 이미지 소스 URL width 및 height: 필수 속석으로, 이미지의 원본 크기를 ...Oct 11, 2024·2 min read·32
[App Router] 검색 엔진 최적화(SEO)앱 라우터의 SEO 설정 1.Metadata App Router에서는 Pages Router의 Head컴포넌트를 대체하는 metadata객체를 이용해 페이지의 메타데이터를 설정할 수 있다. import { Metadata } from 'next'; export const metadata: Metadata = { title: "타이틀", description: "설명" openGraph: { title: "타이틀, d...Oct 11, 2024·2 min read·60
[Pages Router] 검색 엔진 최적화(SEO)페이지 라우터의 SEO 설정 1.Head 페이지 별로 Head컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다. import Head from "next/head"; export default Page() { return ( <> <Head> <title>타이틀</title> <meata property="og:image" content={썸네일 주소} /> <...Oct 11, 2024·2 min read·130
Til: 바닐라 JS로 클라이언트 사이드 라우팅과 검색 기능 구현하기학습 내용 오늘은 Header 컴포넌트를 완성했다. 이 과정에서 SPA에서 중요한 클라이언트 사이드 라우팅과 검색 기능을 구현하는 방법을 배웠다. 클라이언트 사이드 라우팅 구현 // App.js // Header 컴포넌트에 전달하는 이벤트 핸들러 handleClick: async () => { // 브라우저 히스토리에 새 항목 추가 (URL을 홈으로 변경) history.pushState(null, null, "/"); // 포켓...Sep 28, 2024·2 min read·22
Til: 바닐라 JS로 컴포넌트 패턴 구현하기학습 내용 오늘은 바닐라 JavaScript를 사용한 SPA 구현의 핵심인 컴포넌트 패턴에 대해 심화 학습을 하고, 이를 적용하여 PokemonList 컴포넌트를 완성했다. 바닐라 JS 컴포넌트 설계 패턴 1. 애플리케이션 진입점 설정 먼저, SPA의 시작점인 index.js에서 다음과 같이 애플리케이션을 초기화한다. import App from './App.js'; // 앱의 루트 요소 선택 const $app = document.query...Sep 28, 2024·3 min read·21
Node.js와 Express.js를 이용한 서버 구축학습 내용 오늘은 Node.js와 Express.js를 활용하여 간단한 서버를 구축하는 방법을 학습했다. Express.js는 Node.js 환경에서 웹 서버를 쉽게 구축할 수 있게 해주는 프레임워크로, 간결한 코드만으로 서버 기능을 구현할 수 있다. Express 서버 기본 설정 const express = require("express"); const path = require("path"); const app = express(); c...Sep 23, 2024·1 min read·13
![[App Router] 검색 엔진 최적화(SEO)](https://cdn.hashnode.com/res/hashnode/image/upload/v1728643887403/243dd92a-c8c0-4d11-8ade-04b894a27bca.avif)
![[Pages Router] 검색 엔진 최적화(SEO)](https://cdn.hashnode.com/res/hashnode/image/upload/v1728643893128/17caad8e-2c07-4c21-8b5d-3c4fcf9b6f34.avif)
