Skip to main content
Hashnode
woodstock's devlog

woodstock's devlog

Latest articles

  1. 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, 20242 min read32 views

  2. [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, 20242 min read60 views

  3. [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, 20242 min read132 views

  4. Til: ๋ฐ”๋‹๋ผ JS๋กœ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ผ์šฐํŒ…๊ณผ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๊ธฐ

    ํ•™์Šต ๋‚ด์šฉ ์˜ค๋Š˜์€ Header ์ปดํฌ๋„ŒํŠธ๋ฅผ ์™„์„ฑํ–ˆ๋‹ค. ์ด ๊ณผ์ •์—์„œ SPA์—์„œ ์ค‘์š”ํ•œ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ผ์šฐํŒ…๊ณผ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์› ๋‹ค. ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ผ์šฐํŒ… ๊ตฌํ˜„ // App.js // Header ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•˜๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ handleClick: async () => { // ๋ธŒ๋ผ์šฐ์ € ํžˆ์Šคํ† ๋ฆฌ์— ์ƒˆ ํ•ญ๋ชฉ ์ถ”๊ฐ€ (URL์„ ํ™ˆ์œผ๋กœ ๋ณ€๊ฒฝ) history.pushState(null, null, "/"); // ํฌ์ผ“...

    Sep 28, 20242 min read22 views

  5. Til: ๋ฐ”๋‹๋ผ JS๋กœ ์ปดํฌ๋„ŒํŠธ ํŒจํ„ด ๊ตฌํ˜„ํ•˜๊ธฐ

    ํ•™์Šต ๋‚ด์šฉ ์˜ค๋Š˜์€ ๋ฐ”๋‹๋ผ JavaScript๋ฅผ ์‚ฌ์šฉํ•œ SPA ๊ตฌํ˜„์˜ ํ•ต์‹ฌ์ธ ์ปดํฌ๋„ŒํŠธ ํŒจํ„ด์— ๋Œ€ํ•ด ์‹ฌํ™” ํ•™์Šต์„ ํ•˜๊ณ , ์ด๋ฅผ ์ ์šฉํ•˜์—ฌ PokemonList ์ปดํฌ๋„ŒํŠธ๋ฅผ ์™„์„ฑํ–ˆ๋‹ค. ๋ฐ”๋‹๋ผ JS ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ํŒจํ„ด 1. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ง„์ž…์  ์„ค์ • ๋จผ์ €, SPA์˜ ์‹œ์ž‘์ ์ธ index.js์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค. import App from './App.js'; // ์•ฑ์˜ ๋ฃจํŠธ ์š”์†Œ ์„ ํƒ const $app = document.query...

    Sep 28, 20243 min read21 views

  6. 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, 20241 min read13 views

woodstock's devlog