CSS Grid 상세 설명: 2차원 레이아웃을 제대로 이해하고 쓰는 방법
CSS Grid의 기본 구조부터 grid-template-columns, fr, repeat(), minmax(), grid-area, 반응형 카드 레이아웃까지 실무 관점에서 자세히 정리합니다.
개발
프로그래밍 카테고리에서는 HTML, CSS, JavaScript, React, Next.js를 비롯한 다양한 개발 지식과 실무 구현 방법을 정리합니다. 기초 문법부터 UI 구현, API 연동, 상태 관리, 성능 최적화, 트러블슈팅까지 실제 작업에 바로 적용할 수 있는 내용을 쉽고 체계적으로 다룹니다.
총 208개의 글
Ponytail 소개: AI 코딩 에이전트에게 게으른 시니어 개발자의 판단을 입히는 도구
Ponytail은 AI 코딩 에이전트가 불필요한 코드, 의존성, 추상화를 만들기 전에 기존 코드와 플랫폼 기본 기능을 먼저 확인하도록 돕는 오픈소스 규칙 세트다. AI 코딩 workflow에서 과구현을 줄이고 필요한 구현만 선…
obra/superpowers 소개: AI 코딩 에이전트에 개발 방법론을 입히는 방식
GitHub 저장소 obra/superpowers가 AI 코딩 에이전트의 작업 흐름을 어떻게 계획, 테스트, 검토, 검증 중심으로 바꾸는지 소개합니다.
Next.js에서 .next 폴더는 어떤 역할을 할까?
Next.js 프로젝트에서 자동으로 생성되는 .next 폴더의 역할을 개발 서버, 프로덕션 빌드, 캐시, Git 관리, 배포 흐름 관점에서 쉽게 정리합니다.
행과 열 쉽게 구분하기: 2열 종대까지 한 번에 외우는 방법
행은 가로줄, 열은 세로줄이라는 기본 개념부터 2열 종대의 뜻, 엑셀과 표에서 행과 열을 구분하는 쉬운 기억법까지 초보자도 이해하기 쉽게 정리합니다.
Vite 프로젝트에서 Vitest로 테스트 환경 시작하기
Vite 프로젝트에서 Vitest를 설치하고 실행 스크립트, vite.config 설정, jsdom 환경 선택, 실무 테스트 도입 순서를 정리합니다.
Supabase 회원가입 방법: 확인 메일 제목·본문·버튼 문구를 한국어로 바꾸기
Supabase Auth에서 이메일 회원가입을 설정하고, 가입 확인 메일의 제목·본문·버튼 문구를 한국어 서비스에 맞게 수정하는 방법을 단계별로 정리합니다.
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의 개념, 설치 방법, 기본 명령어, 기존 프로젝트 적용 시 주의할 점을 실무 흐름에 맞춰 정리합니다.