CSS Grid 상세 설명: 2차원 레이아웃을 제대로 이해하고 쓰는 방법
CSS Grid의 기본 구조부터 grid-template-columns, fr, repeat(), minmax(), grid-area, 반응형 카드 레이아웃까지 실무 관점에서 자세히 정리합니다.
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
총 106개의 글
Next.js에서 .next 폴더는 어떤 역할을 할까?
Next.js 프로젝트에서 자동으로 생성되는 .next 폴더의 역할을 개발 서버, 프로덕션 빌드, 캐시, Git 관리, 배포 흐름 관점에서 쉽게 정리합니다.
React에서 Vite 사용법: 프로젝트 생성부터 실행과 빌드까지
React 프로젝트를 Vite로 생성하고 실행하는 방법을 npm create vite, 개발 서버 실행, 폴더 구조, 빌드, 기본 설정 흐름에 맞춰 정리합니다.
Yarn 기초 사용법: 설치부터 패키지 관리까지 처음 배우는 개발자를 위한 정리
Yarn의 역할부터 설치 확인, yarn install, yarn add, yarn add -D, yarn remove, yarn run, yarn.lock까지 Node.js 프로젝트에서 자주 쓰는 기본 사용법을 작업 흐름에…
pnpm 기초 사용법: 빠른 패키지 매니저 Performant NPM 시작하기
npm을 써본 개발자를 위해 pnpm의 개념, 설치 방법, 기본 명령어, 기존 프로젝트 적용 시 주의할 점을 실무 흐름에 맞춰 정리합니다.
Next.js 16 Proxy 마이그레이션: Node.js Runtime·matcher 검증
Next.js 16.2.10에서 middleware.ts를 proxy.ts로 옮길 때 Node.js runtime 고정, Edge 예외, matcher, 지원 API, 테스트와 배포 검증을 정확히 정리합니다.
Next.js 동적 라우트 완전 정리: [slug], params, catch-all
App Router의 [slug], params Promise, useParams, generateStaticParams, catch-all과 실무 404·slug 변경 정책을 예제로 정리합니다.
GSAP이 처음일 때 기초 사용법: 설치부터 기본 애니메이션까지
GSAP을 처음 사용하는 초보자를 위해 CDN과 npm 설치, gsap.to(), gsap.from(), gsap.fromTo(), duration, ease, stagger, timeline까지 기본 사용법을 순서대로 정리한…
Next.js Metadata API 완전 정리: 정적 metadata와 generateMetadata
Next.js App Router에서 metadata, generateMetadata, title 템플릿, canonical, Open Graph, robots를 최신 params Promise 예제로 정리합니다.
TypeScript as const 사용법: union 타입을 자동 생성하는 기준
TypeScript의 as const로 배열과 객체 값을 readonly 리터럴 타입으로 좁히고, typeof, keyof, 인덱스 접근 타입을 조합해 union 타입을 자동 생성하는 실무 기준을 정리합니다.