woodstock's devlog

Write

💥 new Array(length).map()으로 배열 초기화 시 콜백이 실행되지 않는 문제

Jun 28, 20252 min read15

💥 에러 메시지와 스택 트레이스 분석을 통해 문제 해결하기

Jun 25, 20254 min read11

Pinned

🧐 aria-label과 텍스트 콘텐츠

aria-label 어떻게 사용해야 할까?

Oct 7, 20243 min read476

🧐 적절한 함수명과 단일 책임으로 코드 개선하기

Jun 23, 20253 min read23

작심삼십일 - TypeScript 강의를 완강하다.

Nov 18, 20242 min read58

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

[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

[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 read130

Til: 바닐라 JS로 클라이언트 사이드 라우팅과 검색 기능 구현하기

학습 내용 오늘은 Header 컴포넌트를 완성했다. 이 과정에서 SPA에서 중요한 클라이언트 사이드 라우팅과 검색 기능을 구현하는 방법을 배웠다. 클라이언트 사이드 라우팅 구현 // App.js // Header 컴포넌트에 전달하는 이벤트 핸들러 handleClick: async () => { // 브라우저 히스토리에 새 항목 추가 (URL을 홈으로 변경) history.pushState(null, null, "/"); // 포켓...

Sep 28, 20242 min read22

Til: 바닐라 JS로 컴포넌트 패턴 구현하기

학습 내용 오늘은 바닐라 JavaScript를 사용한 SPA 구현의 핵심인 컴포넌트 패턴에 대해 심화 학습을 하고, 이를 적용하여 PokemonList 컴포넌트를 완성했다. 바닐라 JS 컴포넌트 설계 패턴 1. 애플리케이션 진입점 설정 먼저, SPA의 시작점인 index.js에서 다음과 같이 애플리케이션을 초기화한다. import App from './App.js'; // 앱의 루트 요소 선택 const $app = document.query...

Sep 28, 20243 min read21

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

Command Palette

Latest articles