웹 개발
프론트엔드, 백엔드, 도구 등 웹 개발 전반에 관한 학습 자료
현대 웹 개발에 필요한 프론트엔드 기술, CSS 최적화, 개발 도구 활용법 등을 학습합니다.
-
Puppeteer 가이드
-
Next.js 16 Proxy 마이그레이션
Next.js 16에서 middleware.ts가 deprecated됐다. proxy.ts로 전환해야 하는 이유와 마이그레이션 방법, 그리고 새로운 프록시 규칙이 가져온 변화까지.
-
CSS 논리적 속성: margin-inline, padding-block 완전 가이드
margin-left 대신 margin-inline-start를? 다국어 지원과 쓰기 방향을 고려한 논리적 속성(Logical Properties)으로 더 유연한 레이아웃 만들기.
-
CSS scroll-snap-type으로 네이티브 앱처럼 자연스러운 스크롤 만들기
scroll-snap-type을 활용해 모바일 앱처럼 자연스럽게 스냅되는 스크롤 경험을 만드는 완벽 가이드
-
Ticker UI 디자인: UI/UX/AX의 원칙과 실전
끊임없이 움직이는 Ticker UI를 사용자 경험과 접근성을 해치지 않으면서 효과적으로 디자인하는 방법. UI, UX, 접근성의 근본 원리부터 실전 패턴까지.
-
ARIA: marquee role
주식 티커와 광고 배너처럼 자주 변경되는 비필수 정보를 표시하는 Live Region. role="marquee"의 올바른 사용법과 접근성 고려사항.
-
deep JavaScript 아키텍처 가이드
deep 프로젝트의 JavaScript 아키텍처 완벽 가이드. 함수형 프로그래밍, 모듈 시스템, Event Bus 패턴, 성능 최적화까지 실전 예제와 함께 설명
-
JavaScript 모듈화 여정: 레거시 코드를 36개 모듈로
단일 파일 JavaScript 코드를 현대적인 모듈 시스템으로 리팩토링한 실제 경험담. Event Bus, Code Splitting, Lazy Loading 등 실전 패턴 소개
-
JavaScript 디자인 패턴: Factory와 Singleton의 진짜 이야기
Factory Pattern과 Singleton Pattern을 실전 예제로 이해하기. 게임 캐릭터 생성, 설정 관리, UI 컴포넌트 등 실무에서 바로 쓸 수 있는 패턴 가이드
-
함수형 프로그래밍으로 JavaScript 리팩토링하기
-
웹 접근성 (Web Accessibility)
모두를 위한 웹을 만드는 방법. WCAG 2.1 기준으로 접근 가능한 웹사이트를 만드는 완전 가이드, ARIA 사용법, 실전 예제와 테스팅 방법까지.
-
Flex 레이아웃에서 텍스트 말줄임이 안 될 때 - min-width의 비밀
text-overflow ellipsis를 설정했는데도 텍스트가 영역을 넘어가는 이슈, 경험해보셨나요? Flex 레이아웃에서 min-width auto의 함정과 해결 방법을 실전 예제로 알아봅니다.
-
포커스 모드 (Focus Mode)
산만한 콘텐트는 가리고, 지금 읽는 부분에만 집중하세요
-
Prop Drilling과 컴포넌트 설계 - 진짜 문제는 무엇일까?
Prop drilling의 근본 원인은 UI 기준 컴포넌트 설계입니다. 데이터 기준으로 설계하면 prop drilling이 자연스럽게 해결되고, TypeScript 타입 안정성, 성능 최적화, 테스트 용이성까지 개선됩니다. Context API 없이도 깔끔한 컴포넌트 구조를 만드는 실전 가이드.
-
Liquid 템플릿 문법 완벽 가이드 - Jekyll에서 동적 콘텐츠 만들기
-
Jekyll로 GitHub Pages 블로그 만들기 - 완벽 가이드
-
Jekyll SEO 최적화 가이드
Jekyll 기반 정적 사이트의 SEO를 개선하기 위한 실전 가이드
-
Event Bus - 모듈 간 통신의 우아한 해결책
모듈 간 느슨한 결합을 구현하는 Event Bus 패턴을 설명합니다. Pub-Sub 패턴의 핵심 개념부터 직접 구현, 실전 활용, 그리고 다른 상태 관리 패턴과의 비교까지 자세히 알아보세요.
-
Header 컴포넌트에서 Compound/Composite 패턴을 사용하지 않는 이유
-
React Provider Pattern
-
Context API를 활용한 Compound Pattern 구현
-
CSS 성능 최적화 - 렌더링 차단에서 비동기 로딩까지
-
나만의 npm 라이브러리 만들고 세상과 공유하기
-
JSON Feed 사양
-
React 하이드레이션과 CSS 재적용 문제
-
HTML 새니타이징(Sanitization) - XSS 공격 방어
-
Configuration over Composition Pattern
-
Custom Hooks 가이드 (React 공식 문서 기반)
-
Custom Hook 리팩토링: useAsync
-
`useMemo`를 활용한 성능 최적화
-
`React`에서 `Composite`/`Compound` Pattern 활용 가이드
-
반응형 디자인의 필수 도구, object-fit과 object-position 완벽 가이드
-
CSS Mask Composite
-
웹폰트 최적화 완전 가이드: 다운로드부터 배포까지
-
Compound Pattern
-
Composite Pattern
-
Chrome User Agent Override 가이드
-
CSS Safe Area Insets
노치, 둥근 모서리, 홈 인디케이터를 피하는 법. iPhone X부터 필수가 된 safe-area-inset으로 모든 기기에서 완벽한 레이아웃 만들기. env() 변수 완전 가이드.
-
npm install vs npm ci
빌드가 느린 이유가 npm install 때문이었다. CI/CD에서 2배 빠른 npm ci를 사용해야 하는 이유와 두 명령어의 결정적인 차이점, 실전 활용법까지.
-
Vite + Module Federation: 빠른 개발로 마이크로프론트엔드 구축하기
Vite와 Module Federation으로 음악 스트리밍 플랫폼 구축하기. 번개같이 빠른 HMR과 독립적인 배포를 동시에 달성하는 실전 가이드
-
CSS 커스텀 스크롤바 스타일링 완벽 가이드
브라우저별 커스텀 스크롤바 스타일링 방법과 모바일 반응형 디자인 적용 가이드
-
"링크가 안 눌려요!" - 이벤트 버블링으로 인한 링크 클릭 문제 해결하기
querySelectorAll로 요소를 선택할 때 발생할 수 있는 이벤트 버블링 문제와 해결 방법. 실제 디버깅 과정을 따라가며 배우는 DOM 이벤트의 이해
-
Next.js 보안 헤더 설정 가이드
XSS, 클릭재킹, 중간자 공격을 방어하는 보안 헤더 완벽 가이드. Security Headers에서 F 등급을 A+ 등급으로 만드는 실전 설정법.
-
React Suspense와 지연 로딩
-
ARIA (Accessible Rich Internet Applications)
스크린 리더와 대화하는 법. ARIA 역할, 속성, 상태를 이해하고 접근 가능한 동적 웹 컴포넌트를 만드는 실전 가이드. "No ARIA is better than Bad ARIA"의 진짜 의미.
-
접근성 실전 예제
복사해서 바로 쓰는 접근 가능한 컴포넌트 예제. 모달, 탭, 폼, 자동완성, 테이블 등 실전에서 검증된 완전한 코드와 흔한 실수 모음.
-
웹 접근성 가이드 - 모두를 위한 웹사이트 만들기
WCAG 기준을 따라 접근성 높은 웹사이트를 만드는 실전 가이드
-
웹 접근성 테스팅 가이드
자동화 도구는 30-40%만 찾습니다. Lighthouse, axe DevTools, 스크린 리더를 활용한 완전한 접근성 테스팅 방법과 CI/CD 통합 가이드.