태그
302개 태그
태그를 선택하세요
# a11y
# A11y Testing
# accessibility
- 웹 접근성 가이드 - 모두를 위한 웹사이트 만들기 WCAG 기준을 따라 접근성 높은 웹사이트를 만드는 실전 가이드
- 포커스 모드 (Focus Mode) 산만한 콘텐트는 가리고, 지금 읽는 부분에만 집중하세요
- 웹 접근성 (Web Accessibility) 모두를 위한 웹을 만드는 방법. WCAG 2.1 기준으로 접근 가능한 웹사이트를 만드는 완전 가이드, ARIA 사용법, 실전 예제와 테스팅 방법까지.
- ARIA: marquee role 주식 티커와 광고 배너처럼 자주 변경되는 비필수 정보를 표시하는 Live Region. role="marquee"의 올바른 사용법과 접근성 고려사항.
- Ticker UI 디자인: UI/UX/AX의 원칙과 실전 끊임없이 움직이는 Ticker UI를 사용자 경험과 접근성을 해치지 않으면서 효과적으로 디자인하는 방법. UI, UX, 접근성의 근본 원리부터 실전 패턴까지.
# Accessibility Examples
# Accessibility Testing
# advanced-types
# AI
- Foundation Models - AI의 새로운 패러다임 GPT, Claude, LLaMA 등 파운데이션 모델의 핵심 원리를 이해합니다. 스케일의 힘, 창발 능력, 실전 활용법까지 다룹니다.
- AI 개발 전략: Human-in-the-Loop와 Crawl-Walk-Run AI 시스템을 안전하게 도입하는 두 가지 핵심 전략을 배웁니다. 단계적 자동화와 인간 검증의 균형을 다룹니다.
- RAG (Retrieval-Augmented Generation) - 검색으로 환각을 막다 LLM의 환각 문제를 해결하는 RAG의 원리를 이해합니다. 벡터 데이터베이스, 임베딩, 실전 구현까지 다룹니다.
# Algorithm
- 이진 탐색 (Binary Search) 정렬된 배열에서 O(log n)의 효율로 값을 찾는 탐색 알고리즘. 매번 절반씩 범위를 줄여 빠르게 검색합니다.
- 버블 정렬 (Bubble Sort) 가장 이해하기 쉬운 정렬 알고리즘. 인접한 두 원소를 비교하며 정렬하는 O(n²) 알고리즘으로, 알고리즘 학습의 첫걸음입니다.
- Fisher-Yates Shuffle - 배열을 랜덤하게 섞기 1938년 Fisher와 Yates가 고안한 완벽한 셔플 알고리즘. sort() + random()의 편향 문제를 해결하며, 배열의 모든 순열(n!)을 동일한 확률(1/n!)...
- 재귀 (Recursion) 함수가 자기 자신을 호출하는 프로그래밍 기법. 복잡한 문제를 작은 부분 문제로 나누어 해결합니다.
# Algorithms
# Animation
# API
# Architecture
- Prop Drilling과 컴포넌트 설계 - 진짜 문제는 무엇일까? Prop drilling의 근본 원인은 UI 기준 컴포넌트 설계입니다. 데이터 기준으로 설계하면 prop drilling이 자연스럽게 해결되고, TypeScript 타입 안정...
- JavaScript 모듈화 여정: 레거시 코드를 36개 모듈로 단일 파일 JavaScript 코드를 현대적인 모듈 시스템으로 리팩토링한 실제 경험담. Event Bus, Code Splitting, Lazy Loading 등 실전 패턴 소개
- deep JavaScript 아키텍처 가이드 deep 프로젝트의 JavaScript 아키텍처 완벽 가이드. 함수형 프로그래밍, 모듈 시스템, Event Bus 패턴, 성능 최적화까지 실전 예제와 함께 설명
- Vite + Module Federation: 빠른 개발로 마이크로프론트엔드 구축하기 Vite와 Module Federation으로 음악 스트리밍 플랫폼 구축하기. 번개같이 빠른 HMR과 독립적인 배포를 동시에 달성하는 실전 가이드
# aria
- 웹 접근성 가이드 - 모두를 위한 웹사이트 만들기 WCAG 기준을 따라 접근성 높은 웹사이트를 만드는 실전 가이드
- ARIA (Accessible Rich Internet Applications) 스크린 리더와 대화하는 법. ARIA 역할, 속성, 상태를 이해하고 접근 가능한 동적 웹 컴포넌트를 만드는 실전 가이드. "No ARIA is better than Bad A...
- 웹 접근성 (Web Accessibility) 모두를 위한 웹을 만드는 방법. WCAG 2.1 기준으로 접근 가능한 웹사이트를 만드는 완전 가이드, ARIA 사용법, 실전 예제와 테스팅 방법까지.
- ARIA: marquee role 주식 티커와 광고 배너처럼 자주 변경되는 비필수 정보를 표시하는 Live Region. role="marquee"의 올바른 사용법과 접근성 고려사항.
# Array
# Array Methods
# Arrow Function
# Arrow Functions
# Assistive Technology
# Async
# Asynchronous
- Callback - JavaScript 비동기의 시작점
- JavaScript 이벤트 루프 - 비동기의 비밀을 파헤치다 JavaScript가 싱글 스레드임에도 비동기 작업을 처리하는 방법을 설명합니다. 이벤트 루프의 동작 원리, Call Stack, Task Queue, Microtask와 M...
- JavaScript 폴링(Polling) - 실시간 데이터 업데이트의 시작점 폴링을 사용해 실시간으로 서버 데이터를 가져오는 방법을 배웁니다. Short Polling과 Long Polling의 차이, 구현 패턴, 최적화 방법, 그리고 WebSocke...
- Node.js 이벤트 루프 - 서버 사이드 비동기의 심장 Node.js 이벤트 루프의 6단계 구조와 브라우저와의 차이점을 설명합니다. libuv 기반의 이벤트 루프 동작 원리, process.nextTick과 setImmediate...
# Authentication
- HackerNews 오늘의 IT 뉴스
- HackerNews 오늘의 IT 뉴스
- HackerNews 오늘의 IT 뉴스
- Chrome User Agent Override 가이드
- Compound Pattern
- Configuration over Composition Pattern
- Custom Hook 리팩토링: useAsync
- Custom Hooks 가이드 (React 공식 문서 기반)
- 웹폰트 최적화 완전 가이드: 다운로드부터 배포까지
- ReturnType - 함수의 반환 타입을 자동으로 추출하는 마법
- HTML 새니타이징(Sanitization) - XSS 공격 방어
- JSON Feed 사양
- CSS Mask Composite
- 메타프로그래밍(Metaprogramming)
- 나만의 npm 라이브러리 만들고 세상과 공유하기
- 반응형 디자인의 필수 도구, object-fit과 object-position 완벽 가이드
- CSS 성능 최적화 - 렌더링 차단에서 비동기 로딩까지
- React Provider Pattern
- Header 컴포넌트에서 Compound/Composite 패턴을 사용하지 않는 이유
# Automated Testing
# Automation
# Backend
# Beginner
# Best Practices
- article.js 리팩토링 가이드 - 유지보수 가능한 JavaScript 구조 reactions.js를 article.js로 리팩토링하며 적용한 7가지 핵심 패턴. 설정 객체, 네임스페이스, 상태 캡슐화, 모듈 분리 등 실전 JavaScript 리팩토링...
- Prop Drilling과 컴포넌트 설계 - 진짜 문제는 무엇일까? Prop drilling의 근본 원인은 UI 기준 컴포넌트 설계입니다. 데이터 기준으로 설계하면 prop drilling이 자연스럽게 해결되고, TypeScript 타입 안정...
- 하드코딩 (Hardcoding) 이해하기 하드코딩의 정의부터 문제점, 그리고 올바른 사용법까지
- AI 개발 전략: Human-in-the-Loop와 Crawl-Walk-Run AI 시스템을 안전하게 도입하는 두 가지 핵심 전략을 배웁니다. 단계적 자동화와 인간 검증의 균형을 다룹니다.
- 접근성 실전 예제 복사해서 바로 쓰는 접근 가능한 컴포넌트 예제. 모달, 탭, 폼, 자동완성, 테이블 등 실전에서 검증된 완전한 코드와 흔한 실수 모음.
# best-practices
# BFS
# Binary Search
# bind
- bind() 메소드 - this 컨텍스트를 영구적으로 고정하는 방법 JavaScript의 bind() 메소드로 this 컨텍스트를 고정하고 부분 적용을 활용하는 방법을 배웁니다. 이벤트 핸들러, React 클래스 컴포넌트, 콜백 함수에서 th...
- Configuration over Composition Pattern
- Event Bus - 모듈 간 통신의 우아한 해결책 모듈 간 느슨한 결합을 구현하는 Event Bus 패턴을 설명합니다. Pub-Sub 패턴의 핵심 개념부터 직접 구현, 실전 활용, 그리고 다른 상태 관리 패턴과의 비교까지 자...
# blog
# Browser Automation
# Bubble Sort
# Caching
# Call Stack
# Callback
- Callback - JavaScript 비동기의 시작점
- Compound Pattern
- Custom Hook 리팩토링: useAsync
- Custom Hooks 가이드 (React 공식 문서 기반)
- Event Bus - 모듈 간 통신의 우아한 해결책 모듈 간 느슨한 결합을 구현하는 Event Bus 패턴을 설명합니다. Pub-Sub 패턴의 핵심 개념부터 직접 구현, 실전 활용, 그리고 다른 상태 관리 패턴과의 비교까지 자...
- HTTP 인증 방법 완벽 가이드
- React 하이드레이션과 CSS 재적용 문제
- Context API를 활용한 Compound Pattern 구현
- React Provider Pattern
- `useMemo`를 활용한 성능 최적화
# carousel
# Chrome
# Chrome DevTools
# CI/CD
# Class
- 생성자 함수 (Constructor Function) 객체를 생성하고 초기화하는 함수. new 키워드의 4가지 동작, this 바인딩, 프로토타입 메서드 정의, 그리고 클래스 문법과의 차이를 실전 예제로 학습합니다.
- 인스턴스 (Instance) 클래스나 생성자 함수로부터 만들어진 독립적인 객체. new 키워드의 동작 원리, 프로토타입 체인, 메모리 최적화 방법을 실전 예제와 함께 설명합니다.
- JavaScript 네이밍 컨벤션: Public vs Private
- 문법적 설탕 (Syntactic Sugar) 코드를 더 읽기 쉽고 간결하게 만들어주는 문법적 편의 기능. ES6 클래스, 화살표 함수, 템플릿 리터럴 등이 내부적으로 어떻게 동작하는지 공식 문서 기반으로 설명합니다.
# Clean Code
# Clickjacking
# Closure
# Code Examples
# Code Quality
# Code Splitting
# Code Style
# Component Design
# Composite
# Compound
# Concepts
# conditional-types
# configuration
# const
- JavaScript 전역 스코프 완전 가이드 MDN 공식 문서 기반으로 JavaScript 전역 스코프의 정의, 동작 원리, `var`/let/const의 차이, 그리고 전역 객체와의 관계를 실전 예제로 학습합니다.
- JavaScript 호이스팅 완벽 가이드 - 변수와 함수는 어떻게 끌어올려질까? JavaScript 호이스팅의 4가지 타입(값, 선언, 스코프, 부수효과)을 이해하고, var/let/const의 차이점과 TDZ(Temporal Dead Zone), 함수 ...
- JavaScript 변수의 선언과 초기화 완벽 가이드 - var, let, const의 차이점 JavaScript의 변수 선언과 초기화의 차이점을 이해하고, var/let/const의 동작 방식과 기본값, 스코프의 차이를 실전 예제와 함께 완벽하게 정리한 가이드입니다.
# Constructor
# Context
- bind() 메소드 - this 컨텍스트를 영구적으로 고정하는 방법 JavaScript의 bind() 메소드로 this 컨텍스트를 고정하고 부분 적용을 활용하는 방법을 배웁니다. 이벤트 핸들러, React 클래스 컴포넌트, 콜백 함수에서 th...
- Composite Pattern
- Configuration over Composition Pattern
- Event Bus - 모듈 간 통신의 우아한 해결책 모듈 간 느슨한 결합을 구현하는 Event Bus 패턴을 설명합니다. Pub-Sub 패턴의 핵심 개념부터 직접 구현, 실전 활용, 그리고 다른 상태 관리 패턴과의 비교까지 자...
- 웹폰트 최적화 완전 가이드: 다운로드부터 배포까지
- HTML 새니타이징(Sanitization) - XSS 공격 방어
- HTTP 인증 방법 완벽 가이드
- React 하이드레이션과 CSS 재적용 문제
- JSON Feed 사양
- 메타프로그래밍(Metaprogramming)
- 반응형 디자인의 필수 도구, object-fit과 object-position 완벽 가이드
- CSS 성능 최적화 - 렌더링 차단에서 비동기 로딩까지
- Prototype - JavaScript의 숨은 마법을 이해하기
- this 키워드 - JavaScript에서 가장 혼란스러운 개념을 정복하기
# CSP
# CSS
- CSS 논리적 속성: margin-inline, padding-block 완전 가이드 margin-left 대신 margin-inline-start를? 다국어 지원과 쓰기 방향을 고려한 논리적 속성(Logical Properties)으로 더 유연한 레이아웃 만들기.
- CSS Safe Area Insets 노치, 둥근 모서리, 홈 인디케이터를 피하는 법. iPhone X부터 필수가 된 safe-area-inset으로 모든 기기에서 완벽한 레이아웃 만들기. env() 변수 완전 ...
- CSS scroll-snap-type으로 네이티브 앱처럼 자연스러운 스크롤 만들기 scroll-snap-type을 활용해 모바일 앱처럼 자연스럽게 스냅되는 스크롤 경험을 만드는 완벽 가이드
- CSS 커스텀 스크롤바 스타일링 완벽 가이드 브라우저별 커스텀 스크롤바 스타일링 방법과 모바일 반응형 디자인 적용 가이드
- Flex 레이아웃에서 텍스트 말줄임이 안 될 때 - min-width의 비밀 text-overflow ellipsis를 설정했는데도 텍스트가 영역을 넘어가는 이슈, 경험해보셨나요? Flex 레이아웃에서 min-width auto의 함정과 해결 방법을 ...
# CTE
# Currying
# Data Structure
# Data Structures
# Database
- MongoDB 로컬 설치 가이드 - 개발 환경 구축하기 MongoDB를 macOS, Windows, Linux에 설치하는 방법을 단계별로 안내합니다. Homebrew, Docker, 공식 패키지 설치부터 초기 설정까지 모두 다룹니다.
- PostgreSQL SQL 문법 가이드 - 기초부터 고급까지 PostgreSQL SQL 문법을 체계적으로 배웁니다. SELECT, JOIN, 서브쿼리, CTE, 윈도우 함수까지 실무에서 바로 사용할 수 있는 모든 SQL 구문을 다룹니다.
- Prisma ORM 가이드
- Supabase SQL 가이드 - PostgreSQL로 백엔드 구축하기 Supabase에서 SQL을 사용하여 데이터베이스를 설계하고 관리하는 방법을 배웁니다. RLS(Row Level Security), 함수, 트리거, 실시간 구독까지 실무에 필...
# debugging
# declaration
# Deployment
# Design Patterns
# design-patterns
# Development Strategy
# devops
# DFS
# Difficulty Level
# DNS
# Docker
# dom
# Domain
# Dynamic Programming
# Ellipsis
# Embedding
# Encapsulation
# ES6
# Event Loop
- Callback - JavaScript 비동기의 시작점
- JavaScript 이벤트 루프 - 비동기의 비밀을 파헤치다 JavaScript가 싱글 스레드임에도 비동기 작업을 처리하는 방법을 설명합니다. 이벤트 루프의 동작 원리, Call Stack, Task Queue, Microtask와 M...
- Node.js 이벤트 루프 - 서버 사이드 비동기의 심장 Node.js 이벤트 루프의 6단계 구조와 브라우저와의 차이점을 설명합니다. libuv 기반의 이벤트 루프 동작 원리, process.nextTick과 setImmediate...
- Task Queue vs Microtask Queue - 비동기 실행 순서의 비밀 JavaScript의 Task Queue(Macrotask)와 Microtask Queue의 차이점을 심층 비교합니다. 실행 우선순위, 실전 예제, 성능 최적화 패턴을 통해 ...
# event-bubbling
# event-bus
# Execution Context
# factory
# Factory Pattern
# FIFO
# Fine-tuning
# firefox
# Fisher-Yates
# Flexbox
# focus
# forEach
# Foundation Models
# Function Declaration
# Function Factory
# Function Methods
# Functional Programming
# functional-programming
# Functions
- Compound Pattern
- Custom Hook 리팩토링: useAsync
- Custom Hooks 가이드 (React 공식 문서 기반)
- HTTP 인증 방법 완벽 가이드
- React 하이드레이션과 CSS 재적용 문제
- Context API를 활용한 Compound Pattern 구현
- React Provider Pattern
- `useMemo`를 활용한 성능 최적화
- Supabase SQL 가이드 - PostgreSQL로 백엔드 구축하기 Supabase에서 SQL을 사용하여 데이터베이스를 설계하고 관리하는 방법을 배웁니다. RLS(Row Level Security), 함수, 트리거, 실시간 구독까지 실무에 필...
# gallery
# generics
# Getting Started
# GitHub Pages
# github-pages
# Global Scope
# Global Variables
# globalThis
# GPT
# Graph
# Hardcoding
# Headless Browser
# Higher-Order Functions
# Hoisting
- JavaScript 실행 컨텍스트 - 코드가 실행되는 환경의 비밀 JavaScript 엔진이 코드를 실행하는 환경인 실행 컨텍스트(Execution Context)를 원론적으로 이해합니다. 전역/함수/Eval 컨텍스트의 차이, Lexical...
- JavaScript 함수 선언 방식 비교: function vs 화살표 함수 전통적인 function 선언과 ES6 화살표 함수의 차이점을 this 바인딩, 호이스팅, 문법을 중심으로 실전 예제로 비교 분석합니다.
- JavaScript 호이스팅 완벽 가이드 - 변수와 함수는 어떻게 끌어올려질까? JavaScript 호이스팅의 4가지 타입(값, 선언, 스코프, 부수효과)을 이해하고, var/let/const의 차이점과 TDZ(Temporal Dead Zone), 함수 ...
# Homebrew
# Hosting
# HSTS
# HTTP
- HackerNews 오늘의 IT 뉴스
- HackerNews 오늘의 IT 뉴스
- HackerNews 오늘의 IT 뉴스
- Chrome User Agent Override 가이드
- Compound Pattern
- Configuration over Composition Pattern
- Custom Hook 리팩토링: useAsync
- Custom Hooks 가이드 (React 공식 문서 기반)
- 웹폰트 최적화 완전 가이드: 다운로드부터 배포까지
- ReturnType - 함수의 반환 타입을 자동으로 추출하는 마법
- HTML 새니타이징(Sanitization) - XSS 공격 방어
- JSON Feed 사양
- CSS Mask Composite
- 메타프로그래밍(Metaprogramming)
- 나만의 npm 라이브러리 만들고 세상과 공유하기
- 반응형 디자인의 필수 도구, object-fit과 object-position 완벽 가이드
- CSS 성능 최적화 - 렌더링 차단에서 비동기 로딩까지
- React Provider Pattern
- Header 컴포넌트에서 Compound/Composite 패턴을 사용하지 않는 이유
# HTTP Headers
# I/O
# I18n
# IIFE
# immutability
# Inclusive Design
# Information Retrieval
# Inheritance
# initialization
# Installation
# Instance
# instanceof
# IntersectionObserver
# Interview Prep
# iOS
# JavaScript
- article.js 리팩토링 가이드 - 유지보수 가능한 JavaScript 구조 reactions.js를 article.js로 리팩토링하며 적용한 7가지 핵심 패턴. 설정 객체, 네임스페이스, 상태 캡슐화, 모듈 분리 등 실전 JavaScript 리팩토링...
- TypeScript 기본 타입 - JavaScript와 비교하며 이해하기 TypeScript의 기본 타입 시스템을 JavaScript와 비교하며 깊이 있게 이해합니다
- bind() 메소드 - this 컨텍스트를 영구적으로 고정하는 방법 JavaScript의 bind() 메소드로 this 컨텍스트를 고정하고 부분 적용을 활용하는 방법을 배웁니다. 이벤트 핸들러, React 클래스 컴포넌트, 콜백 함수에서 th...
- "링크가 안 눌려요!" - 이벤트 버블링으로 인한 링크 클릭 문제 해결하기 querySelectorAll로 요소를 선택할 때 발생할 수 있는 이벤트 버블링 문제와 해결 방법. 실제 디버깅 과정을 따라가며 배우는 DOM 이벤트의 이해
- JavaScript 함수 선언 방식 비교: function vs 화살표 함수 전통적인 function 선언과 ES6 화살표 함수의 차이점을 this 바인딩, 호이스팅, 문법을 중심으로 실전 예제로 비교 분석합니다.
- 함수형 프로그래밍으로 JavaScript 리팩토링하기
- JavaScript 전역 스코프 완전 가이드 MDN 공식 문서 기반으로 JavaScript 전역 스코프의 정의, 동작 원리, `var`/let/const의 차이, 그리고 전역 객체와의 관계를 실전 예제로 학습합니다.
- JavaScript 호이스팅 완벽 가이드 - 변수와 함수는 어떻게 끌어올려질까? JavaScript 호이스팅의 4가지 타입(값, 선언, 스코프, 부수효과)을 이해하고, var/let/const의 차이점과 TDZ(Temporal Dead Zone), 함수 ...
- JavaScript 스코프 관리: 전역 변수 vs IIFE 모듈 패턴 전역 변수의 문제점과 IIFE를 사용한 모듈 패턴으로 스코프를 격리하고 이름 충돌을 방지하는 방법을 실전 예제로 학습합니다.
- JavaScript 디자인 패턴: Factory와 Singleton의 진짜 이야기 Factory Pattern과 Singleton Pattern을 실전 예제로 이해하기. 게임 캐릭터 생성, 설정 관리, UI 컴포넌트 등 실무에서 바로 쓸 수 있는 패턴 가이드
- JavaScript 이벤트 루프 - 비동기의 비밀을 파헤치다 JavaScript가 싱글 스레드임에도 비동기 작업을 처리하는 방법을 설명합니다. 이벤트 루프의 동작 원리, Call Stack, Task Queue, Microtask와 M...
- JavaScript 모듈화 여정: 레거시 코드를 36개 모듈로 단일 파일 JavaScript 코드를 현대적인 모듈 시스템으로 리팩토링한 실제 경험담. Event Bus, Code Splitting, Lazy Loading 등 실전 패턴 소개
- Object.freeze의 마법: 불변성의 진짜 이야기 Object.freeze로 불변성을 구현하는 방법. 얕은 동결 vs 깊은 동결, 성능 고려사항, 실전 패턴까지 완벽 가이드
- JavaScript 폴링(Polling) - 실시간 데이터 업데이트의 시작점 폴링을 사용해 실시간으로 서버 데이터를 가져오는 방법을 배웁니다. Short Polling과 Long Polling의 차이, 구현 패턴, 최적화 방법, 그리고 WebSocke...
- deep JavaScript 아키텍처 가이드 deep 프로젝트의 JavaScript 아키텍처 완벽 가이드. 함수형 프로그래밍, 모듈 시스템, Event Bus 패턴, 성능 최적화까지 실전 예제와 함께 설명
- MutationObserver DOM이 변경되는 순간을 포착하는 법. React 없이도 동적 UI를 감지하고 반응하는 MutationObserver API 완전 가이드. 실전 예제와 성능 최적화까지.
- Prototype Chain - JavaScript 상속은 어떻게 작동하는가 JavaScript의 Prototype Chain이 어떻게 작동하는지 처음부터 끝까지 배웁니다. 속성 조회 메커니즘, instanceof의 동작 원리, 상속 구조, 그리고 성...
- 큐(Queue) - 줄 서기의 규칙을 코드로 큐(Queue) 자료구조의 개념, 동작 원리, 구현 방법을 처음부터 차근차근 설명합니다. FIFO 원칙, 실전 활용 사례, JavaScript 구현까지 완벽하게 이해해보세요.
- 배열에서 랜덤 요소 선택하기 - Math.random() 완벽 가이드 JavaScript에서 배열의 무작위 요소를 올바르게 선택하는 방법을 MDN 공식 문서 기반으로 설명합니다. Math.floor(Math.random() * arr.lengt...
- Safari 사파리 브라우저 Private Browsing에서 localStorage 오류 처리하기 Safari 사생활 보호 모드에서 발생하는 localStorage 접근 오류를 안전하게 처리하는 방법
- Task Queue vs Microtask Queue - 비동기 실행 순서의 비밀 JavaScript의 Task Queue(Macrotask)와 Microtask Queue의 차이점을 심층 비교합니다. 실행 우선순위, 실전 예제, 성능 최적화 패턴을 통해 ...
- JavaScript 변수의 선언과 초기화 완벽 가이드 - var, let, const의 차이점 JavaScript의 변수 선언과 초기화의 차이점을 이해하고, var/let/const의 동작 방식과 기본값, 스코프의 차이를 실전 예제와 함께 완벽하게 정리한 가이드입니다.
# Jekyll
# Joins
# Layout
# Lazy Loading
# Learning Guide
# let
- JavaScript 전역 스코프 완전 가이드 MDN 공식 문서 기반으로 JavaScript 전역 스코프의 정의, 동작 원리, `var`/let/const의 차이, 그리고 전역 객체와의 관계를 실전 예제로 학습합니다.
- JavaScript 호이스팅 완벽 가이드 - 변수와 함수는 어떻게 끌어올려질까? JavaScript 호이스팅의 4가지 타입(값, 선언, 스코프, 부수효과)을 이해하고, var/let/const의 차이점과 TDZ(Temporal Dead Zone), 함수 ...
- JavaScript 변수의 선언과 초기화 완벽 가이드 - var, let, const의 차이점 JavaScript의 변수 선언과 초기화의 차이점을 이해하고, var/let/const의 동작 방식과 기본값, 스코프의 차이를 실전 예제와 함께 완벽하게 정리한 가이드입니다.
# Lexical Environment
# Lexical Scope
# libuv
# liquid
# Live Region
# LLM
# load-balancer
# Long Polling
# Machine Learning
# Macrotask
# Maintainability
# mapped-types
# Marquee
# Math.random
# Memoization
# Memory
# Meta Tags
# Method
# microfrontend
# Microtask
# Middleware
# Migration
# min-width
# Mobile
# modularization
# Module Pattern
- article.js 리팩토링 가이드 - 유지보수 가능한 JavaScript 구조 reactions.js를 article.js로 리팩토링하며 적용한 7가지 핵심 패턴. 설정 객체, 네임스페이스, 상태 캡슐화, 모듈 분리 등 실전 JavaScript 리팩토링...
- JavaScript 클로저 - 함수가 환경을 기억하는 방법 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 클로저의 원리, 렉시컬 스코핑, 실전 패턴(모듈 패턴, 팩토리 함수, 캡슐화), 메모리 관리까지 MDN 공식 문서...
- JavaScript 스코프 관리: 전역 변수 vs IIFE 모듈 패턴 전역 변수의 문제점과 IIFE를 사용한 모듈 패턴으로 스코프를 격리하고 이름 충돌을 방지하는 방법을 실전 예제로 학습합니다.
# module-federation
# modules
# MongoDB
# Monte Carlo
# Mutation
# Naming Conventions
# new Keyword
# Next.js
# Next.js 16
# nginx
# Node.js
# NoSQL
# npm
# Object Creation
# object-freeze
# Object-Oriented
# omit
# OOP
- Composite Pattern
- 생성자 함수 (Constructor Function) 객체를 생성하고 초기화하는 함수. new 키워드의 4가지 동작, this 바인딩, 프로토타입 메서드 정의, 그리고 클래스 문법과의 차이를 실전 예제로 학습합니다.
- Factory Pattern - 객체를 만드는 똑똑한 방법
- 인스턴스 (Instance) 클래스나 생성자 함수로부터 만들어진 독립적인 객체. new 키워드의 동작 원리, 프로토타입 체인, 메모리 최적화 방법을 실전 예제와 함께 설명합니다.
- JavaScript 디자인 패턴: Factory와 Singleton의 진짜 이야기 Factory Pattern과 Singleton Pattern을 실전 예제로 이해하기. 게임 캐릭터 생성, 설정 관리, UI 컴포넌트 등 실무에서 바로 쓸 수 있는 패턴 가이드
- Prototype - JavaScript의 숨은 마법을 이해하기
- Prototype Chain - JavaScript 상속은 어떻게 작동하는가 JavaScript의 Prototype Chain이 어떻게 작동하는지 처음부터 끝까지 배웁니다. 속성 조회 메커니즘, instanceof의 동작 원리, 상속 구조, 그리고 성...
- Context API를 활용한 Compound Pattern 구현
- `useMemo`를 활용한 성능 최적화
- this 키워드 - JavaScript에서 가장 혼란스러운 개념을 정복하기
# Open Graph
# Optimization
# ORM
# Package Management
# Partial Application
# Pattern
# Performance
- Prop Drilling과 컴포넌트 설계 - 진짜 문제는 무엇일까? Prop drilling의 근본 원인은 UI 기준 컴포넌트 설계입니다. 데이터 기준으로 설계하면 prop drilling이 자연스럽게 해결되고, TypeScript 타입 안정...
- IntersectionObserver threshold - 가시성 감지 임계값 완벽 가이드 IntersectionObserver의 threshold 옵션을 깊이 있게 이해합니다. 단일 값과 배열 설정, intersectionRatio와의 관계, 실전 활용 패턴까지 ...
- IntersectionObserver - 요소 가시성 감지 API 요소가 뷰포트에 들어오고 나가는 것을 효율적으로 감지하는 Web API. 무한 스크롤, 이미지 lazy loading, 스크롤 애니메이션 등의 실전 예제와 함께 원론적으로 이...
- 메모이제이션(Memoization)
- MutationObserver DOM이 변경되는 순간을 포착하는 법. React 없이도 동적 UI를 감지하고 반응하는 MutationObserver API 완전 가이드. 실전 예제와 성능 최적화까지.
- React Suspense와 지연 로딩
# pick
# Polling
# PostgreSQL
# Prisma
# Private Fields
# Probability
# Problem Solving
# process.nextTick
# Programming
# Promise
# Prompt Engineering
# Prop Drilling
# Prototype
- 생성자 함수 (Constructor Function) 객체를 생성하고 초기화하는 함수. new 키워드의 4가지 동작, this 바인딩, 프로토타입 메서드 정의, 그리고 클래스 문법과의 차이를 실전 예제로 학습합니다.
- 인스턴스 (Instance) 클래스나 생성자 함수로부터 만들어진 독립적인 객체. new 키워드의 동작 원리, 프로토타입 체인, 메모리 최적화 방법을 실전 예제와 함께 설명합니다.
- Prototype - JavaScript의 숨은 마법을 이해하기
- Prototype Chain - JavaScript 상속은 어떻게 작동하는가 JavaScript의 Prototype Chain이 어떻게 작동하는지 처음부터 끝까지 배웁니다. 속성 조회 메커니즘, instanceof의 동작 원리, 상속 구조, 그리고 성...
- this 키워드 - JavaScript에서 가장 혼란스러운 개념을 정복하기
# Prototype Chain
# Proxy
# Puppeteer
# PWA
# Python
# Query
# Queue
# queueMicrotask
# RAG
# Random
- Fisher-Yates Shuffle - 배열을 랜덤하게 섞기 1938년 Fisher와 Yates가 고안한 완벽한 셔플 알고리즘. sort() + random()의 편향 문제를 해결하며, 배열의 모든 순열(n!)을 동일한 확률(1/n!)...
- 몬테카를로 시뮬레이션 - 랜덤으로 복잡한 문제 풀기 랜덤 샘플링으로 복잡한 수학 문제를 해결하는 몬테카를로 시뮬레이션. 원주율 계산부터 주식 가격 예측까지, '무작위'를 활용해 '확률적 답'을 구하는 강력한 방법론입니다. 19...
- 배열에서 랜덤 요소 선택하기 - Math.random() 완벽 가이드 JavaScript에서 배열의 무작위 요소를 올바르게 선택하는 방법을 MDN 공식 문서 기반으로 설명합니다. Math.floor(Math.random() * arr.lengt...
# React
- Prop Drilling과 컴포넌트 설계 - 진짜 문제는 무엇일까? Prop drilling의 근본 원인은 UI 기준 컴포넌트 설계입니다. 데이터 기준으로 설계하면 prop drilling이 자연스럽게 해결되고, TypeScript 타입 안정...
- JavaScript에서 Mutation vs Non-Mutation
- `React`에서 `Composite`/`Compound` Pattern 활용 가이드
- React Suspense와 지연 로딩
- Vite + Module Federation: 빠른 개발로 마이크로프론트엔드 구축하기 Vite와 Module Federation으로 음악 스트리밍 플랫폼 구축하기. 번개같이 빠른 HMR과 독립적인 배포를 동시에 달성하는 실전 가이드
# React 18
# React 19
# reading
# Real-time
# Recursion
# reduce
# Refactoring
- article.js 리팩토링 가이드 - 유지보수 가능한 JavaScript 구조 reactions.js를 article.js로 리팩토링하며 적용한 7가지 핵심 패턴. 설정 객체, 네임스페이스, 상태 캡슐화, 모듈 분리 등 실전 JavaScript 리팩토링...
- 함수형 프로그래밍으로 JavaScript 리팩토링하기
- JavaScript 모듈화 여정: 레거시 코드를 36개 모듈로 단일 파일 JavaScript 코드를 현대적인 모듈 시스템으로 리팩토링한 실제 경험담. Event Bus, Code Splitting, Lazy Loading 등 실전 패턴 소개
- Sisyphean Task - 끝없는 반복 작업의 의미 그리스 신화 시지프스의 어원을 기반으로 소프트웨어 프로그래밍 영역에서 반복적이고 끝이 없는 작업의 의미를 이해하고, 이를 해결하는 방법을 알아봅니다.
# Reference vs Value
# Responsive
- CSS 논리적 속성: margin-inline, padding-block 완전 가이드 margin-left 대신 margin-inline-start를? 다국어 지원과 쓰기 방향을 고려한 논리적 속성(Logical Properties)으로 더 유연한 레이아웃 만들기.
- CSS Safe Area Insets 노치, 둥근 모서리, 홈 인디케이터를 피하는 법. iPhone X부터 필수가 된 safe-area-inset으로 모든 기기에서 완벽한 레이아웃 만들기. env() 변수 완전 ...
- CSS 커스텀 스크롤바 스타일링 완벽 가이드 브라우저별 커스텀 스크롤바 스타일링 방법과 모바일 반응형 디자인 적용 가이드
# reverse-proxy
# RLS
# RTL
# Safari
# Schema.org
# Scope
- Composite Pattern
- Event Bus - 모듈 간 통신의 우아한 해결책 모듈 간 느슨한 결합을 구현하는 Event Bus 패턴을 설명합니다. Pub-Sub 패턴의 핵심 개념부터 직접 구현, 실전 활용, 그리고 다른 상태 관리 패턴과의 비교까지 자...
- JavaScript 실행 컨텍스트 - 코드가 실행되는 환경의 비밀 JavaScript 엔진이 코드를 실행하는 환경인 실행 컨텍스트(Execution Context)를 원론적으로 이해합니다. 전역/함수/Eval 컨텍스트의 차이, Lexical...
- 웹폰트 최적화 완전 가이드: 다운로드부터 배포까지
- JavaScript 전역 스코프 완전 가이드 MDN 공식 문서 기반으로 JavaScript 전역 스코프의 정의, 동작 원리, `var`/let/const의 차이, 그리고 전역 객체와의 관계를 실전 예제로 학습합니다.
- HTML 새니타이징(Sanitization) - XSS 공격 방어
- HTTP 인증 방법 완벽 가이드
- React 하이드레이션과 CSS 재적용 문제
- JavaScript 스코프 관리: 전역 변수 vs IIFE 모듈 패턴 전역 변수의 문제점과 IIFE를 사용한 모듈 패턴으로 스코프를 격리하고 이름 충돌을 방지하는 방법을 실전 예제로 학습합니다.
- JSON Feed 사양
- 메타프로그래밍(Metaprogramming)
- 반응형 디자인의 필수 도구, object-fit과 object-position 완벽 가이드
- CSS 성능 최적화 - 렌더링 차단에서 비동기 로딩까지
- Prototype - JavaScript의 숨은 마법을 이해하기
- this 키워드 - JavaScript에서 가장 혼란스러운 개념을 정복하기
- JavaScript 변수의 선언과 초기화 완벽 가이드 - var, let, const의 차이점 JavaScript의 변수 선언과 초기화의 차이점을 이해하고, var/let/const의 동작 방식과 기본값, 스코프의 차이를 실전 예제와 함께 완벽하게 정리한 가이드입니다.
# Screen Reader
# Scroll
# scroll-snap
# scrollbar
# Searching
# Security
- HackerNews 오늘의 IT 뉴스
- HackerNews 오늘의 IT 뉴스
- HackerNews 오늘의 IT 뉴스
- Chrome User Agent Override 가이드
- Compound Pattern
- Configuration over Composition Pattern
- Custom Hook 리팩토링: useAsync
- Custom Hooks 가이드 (React 공식 문서 기반)
- 웹폰트 최적화 완전 가이드: 다운로드부터 배포까지
- ReturnType - 함수의 반환 타입을 자동으로 추출하는 마법
- HTML 새니타이징(Sanitization) - XSS 공격 방어
- JSON Feed 사양
- CSS Mask Composite
- 메타프로그래밍(Metaprogramming)
- 나만의 npm 라이브러리 만들고 세상과 공유하기
- 반응형 디자인의 필수 도구, object-fit과 object-position 완벽 가이드
- CSS 성능 최적화 - 렌더링 차단에서 비동기 로딩까지
- React Provider Pattern
- Next.js 보안 헤더 설정 가이드 XSS, 클릭재킹, 중간자 공격을 방어하는 보안 헤더 완벽 가이드. Security Headers에서 F 등급을 A+ 등급으로 만드는 실전 설정법.
- Supabase SQL 가이드 - PostgreSQL로 백엔드 구축하기 Supabase에서 SQL을 사용하여 데이터베이스를 설계하고 관리하는 방법을 배웁니다. RLS(Row Level Security), 함수, 트리거, 실시간 구독까지 실무에 필...
- Header 컴포넌트에서 Compound/Composite 패턴을 사용하지 않는 이유
# semantic-html
# SEO
# setImmediate
# setTimeout
# Setup
# Short Polling
# Shuffle
# Side Effects
# Simulation
# singleton
# Sorting
# SQL
# State Management
# static-site
# Statistics
# Supabase
# Suspense
# Syntactic Sugar
# Syntax
# Task Queue
# Technical Debt
# template
# Template Literal
# temporal-dead-zone
# Testing
# Text Overflow
# this
- bind() 메소드 - this 컨텍스트를 영구적으로 고정하는 방법 JavaScript의 bind() 메소드로 this 컨텍스트를 고정하고 부분 적용을 활용하는 방법을 배웁니다. 이벤트 핸들러, React 클래스 컴포넌트, 콜백 함수에서 th...
- Composite Pattern
- 생성자 함수 (Constructor Function) 객체를 생성하고 초기화하는 함수. new 키워드의 4가지 동작, this 바인딩, 프로토타입 메서드 정의, 그리고 클래스 문법과의 차이를 실전 예제로 학습합니다.
- Event Bus - 모듈 간 통신의 우아한 해결책 모듈 간 느슨한 결합을 구현하는 Event Bus 패턴을 설명합니다. Pub-Sub 패턴의 핵심 개념부터 직접 구현, 실전 활용, 그리고 다른 상태 관리 패턴과의 비교까지 자...
- 웹폰트 최적화 완전 가이드: 다운로드부터 배포까지
- JavaScript 함수 선언 방식 비교: function vs 화살표 함수 전통적인 function 선언과 ES6 화살표 함수의 차이점을 this 바인딩, 호이스팅, 문법을 중심으로 실전 예제로 비교 분석합니다.
- HTML 새니타이징(Sanitization) - XSS 공격 방어
- HTTP 인증 방법 완벽 가이드
- React 하이드레이션과 CSS 재적용 문제
- JSON Feed 사양
- 메타프로그래밍(Metaprogramming)
- 반응형 디자인의 필수 도구, object-fit과 object-position 완벽 가이드
- CSS 성능 최적화 - 렌더링 차단에서 비동기 로딩까지
- Prototype - JavaScript의 숨은 마법을 이해하기
- this 키워드 - JavaScript에서 가장 혼란스러운 개념을 정복하기
# threshold
# Ticker
# Transfer Learning
# Traversal
# Triggers
# Trouble Shooting
# troubleshooting
# Tuple
# Tutorial
# Type Safety
# type-manipulation
# type-safety
# types
# typescript
- TypeScript 고급 타입 - 타입 시스템의 진짜 힘 TypeScript의 고급 타입 기능을 활용하여 더욱 안전하고 표현력 있는 코드를 작성하는 방법을 배웁니다
- TypeScript 기본 타입 - JavaScript와 비교하며 이해하기 TypeScript의 기본 타입 시스템을 JavaScript와 비교하며 깊이 있게 이해합니다
- Prop Drilling과 컴포넌트 설계 - 진짜 문제는 무엇일까? Prop drilling의 근본 원인은 UI 기준 컴포넌트 설계입니다. 데이터 기준으로 설계하면 prop drilling이 자연스럽게 해결되고, TypeScript 타입 안정...
- ReturnType - 함수의 반환 타입을 자동으로 추출하는 마법
- 나만의 npm 라이브러리 만들고 세상과 공유하기
- Prisma ORM 가이드
- TypeScript 튜플 타입 - 고정된 길이의 배열 TypeScript의 튜플 타입을 이해합니다. 배열과의 차이, 실전 활용법, 함정까지 다룹니다.
- TypeScript Omit - 필요한 것만 남기는 타입 설계 TypeScript의 Omit 유틸리티 타입을 활용하여 불필요한 속성을 제거하고 안전한 타입을 만드는 방법을 배웁니다
# UI Design
# User Agent
# user-experience
# utility-types
# ux
# var
- JavaScript 전역 스코프 완전 가이드 MDN 공식 문서 기반으로 JavaScript 전역 스코프의 정의, 동작 원리, `var`/let/const의 차이, 그리고 전역 객체와의 관계를 실전 예제로 학습합니다.
- JavaScript 호이스팅 완벽 가이드 - 변수와 함수는 어떻게 끌어올려질까? JavaScript 호이스팅의 4가지 타입(값, 선언, 스코프, 부수효과)을 이해하고, var/let/const의 차이점과 TDZ(Temporal Dead Zone), 함수 ...
- JavaScript 변수의 선언과 초기화 완벽 가이드 - var, let, const의 차이점 JavaScript의 변수 선언과 초기화의 차이점을 이해하고, var/let/const의 동작 방식과 기본값, 스코프의 차이를 실전 예제와 함께 완벽하게 정리한 가이드입니다.